async-reactivity 2.0.26 → 2.0.28

package/README.md

@@ -35,8 +35,8 @@ To integrate state with reactive state you can use:
   * `start` function is called when listener gets first dependent
     * it ensures value is updated
   * `stop` function is called when listener loses last dependent
-* [watcher](./src/watcher.ts)
-  * a function that is called when dependency changes
+* [watcher](./src/watcher.ts) and [effect](./src/effect.ts)
+  * a function that is called when dependency changes (Vue.js `watch` and `watchEffect` equivalent)
   * can only be dependent (only outgoing arrows)
 
 # Behavior

package/lib/computed.js

@@ -1,31 +1,21 @@
-import Tracker from "./tracker.js";
 import defaultIsEqual from "./defaultIsEqual.js";
 import { Deferrer } from "./deferrer.js";
 import { debounce } from 'lodash-es';
-var ComputedState;
-(function (ComputedState) {
-    ComputedState[ComputedState["Invalid"] = 0] = "Invalid";
-    ComputedState[ComputedState["Valid"] = 1] = "Valid";
-    ComputedState[ComputedState["Uncertain"] = 2] = "Uncertain";
-    ComputedState[ComputedState["Computing"] = 3] = "Computing";
-})(ComputedState || (ComputedState = {}));
+import Effect, { EffectState, InSyncSymbol } from "./effect.js";
 class CircularDependencyError extends Error {
 }
-export default class Computed extends Tracker {
+export default class Computed extends Effect {
+    _value;
     getter;
     isEqual;
-    state = ComputedState.Invalid;
-    dependencies = new Map(); // boolean indicates whether value is in sync with the dependency
-    computePromise;
-    computePromiseActions;
-    lastComputeAttemptPromise;
+    dependents = new Set();
     deferrer;
-    abortController;
     constructor(getter, isEqual = (defaultIsEqual), timeToLive) {
-        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(() => {
                 if (this.dependents.size === 0) {
@@ -34,137 +24,59 @@ export default class Computed extends Tracker {
             }, timeToLive));
         }
     }
-    prepareComputePromise() {
-        this.computePromise = new Promise((resolve, reject) => {
-            this.computePromiseActions = {
-                resolve,
-                reject
-            };
-        });
-    }
     get value() {
-        if (this.state === ComputedState.Invalid || this.state === ComputedState.Uncertain) {
-            return this.compute();
-        }
-        return this._value;
-    }
-    compute() {
-        if (this.state === ComputedState.Uncertain) {
-            const inSync = [...this.dependencies.entries()].every(([d, inSync]) => {
-                if (!inSync && 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();
+            if (newValue !== InSyncSymbol) {
+                this._value = newValue;
+                if (this.isEqual(this._value, oldValue)) {
+                    this.validateDependents();
                 }
-                return inSync;
-            });
-            if (inSync) {
-                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 = 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));
-            this.lastComputeAttemptPromise = computeAttemptPromise;
-            this._value = this.computePromise;
-        }
-        else {
-            this._value = newValue;
-            this.handlePromiseThen(this.lastComputeAttemptPromise, this._value);
-        }
         return this._value;
     }
-    clearDependencies(compute) {
-        for (const dependency of this.dependencies.keys()) {
-            dependency.removeDependent(this, compute ? this.computePromise : undefined);
-        }
-        this.dependencies.clear();
-    }
-    handlePromiseThen(computeAttemptPromise, result) {
-        if (this.lastComputeAttemptPromise === computeAttemptPromise) {
-            this.computePromiseActions.resolve(result);
-            this.finalizeComputing();
-        }
-    }
-    handlePromiseCatch(computeAttemptPromise, error) {
-        if (this.lastComputeAttemptPromise === computeAttemptPromise) {
-            this.computePromiseActions.reject(error);
-            this.finalizeComputing();
+    validateDependents() {
+        for (const dependent of this.dependents.keys()) {
+            dependent.validate(this);
         }
     }
-    innerTrackDependency(dependency) {
-        if (dependency === undefined) {
-            return undefined;
-        }
-        if (this.dependents.has(dependency)) {
+    addDependent(dependent) {
+        if (this.dependencies.has(dependent)) {
             throw new CircularDependencyError();
         }
-        this.dependencies.set(dependency, true);
-        dependency.addDependent(this);
-        return dependency.value;
+        this.dependents.add(dependent);
     }
-    trackDependency = this.innerTrackDependency.bind(this);
-    finalizeComputing() {
-        this.state = ComputedState.Valid;
-        this.lastComputeAttemptPromise = undefined;
-        this.abortController = undefined;
-        this.prepareComputePromise();
+    removeDependent(dependent, promise = Promise.resolve()) {
+        this.dependents.delete(dependent);
+        this.deferrer?.finally(promise);
     }
     invalidate(dependency) {
-        if (dependency) {
-            this.dependencies.set(dependency, false);
-        }
-        else {
-            for (const dep of this.dependencies.keys()) {
-                this.dependencies.set(dep, false);
+        if (this.state === EffectState.Waiting) {
+            this.state = EffectState.Scheduled;
+            for (const dependent of this.dependents) {
+                dependent.invalidate(this);
             }
         }
-        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;
-            super.invalidate();
-        }
+        super.invalidate(dependency);
     }
     forceInvalidate() {
-        this.invalidate();
-        if (this.state !== ComputedState.Computing) {
-            this.state = ComputedState.Invalid;
+        if (this.dependencies.size === 0) {
+            this.invalidate();
         }
-    }
-    validate(dependency) {
-        this.dependencies.set(dependency, true);
-    }
-    validateDependents() {
-        for (const dependent of this.dependents.keys()) {
-            dependent.validate(this);
+        else {
+            for (const dependency of this.dependencies.keys()) {
+                this.invalidate(dependency);
+            }
+        }
+        if (this.state !== EffectState.Running) {
+            this.state = EffectState.Initial;
         }
-    }
-    removeDependent(dependent, promise = Promise.resolve()) {
-        super.removeDependent(dependent);
-        this.deferrer?.finally(promise);
     }
     reset() {
-        this.clearDependencies(false);
-        this.state = ComputedState.Invalid;
         this._value = undefined;
-        this.lastComputeAttemptPromise = undefined;
-        this.prepareComputePromise();
+        super.dispose();
     }
     dispose() {
         this.reset();