Skip to content

Commit ec96c35

Browse files
theajacktheajack
committed
feat: 0.0.6 add ref
1 parent 027ee69 commit ec96c35

File tree

8 files changed

+70
-22
lines changed

8 files changed

+70
-22
lines changed

‎README.md

+34-6
Original file line numberDiff line numberDiff line change
@@ -234,14 +234,26 @@ mount(Counter(), 'body');
234234
Create a state store
235235

236236
```js
237+
import {createStore} from 'link-dom';
237238
const store = createStore({
238239
count: 0,
239240
});
240241
```
241242

243+
#### ref
244+
245+
Create a state store
246+
247+
```js
248+
import {ref} from 'link-dom';
249+
const count = ref(0);
250+
console.log(count.value);
251+
```
252+
242253
#### computed
243254

244255
```js
256+
import {computed} from 'link-dom';
245257
const store = createStore({
246258
count: 0,
247259
});
@@ -307,18 +319,34 @@ store.$unsub('count'); // 不传入第二个参数可以取消指定状态的所
307319
#### watch
308320

309321
```js
310-
import {watch} from 'link-dom';
322+
import {watch, createStore, ref, computed} from 'link-dom';
311323
const store = createStore({
312324
count: 0,
313325
});
326+
const count = ref(0);
314327
const countAdd1 = computed(()=>{
315-
return store.count + 1;
328+
return store.count + count + 1;
329+
});
330+
331+
watch(store.count, (v, old)=>{console.log('watch store', v, old)});
332+
watch(count, (v, old)=>{console.log('watch ref', v, old)});
333+
watch(countAdd1, (v, old)=>{console.log('watch computed', v, old)});
334+
watch(()=>countAdd1.value, (v, old)=>{console.log('watch countAdd1', v, old)});
335+
watch(()=>store.count + 1, (v, old)=>{console.log('watch count+1', v, old)});
336+
store.count ++;
337+
count.value ++;
338+
```
339+
340+
unwatch
341+
342+
```js
343+
import {watch, ref} from 'link-dom';
344+
const count = ref(0);
345+
const unwatch = watch(count, (v, pref)=>{
346+
console.log('watch', ref)
316347
});
317348

318-
watch(()=>store.count, (v, old)=>{console.log(v, old)});
319-
watch(countAdd1, (v, old)=>{console.log(v, old)});
320-
watch(()=>countAdd1.value, (v, old)=>{console.log(v, old)});
321-
watch(()=>store.count+1, (v, old)=>{console.log(v, old)});
349+
unwatch();
322350
```
323351

324352
### Samples

‎dev/index.ts

+8
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ function Counter () {
1717
console.log(v, countAdd1.value);
1818
});
1919

20+
watch(store.count, (v, old) => {
21+
console.log('store.count', v, old);
22+
});
23+
2024
return dom.div.append(
2125
dom.button.text(() => `count is ${store.count}; ${22} cx=${countAddX.value} computed=${countAdd1.value} +1=${store.count2 + 1}; a=${store.count}`)
2226
.click(() => {
@@ -99,6 +103,10 @@ mount(Counter3(), 'body');
99103
function Counter4 () {
100104
const count = ref(0);
101105

106+
watch(count, v => {
107+
console.log(v);
108+
});
109+
102110
const countAdd1 = computed(() => {
103111
return count.value + 1;
104112
});

‎index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
<meta charset="UTF-8" />
1010
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
1111
<title>Vite npm demo</title>
12-
<script src="https://unpkg.com/eruda"></script>
13-
<script>eruda.init()</script>
12+
<!-- <script src="https://unpkg.com/eruda"></script>
13+
<script>eruda.init()</script> -->
1414
</head>
1515
<body>
1616
<script type="module" src="/dev/index.ts"></script>

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"fileName": "link-dom",
66
"publish": {
77
"name": "link-dom",
8-
"version": "0.0.5",
8+
"version": "0.0.6",
99
"description": "Super concise chained call UI library",
1010
"repository": "https://github.com/theajack/link-dom",
1111
"keywords": [

‎src/reactive/computed.ts

+12-6
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
* @Description: Coding something
55
*/
66

7-
import type {Ref} from './ref';
8-
import {setLatestStore, type IStore} from './store';
7+
import {isRef, type Ref} from './ref';
8+
import {setLatestStore, type IStore, getLatestStore} from './store';
99

1010
export type IComputedLike<T=any> = IComputeFn<T> | Computed<T>;
1111

@@ -87,12 +87,12 @@ export class Computed<T> {
8787
this._dirty = false;
8888
}
8989

90-
sub (fn: (v: T)=>void) {
90+
sub (fn: (v: T, old: T)=>void) {
9191
this._listeners.push(fn);
9292
return () => this.unsub(fn);
9393
}
9494

95-
unsub (fn: (v: T)=>void) {
95+
unsub (fn: (v: T, old: T)=>void) {
9696
const index = this._listeners.indexOf(fn);
9797
if (index !== -1) {
9898
this._listeners.splice(index, 1);
@@ -113,8 +113,14 @@ export function computed<T> (v: IComputedLike<T>, set?: (v: T)=>void) {
113113
return new Computed(v, set);
114114
}
115115

116-
export function watch<T> (v: IComputeFn<T>, fn: (v: T)=>void) {
117-
return computed(v).sub(fn);
116+
export function watch<T> (v: IComputedLike<T>|Ref<T>|T, fn: (v: T, old)=>void): ()=>void {
117+
if (isRef(v)) {
118+
return v.sub(fn);
119+
}
120+
if (isComputedLike(v)) {
121+
return computed(v).sub(fn);
122+
}
123+
return getLatestStore()?.sub(fn);
118124
}
119125

120126
export function isComputed (v: any): v is Computed<any> {

‎src/reactive/ref.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,12 @@ export class Ref<T> {
2929
this._value = v;
3030
}
3131

32-
sub (fn: (v: T)=>void) {
32+
sub (fn: (v: T, old: T)=>void) {
3333
this._listeners.push(fn);
3434
return () => this.unsub(fn);
3535
}
3636

37-
unsub (fn: (v: T)=>void) {
37+
unsub (fn: (v: T, old: T)=>void) {
3838
const index = this._listeners.indexOf(fn);
3939
if (index !== -1) {
4040
this._listeners.splice(index, 1);

‎src/reactive/store.ts

+7-3
Original file line numberDiff line numberDiff line change
@@ -93,16 +93,20 @@ export function createStore<
9393
const latestStore: {
9494
set: (v: any)=>void;
9595
get: ()=>any;
96-
sub: (ln: (v: any)=>void)=>void;
96+
sub: (ln: (v: any, old: any)=>void)=>(()=>void);
9797
} = {} as any;
9898

99+
export function getLatestStore () {
100+
return latestStore;
101+
}
102+
99103
export function setLatestStore (target: IStore<any, any>|Computed<any>|Ref<any>, attr: string = '') {
100104
let sub: (ln: ()=>void)=>void;
101105
if (isComputed(target) || isRef(target)) {
102106
attr = 'value';
103-
sub = (ln) => {target.sub(ln);};
107+
sub = (ln) => target.sub(ln);
104108
} else {
105-
sub = (ln) => {target.$sub(attr, ln);};
109+
sub = (ln) => target.$sub(attr, ln);
106110
}
107111
Object.assign(latestStore, {
108112
set: (v: any) => {target[attr] = v;},

‎todo.md

+4-2
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,7 @@
33
* @Date: 2024-12-21 10:51:01
44
* @Description: Coding something
55
-->
6-
- [ ] Support Computed
7-
- [ ] Sub function as parameter
6+
- [x] Support Computed
7+
- [x] Sub function as parameter
8+
- [x] Support Ref
9+
- [ ] Support createStore.getters

0 commit comments

Comments
 (0)