@warp-ts/reactivity 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +67 -0
- package/package.json +10 -2
package/README.md
ADDED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
# `@warp-ts/reactivity`
|
|
2
|
+
|
|
3
|
+
Warp 的细粒度响应式内核:`signal` / `computed` / `effect` / `batch` / owner 树 / `reactive`。
|
|
4
|
+
零依赖、可脱离 DOM 单独使用;Warp 的模板绑定、组件、store 都建在它之上。
|
|
5
|
+
|
|
6
|
+
## 安装
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
pnpm add @warp-ts/reactivity
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
用 Warp 写应用时直接从 `@warp-ts/warp` 导入即可(它再导出本包全部公开 API)。
|
|
13
|
+
|
|
14
|
+
## 用法
|
|
15
|
+
|
|
16
|
+
```ts
|
|
17
|
+
import { batch, computed, effect, onCleanup, signal, untrack } from '@warp-ts/reactivity'
|
|
18
|
+
|
|
19
|
+
const first = signal('张')
|
|
20
|
+
const last = signal('三')
|
|
21
|
+
const full = computed(() => first() + last())
|
|
22
|
+
|
|
23
|
+
const stop = effect(() => {
|
|
24
|
+
console.log(full()) // 依赖 first / last(经由 full)
|
|
25
|
+
onCleanup(() => console.log('上一轮清理'))
|
|
26
|
+
})
|
|
27
|
+
|
|
28
|
+
batch(() => { first.set('李'); last.set('四') }) // 只触发 1 次 effect
|
|
29
|
+
untrack(() => full()) // 读但不订阅
|
|
30
|
+
stop()
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
列表更新用 `set` 的函数形态(读旧值不建立依赖):
|
|
34
|
+
|
|
35
|
+
```ts
|
|
36
|
+
const items = signal<number[]>([])
|
|
37
|
+
items.set(l => l.concat(1))
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## API 一览
|
|
41
|
+
|
|
42
|
+
| API | 说明 |
|
|
43
|
+
|---|---|
|
|
44
|
+
| `signal(v, opts?)` | 读 `s()`、写 `s.set(v \| prev => v)`、不追踪读 `s.peek()`;`opts.equals: false` 每次写都通知 |
|
|
45
|
+
| `computed(fn, opts?)` | 惰性 + 缓存,必须纯函数 |
|
|
46
|
+
| `effect(fn)` / `renderEffect(fn)` | 副作用;返回 `stop`。`renderEffect` 创建即同步执行 |
|
|
47
|
+
| `batch(fn)` / `untrack(fn)` / `flushSync()` | 合并写入 / 不追踪读取 / 同步刷完待处理 effect |
|
|
48
|
+
| `reactive(obj)` / `shallowReactive` / `isReactive` / `toRaw` | Proxy 深响应,支持数组 / Map / Set |
|
|
49
|
+
| `createRoot(fn)` / `getOwner()` / `runWithOwner(owner, fn)` / `onCleanup(fn)` | 所有权与释放 |
|
|
50
|
+
| `createSelector(source)` | 选中态优化:只通知旧 / 新两个 key |
|
|
51
|
+
|
|
52
|
+
```ts
|
|
53
|
+
import { createRoot, onCleanup } from '@warp-ts/reactivity'
|
|
54
|
+
|
|
55
|
+
const dispose = createRoot(d => {
|
|
56
|
+
const t = setInterval(() => {}, 1000)
|
|
57
|
+
onCleanup(() => clearInterval(t)) // 归当前 owner,dispose 时一并释放
|
|
58
|
+
return d
|
|
59
|
+
})
|
|
60
|
+
dispose()
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## 说明
|
|
64
|
+
|
|
65
|
+
- `signal` 适合整体替换的值;就地改字段的深层对象用 `reactive`。
|
|
66
|
+
- `effect` / `onCleanup` 建在无 owner 处(模块顶层、`setTimeout` 回调)会永不释放,dev 下报 `WARP-R101`。
|
|
67
|
+
- 属于 Warp 框架,通常通过 `@warp-ts/warp` 聚合入口使用。
|
package/package.json
CHANGED
|
@@ -1,7 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@warp-ts/reactivity",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.1.3",
|
|
4
|
+
"description": "Warp 的细粒度响应式内核:signal / computed / effect / batch / owner 树 / reactive,零依赖",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"warp",
|
|
7
|
+
"signals",
|
|
8
|
+
"reactive",
|
|
9
|
+
"reactivity",
|
|
10
|
+
"fine-grained",
|
|
11
|
+
"state"
|
|
12
|
+
],
|
|
5
13
|
"type": "module",
|
|
6
14
|
"sideEffects": false,
|
|
7
15
|
"license": "MIT",
|