Skip to content

Commit 8d54167

Browse files
johnsoncodehkjohnsoncodehk
authored
feat: add asyncComputed, asyncEffect (#24)
1 parent 31352b6 commit 8d54167

File tree

5 files changed

+267
-0
lines changed

5 files changed

+267
-0
lines changed

‎src/unstable/asyncComputed.ts

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { Computed } from '../computed.js';
2+
import { nextTrackId } from '../effect.js';
3+
import { Dependency, endTrack, link, shallowPropagate, startTrack, SubscriberFlags } from '../system.js';
4+
import { asyncCheckDirty } from './asyncSystem.js';
5+
6+
export function asyncComputed<T>(getter: (cachedValue?: T) => AsyncGenerator<Dependency, T>): AsyncComputed<T> {
7+
return new AsyncComputed<T>(getter);
8+
}
9+
10+
export class AsyncComputed<T = any> extends Computed {
11+
12+
async get(): Promise<T> {
13+
const flags = this.flags;
14+
if (flags & SubscriberFlags.Dirty) {
15+
if (await this.update()) {
16+
const subs = this.subs;
17+
if (subs !== undefined) {
18+
shallowPropagate(subs);
19+
}
20+
}
21+
} else if (flags & SubscriberFlags.ToCheckDirty) {
22+
if (await asyncCheckDirty(this.deps!)) {
23+
if (await this.update()) {
24+
const subs = this.subs;
25+
if (subs !== undefined) {
26+
shallowPropagate(subs);
27+
}
28+
}
29+
} else {
30+
this.flags = flags & ~SubscriberFlags.ToCheckDirty;
31+
}
32+
}
33+
return this.currentValue!;
34+
}
35+
36+
// @ts-expect-error
37+
async update(): Promise<boolean> {
38+
try {
39+
startTrack(this);
40+
const trackId = nextTrackId();
41+
const oldValue = this.currentValue;
42+
const generator = this.getter(oldValue);
43+
let current = await generator.next();
44+
while (!current.done) {
45+
const dep = current.value;
46+
if (dep.lastTrackedId !== trackId) {
47+
dep.lastTrackedId = trackId;
48+
link(dep, this);
49+
}
50+
current = await generator.next();
51+
52+
// if (this.flags & SubscriberFlags.Recursed) {
53+
// return await this.get() !== oldValue;
54+
// }
55+
}
56+
const newValue = await current.value;
57+
if (oldValue !== newValue) {
58+
this.currentValue = newValue;
59+
return true;
60+
}
61+
return false;
62+
} finally {
63+
endTrack(this);
64+
}
65+
}
66+
}

‎src/unstable/asyncEffect.ts

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { Effect, nextTrackId } from '../effect.js';
2+
import { Dependency, endTrack, link, startTrack, SubscriberFlags } from '../system.js';
3+
import { asyncCheckDirty } from './asyncSystem.js';
4+
5+
export function asyncEffect<T>(fn: () => AsyncGenerator<Dependency, T>): AsyncEffect<T> {
6+
const e = new AsyncEffect(fn);
7+
e.run();
8+
return e;
9+
}
10+
11+
export class AsyncEffect<T = any> extends Effect {
12+
13+
async notify(): Promise<void> {
14+
let flags = this.flags;
15+
if (flags & SubscriberFlags.Dirty) {
16+
this.run();
17+
return;
18+
}
19+
if (flags & SubscriberFlags.ToCheckDirty) {
20+
if (await asyncCheckDirty(this.deps!)) {
21+
this.run();
22+
return;
23+
} else {
24+
this.flags = flags &= ~SubscriberFlags.ToCheckDirty;
25+
}
26+
}
27+
if (flags & SubscriberFlags.InnerEffectsPending) {
28+
this.flags = flags & ~SubscriberFlags.InnerEffectsPending;
29+
let link = this.deps!;
30+
do {
31+
const dep = link.dep;
32+
if ('notify' in dep) {
33+
dep.notify();
34+
}
35+
link = link.nextDep!;
36+
} while (link !== undefined);
37+
}
38+
}
39+
40+
async run(): Promise<T> {
41+
try {
42+
startTrack(this);
43+
const trackId = nextTrackId();
44+
const generator = this.fn();
45+
let current = await generator.next();
46+
while (!current.done) {
47+
const dep = current.value;
48+
if (dep.lastTrackedId !== trackId) {
49+
dep.lastTrackedId = trackId;
50+
link(dep, this);
51+
}
52+
current = await generator.next();
53+
}
54+
return await current.value;
55+
} finally {
56+
endTrack(this);
57+
}
58+
}
59+
}

‎src/unstable/asyncSystem.ts

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { IComputed, Link, shallowPropagate, SubscriberFlags } from "../system";
2+
3+
export async function asyncCheckDirty(link: Link): Promise<boolean> {
4+
let stack = 0;
5+
let dirty: boolean;
6+
let nextDep: Link | undefined;
7+
8+
top: do {
9+
dirty = false;
10+
const dep = link.dep;
11+
if ('update' in dep) {
12+
const depFlags = dep.flags;
13+
if (depFlags & SubscriberFlags.Dirty) {
14+
if (await dep.update()) {
15+
const subs = dep.subs!;
16+
if (subs.nextSub !== undefined) {
17+
shallowPropagate(subs);
18+
}
19+
dirty = true;
20+
}
21+
} else if (depFlags & SubscriberFlags.ToCheckDirty) {
22+
const depSubs = dep.subs!;
23+
if (depSubs.nextSub !== undefined) {
24+
depSubs.prevSub = link;
25+
}
26+
link = dep.deps!;
27+
++stack;
28+
continue;
29+
}
30+
}
31+
if (dirty || (nextDep = link.nextDep) === undefined) {
32+
if (stack) {
33+
let sub = link.sub as IComputed;
34+
do {
35+
--stack;
36+
const subSubs = sub.subs!;
37+
let prevLink = subSubs.prevSub!;
38+
if (prevLink !== undefined) {
39+
subSubs.prevSub = undefined;
40+
if (dirty) {
41+
if (await sub.update()) {
42+
shallowPropagate(sub.subs!);
43+
sub = prevLink.sub as IComputed;
44+
continue;
45+
}
46+
} else {
47+
sub.flags &= ~SubscriberFlags.ToCheckDirty;
48+
}
49+
} else {
50+
if (dirty) {
51+
if (await sub.update()) {
52+
sub = subSubs.sub as IComputed;
53+
continue;
54+
}
55+
} else {
56+
sub.flags &= ~SubscriberFlags.ToCheckDirty;
57+
}
58+
prevLink = subSubs;
59+
}
60+
link = prevLink.nextDep!;
61+
if (link !== undefined) {
62+
continue top;
63+
}
64+
sub = prevLink.sub as IComputed;
65+
dirty = false;
66+
} while (stack);
67+
}
68+
return dirty;
69+
}
70+
link = nextDep;
71+
} while (true);
72+
}

‎src/unstable/index.ts

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
export * from './asyncComputed.js';
2+
export * from './asyncEffect.js';
3+
export * from './asyncSystem.js';
14
export * from './computedArray.js';
25
export * from './computedSet.js';
36
export * from './equalityComputed.js';

‎tests/asyncComputed.spec.ts

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { expect, test } from 'vitest';
2+
import { unstable } from '../src';
3+
import { signal } from './api';
4+
5+
const { asyncComputed, asyncEffect } = unstable;
6+
7+
test('should track dep after await', async () => {
8+
const src = signal(0);
9+
const c = asyncComputed(async function* () {
10+
await sleep(100);
11+
return (yield src, src).get();
12+
});
13+
expect(await c.get()).toBe(0);
14+
15+
src.set(1);
16+
expect(await c.get()).toBe(1);
17+
});
18+
19+
test('should trigger asyncEffect', async () => {
20+
let triggerTimes = 0;
21+
22+
const src = signal(0);
23+
const c = asyncComputed(async function* () {
24+
await sleep(100);
25+
return (yield src, src).get();
26+
});
27+
asyncEffect(async function* () {
28+
triggerTimes++;
29+
(yield c, c).get();
30+
});
31+
expect(triggerTimes).toBe(1);
32+
33+
await sleep(200);
34+
src.set(1);
35+
await sleep(200);
36+
expect(triggerTimes).toBe(2);
37+
});
38+
39+
test.skip('should stop calculating when dep updated', async () => {
40+
let calcTimes = 0;
41+
42+
const a = signal('a0');
43+
const b = signal('b0');
44+
const c = asyncComputed(async function* () {
45+
calcTimes++;
46+
const v1 = (yield a, a).get();
47+
await sleep(200);
48+
const v2 = (yield b, b).get();
49+
return v1 + '-' + v2;
50+
});
51+
52+
expect(await c.get()).toBe('a0-b0');
53+
expect(calcTimes).toBe(1);
54+
55+
a.set('a1');
56+
const promise = c.get();
57+
await sleep(100);
58+
expect(calcTimes).toBe(2);
59+
a.set('a2');
60+
61+
expect(await promise).toBe('a2-b0');
62+
expect(calcTimes).toBe(3);
63+
});
64+
65+
function sleep(ms: number) {
66+
return new Promise(r => setTimeout(r, ms));
67+
}

0 commit comments

Comments
 (0)