async-reactivity 1.0.0

package/lib/computed.js

@@ -0,0 +1,129 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const tracker_1 = __importDefault(require("./tracker"));
+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 = {}));
+;
+class CircularDependencyError extends Error {
+}
+class Computed extends tracker_1.default {
+    constructor(getter) {
+        super();
+        this.state = ComputedState.Invalid;
+        this.dependencies = new Map();
+        this.trackDependency = this.innerTrackDependency.bind(this);
+        this.getter = getter;
+        this.prepareComputePromise();
+    }
+    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) {
+            for (const dependency of this.dependencies.keys()) {
+                this.dependencies.set(dependency, true);
+            }
+            if ([...this.dependencies.keys()].every(d => {
+                d.value;
+                return !this.dependencies.get(d);
+            })) {
+                this.finalizeComputing();
+                this.validateDependents();
+                return this._value;
+            }
+        }
+        this.state = ComputedState.Computing;
+        this.clearDependencies();
+        const lastValue = this._value;
+        this._value = this.getter(this.trackDependency);
+        if (this._value instanceof Promise) {
+            const computeAttemptPromise = this._value
+                .then(result => this.handlePromiseThen(computeAttemptPromise, result))
+                .catch(error => this.handlePromiseCatch(computeAttemptPromise, error));
+            this.lastComputeAttemptPromise = computeAttemptPromise;
+            this._value = this.computePromise;
+        }
+        else {
+            this.handlePromiseThen(this.lastComputeAttemptPromise, this._value);
+            if (lastValue === this._value) {
+                this.validateDependents();
+            }
+        }
+        return this._value;
+    }
+    clearDependencies() {
+        for (const dependency of this.dependencies.keys()) {
+            dependency.removeDependent(this);
+        }
+        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();
+        }
+    }
+    innerTrackDependency(dependency) {
+        if (this.dependents.has(dependency)) {
+            throw new CircularDependencyError();
+        }
+        this.dependencies.set(dependency, true);
+        dependency.addDependent(this);
+        return dependency.value;
+    }
+    finalizeComputing() {
+        this.state = ComputedState.Valid;
+        this.lastComputeAttemptPromise = undefined;
+        this.prepareComputePromise();
+    }
+    invalidate() {
+        if (this.state === ComputedState.Computing) {
+            setImmediate(this.compute.bind(this));
+        }
+        if (this.state !== ComputedState.Uncertain) {
+            this.state = ComputedState.Uncertain;
+            super.invalidate();
+        }
+    }
+    validate(dependency) {
+        this.dependencies.set(dependency, false);
+    }
+    validateDependents() {
+        for (const dependent of this.dependents.keys()) {
+            dependent.validate(this);
+        }
+    }
+    dispose() {
+        this.clearDependencies();
+        this.state = ComputedState.Invalid;
+        this._value = undefined;
+        this.lastComputeAttemptPromise = undefined;
+        this.prepareComputePromise();
+    }
+}
+exports.default = Computed;

package/lib/dependency.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/dependent.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Watcher = exports.Ref = exports.Computed = void 0;
+var computed_1 = require("./computed");
+Object.defineProperty(exports, "Computed", { enumerable: true, get: function () { return __importDefault(computed_1).default; } });
+var ref_1 = require("./ref");
+Object.defineProperty(exports, "Ref", { enumerable: true, get: function () { return __importDefault(ref_1).default; } });
+var watcher_1 = require("./watcher");
+Object.defineProperty(exports, "Watcher", { enumerable: true, get: function () { return __importDefault(watcher_1).default; } });

package/lib/index.test.js

@@ -0,0 +1,335 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const _1 = require("./");
+const assert = __importStar(require("assert"));
+describe('async reactivity', function () {
+    describe('ref', function () {
+        it('getter', function () {
+            const a = new _1.Ref(5);
+            assert.strictEqual(a.value, 5);
+        });
+        it('setter', function () {
+            const a = new _1.Ref(5);
+            a.value = 4;
+            assert.strictEqual(a.value, 4);
+        });
+    });
+    describe('computed', function () {
+        it('lazy compute', function () {
+            let gate = false;
+            const a = new _1.Computed(() => {
+                gate = true;
+                return 5;
+            });
+            assert.strictEqual(gate, false);
+            assert.strictEqual(a.value, 5);
+            assert.strictEqual(gate, true);
+        });
+        it('cache', function () {
+            let gate = false;
+            const a = new _1.Computed(() => {
+                gate = true;
+                return 5;
+            });
+            assert.strictEqual(a.value, 5);
+            gate = false;
+            assert.strictEqual(a.value, 5);
+            assert.strictEqual(gate, false);
+        });
+        it('invalidate dependents', function () {
+            const a = new _1.Ref(5);
+            const b = new _1.Computed((value) => {
+                return value(a) + 4;
+            });
+            assert.strictEqual(b.value, 9);
+            a.value = 6;
+            assert.strictEqual(b.value, 10);
+        });
+        it('dependents up-to-date', function () {
+            const a = new _1.Ref(5);
+            const b = new _1.Ref(10);
+            let gate;
+            const c = new _1.Computed((value) => {
+                gate = true;
+                return value(a) < 10 ? value(b) : 0;
+            });
+            assert.strictEqual(c.value, 10);
+            a.value = 15;
+            assert.strictEqual(c.value, 0);
+            b.value = 15;
+            gate = false;
+            assert.strictEqual(c.value, 0);
+            assert.strictEqual(gate, false);
+        });
+        it('detect circular dependency', function () {
+            // @ts-expect-error
+            const a = new _1.Computed((value) => {
+                return value(b);
+            });
+            // @ts-expect-error
+            const b = new _1.Computed((value) => {
+                return value(a);
+            });
+            assert.throws(() => a.value);
+        });
+        xit('detect circular deeper dependency', function () {
+            // do not support for better performance
+            assert.fail('not implemented');
+        });
+        it('throw error', function () {
+            const a = new _1.Computed(() => {
+                throw new Error();
+            });
+            assert.throws(() => a.value);
+        });
+        it('ignore same ref value', function () {
+            let gate = 0;
+            const a = new _1.Ref(5);
+            const b = new _1.Computed((value) => {
+                gate++;
+                return value(a);
+            });
+            assert.strictEqual(b.value, 5);
+            a.value = 5;
+            assert.strictEqual(b.value, 5);
+            assert.strictEqual(gate, 1);
+        });
+        it('ignore same computed value', function () {
+            let gate = 0;
+            const a = new _1.Ref(5);
+            const b = new _1.Computed((value) => {
+                return value(a) % 2;
+            });
+            const c = new _1.Computed((value) => {
+                gate++;
+                return value(b) + 5;
+            });
+            assert.strictEqual(c.value, 6);
+            a.value = 7;
+            assert.strictEqual(c.value, 6);
+            assert.strictEqual(gate, 1);
+        });
+    });
+    describe('async computed', function () {
+        it('getter', function () {
+            return __awaiter(this, void 0, void 0, function* () {
+                const a = new _1.Computed(() => __awaiter(this, void 0, void 0, function* () {
+                    yield new Promise(resolve => setTimeout(resolve));
+                    return 5;
+                }));
+                assert.strictEqual(yield a.value, 5);
+            });
+        });
+        it('tracks async dependencies', function () {
+            return __awaiter(this, void 0, void 0, function* () {
+                const a = new _1.Ref(5);
+                const b = new _1.Computed((value) => __awaiter(this, void 0, void 0, function* () {
+                    yield new Promise(resolve => setTimeout(resolve));
+                    return value(a) + 5;
+                }));
+                assert.strictEqual(yield b.value, 10);
+                a.value = 6;
+                assert.strictEqual(yield b.value, 11);
+            });
+        });
+        it('get value while computing', function () {
+            return __awaiter(this, void 0, void 0, function* () {
+                const a = new _1.Computed(() => __awaiter(this, void 0, void 0, function* () {
+                    yield new Promise(resolve => setTimeout(resolve));
+                    return 5;
+                }));
+                a.value;
+                assert.strictEqual(yield a.value, 5);
+            });
+        });
+        it('detect circular dependency', function () {
+            return __awaiter(this, void 0, void 0, function* () {
+                // @ts-expect-error
+                const a = new _1.Computed((value) => __awaiter(this, void 0, void 0, function* () {
+                    yield new Promise(resolve => setTimeout(resolve));
+                    return value(b);
+                }));
+                // @ts-expect-error
+                const b = new _1.Computed((value) => __awaiter(this, void 0, void 0, function* () {
+                    yield new Promise(resolve => setTimeout(resolve));
+                    return value(a);
+                }));
+                assert.rejects(() => __awaiter(this, void 0, void 0, function* () { return yield a.value; }));
+            });
+        });
+        it('old dependency changed while computing', function () {
+            return __awaiter(this, void 0, void 0, function* () {
+                let gate = 0;
+                const a = new _1.Ref(5);
+                const b = new _1.Computed((value) => __awaiter(this, void 0, void 0, function* () {
+                    gate++;
+                    yield new Promise(resolve => setTimeout(resolve));
+                    return value(a) + 2;
+                }));
+                assert.strictEqual(yield b.value, 7);
+                b.invalidate();
+                const promise = b.value;
+                a.value = 6;
+                assert.strictEqual(yield promise, 8);
+                assert.strictEqual(gate, 2);
+            });
+        });
+        it('new dependency changed while computing', function () {
+            return __awaiter(this, void 0, void 0, function* () {
+                let gate = 0;
+                const a = new _1.Ref(5);
+                const b = new _1.Ref(10);
+                const c = new _1.Computed((value) => __awaiter(this, void 0, void 0, function* () {
+                    gate++;
+                    yield new Promise(resolve => setTimeout(resolve, 50));
+                    let sum = value(a);
+                    yield new Promise(resolve => setTimeout(resolve, 50));
+                    sum += value(b);
+                    return sum;
+                }));
+                assert.strictEqual(yield c.value, 15);
+                c.invalidate();
+                const promise = c.value;
+                yield new Promise(resolve => setTimeout(resolve, 60));
+                a.value = 10;
+                assert.strictEqual(yield promise, 20);
+                assert.strictEqual(gate, 3);
+            });
+        });
+        it('fallback to primitive while computing', function () {
+            return __awaiter(this, void 0, void 0, function* () {
+                const a = new _1.Ref(5);
+                const b = new _1.Ref(10);
+                const c = new _1.Computed((value) => __awaiter(this, void 0, void 0, function* () {
+                    if (value(a) < 10) {
+                        yield new Promise(resolve => setTimeout(resolve, 50));
+                        return value(b) + 5;
+                    }
+                    return 2;
+                }));
+                const promise = c.value;
+                yield new Promise(resolve => setTimeout(resolve, 20));
+                a.value = 10;
+                assert.strictEqual(yield promise, 2);
+            });
+        });
+        it('throw error', function () {
+            return __awaiter(this, void 0, void 0, function* () {
+                const a = new _1.Computed(() => __awaiter(this, void 0, void 0, function* () {
+                    yield new Promise(resolve => setTimeout(resolve));
+                    throw new Error();
+                }));
+                assert.rejects(() => a.value);
+            });
+        });
+        it('dispose computed', function () {
+            return __awaiter(this, void 0, void 0, function* () {
+                const a = new _1.Ref(5);
+                let gate = 0;
+                const b = new _1.Computed(value => {
+                    gate++;
+                    return value(a) + 2;
+                });
+                b.value;
+                assert.strictEqual(gate, 1);
+                b.dispose();
+                a.value = 6;
+                b.value;
+                assert.strictEqual(gate, 1);
+            });
+        });
+    });
+    describe('watcher', function () {
+        it('sync', function () {
+            const a = new _1.Ref(5);
+            new _1.Watcher(a, (newValue, oldValue) => {
+                assert.strictEqual(oldValue, 5);
+                assert.strictEqual(newValue, 6);
+            }, false);
+            a.value = 6;
+        });
+        it('async', function () {
+            return __awaiter(this, void 0, void 0, function* () {
+                const a = new _1.Computed(() => __awaiter(this, void 0, void 0, function* () {
+                    yield new Promise(resolve => setTimeout(resolve));
+                    return 10;
+                }));
+                const result = yield new Promise(resolve => new _1.Watcher(a, resolve));
+                assert.strictEqual(result, 10);
+            });
+        });
+        it('sync cancel', function () {
+            return __awaiter(this, void 0, void 0, function* () {
+                const a = new _1.Ref(5);
+                const b = new _1.Computed((value) => {
+                    return value(a) % 2;
+                });
+                let gate = 0;
+                new _1.Watcher(b, () => {
+                    gate++;
+                }, false);
+                a.value = 6;
+                assert.strictEqual(gate, 1);
+                a.value = 7;
+                a.value = 9;
+                a.value = 11;
+                assert.strictEqual(gate, 2);
+            });
+        });
+        it('async sync cancel', function () {
+            return __awaiter(this, void 0, void 0, function* () {
+                const a = new _1.Ref(5);
+                const b = new _1.Computed((value) => __awaiter(this, void 0, void 0, function* () {
+                    new Promise(resolve => setTimeout(resolve));
+                    return value(a) % 2;
+                }));
+                let gate = 0;
+                new _1.Watcher(b, () => {
+                    gate++;
+                }, false);
+                yield new Promise(resolve => setTimeout(resolve, 10));
+                a.value = 6;
+                yield new Promise(resolve => setTimeout(resolve, 10));
+                assert.strictEqual(gate, 1);
+                a.value = 7;
+                yield new Promise(resolve => setTimeout(resolve, 10));
+                assert.strictEqual(gate, 2);
+                a.value = 9;
+                yield new Promise(resolve => setTimeout(resolve, 10));
+                assert.strictEqual(gate, 3);
+            });
+        });
+    });
+});

package/lib/ref.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const tracker_1 = __importDefault(require("./tracker"));
+class Ref extends tracker_1.default {
+    constructor(_value) {
+        super();
+        this._value = _value;
+    }
+    set value(_value) {
+        const lastValue = this._value;
+        this._value = _value;
+        if (lastValue !== _value) {
+            this.invalidate();
+        }
+    }
+    get value() {
+        return super.value;
+    }
+}
+exports.default = Ref;

package/lib/tracker.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+class Tracker {
+    constructor() {
+        this.dependents = new Set();
+    }
+    addDependent(dependent) {
+        this.dependents.add(dependent);
+    }
+    removeDependent(dependent) {
+        this.dependents.delete(dependent);
+    }
+    invalidate() {
+        for (const dependent of [...this.dependents.keys()]) {
+            dependent.invalidate();
+        }
+    }
+    get value() {
+        return this._value;
+    }
+}
+exports.default = Tracker;

package/lib/watcher.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const tracker_1 = __importDefault(require("./tracker"));
+var WatchState;
+(function (WatchState) {
+    WatchState[WatchState["Uncertain"] = 0] = "Uncertain";
+    WatchState[WatchState["Valid"] = 1] = "Valid";
+})(WatchState || (WatchState = {}));
+;
+class Watcher extends tracker_1.default {
+    constructor(dependency, onChange, immediate = true) {
+        super();
+        this.state = WatchState.Valid;
+        this.onChange = onChange;
+        this.dependency = dependency;
+        dependency.addDependent(this);
+        this._value = dependency.value;
+        if (immediate) {
+            onChange(this._value);
+        }
+    }
+    invalidate() {
+        this.state = WatchState.Uncertain;
+        const oldValue = this._value;
+        this._value = this.dependency.value;
+        if (this.state === WatchState.Uncertain) {
+            this.onChange(this._value, oldValue);
+            this.state = WatchState.Valid;
+        }
+    }
+    validate() {
+        this.state = WatchState.Valid;
+    }
+    dispose() {
+        this.dependency.removeDependent(this);
+    }
+}
+exports.default = Watcher;

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "async-reactivity",
+  "version": "1.0.0",
+  "description": "",
+  "main": "lib/index.ts",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib",
+    "src",
+    "types"
+  ],
+  "scripts": {
+    "dev": "npx tsc -w -p src",
+    "test-dev": "mocha --watch \"./{,!(node_modules)/**/}*.test.js\""
+  },
+  "author": "Donatas Lučiūnas",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/mocha": "^9.1.1",
+    "@types/node": "^17.0.41",
+    "mocha": "^10.0.0",
+    "typescript": "^4.7.3"
+  }
+}