Skip to content

Commit 6474a8a

Browse files
tombcatotombcato
committed
feat(svelte): add svelte support, demo and docs (v1.2.3)
1 parent 5005439 commit 6474a8a

28 files changed

Lines changed: 2882 additions & 175 deletions

‎CHANGELOG.md‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
# Changelog
2-
3-
## [1.2.0] - 2026-01-06
2+
## [1.2.3] - 2026-01-08
43

54
### ✨ 新功能
5+
- **Svelte 框架支持**
6+
- **原生组件**: 正式支持 Svelte！可通过标准方式引入：`import { Ticker } from '@tombcato/smart-ticker/svelte'`。
7+
- **示例工程**: 新增 `examples/svelte-demo`，提供完整的集成参考。
8+
- **官网升级**: 官方演示现已全面支持 Svelte 代码的实时预览与生成。
9+
610
- **核心功能升级 (Core)**
711
- **Intl 支持**：`value`传数字时，支持`numberFormat`属性，配合`Intl.NumberFormat`使用, 支持国际化格式化。
812
- **`autoScale`** 自动大小缩放适配容器，注意需要父控件给定宽高。
@@ -12,8 +16,8 @@
1216
- **前后缀完善**: 完善了 `prefix` / `suffix` 属性，确保静态文本不参与列滚动逻辑，且在布局切换时保持稳定。
1317
- **无障碍优化 (A11y)**: ARIA + Screen Reader 支持。自动检测系统 `prefers-reduced-motion` 设置，尊重用户减弱动画的偏好。
1418
- **`animateOnMount`** — 控制首次加载是否播放动画（默认 `false`）。
15-
- **回调事件**
1619
- **`onAnimationEnd` / `@animation-end`** — 动画结束回调。
20+
1721
- **Vue 组件同步**
1822
- **属性对齐**：为 Vue 版本同步增加了 prefix、suffix、autoScale、fadingEdge 和 numberFormat等 Props。
1923
- **Intl 支持**：优化了 :number-format 属性的响应式逻辑，使其能配合国际化格式实时更新。
@@ -37,10 +41,8 @@
3741

3842
---
3943

40-
## [1.0.4] - 2025-12-28
4144

4245
## [1.0.4] - 2025-12-28
43-
4446
### ✨ 初始发布
4547
- Levenshtein diff 算法智能文本差异
4648
- React 18+ / Vue 3+ 双框架支持

‎CHANGELOG_EN.md‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
# Changelog
22

3-
## [1.2.0] - 2026-01-06
3+
## [1.2.3] - 2026-01-08
44

55
### ✨ New Features
6+
- **Svelte Framework Support**
7+
- **Native Component**: First-class support for Svelte! Import via standard path: `import { Ticker } from '@tombcato/smart-ticker/svelte'`.
8+
- **Demo Project**: Added `examples/svelte-demo`, providing a complete integration reference.
9+
- **Official Site Upgrade**: The official demo now fully supports real-time preview and generation of Svelte code.
610
- **Core Functionality Upgrade (Core)**
711
- **Intl Support**: Added `numberFormat` prop for `value` (number type), leveraging `Intl.NumberFormat` for internationalized formatting.
812
- **`autoScale`**: Automatically scales content to fit container (requires parent container with defined dimensions).
@@ -36,9 +40,7 @@
3640

3741
---
3842

39-
## [1.0.4] - 2025-12-28
4043

41-
## [1.0.4] - 2025-12-28
4244

4345
### ✨ Initial Release
4446
- Levenshtein diff algorithm for smart text diffing

‎README.md‎

Lines changed: 41 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<h1 align="center">Smart Ticker</h1>
77

88
<p align="center">
9-
<a href="./README.md">🇨🇳 简体中文</a> &nbsp;|&nbsp; <strong>🇬🇧 English</strong>
9+
<a href="./README_CN.md">🇨🇳 简体中文</a> &nbsp;|&nbsp; <strong>🇬🇧 English</strong>
1010
</p>
1111
High-Performance Text Diff Motion Component based on Levenshtein diff algorithm. Make your text flow like water. <a href="https://tombcato.github.io/smart-ticker/?lang=en">Live Demo ></a> <br />
1212
<p align="center">
@@ -25,6 +25,7 @@
2525
<p align="center">
2626
<img src="https://img.shields.io/badge/React-18+-61DAFB?logo=react" alt="React" />
2727
<img src="https://img.shields.io/badge/Vue-3+-4FC08D?logo=vuedotjs" alt="Vue" />
28+
<img src="https://img.shields.io/badge/Svelte-4+-FF3E00?logo=svelte" alt="Svelte" />
2829
<img src="https://img.shields.io/badge/TypeScript-5+-3178C6?logo=typescript" alt="TypeScript" />
2930
<img src="https://img.shields.io/npm/v/@tombcato/smart-ticker?color=cb3837&logo=npm" alt="npm" />
3031
</p>
@@ -34,7 +35,7 @@
3435
| :--- | :--- |
3536
| **🌏 Multi-Charset Support**<br>Supports CJK, Numbers, Emojis, and mixed text rolling. Auto-adjusts spacing based on Unicode width. | **🧠 Smart Diff Animation**<br>Uses Levenshtein algorithm to find the shortest change path; identical characters remain static. |
3637
| **⚡ Smooth Interruption**<br>Seamlessly transitions to new targets if the value changes dynamically during animation. | **📈 Rich Motion**<br>Built-in variety of easings.Supports custom easing function. Supports `charWidth` fine-tuning. |
37-
| **🦄 Dual Framework**<br>Provides both React (Hooks) and Vue 3 (Composition) components with a unified API. | **🚀 High Performance**<br>Powered by `RAF`, supporting **Auto-scale**, **Fading Edge**, and **Disable Animation**. |
38+
| **🦄 Multi-Framework**<br>React (Hooks), Vue 3 (Composition), and Svelte 4+ components with a unified API. | **🚀 High Performance**<br>Powered by `RAF`, supporting **Auto-scale**, **Fading Edge**, and **Disable Animation**. |
3839

3940
## 📦 Installation
4041

@@ -121,6 +122,26 @@ const price = ref('73.18');
121122
</template>
122123
```
123124

125+
### Svelte
126+
127+
```svelte
128+
<script>
129+
// NPM Usage
130+
import { Ticker } from '@tombcato/smart-ticker/svelte';
131+
import '@tombcato/smart-ticker/style.css';
132+
133+
let price = 73.18;
134+
</script>
135+
136+
<Ticker
137+
value={price.toFixed(2)}
138+
duration={800}
139+
easing="easeInOut"
140+
charWidth={1}
141+
characterLists={['0123456789.,']}
142+
/>
143+
```
144+
124145
### 💅 Customization
125146

126147
#### Custom Fonts
@@ -199,15 +220,14 @@ Presets.CURRENCY // '0123456789.,'
199220

200221
## 💻 Running Demos
201222

202-
This project includes complete NPM-based user examples for React and Vue in the `examples` directory.
223+
This project includes complete NPM-based user examples for React, Vue, and Svelte in the `examples` directory.
203224

204225
### Start React Demo
205226

206227
```bash
207228
cd examples/react-demo
208229
npm install
209230
npm run dev
210-
# Demo runs at http://localhost:5179
211231
```
212232

213233
### Start Vue Demo
@@ -216,7 +236,14 @@ npm run dev
216236
cd examples/vue-demo
217237
npm install
218238
npm run dev
219-
# Demo runs at http://localhost:5180
239+
```
240+
241+
### Start Svelte Demo
242+
243+
```bash
244+
cd examples/svelte-demo
245+
npm install
246+
npm run dev
220247
```
221248

222249
## 📁 Project Structure
@@ -225,18 +252,19 @@ npm run dev
225252
smart-ticker/
226253
├── src/
227254
│ ├── components/
228-
│ │ ├── Ticker.tsx # React Component Source
229-
│ │ ├── Ticker.css # Component Core Styles
230-
│ │ └── vue/
231-
│ │ └── Ticker.vue # Vue Component Source
255+
│ │ ├── Ticker.tsx # React Component
256+
│ │ ├── Ticker.css # Core Styles
257+
│ │ ├── vue/
258+
│ │ │ └── Ticker.vue # Vue Component
259+
│ │ └── svelte/
260+
│ │ └── Ticker.svelte # Svelte Component
232261
│ ├── core/
233262
│ │ └── TickerCore.ts # Core Logic (Levenshtein diff algo)
234263
│ └── ...
235264
├── examples/ # Standalone Example Projects
236265
│ ├── react-demo/ # React Demo (Vite + React + TS)
237-
│ └── vue-demo/ # Vue Demo (Vite + Vue + TS)
238-
├── public/
239-
│ └── vue-demo.html # Single File CDN Demo
266+
│ ├── vue-demo/ # Vue Demo (Vite + Vue + TS)
267+
│ └── svelte-demo/ # Svelte Demo (Vite + Svelte + TS)
240268
└── package.json
241269
```
242270

@@ -252,7 +280,7 @@ smart-ticker/
252280

253281
- **Build Tool**: Vite
254282
- **Language**: TypeScript
255-
- **Frameworks**: React 18 / Vue 3
283+
- **Frameworks**: React 18 / Vue 3 / Svelte 4+
256284
- **Styling**: CSS Variables + Responsive Design
257285

258286
## 📝 Changelog

‎README_CN.md‎

Lines changed: 42 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55

66
<h1 align="center">Smart Ticker</h1>
77
<p align="center">
8-
<strong>🇨🇳 简体中文</strong> &nbsp;|&nbsp; <a href="./README_EN.md">🇬🇧 English</a>
8+
<strong>🇨🇳 简体中文</strong> &nbsp;|&nbsp; <a href="./README.md">🇬🇧 English</a>
99
</p>
1010
<p align="center">
11-
高性能文本 Diff 动画组件，让你的文本替换像水一样流动。基于 Levenshtein diff 算法，适用于React/Vue <a href="https://tombcato.github.io/smart-ticker/">官网演示></a> <br />
11+
高性能文本 Diff 动画组件，让你的文本替换像水一样流动。基于 Levenshtein diff 算法，适用于React/Vue/Svelte <a href="https://tombcato.github.io/smart-ticker/">官网演示></a> <br />
1212
</p>
1313
<p align="center">
1414
支持任意字符文本<br />
@@ -26,6 +26,7 @@
2626
<p align="center">
2727
<img src="https://img.shields.io/badge/React-18+-61DAFB?logo=react" alt="React" />
2828
<img src="https://img.shields.io/badge/Vue-3+-4FC08D?logo=vuedotjs" alt="Vue" />
29+
<img src="https://img.shields.io/badge/Svelte-4+-FF3E00?logo=svelte" alt="Svelte" />
2930
<img src="https://img.shields.io/badge/TypeScript-5+-3178C6?logo=typescript" alt="TypeScript" />
3031
<img src="https://img.shields.io/npm/v/@tombcato/smart-ticker?color=cb3837&logo=npm" alt="npm" />
3132
</p>
@@ -36,7 +37,7 @@
3637
| :--- | :--- |
3738
| **🌏 多字符集支持**<br>支持中英、数字、Emoji等混合滚动，基于 Unicode 宽度自动调整间距 | **🧠 智能差异动画**<br>Levenshtein 算法计算最小变更路径，相同的字符保持静止 |
3839
| **⚡ 平滑中断**<br>动画过程中值突变时，从当前动态位置无缝流向新目标 | **📈 丰富动效**<br>内置多种缓动函数，支持自定义，支持 `charWidth` 微调 |
39-
| **🦄 双框架支持**<br>提供 React (Hooks) 和 Vue 3 (Composition) 组件，API 统一 | **🚀 极致性能**<br>基于 `RAF` 驱动，支持 **自动缩放**、**边缘模糊** 及 **动画禁用** |
40+
| **🦄 多框架支持**<br>提供 React (Hooks)、Vue 3 (Composition) 和 Svelte 4+ 组件，API 统一 | **🚀 极致性能**<br>基于 `RAF` 驱动，支持 **自动缩放**、**边缘模糊** 及 **动画禁用** |
4041

4142
## 📦 安装
4243

@@ -123,6 +124,26 @@ const price = ref('73.18');
123124
</template>
124125
```
125126

127+
### Svelte
128+
129+
```svelte
130+
<script>
131+
// NPM 方式
132+
import { Ticker } from '@tombcato/smart-ticker/svelte';
133+
import '@tombcato/smart-ticker/style.css';
134+
135+
let price = 73.18;
136+
</script>
137+
138+
<Ticker
139+
value={price.toFixed(2)}
140+
duration={800}
141+
easing="easeInOut"
142+
charWidth={1}
143+
characterLists={['0123456789.,']}
144+
/>
145+
```
146+
126147
### 💅 样式自定义
127148

128149
#### 自定义字体
@@ -201,7 +222,7 @@ Presets.CURRENCY // '0123456789.,'
201222

202223
## 💻 运行演示
203224

204-
本项目提供了完整基于 NPM 的 React 和 Vue 示例工程，位于 `examples` 目录下。
225+
本项目提供了完整基于 NPM 的 React、Vue 和 Svelte 示例工程，位于 `examples` 目录下。
205226

206227
### 启动 React Demo
207228

@@ -219,22 +240,33 @@ npm install
219240
npm run dev
220241
```
221242

243+
### 启动 Svelte Demo
244+
245+
```bash
246+
cd examples/svelte-demo
247+
npm install
248+
npm run dev
249+
```
250+
222251
## 📁 项目结构
223252

224253
```
225254
smart-ticker/
226255
├── src/
227256
│ ├── components/
228-
│ │ ├── Ticker.tsx # React 组件源码
229-
│ │ ├── Ticker.css # 组件核心样式
230-
│ │ └── vue/
231-
│ │ └── Ticker.vue # Vue 组件源码
257+
│ │ ├── Ticker.tsx # React 组件
258+
│ │ ├── Ticker.css # 核心样式
259+
│ │ ├── vue/
260+
│ │ │ └── Ticker.vue # Vue 组件
261+
│ │ └── svelte/
262+
│ │ └── Ticker.svelte # Svelte 组件
232263
│ ├── core/
233264
│ │ └── TickerCore.ts # 核心逻辑（Levenshtein diff 算法）
234265
│ └── ...
235266
├── examples/ # 独立示例工程
236267
│ ├── react-demo/ # React Demo (Vite + React + TS)
237-
│ └── vue-demo/ # Vue Demo (Vite + Vue + TS)
268+
│ ├── vue-demo/ # Vue Demo (Vite + Vue + TS)
269+
│ └── svelte-demo/ # Svelte Demo (Vite + Svelte + TS)
238270
├── public/
239271
│ └── vue-demo.html # 单文件 CDN 引用示例
240272
└── package.json
@@ -252,7 +284,7 @@ smart-ticker/
252284

253285
- **构建工具**: Vite
254286
- **语言**: TypeScript
255-
- **框架**: React 18 / Vue 3
287+
- **框架**: React 18 / Vue 3 / Svelte 4+
256288
- **样式**: CSS Variables + 响应式设计
257289

258290
## 📝 更新日志

‎examples/react-demo/src/App.tsx‎

Lines changed: 0 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,12 @@ function App() {
1515
const [fadingEdge, setFadingEdge] = useState(true)
1616

1717
const [activeFormatter, setActiveFormatter] = useState<Intl.NumberFormat | undefined>()
18-
const [activeIntlParams, setActiveIntlParams] = useState<{ locale: string, options: Intl.NumberFormatOptions }>({ locale: 'en-US', options: { style: 'currency', currency: 'USD' } })
1918

2019
const [direction, setDirection] = useState<'ANY' | 'UP' | 'DOWN'>('ANY')
2120
const [prefix, setPrefix] = useState('')
2221
const [suffix, setSuffix] = useState('')
2322
const [disableAnimation, setDisableAnimation] = useState(false)
2423
const [autoScale, setAutoScale] = useState(false)
25-
const [copied, setCopied] = useState(false)
2624

2725
useEffect(() => {
2826
let timer: number
@@ -49,7 +47,6 @@ function App() {
4947
const conf = intlConfig[i]
5048
setValue(conf.val)
5149
setActiveFormatter(new Intl.NumberFormat(conf.locale, conf.options))
52-
setActiveIntlParams({ locale: conf.locale, options: conf.options })
5350
}
5451
update(0)
5552

@@ -273,54 +270,6 @@ function App() {
273270
</div>
274271
</div>
275272
</div>
276-
277-
<footer className="code-section">
278-
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
279-
<h2 style={{ margin: 0 }}>💻 使用代码</h2>
280-
<button
281-
onClick={() => {
282-
const code = document.querySelector('.code-section code')?.textContent || ''
283-
navigator.clipboard.writeText(code)
284-
setCopied(true)
285-
setTimeout(() => setCopied(false), 2000)
286-
}}
287-
style={{
288-
padding: '6px 12px',
289-
borderRadius: '6px',
290-
border: '1px solid #e0e0e0',
291-
background: copied ? '#4a6bff' : '#fff',
292-
color: copied ? '#fff' : '#666',
293-
cursor: 'pointer',
294-
fontSize: '14px',
295-
transition: 'all 0.2s'
296-
}}
297-
>
298-
{copied ? '✓ 已复制' : '📋 复制'}
299-
</button>
300-
</div>
301-
<pre><code>{`import { Ticker, Presets } from '@tombcato/smart-ticker'
302-
import '@tombcato/smart-ticker/style.css'
303-
${mode === 'intl-currency' ? `
304-
// Intl.NumberFormat 实例
305-
const formatter = new Intl.NumberFormat(
306-
'${activeIntlParams.locale}',
307-
${JSON.stringify(activeIntlParams.options).replace(/"/g, "'")})
308-
` : ''}
309-
<Ticker
310-
value={${typeof displayValueForProps === 'number' ? displayValueForProps : `"${displayValueForProps}"`}}
311-
duration={${duration}}
312-
easing="${easing}"
313-
charWidth={${charWidth}}
314-
direction="${direction}"${prefix ? `
315-
prefix="${prefix}"` : ''}${suffix ? `
316-
suffix="${suffix}"` : ''}${disableAnimation ? `
317-
disableAnimation` : ''}
318-
characterLists={${mode === 'text' ? '[Presets.ALPHABET, Presets.NUMBER, " .%@#$"]' : (mode === 'intl-currency' ? 'Presets.CURRENCY' : 'Presets.NUMBER')}}${mode === 'intl-currency' ? `
319-
numberFormat={formatter}` : ''}${autoScale ? `
320-
autoScale` : ''}${fadingEdge ? `
321-
fadingEdge` : ''}
322-
/>`}</code></pre>
323-
</footer>
324273
</div>
325274
)
326275
}

‎examples/svelte-demo/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9+
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet" />
10+
<title>Smart Ticker - Svelte Demo</title>
11+
</head>
12+
13+
<body>
14+
<div id="app"></div>
15+
<script type="module" src="/src/main.ts"></script>
16+
</body>
17+
18+
</html>

0 commit comments

Comments
 (0)