async-reactivity 2.0.25 → 2.0.27

package/src/computed.ts

@@ -1,39 +1,31 @@
 import Dependency from "./dependency.js";
 import Dependent from "./dependent.js";
-import Tracker from "./tracker.js";
 import defaultIsEqual from "./defaultIsEqual.js";
 import { Deferrer } from "./deferrer.js";
 import { debounce } from 'lodash-es';
+import Effect, { EffectState, InSyncSymbol } from "./effect.js";
 
 export declare type TrackValue = (<T>(dependency: Dependency<T>) => T) & (<T>(dependency: Dependency<T> | undefined) => T | undefined);
 export declare type ComputeFunc<T> = (value: TrackValue, previousValue: T | undefined, abortSignal: AbortSignal) => T;
 export declare type ComputeFuncScoped<T1, T2> = (value: TrackValue, scope: T1, previousValue: T2 | undefined, abortSignal: AbortSignal) => T2;
 
-enum ComputedState {
-    Invalid,
-    Valid,
-    Uncertain,
-    Computing
-}
-
 class CircularDependencyError extends Error { }
 
-export default class Computed<T> extends Tracker<T> implements Dependent, Dependency<T> {
+export default class Computed<T> extends Effect implements Dependent, Dependency<T> {
+    private _value?: T;
     getter: ComputeFunc<T>;
     isEqual: typeof defaultIsEqual<T>;
-    private state = ComputedState.Invalid;
-    private dependencies = new Map<Dependency<unknown>, boolean>();   // boolean indicates whether value is up to date in regards to the dependency (false - up to date, true - needs update)
-    private computePromise?: Promise<unknown>;
-    private computePromiseActions?: { resolve: Function, reject: Function };
-    private lastComputeAttemptPromise?: Promise<void>;
+    private dependents = new Set<Dependent>();
     private deferrer?: Deferrer;
-    private abortController?: AbortController;
 
     constructor(getter: ComputeFunc<T>, isEqual = defaultIsEqual<T>, timeToLive?: number) {
-        super();
+
+        super(((value, _firstRun, abortSignal) => {
+            return getter(value, this._value, abortSignal);
+        }), true);
+
         this.getter = getter;
         this.isEqual = isEqual;
-        this.prepareComputePromise();
 
         if (timeToLive !== undefined) {
             this.deferrer = new Deferrer(debounce(() => {
@@ -44,149 +36,66 @@ export default class Computed<T> extends Tracker<T> implements Dependent, Depend
         }
     }
 
-    private prepareComputePromise() {
-        this.computePromise = new Promise((resolve, reject) => {
-            this.computePromiseActions = {
-                resolve,
-                reject
-            };
-        });
-    }
-
     public get value(): T {
-        if (this.state === ComputedState.Invalid || this.state === ComputedState.Uncertain) {
-            return this.compute();
-        }
-
-        return this._value!;
-    }
-
-    private compute() {
-        if (this.state === ComputedState.Uncertain) {
-            const upToDate = ![...this.dependencies.entries()].some(([d, needsUpdate]) => {
-                if (needsUpdate && d instanceof Computed && d.state === ComputedState.Uncertain) {
-                    d.value;
-                    return this.dependencies.get(d);
+        if (this.state === EffectState.Initial || this.state === EffectState.Scheduled) {
+            const oldValue = this._value!;
+            const newValue = this.run() as T;
+            if (newValue !== InSyncSymbol) {
+                this._value = newValue;
+                if (this.isEqual(this._value!, oldValue)) {
+                    this.validateDependents();
                 }
-                return needsUpdate;
-            });
-            if (upToDate) {
-                this.finalizeComputing();
-                this.validateDependents();
-                return this._value!;
             }
-        } else if (this.state === ComputedState.Computing) {
-            this.abortController?.abort();
         }
 
-        this.state = ComputedState.Computing;
-        this.clearDependencies(true);
-        this.abortController = new AbortController();
-
-        const newValue: T = this.getter(this.trackDependency, this._value, this.abortController.signal);
-        if (this.isEqual(newValue, this._value!)) {
-            this.handlePromiseThen(this.lastComputeAttemptPromise!, this._value);
-            this.validateDependents();
-        } else if (newValue instanceof Promise) {
-            const computeAttemptPromise = newValue
-                .then(result => this.handlePromiseThen(computeAttemptPromise, result))
-                .catch(error => this.handlePromiseCatch(computeAttemptPromise, error)) as Promise<void>;
-            this.lastComputeAttemptPromise = computeAttemptPromise;
-            this._value = this.computePromise! as T;
-        } else {
-            this._value = newValue;
-            this.handlePromiseThen(this.lastComputeAttemptPromise!, this._value);
-        }
         return this._value!;
     }
 
-    private clearDependencies(compute: boolean) {
-        for (const dependency of this.dependencies.keys()) {
-            dependency.removeDependent(this, compute ? this.computePromise : undefined);
-        }
-        this.dependencies.clear();
-    }
-
-    private handlePromiseThen(computeAttemptPromise: Promise<void>, result: any) {
-        if (this.lastComputeAttemptPromise === computeAttemptPromise) {
-            this.computePromiseActions!.resolve(result);
-            this.finalizeComputing();
-        }
-    }
-
-    private handlePromiseCatch(computeAttemptPromise: Promise<void>, error: any) {
-        if (this.lastComputeAttemptPromise === computeAttemptPromise) {
-            this.computePromiseActions!.reject(error);
-            this.finalizeComputing();
+    private validateDependents() {
+        for (const dependent of this.dependents.keys()) {
+            dependent.validate(this);
         }
     }
 
-    private innerTrackDependency(this: Computed<T>, dependency?: Dependency<unknown>) {
-        if (dependency === undefined) {
-            return undefined;
-        }
-        if (this.dependents.has(dependency as any)) {
+    public addDependent(dependent: Dependent) {
+        if (this.dependencies.has(dependent as any)) {
             throw new CircularDependencyError();
         }
-        this.dependencies.set(dependency, false);
-        dependency.addDependent(this);
-        return dependency.value;
+        this.dependents.add(dependent);
     }
 
-    private trackDependency = this.innerTrackDependency.bind(this) as TrackValue;
-
-    private finalizeComputing() {
-        this.state = ComputedState.Valid;
-        this.lastComputeAttemptPromise = undefined;
-        this.abortController = undefined;
-        this.prepareComputePromise();
+    public removeDependent(dependent: Dependent, promise = Promise.resolve()): void {
+        this.dependents.delete(dependent);
+        this.deferrer?.finally(promise);
     }
 
     public invalidate(dependency?: Dependency<unknown>) {
-        if (this.state === ComputedState.Computing) {
-            this.lastComputeAttemptPromise = undefined;     // prevent finalizeComputing if it is in the event loop already
-            Promise.resolve().then(this.compute.bind(this));
-        } else if (this.state === ComputedState.Valid) {
-            this.state = ComputedState.Uncertain;
-            if (dependency) {
-                this.dependencies.set(dependency, true);
-            } else {
-                for (const dep of this.dependencies.keys()) {
-                    this.dependencies.set(dep, true);
-                }
+        if (this.state === EffectState.Waiting) {
+            this.state = EffectState.Scheduled;
+            for (const dependent of this.dependents) {
+                dependent.invalidate(this);
             }
-            super.invalidate();
         }
+
+        super.invalidate(dependency);
     }
 
     public forceInvalidate() {
-        this.invalidate();
-        if (this.state !== ComputedState.Computing) {
-            this.state = ComputedState.Invalid;
+        if (this.dependencies.size === 0) {
+            this.invalidate();
+        } else {
+            for (const dependency of this.dependencies.keys()) {
+                this.invalidate(dependency);
+            }
         }
-    }
-
-    public validate(dependency: Dependency<unknown>) {
-        this.dependencies.set(dependency, false);
-    }
-
-    private validateDependents() {
-        for (const dependent of this.dependents.keys()) {
-            dependent.validate(this);
+        if (this.state !== EffectState.Running) {
+            this.state = EffectState.Initial;
         }
     }
 
-    public removeDependent(dependent: Dependent, promise = Promise.resolve()): void {
-        super.removeDependent(dependent);
-        this.deferrer?.finally(promise);
-    }
-
     public reset() {
-        this.clearDependencies(false);
-        this.state = ComputedState.Invalid;
         this._value = undefined;
-        this.lastComputeAttemptPromise = undefined;
-        this.prepareComputePromise();
+        super.dispose();
     }
 
     public dispose() {

package/src/effect.test.ts

@@ -0,0 +1,246 @@
+import 'mocha';
+import assert from 'assert';
+import Effect from './effect.js';
+import Ref from './ref.js';
+import Computed from './computed.js';
+import { values } from 'lodash-es';
+
+describe('effect', function () {
+    describe('sync', function () {
+        it('should run effect immediately', function () {
+            let count = 0;
+
+            new Effect(() => {
+                count++;
+            });
+
+            assert.strictEqual(count, 1);
+        });
+
+        it('should not run immediately after dependency is changed', function () {
+            let count = 0;
+            const a = new Ref(5);
+
+            new Effect((value) => {
+                value(a);
+                count++;
+            });
+
+            assert.strictEqual(count, 1);
+            a.value = 4;
+            assert.strictEqual(count, 1);
+        });
+
+        it('should run effect when dependency (ref) changes', async function () {
+            let count = 0;
+            const a = new Ref(5);
+
+            new Effect((value) => {
+                value(a);
+                count++;
+            });
+
+            a.value = 4;
+            await new Promise(resolve => setTimeout(resolve));
+
+            assert.strictEqual(count, 2);
+        });
+
+        it('should indicate first run', async function () {
+            let count = 0;
+            const a = new Ref(5);
+
+            new Effect((_value, firstRun) => {
+                values(a);
+                assert.strictEqual(firstRun, count === 0);
+                count++;
+            });
+
+            a.value = 4;
+            await new Promise(resolve => setTimeout(resolve));
+        });
+
+        it('should run effect once when dependency (ref) changes multiple times synchronously', async function () {
+            let count = 0;
+            const a = new Ref(5);
+
+            new Effect((value) => {
+                value(a);
+                count++;
+            });
+
+            a.value = 4;
+            a.value = 3;
+            await new Promise(resolve => setTimeout(resolve));
+
+            assert.strictEqual(count, 2);
+        });
+
+        it('should run effect when dependency (computed) changes', async function () {
+            let count = 0;
+            const a = new Ref(5);
+            const b = new Computed(value => value(a) + 1);
+
+            new Effect((value) => {
+                value(b);
+                count++;
+            });
+
+            assert.strictEqual(count, 1);
+            a.value = 4;
+            await new Promise(resolve => setTimeout(resolve));
+
+            assert.strictEqual(count, 2);
+        });
+
+        it('should not run effect when dependency changes but value is the same', async function () {
+            let count = 0;
+            const a = new Ref(5);
+            const b = new Computed(value => value(a) % 2);
+
+            new Effect((value) => {
+                value(b);
+                count++;
+            });
+
+            assert.strictEqual(count, 1);
+            a.value = 3;
+            await new Promise(resolve => setTimeout(resolve));
+
+            assert.strictEqual(count, 1);
+        });
+
+        it('should debounce and rerun effect if dependency changes while running', async function () {
+            let count = 0;
+            const a = new Ref(5);
+            
+            new Effect((value) => {
+                value(a);
+                count++;
+                a.value = 6;
+            });
+
+            assert.strictEqual(count, 1);
+
+            await new Promise(resolve => setTimeout(resolve));
+            assert.strictEqual(count, 2);
+        });
+    });
+
+    describe('async', function () {
+        it('should await effect', async function () {
+            const e = new Effect(async () => {
+                await new Promise(resolve => setTimeout(resolve, 10));
+            });
+            // @ts-expect-error
+            assert.strictEqual(e.state, 1);
+
+            await new Promise(resolve => setTimeout(resolve, 20));
+            // @ts-expect-error
+            assert.strictEqual(e.state, 2);
+
+            await e.run();
+            // @ts-expect-error
+            assert.strictEqual(e.state, 2);
+        });
+
+        it('should respect async dependencies', async function () {
+            let count = 0;
+            const a = new Ref(5);
+            const b = new Ref(5);
+
+            new Effect(async (value) => {
+                value(a);
+                await new Promise(resolve => setTimeout(resolve));
+                value(b);
+                count++;
+            });
+
+            await new Promise(resolve => setTimeout(resolve, 10));
+            b.value = 4;
+
+            await new Promise(resolve => setTimeout(resolve, 10));
+            assert.strictEqual(count, 2);
+        });
+
+        it('should abort previous run if dependency changes while running', async function () {
+            let count = 0;
+            const a = new Ref(5);
+
+            new Effect(async (value, _firstRun, abortSignal) => {
+                value(a);
+                await new Promise(resolve => setTimeout(resolve));
+                assert.strictEqual(abortSignal.aborted, count === 0);
+                count++;
+            });
+
+            a.value = 4;
+
+            await new Promise(resolve => setTimeout(resolve, 10));
+            assert.strictEqual(count, 2);
+        });
+
+        it('should not abort if effect completes', async function () {
+            let count = 0;
+            const a = new Ref(5);
+
+            new Effect(async (value, _firstRun, abortSignal) => {
+                value(a);
+                await new Promise(resolve => setTimeout(resolve));
+                assert.strictEqual(abortSignal.aborted, false);
+                count++;
+            });
+
+            await new Promise(resolve => setTimeout(resolve, 10));
+            a.value = 4;
+
+            await new Promise(resolve => setTimeout(resolve, 10));
+            a.value = 3;
+
+            await new Promise(resolve => setTimeout(resolve, 10));
+            assert.strictEqual(count, 3);
+        });
+
+        it('should not care if promise rejects', async function () {
+            let count = 0;
+            const a = new Ref(5);
+
+            new Effect(async (value) => {
+                value(a);
+                await new Promise(resolve => setTimeout(resolve));
+                count++;
+                throw new Error('Test error');
+            });
+
+            await new Promise(resolve => setTimeout(resolve, 10));
+            a.value = 4;
+
+            await new Promise(resolve => setTimeout(resolve, 10));
+            a.value = 3;
+
+            await new Promise(resolve => setTimeout(resolve, 10));
+            assert.strictEqual(count, 3);
+        });
+
+        it('should not dispose computed while effect is running', async function () {
+            let gate = 0;
+            const a = new Ref(5);
+            const b = new Computed(() => {
+                gate++;
+                return 1;
+            }, undefined, 0);
+
+            new Effect(async (value) => {
+                value(a);
+                await new Promise(resolve => setTimeout(resolve, 10));
+                value(b);
+            });
+
+            await new Promise(resolve => setTimeout(resolve, 20));
+            a.value = 4;
+            await new Promise(resolve => setTimeout(resolve, 20));
+
+            assert.strictEqual(gate, 1);
+        });
+    });
+});

package/src/effect.ts

@@ -0,0 +1,149 @@
+import Dependency from "./dependency.js";
+import Dependent from "./dependent.js";
+
+export declare type TrackValue = (<T>(dependency: Dependency<T>) => T) & (<T>(dependency: Dependency<T> | undefined) => T | undefined);
+export declare type EffectFunc = (value: TrackValue, firstRun: boolean, abortSignal: AbortSignal) => unknown | Promise<unknown>;
+
+export enum EffectState {
+    Initial,
+    Running,
+    Waiting,
+    Scheduled,
+};
+
+export const InSyncSymbol = Symbol('inSync');
+
+export default class Effect implements Dependent {
+    protected state = EffectState.Initial;
+    protected dependencies = new Map<Dependency<unknown>, boolean>();   // boolean indicates whether effect is in sync with the dependency
+    private abortHandler?: { promise: Promise<void>, abort: Function, aborted: boolean, controller: AbortController };
+
+    constructor(private readonly effect: EffectFunc, private readonly computed = false) {
+        if (!computed) {
+            this.run();
+        }
+    }
+
+    private innerTrackDependency(this: Effect, dependency?: Dependency<unknown>) {
+        if (dependency === undefined) {
+            return undefined;
+        }
+        this.dependencies.set(dependency, true);
+        dependency.addDependent(this);
+        return dependency.value;
+    }
+
+    private trackDependency = this.innerTrackDependency.bind(this) as TrackValue;
+
+    run() {
+        let firstRun = this.state === EffectState.Initial;
+
+        if (this.state === EffectState.Scheduled) {
+            const inSync = [...this.dependencies.entries()].every(([d, inSync]) => {
+                if (!inSync) {
+                    d.value;
+                    return this.dependencies.get(d);
+                }
+                return inSync;
+            });
+            if (inSync) {
+                this.state = EffectState.Waiting;
+                return InSyncSymbol;
+            }
+        }
+
+        this.state = EffectState.Running;
+
+        const getResult = (): unknown | Promise<unknown> => {
+            this.clearDependencies(runPromise);
+            this.abortHandler = (() => {
+                const handler = {
+                    promise: undefined as unknown as Promise<void>,
+                    abort: () => { },
+                    aborted: false,
+                    controller: new AbortController()
+                };
+                handler.promise = new Promise<void>((resolve) => {
+                    handler.abort = () => {
+                        handler.aborted = true;
+                        handler.controller.abort();
+                        resolve();
+                    };
+                });
+                return handler;
+            })();
+
+            const completeRun = (resolve: boolean, result: unknown, err: unknown, async: boolean) => {
+                if (this.abortHandler!.aborted) {
+                    firstRun = false;
+                    if (this.computed || async) {
+                        return getResult();
+                    }
+                    return Promise.resolve().then(() => getResult());
+                }
+
+                this.state = EffectState.Waiting;
+                this.abortHandler = undefined;
+                resolveRunPromise();
+
+                if (resolve) {
+                    return result;
+                } else {
+                    throw err;
+                }
+            };
+
+            try {
+                const resultMaybePromise = this.effect(this.trackDependency, firstRun, this.abortHandler.controller.signal);
+                if (resultMaybePromise instanceof Promise) {
+                    return Promise.race([resultMaybePromise, this.abortHandler!.promise])
+                        .then((result) => completeRun(true, result, undefined, true))
+                        .catch((err) => completeRun(false, undefined, err, true));
+                }
+                return completeRun(true, resultMaybePromise, undefined, false);
+            } catch (err) {
+                return completeRun(false, undefined, err, false);
+            }
+        };
+
+        let resolveRunPromise: Function;
+        const runPromise = new Promise<void>(resolve => {
+            resolveRunPromise = resolve;
+        });
+        return getResult();
+    }
+
+    private clearDependencies(promise?: Promise<void>) {
+        for (const dependency of this.dependencies.keys()) {
+            dependency.removeDependent(this, promise);
+        }
+        this.dependencies.clear();
+    }
+
+    invalidate(dependency?: Dependency<unknown>) {
+        if (dependency) {
+            this.dependencies.set(dependency, false);
+        }
+
+        if (this.state === EffectState.Running && !this.abortHandler?.aborted) {
+            this.abortHandler?.abort();
+        } else if (this.state === EffectState.Waiting) {
+            this.state = EffectState.Scheduled;
+            Promise.resolve().then(this.run.bind(this));
+        }
+    }
+
+    validate(dependency: Dependency<unknown>) {
+        this.dependencies.set(dependency, true);
+    }
+
+    dispose() {
+        this.clearDependencies();
+
+        this.abortHandler?.abort();
+        this.abortHandler = undefined;
+
+        this.state = EffectState.Initial;
+    }
+
+}

package/src/listener.test.ts

@@ -36,7 +36,7 @@ describe('listener', function () {
         new Watcher(listener, onChange);
 
         assert.strictEqual(onChange.mock.callCount(), 1);
-        assert.deepStrictEqual(onChange.mock.calls[0].arguments, [1]);
+        assert.deepStrictEqual(onChange.mock.calls[0].arguments, [1, undefined]);
 
         await new Promise((resolve) => setTimeout(resolve, 20));
 

package/src/ref.ts

@@ -1,25 +1,40 @@
 import Dependency from "./dependency.js";
-import Tracker from "./tracker.js";
 import defaultIsEqual from "./defaultIsEqual.js";
+import { Dependent } from "./index.js";
 
-export default class Ref<T> extends Tracker<T> implements Dependency<T> {
+export default class Ref<T> implements Dependency<T> {
     private isEqual: typeof defaultIsEqual<T>;
+    protected dependents = new Set<Dependent>();
+    protected _value?: T;
 
     constructor(_value: T, isEqual = defaultIsEqual<T>) {
-        super();
         this._value = _value;
         this.isEqual = isEqual;
     }
 
     public set value(_value: T) {
-        const lastValue = this._value!;
+        const oldValue = this._value!;
         this._value = _value;
-        if (!this.isEqual(lastValue, _value)) {
+        if (!this.isEqual(_value, oldValue)) {
             this.invalidate();
         }
     }
 
     public get value(): T {
-        return super.value!;
+        return this._value!;
+    }
+
+    public addDependent(dependent: Dependent) {
+        this.dependents.add(dependent);
+    }
+
+    public removeDependent(dependent: Dependent) {
+        this.dependents.delete(dependent);
+    }
+
+    public invalidate(): void {
+        for (const dependent of this.dependents) {
+            dependent.invalidate(this);
+        }
     }
 }