async-reactivity 2.0.2 → 2.0.4

package/lib/computed.js

@@ -10,11 +10,14 @@ var ComputedState;
 class CircularDependencyError extends Error {
 }
 export default class Computed extends Tracker {
+    getter;
+    state = ComputedState.Invalid;
+    dependencies = new Map();
+    computePromise;
+    computePromiseActions;
+    lastComputeAttemptPromise;
     constructor(getter) {
         super();
-        this.state = ComputedState.Invalid;
-        this.dependencies = new Map();
-        this.trackDependency = this.innerTrackDependency.bind(this);
         this.getter = getter;
         this.prepareComputePromise();
     }
@@ -91,6 +94,7 @@ export default class Computed extends Tracker {
         dependency.addDependent(this);
         return dependency.value;
     }
+    trackDependency = this.innerTrackDependency.bind(this);
     finalizeComputing() {
         this.state = ComputedState.Valid;
         this.lastComputeAttemptPromise = undefined;

package/lib/computed.test.js

@@ -1,12 +1,3 @@
-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());
-    });
-};
 import 'mocha';
 import assert from 'assert';
 import { Computed, Ref } from './index.js';
@@ -107,139 +98,119 @@ describe('computed', function () {
     });
 });
 describe('async computed', function () {
-    it('getter', function () {
-        return __awaiter(this, void 0, void 0, function* () {
-            const a = new 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 Ref(5);
-            const b = new 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 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('getter', async function () {
+        const a = new Computed(async () => {
+            await new Promise(resolve => setTimeout(resolve));
+            return 5;
         });
+        assert.strictEqual(await a.value, 5);
     });
-    it('detect circular dependency', function () {
-        return __awaiter(this, void 0, void 0, function* () {
-            // @ts-expect-error
-            const a = new Computed((value) => __awaiter(this, void 0, void 0, function* () {
-                yield new Promise(resolve => setTimeout(resolve));
-                return value(b);
-            }));
-            // @ts-expect-error
-            const b = new 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('dependency changed while computing', function () {
-        return __awaiter(this, void 0, void 0, function* () {
-            const a = new Ref(5);
-            const b = new Computed((value) => __awaiter(this, void 0, void 0, function* () { return value(a) + 5; }));
-            b.value; // trigger compute
-            a.value = 8;
-            assert.strictEqual(yield b.value, 13);
-        });
-    });
-    it('old dependency changed while computing', function () {
-        return __awaiter(this, void 0, void 0, function* () {
-            let gate = 0;
-            const a = new Ref(5);
-            const b = new 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 Ref(5);
-            const b = new Ref(10);
-            const c = new 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 Ref(5);
-            const b = new Ref(10);
-            const c = new 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('tracks async dependencies', async function () {
+        const a = new Ref(5);
+        const b = new Computed(async (value) => {
+            await new Promise(resolve => setTimeout(resolve));
+            return value(a) + 5;
         });
+        assert.strictEqual(await b.value, 10);
+        a.value = 6;
+        assert.strictEqual(await b.value, 11);
     });
-    it('throw error', function () {
-        return __awaiter(this, void 0, void 0, function* () {
-            const a = new 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 Ref(5);
-            let gate = 0;
-            const b = new Computed(value => {
-                gate++;
-                return value(a) + 2;
-            });
-            b.value;
-            assert.strictEqual(gate, 1);
-            b.dispose();
-            b.value;
-            assert.strictEqual(gate, 2);
+    it('get value while computing', async function () {
+        const a = new Computed(async () => {
+            await new Promise(resolve => setTimeout(resolve));
+            return 5;
+        });
+        a.value;
+        assert.strictEqual(await a.value, 5);
+    });
+    it('detect circular dependency', async function () {
+        // @ts-expect-error
+        const a = new Computed(async (value) => {
+            await new Promise(resolve => setTimeout(resolve));
+            return value(b);
+        });
+        // @ts-expect-error
+        const b = new Computed(async (value) => {
+            await new Promise(resolve => setTimeout(resolve));
+            return value(a);
+        });
+        assert.rejects(async () => await a.value);
+    });
+    it('dependency changed while computing', async function () {
+        const a = new Ref(5);
+        const b = new Computed(async (value) => value(a) + 5);
+        b.value; // trigger compute
+        a.value = 8;
+        assert.strictEqual(await b.value, 13);
+    });
+    it('old dependency changed while computing', async function () {
+        let gate = 0;
+        const a = new Ref(5);
+        const b = new Computed(async (value) => {
+            gate++;
+            await new Promise(resolve => setTimeout(resolve));
+            return value(a) + 2;
+        });
+        assert.strictEqual(await b.value, 7);
+        b.invalidate();
+        const promise = b.value;
+        a.value = 6;
+        assert.strictEqual(await promise, 8);
+        assert.strictEqual(gate, 2);
+    });
+    it('new dependency changed while computing', async function () {
+        let gate = 0;
+        const a = new Ref(5);
+        const b = new Ref(10);
+        const c = new Computed(async (value) => {
+            gate++;
+            await new Promise(resolve => setTimeout(resolve, 50));
+            let sum = value(a);
+            await new Promise(resolve => setTimeout(resolve, 50));
+            sum += value(b);
+            return sum;
+        });
+        assert.strictEqual(await c.value, 15);
+        c.invalidate();
+        const promise = c.value;
+        await new Promise(resolve => setTimeout(resolve, 60));
+        a.value = 10;
+        assert.strictEqual(await promise, 20);
+        assert.strictEqual(gate, 3);
+    });
+    it('fallback to primitive while computing', async function () {
+        const a = new Ref(5);
+        const b = new Ref(10);
+        const c = new Computed(async (value) => {
+            if (value(a) < 10) {
+                await new Promise(resolve => setTimeout(resolve, 50));
+                return value(b) + 5;
+            }
+            return 2;
+        });
+        const promise = c.value;
+        await new Promise(resolve => setTimeout(resolve, 20));
+        a.value = 10;
+        assert.strictEqual(await promise, 2);
+    });
+    it('throw error', async function () {
+        const a = new Computed(async () => {
+            await new Promise(resolve => setTimeout(resolve));
+            throw new Error();
         });
+        assert.rejects(() => a.value);
+    });
+    it('dispose computed', async function () {
+        const a = new Ref(5);
+        let gate = 0;
+        const b = new Computed(value => {
+            gate++;
+            return value(a) + 2;
+        });
+        b.value;
+        assert.strictEqual(gate, 1);
+        b.dispose();
+        b.value;
+        assert.strictEqual(gate, 2);
     });
 });

package/lib/index.js

@@ -1,3 +1,4 @@
 export { default as Computed } from './computed.js';
 export { default as Ref } from './ref.js';
 export { default as Watcher } from './watcher.js';
+export { default as Listener } from './listener.js';

package/lib/listener.js

@@ -0,0 +1,36 @@
+import Tracker from "./tracker.js";
+export default class Listener extends Tracker {
+    init;
+    start;
+    stop;
+    listening = false;
+    constructor({ init, start, stop }) {
+        super();
+        this.init = init;
+        this.start = start;
+        this.stop = stop;
+    }
+    addDependent(dependent) {
+        super.addDependent(dependent);
+        if (!this.listening) {
+            this.start((value) => {
+                this._value = value;
+                this.invalidate();
+            });
+            this.listening = true;
+        }
+    }
+    removeDependent(dependent) {
+        super.removeDependent(dependent);
+        if (this.dependents.size === 0) {
+            this.stop();
+            this.listening = false;
+        }
+    }
+    get value() {
+        if (this._value === undefined) {
+            this._value = this.init();
+        }
+        return this._value;
+    }
+}

package/lib/listener.test.js

@@ -0,0 +1,85 @@
+import 'mocha';
+import assert from 'assert';
+import { mock } from 'node:test';
+import { Watcher, Listener } from './index.js';
+describe('listener', function () {
+    it('wait for dependent', function () {
+        assert.doesNotThrow(() => {
+            new Listener({
+                init: () => { throw new Error(); },
+                start: () => { throw new Error(); },
+                stop: () => { throw new Error(); },
+            });
+        });
+    });
+    it('init', function () {
+        const listener = new Listener({
+            init: () => 1,
+            start: () => { throw new Error(); },
+            stop: () => { throw new Error(); },
+        });
+        assert.strictEqual(listener.value, 1);
+    });
+    it('start', async function () {
+        const listener = new Listener({
+            init: () => 1,
+            start: (setter) => {
+                setTimeout(() => {
+                    setter(2);
+                }, 10);
+            },
+            stop: () => { },
+        });
+        const onChange = mock.fn();
+        new Watcher(listener, onChange);
+        assert.strictEqual(onChange.mock.callCount(), 1);
+        assert.deepStrictEqual(onChange.mock.calls[0].arguments, [1]);
+        await new Promise((resolve) => setTimeout(resolve, 20));
+        assert.strictEqual(onChange.mock.callCount(), 2);
+        assert.deepStrictEqual(onChange.mock.calls[1].arguments, [2, 1]);
+    });
+    it('stop', async function () {
+        let gate = false;
+        let timeout;
+        const listener = new Listener({
+            init: () => 1,
+            start: (setter) => {
+                timeout = setTimeout(() => {
+                    gate = true;
+                    setter(2);
+                }, 10);
+            },
+            stop: () => {
+                clearTimeout(timeout);
+            },
+        });
+        const w = new Watcher(listener, () => { });
+        await new Promise((resolve) => setTimeout(resolve, 5));
+        w.dispose();
+        await new Promise((resolve) => setTimeout(resolve, 10));
+        assert.strictEqual(gate, false);
+    });
+    it('stop + start', async function () {
+        let timeout;
+        const listener = new Listener({
+            init: () => 1,
+            start: (setter) => {
+                timeout = setTimeout(() => {
+                    setter(2);
+                }, 10);
+            },
+            stop: () => {
+                clearTimeout(timeout);
+            },
+        });
+        const onChange = mock.fn();
+        const w1 = new Watcher(listener, onChange);
+        assert.strictEqual(onChange.mock.callCount(), 1);
+        await new Promise((resolve) => setTimeout(resolve, 5));
+        w1.dispose();
+        new Watcher(listener, onChange);
+        assert.strictEqual(onChange.mock.callCount(), 2);
+        await new Promise((resolve) => setTimeout(resolve, 15));
+        assert.strictEqual(onChange.mock.callCount(), 3);
+    });
+});

package/lib/ref.js

@@ -1,6 +1,7 @@
 import Tracker from "./tracker.js";
 const defaultIsEqual = (v1, v2) => v1 === v2;
 export default class Ref extends Tracker {
+    isEqual;
     constructor(_value, isEqual = (defaultIsEqual)) {
         super();
         this._value = _value;

package/lib/tracker.js

@@ -1,7 +1,6 @@
 export default class Tracker {
-    constructor() {
-        this.dependents = new Set();
-    }
+    dependents = new Set();
+    _value;
     addDependent(dependent) {
         this.dependents.add(dependent);
     }

package/lib/watcher.js

@@ -6,9 +6,11 @@ var WatchState;
 })(WatchState || (WatchState = {}));
 ;
 export default class Watcher extends Tracker {
+    onChange;
+    dependency;
+    state = WatchState.Valid;
     constructor(dependency, onChange, immediate = true) {
         super();
-        this.state = WatchState.Valid;
         this.onChange = onChange;
         this.dependency = dependency;
         dependency.addDependent(this);
@@ -18,13 +20,18 @@ export default class Watcher extends Tracker {
         }
     }
     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;
+            return;
         }
+        this.state = WatchState.Uncertain;
+        Promise.resolve().then(() => {
+            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;

package/lib/watcher.test.js

@@ -1,12 +1,3 @@
-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());
-    });
-};
 import 'mocha';
 import assert from 'assert';
 import { Computed, Ref, Watcher } from './index.js';
@@ -19,55 +10,68 @@ describe('watcher', function () {
         }, false);
         a.value = 6;
     });
-    it('async', function () {
-        return __awaiter(this, void 0, void 0, function* () {
-            const a = new Computed(() => __awaiter(this, void 0, void 0, function* () {
-                yield new Promise(resolve => setTimeout(resolve));
-                return 10;
-            }));
-            const result = yield new Promise(resolve => new Watcher(a, resolve));
-            assert.strictEqual(result, 10);
+    it('sync debounce', async function () {
+        const a = new Ref(5);
+        let gate = 0;
+        new Watcher(a, () => {
+            gate++;
+        }, false);
+        a.value = 6;
+        await new Promise(resolve => setTimeout(resolve));
+        assert.strictEqual(gate, 1);
+        a.value = 7;
+        a.value = 8;
+        a.value = 9;
+        await new Promise(resolve => setTimeout(resolve));
+        assert.strictEqual(gate, 2);
+    });
+    it('async', async function () {
+        const a = new Computed(async () => {
+            await new Promise(resolve => setTimeout(resolve));
+            return 10;
         });
+        const result = await new Promise(resolve => new Watcher(a, resolve));
+        assert.strictEqual(result, 10);
     });
-    it('sync cancel', function () {
-        return __awaiter(this, void 0, void 0, function* () {
-            const a = new Ref(5);
-            const b = new Computed((value) => {
-                return value(a) % 2;
-            });
-            let gate = 0;
-            new 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('sync cancel', async function () {
+        const a = new Ref(5);
+        const b = new Computed((value) => {
+            return value(a) % 2;
         });
+        let gate = 0;
+        new Watcher(b, () => {
+            gate++;
+        }, false);
+        a.value = 6;
+        await new Promise(resolve => setTimeout(resolve));
+        assert.strictEqual(gate, 1);
+        a.value = 7;
+        a.value = 9;
+        a.value = 11;
+        await new Promise(resolve => setTimeout(resolve));
+        assert.strictEqual(gate, 2);
     });
-    it('async sync cancel', function () {
-        return __awaiter(this, void 0, void 0, function* () {
-            const a = new Ref(5);
-            const b = new Computed((value) => __awaiter(this, void 0, void 0, function* () {
-                new Promise(resolve => setTimeout(resolve));
-                return value(a) % 2;
-            }));
-            let gate = 0;
-            new 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);
+    it('async sync cancel', async function () {
+        const a = new Ref(5);
+        let computedGate = 0;
+        const b = new Computed(async (value) => {
+            computedGate++;
+            new Promise(resolve => setTimeout(resolve));
+            return value(a) % 2;
         });
+        let watcherGate = 0;
+        new Watcher(b, () => {
+            watcherGate++;
+        }, false);
+        await new Promise(resolve => setTimeout(resolve, 10));
+        a.value = 6;
+        await new Promise(resolve => setTimeout(resolve, 10));
+        assert.strictEqual(computedGate, 2);
+        assert.strictEqual(watcherGate, 1);
+        a.value = 7;
+        a.value = 9;
+        await new Promise(resolve => setTimeout(resolve, 10));
+        assert.strictEqual(computedGate, 3);
+        assert.strictEqual(watcherGate, 2);
     });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "async-reactivity",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "",
   "main": "lib/index.js",
   "types": "types/index.d.ts",
@@ -22,9 +22,9 @@
   "author": "Donatas Lučiūnas",
   "license": "ISC",
   "devDependencies": {
-    "@types/mocha": "^10.0.7",
-    "@types/node": "^20.14.10",
-    "mocha": "^10.6.0",
-    "typescript": "^5.5.3"
+    "@types/mocha": "^10.0.8",
+    "@types/node": "^20.14.15",
+    "mocha": "^10.7.3",
+    "typescript": "^5.6.2"
   }
 }

package/src/index.ts

@@ -2,4 +2,5 @@ export { default as Computed, ComputeFunc, ComputeFuncScoped } from './computed.
 export { default as Ref } from './ref.js';
 export { default as Watcher } from './watcher.js';
 export { default as Dependency } from './dependency.js';
-export { default as Dependent } from './dependent.js';
+export { default as Dependent } from './dependent.js';
+export { default as Listener } from './listener.js';

package/src/listener.test.ts

@@ -0,0 +1,106 @@
+import 'mocha';
+import assert from 'assert';
+import { mock } from 'node:test';
+import { Watcher, Listener } from './index.js';
+
+describe('listener', function () {
+    it('wait for dependent', function () {
+        assert.doesNotThrow(() => {
+            new Listener({
+                init: () => { throw new Error(); },
+                start: () => { throw new Error(); },
+                stop: () => { throw new Error(); },
+            });
+        });
+    });
+
+    it('init', function () {
+        const listener = new Listener({
+            init: () => 1,
+            start: () => { throw new Error(); },
+            stop: () => { throw new Error(); },
+        });
+
+        assert.strictEqual(listener.value, 1);
+    });
+
+    it('start', async function () {
+        const listener = new Listener({
+            init: () => 1,
+            start: (setter) => {
+                setTimeout(() => {
+                    setter(2);
+                }, 10);
+            },
+            stop: () => { },
+        });
+
+        const onChange = mock.fn();
+        new Watcher(listener, onChange);
+
+        assert.strictEqual(onChange.mock.callCount(), 1);
+        assert.deepStrictEqual(onChange.mock.calls[0].arguments, [1]);
+
+        await new Promise((resolve) => setTimeout(resolve, 20));
+
+        assert.strictEqual(onChange.mock.callCount(), 2);
+        assert.deepStrictEqual(onChange.mock.calls[1].arguments, [2, 1]);
+    });
+
+    it('stop', async function () {
+        let gate = false;
+        let timeout: NodeJS.Timeout;
+        const listener = new Listener({
+            init: () => 1,
+            start: (setter) => {
+                timeout = setTimeout(() => {
+                    gate = true;
+                    setter(2);
+                }, 10);
+            },
+            stop: () => {
+                clearTimeout(timeout);
+            },
+        });
+
+        const w = new Watcher(listener, () => {});
+
+        await new Promise((resolve) => setTimeout(resolve, 5));
+
+        w.dispose();
+
+        await new Promise((resolve) => setTimeout(resolve, 10));
+
+        assert.strictEqual(gate, false);
+    });
+
+    it('stop + start', async function () {
+        let timeout: NodeJS.Timeout;
+        const listener = new Listener({
+            init: () => 1,
+            start: (setter) => {
+                timeout = setTimeout(() => {
+                    setter(2);
+                }, 10);
+            },
+            stop: () => {
+                clearTimeout(timeout);
+            },
+        });
+
+        const onChange = mock.fn();
+        const w1 = new Watcher(listener, onChange);
+        assert.strictEqual(onChange.mock.callCount(), 1);
+
+        await new Promise((resolve) => setTimeout(resolve, 5));
+
+        w1.dispose();
+
+        new Watcher(listener, onChange);
+        assert.strictEqual(onChange.mock.callCount(), 2);
+
+        await new Promise((resolve) => setTimeout(resolve, 15));
+
+        assert.strictEqual(onChange.mock.callCount(), 3);
+    });
+});

package/src/listener.ts

@@ -0,0 +1,44 @@
+import Dependency from "./dependency.js";
+import Dependent from "./dependent.js";
+import Tracker from "./tracker.js";
+
+export default class Listener<T> extends Tracker<T> implements Dependency<T> {
+    private init: () => T;
+    private start: (setter: (value: T) => void) => void;
+    private stop: () => void;
+    private listening = false;
+
+    constructor({ init, start, stop }: { init: () => T, start: (setter: (value: T) => void) => void, stop: () => void }) {
+        super();
+
+        this.init = init;
+        this.start = start;
+        this.stop = stop;
+    }
+
+    public addDependent(dependent: Dependent): void {
+        super.addDependent(dependent);
+        if (!this.listening) {
+            this.start((value) => {
+                this._value = value;
+                this.invalidate();
+            });
+            this.listening = true;
+        }
+    }
+
+    public removeDependent(dependent: Dependent): void {
+        super.removeDependent(dependent);
+        if (this.dependents.size === 0) {
+            this.stop();
+            this.listening = false;
+        }
+    }
+
+    public get value() {
+        if (this._value === undefined) {
+            this._value = this.init();
+        }
+        return this._value;
+    }
+}

package/src/tracker.ts

@@ -1,7 +1,4 @@
-import Computed from "./computed.js";
-import Watcher from "./watcher.js";
-
-type Dependent = Computed<any> | Watcher<any>;
+import Dependent from "./dependent.js";
 
 export default class Tracker<T> {
     protected dependents = new Set<Dependent>();

package/src/tsconfig.json

@@ -9,7 +9,7 @@
     // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
     /* Language and Environment */
-    "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "target": "ESNext", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */

package/src/watcher.test.ts

@@ -12,6 +12,22 @@ describe('watcher', function () {
         a.value = 6;
     });
 
+    it('sync debounce', async function () {
+        const a = new Ref(5);
+        let gate = 0;
+        new Watcher(a, () => {
+            gate++;
+        }, false);
+        a.value = 6;
+        await new Promise(resolve => setTimeout(resolve));
+        assert.strictEqual(gate, 1);
+        a.value = 7;
+        a.value = 8;
+        a.value = 9;
+        await new Promise(resolve => setTimeout(resolve));
+        assert.strictEqual(gate, 2);
+    });
+
     it('async', async function () {
         const a = new Computed(async () => {
             await new Promise(resolve => setTimeout(resolve));
@@ -31,32 +47,36 @@ describe('watcher', function () {
             gate++;
         }, false);
         a.value = 6;
+        await new Promise(resolve => setTimeout(resolve));
         assert.strictEqual(gate, 1);
         a.value = 7;
         a.value = 9;
         a.value = 11;
+        await new Promise(resolve => setTimeout(resolve));
         assert.strictEqual(gate, 2);
     });
 
     it('async sync cancel', async function () {
         const a = new Ref(5);
+        let computedGate = 0;
         const b = new Computed(async (value) => {
+            computedGate++;
             new Promise(resolve => setTimeout(resolve));
             return value(a) % 2;
         });
-        let gate = 0;
+        let watcherGate = 0;
         new Watcher(b, () => {
-            gate++;
+            watcherGate++;
         }, false);
         await new Promise(resolve => setTimeout(resolve, 10));
         a.value = 6;
         await new Promise(resolve => setTimeout(resolve, 10));
-        assert.strictEqual(gate, 1);
+        assert.strictEqual(computedGate, 2);
+        assert.strictEqual(watcherGate, 1);
         a.value = 7;
-        await new Promise(resolve => setTimeout(resolve, 10));
-        assert.strictEqual(gate, 2);
         a.value = 9;
         await new Promise(resolve => setTimeout(resolve, 10));
-        assert.strictEqual(gate, 3);
+        assert.strictEqual(computedGate, 3);
+        assert.strictEqual(watcherGate, 2);
     });
 });

package/src/watcher.ts

@@ -28,13 +28,18 @@ export default class Watcher<T> extends Tracker<T> implements Dependent {
     }
 
     public 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;
+            return;
         }
+        this.state = WatchState.Uncertain;
+        Promise.resolve().then(() => {
+            const oldValue = this._value;
+            this._value = this.dependency.value;
+            if (this.state === WatchState.Uncertain) {
+                this.onChange(this._value, oldValue);
+                this.state = WatchState.Valid;
+            }
+        });
     }
 
     public validate() {

package/types/index.d.ts

@@ -3,4 +3,5 @@ export { default as Ref } from './ref.js';
 export { default as Watcher } from './watcher.js';
 export { default as Dependency } from './dependency.js';
 export { default as Dependent } from './dependent.js';
+export { default as Listener } from './listener.js';
 //# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC"}

package/types/listener.d.ts

@@ -0,0 +1,18 @@
+import Dependency from "./dependency.js";
+import Dependent from "./dependent.js";
+import Tracker from "./tracker.js";
+export default class Listener<T> extends Tracker<T> implements Dependency<T> {
+    private init;
+    private start;
+    private stop;
+    private listening;
+    constructor({ init, start, stop }: {
+        init: () => T;
+        start: (setter: (value: T) => void) => void;
+        stop: () => void;
+    });
+    addDependent(dependent: Dependent): void;
+    removeDependent(dependent: Dependent): void;
+    get value(): T;
+}
+//# sourceMappingURL=listener.d.ts.map

package/types/listener.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"listener.d.ts","sourceRoot":"","sources":["../src/listener.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,iBAAiB,CAAC;AACzC,OAAO,SAAS,MAAM,gBAAgB,CAAC;AACvC,OAAO,OAAO,MAAM,cAAc,CAAC;AAEnC,MAAM,CAAC,OAAO,OAAO,QAAQ,CAAC,CAAC,CAAE,SAAQ,OAAO,CAAC,CAAC,CAAE,YAAW,UAAU,CAAC,CAAC,CAAC;IACxE,OAAO,CAAC,IAAI,CAAU;IACtB,OAAO,CAAC,KAAK,CAAuC;IACpD,OAAO,CAAC,IAAI,CAAa;IACzB,OAAO,CAAC,SAAS,CAAS;gBAEd,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC,CAAC;QAAC,KAAK,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,KAAK,IAAI,CAAC;QAAC,IAAI,EAAE,MAAM,IAAI,CAAA;KAAE;IAQ5G,YAAY,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI;IAWxC,eAAe,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI;IAQlD,IAAW,KAAK,MAKf;CACJ"}

package/types/listener.test.d.ts

@@ -0,0 +1,2 @@
+import 'mocha';
+//# sourceMappingURL=listener.test.d.ts.map

package/types/listener.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"listener.test.d.ts","sourceRoot":"","sources":["../src/listener.test.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,CAAC"}

package/types/tracker.d.ts

@@ -1,6 +1,4 @@
-import Computed from "./computed.js";
-import Watcher from "./watcher.js";
-type Dependent = Computed<any> | Watcher<any>;
+import Dependent from "./dependent.js";
 export default class Tracker<T> {
     protected dependents: Set<Dependent>;
     protected _value?: T;
@@ -9,5 +7,4 @@ export default class Tracker<T> {
     invalidate(): void;
     get value(): T | undefined;
 }
-export {};
 //# sourceMappingURL=tracker.d.ts.map

package/types/tracker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tracker.d.ts","sourceRoot":"","sources":["../src/tracker.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,OAAO,MAAM,cAAc,CAAC;AAEnC,KAAK,SAAS,GAAG,QAAQ,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC;AAE9C,MAAM,CAAC,OAAO,OAAO,OAAO,CAAC,CAAC;IAC1B,SAAS,CAAC,UAAU,iBAAwB;IAC5C,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAEd,YAAY,CAAC,SAAS,EAAE,SAAS;IAIjC,eAAe,CAAC,SAAS,EAAE,SAAS;IAIpC,UAAU,IAAI,IAAI;IAMzB,IAAW,KAAK,kBAEf;CACJ"}
+{"version":3,"file":"tracker.d.ts","sourceRoot":"","sources":["../src/tracker.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,gBAAgB,CAAC;AAEvC,MAAM,CAAC,OAAO,OAAO,OAAO,CAAC,CAAC;IAC1B,SAAS,CAAC,UAAU,iBAAwB;IAC5C,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAEd,YAAY,CAAC,SAAS,EAAE,SAAS;IAIjC,eAAe,CAAC,SAAS,EAAE,SAAS;IAIpC,UAAU,IAAI,IAAI;IAMzB,IAAW,KAAK,kBAEf;CACJ"}

package/types/watcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"watcher.d.ts","sourceRoot":"","sources":["../src/watcher.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,iBAAiB,CAAC;AACzC,OAAO,SAAS,MAAM,gBAAgB,CAAC;AACvC,OAAO,OAAO,MAAM,cAAc,CAAC;AAOnC,KAAK,YAAY,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;AAE3D,MAAM,CAAC,OAAO,OAAO,OAAO,CAAC,CAAC,CAAE,SAAQ,OAAO,CAAC,CAAC,CAAE,YAAW,SAAS;IAEnE,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,UAAU,CAAgB;IAClC,OAAO,CAAC,KAAK,CAAoB;gBAErB,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,SAAS,GAAE,OAAc;IAYpF,UAAU;IAUV,QAAQ;IAIR,OAAO;CAGjB"}
+{"version":3,"file":"watcher.d.ts","sourceRoot":"","sources":["../src/watcher.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,iBAAiB,CAAC;AACzC,OAAO,SAAS,MAAM,gBAAgB,CAAC;AACvC,OAAO,OAAO,MAAM,cAAc,CAAC;AAOnC,KAAK,YAAY,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;AAE3D,MAAM,CAAC,OAAO,OAAO,OAAO,CAAC,CAAC,CAAE,SAAQ,OAAO,CAAC,CAAC,CAAE,YAAW,SAAS;IAEnE,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,UAAU,CAAgB;IAClC,OAAO,CAAC,KAAK,CAAoB;gBAErB,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,SAAS,GAAE,OAAc;IAYpF,UAAU;IAeV,QAAQ;IAIR,OAAO;CAGjB"}