@esportsplus/reactivity 0.39.2 → 0.41.0

package/src/compiler/index.ts

@@ -9,6 +9,11 @@ import primitives from './primitives';
 import scope from './bindings';
 
 
+// A binding from this package is only ever reached through an import, so a module without one has
+// nothing to compile and is not resolved at all
+const REGEX_IMPORT = /\bimport\b|\brequire\s*\(/;
+
+
 // Every use the compiler cannot lower fails the build, all of them reported at once: shipping one
 // would leave an uncompiled reactive() or an unread signal in the output
 function failed(sourceFile: ts.SourceFile, failures: Failure[]): Error {
@@ -64,13 +69,14 @@ function isLowered(site: ts.Node): boolean {
 }
 
 
-// `reactive`, or the member access naming it (`ns.reactive`, `ns['reactive']`)
+// `reactive`, or the member access naming it (`ns.reactive`, `ns['reactive']`); in `list[reactive]`
+// the key is the use
 function siteOf(identifier: ts.Node): ts.Node {
     let parent = identifier.parent!;
 
     if (
         (ts.isPropertyAccessExpression(parent) && parent.name === identifier) ||
-        (ts.isElementAccessExpression(parent) && parent.argumentExpression === identifier)
+        (ts.isElementAccessExpression(parent) && parent.argumentExpression === identifier && (ts.isStringLiteral(identifier) || ts.isNoSubstitutionTemplateLiteral(identifier)))
     ) {
         return parent;
     }
@@ -79,34 +85,30 @@ function siteOf(identifier: ts.Node): ts.Node {
 }
 
 
-// No text patterns: a module can reach `reactive`, or read a reactive binding, under any name
-// (a barrel's rename, a default re-export, a namespace), so every module is resolved against the
-// program and compiled exactly where its values resolve to reactive declarations
+// No name patterns: a module can reach `reactive`, or read a reactive binding, under any name
+// (a barrel's rename, a default re-export, a namespace), so every module that imports anything is
+// resolved against the program and compiled exactly where its values resolve to reactive declarations
 export default {
+    name: PACKAGE_NAME,
     transform: (ctx: TransformContext) => {
+        if (!REGEX_IMPORT.test(ctx.code)) {
+            return {};
+        }
+
         let { checker, program, sourceFile } = ctx,
             bindings = scope.create(checker, program, sourceFile),
-            calls = new Set<ts.Node>(),
+            calls = new Set<ts.CallExpression>(),
             dependencies = new Set<string>(),
+            entries = new Set<ts.Node>(),
             failures: Failure[] = [],
             self = sourceFile.fileName.toLowerCase();
 
         for (let [identifier, found] of bindings.origins) {
-            let entry = scope.holds(bindings, found);
-
-            if (!entry && scope.kind(bindings, found) === null) {
+            if (!scope.holds(bindings, found)) {
                 continue;
             }
 
-            for (let file of [...found.through, found.declaration.path]) {
-                if (file.toLowerCase() !== self) {
-                    dependencies.add(file);
-                }
-            }
-
-            if (!entry) {
-                continue;
-            }
+            entries.add(identifier);
 
             let site = siteOf(identifier),
                 parent = site.parent;
@@ -126,7 +128,22 @@ export default {
             }
         }
 
-        let isReactiveCall = (node: ts.Node): node is ts.CallExpression => calls.has(node),
+        // Every call is known before any binding is classified, so their argument types arrive in one request
+        scope.prefetch(bindings, [...calls]);
+
+        for (let [identifier, found] of bindings.origins) {
+            if (!entries.has(identifier) && scope.kind(bindings, found) === null) {
+                continue;
+            }
+
+            for (let file of [...found.through, found.declaration.path]) {
+                if (file.toLowerCase() !== self) {
+                    dependencies.add(file);
+                }
+            }
+        }
+
+        let isReactiveCall = (node: ts.Node): node is ts.CallExpression => calls.has(node as ts.CallExpression),
             intents = {
                 imports: [] as ImportIntent[],
                 prepend: [] as string[],
@@ -179,7 +196,7 @@ export default {
             }
 
             intents.replacements.push({
-                generate: () => `${NAMESPACE}.reactive(${call.arguments.map(a => a.getText(sourceFile)).join(', ')})`,
+                generate: (_sourceFile, text) => `${NAMESPACE}.reactive(${call.arguments.map(text).join(', ')})`,
                 node: call
             });
         }

package/src/compiler/object.ts

@@ -9,7 +9,7 @@ interface AnalyzedProperty {
     isStatic: boolean;
     key: string;
     type: TYPES;
-    valueText: string;
+    value: ts.Expression;
 }
 
 type ObjectTransformResult = {
@@ -34,8 +34,6 @@ interface VisitContext {
 
 
 function analyzeProperty(prop: ts.ObjectLiteralElementLike, bindings: Bindings): AnalyzedProperty | null {
-    let sourceFile = bindings.sourceFile;
-
     if (!ts.isPropertyAssignment(prop)) {
         return null;
     }
@@ -50,8 +48,7 @@ function analyzeProperty(prop: ts.ObjectLiteralElementLike, bindings: Bindings):
     }
 
     let unwrapped = prop.initializer,
-        value = unwrapped,
-        valueText = value.getText(sourceFile);
+        value = unwrapped;
 
     while (ts.isAsExpression(unwrapped) || ts.isTypeAssertion(unwrapped) || ts.isParenthesizedExpression(unwrapped)) {
         unwrapped = unwrapped.expression;
@@ -68,12 +65,12 @@ function analyzeProperty(prop: ts.ObjectLiteralElementLike, bindings: Bindings):
                 type.typeName.text === 'Array'
             )
         ) {
-            return { isStatic: false, key, type: TYPES.Array, valueText };
+            return { isStatic: false, key, type: TYPES.Array, value };
         }
     }
 
     if (ts.isArrowFunction(unwrapped) || ts.isFunctionExpression(unwrapped)) {
-        return { isStatic: false, key, type: TYPES.Computed, valueText };
+        return { isStatic: false, key, type: TYPES.Computed, value };
     }
 
     if (ts.isArrayLiteralExpression(unwrapped)) {
@@ -86,7 +83,7 @@ function analyzeProperty(prop: ts.ObjectLiteralElementLike, bindings: Bindings):
             }
         }
 
-        return { isStatic, key, type: TYPES.Array, valueText };
+        return { isStatic, key, type: TYPES.Array, value };
     }
 
     // A non-literal array is typed Reactive<T[]> on the object, so it must become a ReactiveArray
@@ -94,18 +91,18 @@ function analyzeProperty(prop: ts.ObjectLiteralElementLike, bindings: Bindings):
     let type = isStaticValue(unwrapped) ? undefined : bindings.checker.getTypeAtLocation(value);
 
     if (type && (bindings.checker.isArrayType(type) || bindings.checker.isTupleType(type))) {
-        return { isStatic: false, key, type: TYPES.Array, valueText };
+        return { isStatic: false, key, type: TYPES.Array, value };
     }
 
     return {
         isStatic: isStaticValue(value),
         key,
         type: TYPES.Signal,
-        valueText
+        value
     };
 }
 
-function buildClassCode(classname: string, properties: AnalyzedProperty[], typehint: string | null): string {
+function buildClassCode(classname: string, properties: AnalyzedProperty[], sourceFile: ts.SourceFile, typehint: string | null): string {
     let accessors: string[] = [],
         body: string[] = [],
         constraint: string[] = [],
@@ -115,7 +112,7 @@ function buildClassCode(classname: string, properties: AnalyzedProperty[], typeh
         setters = 0;
 
     for (let i = 0, n = properties.length; i < n; i++) {
-        let { isStatic, key, type, valueText } = properties[i],
+        let { isStatic, key, type, value: initializer } = properties[i],
             generic = typehint ? `T['${key}']` : `T${parameters.length}`,
             parameter = `_p${parameters.length}`;
 
@@ -137,7 +134,8 @@ function buildClassCode(classname: string, properties: AnalyzedProperty[], typeh
                         ${NAMESPACE}.write(this.#${key}, ${value});
                     }
                 `);
-                fields.push(`#${key} = this[${NAMESPACE}.SIGNAL](${valueText});`);
+                // A static value is a literal, which no plugin rewrites, so its source is the output
+                fields.push(`#${key} = this[${NAMESPACE}.SIGNAL](${initializer.getText(sourceFile)});`);
             }
             else {
                 accessors.push(`
@@ -286,13 +284,13 @@ export default (sourceFile: ts.SourceFile, bindings: Bindings, isReactiveCall: I
         let call = ctx.calls[i],
             typehint = call.typehint;
 
-        prepend.push(buildClassCode(call.classname, call.properties, typehint));
+        prepend.push(buildClassCode(call.classname, call.properties, sourceFile, typehint));
         replacements.push({
-            generate: () => {
+            generate: (_sourceFile, text) => {
                 // Every property but a static signal (baked into its field) is a constructor parameter
                 let args = call.properties
                     .filter(({ isStatic, type }) => typehint || !isStatic || type !== TYPES.Signal)
-                    .map(p => p.valueText)
+                    .map(p => text(p.value))
                     .join(', ');
 
                 return typehint

package/src/compiler/primitives.ts

@@ -144,13 +144,14 @@ function isPatternTarget(node: ts.Node): boolean {
         ((ts.isForOfStatement(parent) || ts.isForInStatement(parent)) && parent.initializer === current);
 }
 
-// A binding read as `ns.count` / `ns['count']` is rewritten as a whole
+// A binding read as `ns.count` / `ns['count']` is rewritten as a whole; in `list[count]` the key is
+// the read
 function readNode(identifier: ts.Node): ts.Expression {
     let parent = identifier.parent!;
 
     if (
         (ts.isPropertyAccessExpression(parent) && parent.name === identifier) ||
-        (ts.isElementAccessExpression(parent) && parent.argumentExpression === identifier)
+        (ts.isElementAccessExpression(parent) && parent.argumentExpression === identifier && (ts.isStringLiteral(identifier) || ts.isNoSubstitutionTemplateLiteral(identifier)))
     ) {
         return parent;
     }
@@ -175,11 +176,13 @@ function reference(ctx: TransformContext, node: ts.Expression, kind: TYPES): voi
         return;
     }
 
-    let text = node.getText(ctx.bindings.sourceFile);
+    // The binding itself (`count`, `ns.count`, `ns['count']`) holds nothing another rewrite replaces,
+    // so its source is copied as is: text() walks the file's intents on every call
+    let binding = node.getText(ctx.bindings.sourceFile);
 
     if (ts.isShorthandPropertyAssignment(parent)) {
         ctx.replacements.push({
-            generate: () => `${text}: ${NAMESPACE}.read(${text})`,
+            generate: () => `${binding}: ${NAMESPACE}.read(${binding})`,
             node: parent
         });
 
@@ -208,7 +211,7 @@ function reference(ctx: TransformContext, node: ts.Expression, kind: TYPES): voi
 
     if (!writeCtx) {
         ctx.replacements.push({
-            generate: () => `${NAMESPACE}.read(${text})`,
+            generate: () => `${NAMESPACE}.read(${binding})`,
             node
         });
 
@@ -224,7 +227,7 @@ function reference(ctx: TransformContext, node: ts.Expression, kind: TYPES): voi
         let right = parent.right;
 
         ctx.replacements.push({
-            generate: (sf) => `${NAMESPACE}.write(${text}, ${right.getText(sf)})`,
+            generate: (_sourceFile, text) => `${NAMESPACE}.write(${binding}, ${text(right)})`,
             node: parent
         });
     }
@@ -233,7 +236,7 @@ function reference(ctx: TransformContext, node: ts.Expression, kind: TYPES): voi
             right = parent.right;
 
         ctx.replacements.push({
-            generate: (sf) => `${NAMESPACE}.write(${text}, ${text}.value ${op} ${right.getText(sf)})`,
+            generate: (_sourceFile, text) => `${NAMESPACE}.write(${binding}, ${binding}.value ${op} ${text(right)})`,
             node: parent
         });
     }
@@ -243,13 +246,13 @@ function reference(ctx: TransformContext, node: ts.Expression, kind: TYPES): voi
 
         if (ts.isExpressionStatement(unary.parent)) {
             ctx.replacements.push({
-                generate: () => `${NAMESPACE}.write(${text}, ${text}.value ${delta})`,
+                generate: () => `${NAMESPACE}.write(${binding}, ${binding}.value ${delta})`,
                 node: unary
             });
         }
         else if (ts.isPrefixUnaryExpression(unary)) {
             ctx.replacements.push({
-                generate: () => `(${NAMESPACE}.write(${text}, ${text}.value ${delta}), ${text}.value)`,
+                generate: () => `(${NAMESPACE}.write(${binding}, ${binding}.value ${delta}), ${binding}.value)`,
                 node: unary
             });
         }
@@ -257,7 +260,7 @@ function reference(ctx: TransformContext, node: ts.Expression, kind: TYPES): voi
             let tmp = `_t${ctx.tmpCounter++}`;
 
             ctx.replacements.push({
-                generate: () => `((${tmp}) => (${NAMESPACE}.write(${text}, ${tmp} ${delta}), ${tmp}))(${text}.value)`,
+                generate: () => `((${tmp}) => (${NAMESPACE}.write(${binding}, ${tmp} ${delta}), ${tmp}))(${binding}.value)`,
                 node: unary
             });
         }

package/src/constants.ts

@@ -32,6 +32,9 @@ const STATE_ERROR = 1 << 5;
 
 const STATE_EFFECT = 1 << 6;
 
+// Set by dispose(): a node that can never run or own anything again
+const STATE_DISPOSED = 1 << 7;
+
 const STATE_NOTIFY_MASK = (STATE_CHECK | STATE_DIRTY);
 
 
@@ -41,5 +44,5 @@ export {
     REACTIVE_ARRAY, REACTIVE_OBJECT,
     SIGNAL,
     STABILIZER_DEFERRED, STABILIZER_IDLE, STABILIZER_RESCHEDULE, STABILIZER_RUNNING, STABILIZER_SCHEDULED,
-    STATE_CHECK, STATE_COMPUTED, STATE_DIRTY, STATE_EFFECT, STATE_ERROR, STATE_IN_HEAP, STATE_NOTIFY_MASK, STATE_RECOMPUTING
+    STATE_CHECK, STATE_COMPUTED, STATE_DIRTY, STATE_DISPOSED, STATE_EFFECT, STATE_ERROR, STATE_IN_HEAP, STATE_NOTIFY_MASK, STATE_RECOMPUTING
 };

package/src/index.ts

@@ -1,5 +1,6 @@
 export { isPromise } from '@esportsplus/utilities';
 export { COMPUTED, REACTIVE_ARRAY, REACTIVE_OBJECT, SIGNAL } from './constants';
 export { default as reactive, ReactiveArray, ReactiveObject } from './reactive';
+export type { ArrayOp } from './reactive/array';
 export * from './system';
 export * from './types';

package/src/reactive/array.ts

@@ -1,11 +1,27 @@
 import { isArray } from '@esportsplus/utilities';
-import { PACKAGE_NAME, REACTIVE_ARRAY } from '~/constants';
-import { read, signal, write } from '~/system';
-import type { Signal } from '~/types';
+import { PACKAGE_NAME, REACTIVE_ARRAY } from '../constants';
+import { effect, read, root, signal, write } from '../system';
 import { isReactiveObject } from './object';
-
+import type { Signal } from '../types';
+
+
+// One mutation as the batch event reports it: the matching event's payload, named by 'op'
+type ArrayOp<T> =
+    | { items: T[]; op: 'concat' }
+    | { deleteCount: number; items: T[]; op: 'splice'; start: number }
+    | { items: T[]; op: 'push' }
+    | { index: number; item: T; op: 'set' }
+    | { items: T[]; op: 'unshift' }
+    | { op: 'clear' }
+    | { item: T; op: 'pop' }
+    | { op: 'reverse' }
+    | { item: T; op: 'shift' }
+    | { op: 'sort'; order: number[] };
 
 type Events<T> = {
+    // Every mutation of a task, in order, delivered once inside the reactivity pass that follows it (flush() settles
+    // it); a clear drops the mutations before it
+    batch: ArrayOp<T>[];
     clear: undefined,
     concat: {
         items: T[];
@@ -60,6 +76,11 @@ class ReactiveArray<T> extends Array<T> {
 
     private _length: Signal<number>;
 
+    // The batch listeners' delivery: the mutations not yet delivered, and the effect that delivers them
+    private batched: { ops: ArrayOp<T>[] | null; stop: VoidFunction; tick: Signal<number> } | null = null;
+
+    private delivering = false;
+
     listeners: Listeners<T> = {};
 
 
@@ -110,14 +131,95 @@ class ReactiveArray<T> extends Array<T> {
         }
 
         this.dispatch('set', { index: i, item: value });
+        this.record({ index: i, item: value, op: 'set' });
         dispose(prev);
     }
 
 
+    // Starts delivering batches: an effect of its own, outside any owner, since the array outlives whoever listens
+    private batch() {
+        let tick = signal(0);
+
+        this.batched = {
+            ops: null,
+            stop: root(() => effect(() => {
+                read(tick);
+
+                let batched = this.batched,
+                    ops = batched?.ops;
+
+                if (!ops) {
+                    return;
+                }
+
+                batched!.ops = null;
+                this.delivering = true;
+
+                try {
+                    // What listeners build belongs to them, not to this effect
+                    root(() => this.dispatch('batch', ops));
+                }
+                finally {
+                    this.delivering = false;
+                }
+
+                // Disposing this effect inside its own run corrupts its dependency links, so the stop waits for the
+                // run to end; a listener that joins meanwhile keeps it
+                if (this.listeners.batch === undefined) {
+                    queueMicrotask(() => {
+                        if (this.listeners.batch === undefined) {
+                            this.unbatch();
+                        }
+                    });
+                }
+            })),
+            tick
+        };
+    }
+
+    // Trims trailing empty slots; an event left with no listeners is deleted, so e.g. sort() skips computing its order
+    private prune<K extends keyof Events<T>>(event: K, listeners: (AnyListener<T> | null)[]) {
+        while (listeners.length && listeners[listeners.length - 1] === null) {
+            listeners.pop();
+        }
+
+        if (listeners.length === 0 && this.listeners[event] === listeners) {
+            delete this.listeners[event];
+        }
+    }
+
+    private record(op: ArrayOp<T>) {
+        let batched = this.batched;
+
+        if (batched === null) {
+            return;
+        }
+
+        if (op.op === 'clear' || batched.ops === null) {
+            batched.ops = [op];
+        }
+        else {
+            batched.ops.push(op);
+        }
+
+        write(batched.tick, batched.tick.value + 1);
+    }
+
+    private unbatch() {
+        let batched = this.batched;
+
+        if (batched !== null) {
+            this.batched = null;
+            batched.stop();
+        }
+    }
+
+
     clear() {
         this.dispose();
         write(this._length, 0);
         this.dispatch('clear');
+        this.record({ op: 'clear' });
     }
 
     concat(...items: ConcatArray<T>[]): ReactiveArray<T>;
@@ -143,6 +245,7 @@ class ReactiveArray<T> extends Array<T> {
         if (added.length) {
             write(this._length, this.length);
             this.dispatch('concat', { items: added });
+            this.record({ items: added, op: 'concat' });
         }
 
         return this;
@@ -185,6 +288,10 @@ class ReactiveArray<T> extends Array<T> {
             this.prune(event, listeners);
         }
 
+        if (event === 'batch' && !this.delivering && this.listeners.batch === undefined) {
+            this.unbatch();
+        }
+
         if (errors !== null) {
             let error = errors.length === 1
                 ? errors[0]
@@ -210,6 +317,10 @@ class ReactiveArray<T> extends Array<T> {
         let entry = listener as AnyListener<T>,
             listeners = this.listeners[event];
 
+        if (event === 'batch' && this.batched === null) {
+            this.batch();
+        }
+
         if (listeners === undefined) {
             this.listeners[event] = [entry];
         }
@@ -248,6 +359,10 @@ class ReactiveArray<T> extends Array<T> {
                 current[i] = null;
                 this.prune(event, current);
             }
+
+            if (event === 'batch' && !this.delivering && this.listeners.batch === undefined) {
+                this.unbatch();
+            }
         };
     }
 
@@ -257,17 +372,6 @@ class ReactiveArray<T> extends Array<T> {
         return this.on(event, listener);
     }
 
-    // Trims trailing empty slots; an event left with no listeners is deleted, so e.g. sort() skips computing its order
-    private prune<K extends keyof Events<T>>(event: K, listeners: (AnyListener<T> | null)[]) {
-        while (listeners.length && listeners[listeners.length - 1] === null) {
-            listeners.pop();
-        }
-
-        if (listeners.length === 0 && this.listeners[event] === listeners) {
-            delete this.listeners[event];
-        }
-    }
-
     pop() {
         if (this.length === 0) {
             return undefined;
@@ -278,6 +382,7 @@ class ReactiveArray<T> extends Array<T> {
         dispose(item);
         write(this._length, this.length);
         this.dispatch('pop', { item });
+        this.record({ item, op: 'pop' });
 
         return item;
     }
@@ -292,6 +397,7 @@ class ReactiveArray<T> extends Array<T> {
         write(this._length, length);
 
         this.dispatch('push', { items });
+        this.record({ items, op: 'push' });
 
         return length;
     }
@@ -299,6 +405,7 @@ class ReactiveArray<T> extends Array<T> {
     reverse() {
         super.reverse();
         this.dispatch('reverse');
+        this.record({ op: 'reverse' });
 
         return this;
     }
@@ -313,16 +420,18 @@ class ReactiveArray<T> extends Array<T> {
         dispose(item);
         write(this._length, this.length);
         this.dispatch('shift', { item });
+        this.record({ item, op: 'shift' });
 
         return item;
     }
 
     sort(fn?: (a: T, b: T) => number) {
-        if (this.listeners.sort === undefined) {
+        if (this.listeners.sort === undefined && this.batched === null) {
             super.sort(fn);
         }
         else {
             let n = this.length,
+                // oxlint-disable-next-line unicorn/no-new-array -- preallocated to n, every slot is written next
                 before = new Array(n) as T[];
 
             for (let i = 0; i < n; i++) {
@@ -332,6 +441,7 @@ class ReactiveArray<T> extends Array<T> {
             super.sort(fn);
 
             let buckets = new Map<T, { indices: number[]; next: number }>(),
+                // oxlint-disable-next-line unicorn/no-new-array -- preallocated to n, every slot is written next
                 order = new Array(n);
 
             for (let i = 0; i < n; i++) {
@@ -353,6 +463,7 @@ class ReactiveArray<T> extends Array<T> {
             }
 
             this.dispatch('sort', { order });
+            this.record({ op: 'sort', order });
         }
 
         return this;
@@ -371,13 +482,11 @@ class ReactiveArray<T> extends Array<T> {
 
             // Listeners receive the position and count Array.prototype.splice actually applied
             // (negative, fractional and out-of-range arguments resolved), never the raw arguments
-            let index = Math.trunc(start) || 0;
+            let index = Math.trunc(start) || 0,
+                resolved = index < 0 ? Math.max(length + index, 0) : Math.min(index, length);
 
-            this.dispatch('splice', {
-                deleteCount: removed.length,
-                items,
-                start: index < 0 ? Math.max(length + index, 0) : Math.min(index, length)
-            });
+            this.dispatch('splice', { deleteCount: removed.length, items, start: resolved });
+            this.record({ deleteCount: removed.length, items, op: 'splice', start: resolved });
         }
 
         return removed;
@@ -392,6 +501,7 @@ class ReactiveArray<T> extends Array<T> {
 
         write(this._length, length);
         this.dispatch('unshift', { items });
+        this.record({ items, op: 'unshift' });
 
         return length;
     }
@@ -401,3 +511,4 @@ Object.defineProperty(ReactiveArray.prototype, REACTIVE_ARRAY, { value: true });
 
 
 export { ReactiveArray };
+export type { ArrayOp };

package/src/reactive/index.ts

@@ -1,9 +1,9 @@
 import { isArray, isObject } from '@esportsplus/utilities';
-import { PACKAGE_NAME } from '~/constants';
-import { onCleanup, root } from '~/system';
-import type { Reactive } from '~/types';
+import { PACKAGE_NAME } from '../constants';
+import { onCleanup, root } from '../system';
 import { ReactiveArray } from './array';
 import { ReactiveObject } from './object';
+import type { Reactive } from '../types';
 
 
 type Guard<T> =

package/src/reactive/object.ts

@@ -1,8 +1,8 @@
 import { defineProperty, isArray } from '@esportsplus/utilities';
-import { COMPUTED, REACTIVE_ARRAY, REACTIVE_OBJECT, SIGNAL } from '~/constants';
-import { computed, dispose, read, root, signal, write } from '~/system';
-import { Computed } from '~/types';
+import { COMPUTED, REACTIVE_ARRAY, REACTIVE_OBJECT, SIGNAL } from '../constants';
+import { computed, dispose, read, root, signal, write } from '../system';
 import { ReactiveArray } from './array';
+import type { Computed } from '../types';
 
 
 class ReactiveObject<T extends Record<PropertyKey, unknown>> {
@@ -87,7 +87,7 @@ class ReactiveObject<T extends Record<PropertyKey, unknown>> {
             return;
         }
 
-        while (disposer = disposers.pop()) {
+        while ((disposer = disposers.pop())) {
             disposer();
         }
     }