@esportsplus/reactivity 0.33.0 → 0.36.0

package/build/compiler/primitives.js

@@ -1,22 +1,5 @@
 import { ts } from '@esportsplus/typescript';
-import { NAMESPACE, TYPES } from './constants.js';
-const COMPOUND_OPERATORS = new Map([
-    [ts.SyntaxKind.AmpersandAmpersandEqualsToken, '&&'],
-    [ts.SyntaxKind.AmpersandEqualsToken, '&'],
-    [ts.SyntaxKind.AsteriskAsteriskEqualsToken, '**'],
-    [ts.SyntaxKind.AsteriskEqualsToken, '*'],
-    [ts.SyntaxKind.BarBarEqualsToken, '||'],
-    [ts.SyntaxKind.BarEqualsToken, '|'],
-    [ts.SyntaxKind.CaretEqualsToken, '^'],
-    [ts.SyntaxKind.GreaterThanGreaterThanEqualsToken, '>>'],
-    [ts.SyntaxKind.GreaterThanGreaterThanGreaterThanEqualsToken, '>>>'],
-    [ts.SyntaxKind.LessThanLessThanEqualsToken, '<<'],
-    [ts.SyntaxKind.MinusEqualsToken, '-'],
-    [ts.SyntaxKind.PercentEqualsToken, '%'],
-    [ts.SyntaxKind.PlusEqualsToken, '+'],
-    [ts.SyntaxKind.QuestionQuestionEqualsToken, '??'],
-    [ts.SyntaxKind.SlashEqualsToken, '/']
-]);
+import { COMPOUND_OPERATORS, NAMESPACE, TYPES } from './constants.js';
 function inScope(reference, binding) {
     let current = reference;
     while (current) {
@@ -27,9 +10,34 @@ function inScope(reference, binding) {
     }
     return false;
 }
+function isScope(node) {
+    return ts.isArrowFunction(node) ||
+        ts.isBlock(node) ||
+        ts.isCatchClause(node) ||
+        ts.isForInStatement(node) ||
+        ts.isForOfStatement(node) ||
+        ts.isForStatement(node) ||
+        ts.isFunctionDeclaration(node) ||
+        ts.isFunctionExpression(node) ||
+        ts.isSourceFile(node);
+}
+function scopeOf(node) {
+    let current = node.parent, depth = 0, scope = node.getSourceFile();
+    while (current) {
+        if (isScope(current)) {
+            if (scope === node.getSourceFile() && !ts.isSourceFile(current)) {
+                scope = current;
+            }
+            depth++;
+        }
+        current = current.parent;
+    }
+    return { depth, scope };
+}
 function visit(ctx, node) {
     if (ctx.isReactiveCall(node)) {
         let call = node;
+        ctx.calls.push(call);
         if (call.arguments.length > 0) {
             let arg = call.arguments[0], classification = TYPES.Signal;
             if (ts.isArrowFunction(arg) || ts.isFunctionExpression(arg)) {
@@ -37,7 +45,7 @@ function visit(ctx, node) {
             }
             else {
                 let unwrapped = arg;
-                while (ts.isAsExpression(unwrapped) || ts.isParenthesizedExpression(unwrapped) || ts.isTypeAssertionExpression(unwrapped)) {
+                while (ts.isAsExpression(unwrapped) || ts.isParenthesizedExpression(unwrapped) || ts.isTypeAssertion(unwrapped)) {
                     unwrapped = unwrapped.expression;
                 }
                 if (ts.isArrayLiteralExpression(unwrapped) || ts.isObjectLiteralExpression(unwrapped)) {
@@ -48,7 +56,7 @@ function visit(ctx, node) {
                         generate: () => `${NAMESPACE}.reactive`,
                         node: call.expression
                     });
-                    ts.forEachChild(node, n => visit(ctx, n));
+                    node.forEachChild(n => visit(ctx, n));
                     return;
                 }
             }
@@ -64,25 +72,9 @@ function visit(ctx, node) {
                     varname = call.parent.left.text;
                 }
                 if (varname) {
-                    let current = call.parent, scope;
-                    while (current) {
-                        if (ts.isArrowFunction(current) ||
-                            ts.isBlock(current) ||
-                            ts.isForInStatement(current) ||
-                            ts.isForOfStatement(current) ||
-                            ts.isForStatement(current) ||
-                            ts.isFunctionDeclaration(current) ||
-                            ts.isFunctionExpression(current) ||
-                            ts.isSourceFile(current)) {
-                            scope = current;
-                        }
-                        current = current.parent;
-                    }
-                    if (!scope) {
-                        scope = call.getSourceFile();
-                    }
+                    let { depth, scope } = scopeOf(call);
                     ctx.bindings.set(varname, classification);
-                    ctx.scopedBindings.push({ name: varname, scope, type: classification });
+                    ctx.scopedBindings.push({ depth, name: varname, scope, type: classification });
                 }
                 ctx.replacements.push({
                     generate: () => classification === TYPES.Computed
@@ -97,13 +89,13 @@ function visit(ctx, node) {
         node.parent &&
         !(ts.isVariableDeclaration(node.parent) && node.parent.name === node)) {
         if (ts.isPropertyAccessExpression(node.parent) && node.parent.name === node) {
-            ts.forEachChild(node, n => visit(ctx, n));
+            node.forEachChild(n => visit(ctx, n));
             return;
         }
         let bindings = ctx.scopedBindings, binding, name = node.text;
         for (let i = 0, n = bindings.length; i < n; i++) {
             let b = bindings[i];
-            if (b.name === name && inScope(node, b)) {
+            if (b.name === name && (!binding || b.depth >= binding.depth) && inScope(node, b)) {
                 binding = b;
             }
         }
@@ -178,11 +170,12 @@ function visit(ctx, node) {
             }
         }
     }
-    ts.forEachChild(node, n => visit(ctx, n));
+    node.forEachChild(n => visit(ctx, n));
 }
 export default (sourceFile, bindings, isReactiveCall) => {
     let ctx = {
         bindings,
+        calls: [],
         isReactiveCall,
         replacements: [],
         scopedBindings: [],
@@ -190,5 +183,5 @@ export default (sourceFile, bindings, isReactiveCall) => {
         tmpCounter: 0
     };
     visit(ctx, sourceFile);
-    return ctx.replacements;
+    return { calls: ctx.calls, replacements: ctx.replacements };
 };

package/build/compiler/types.d.ts

@@ -1,3 +1,5 @@
+import type { ts } from '@esportsplus/typescript';
 import { TYPES } from './constants.js';
 type Bindings = Map<string, TYPES>;
-export type { Bindings };
+type IsReactiveCall = (node: ts.Node) => node is ts.CallExpression;
+export type { Bindings, IsReactiveCall };

package/build/constants.d.ts

@@ -3,11 +3,11 @@ declare const PACKAGE_NAME = "@esportsplus/reactivity";
 declare const REACTIVE_ARRAY: unique symbol;
 declare const REACTIVE_OBJECT: unique symbol;
 declare const SIGNAL: unique symbol;
+declare const STABILIZER_DEFERRED = 4;
 declare const STABILIZER_IDLE = 0;
 declare const STABILIZER_RESCHEDULE = 1;
 declare const STABILIZER_RUNNING = 2;
 declare const STABILIZER_SCHEDULED = 3;
-declare const STATE_NONE = 0;
 declare const STATE_CHECK: number;
 declare const STATE_DIRTY: number;
 declare const STATE_RECOMPUTING: number;
@@ -16,4 +16,4 @@ declare const STATE_COMPUTED: number;
 declare const STATE_ERROR: number;
 declare const STATE_EFFECT: number;
 declare const STATE_NOTIFY_MASK: number;
-export { COMPUTED, PACKAGE_NAME, REACTIVE_ARRAY, REACTIVE_OBJECT, SIGNAL, STABILIZER_IDLE, STABILIZER_RESCHEDULE, STABILIZER_RUNNING, STABILIZER_SCHEDULED, STATE_CHECK, STATE_COMPUTED, STATE_DIRTY, STATE_EFFECT, STATE_ERROR, STATE_IN_HEAP, STATE_NONE, STATE_NOTIFY_MASK, STATE_RECOMPUTING };
+export { COMPUTED, PACKAGE_NAME, 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 };

package/build/constants.js

@@ -3,11 +3,11 @@ const PACKAGE_NAME = '@esportsplus/reactivity';
 const REACTIVE_ARRAY = Symbol('reactivity.reactive.array');
 const REACTIVE_OBJECT = Symbol('reactivity.reactive.object');
 const SIGNAL = Symbol('reactivity.signal');
+const STABILIZER_DEFERRED = 4;
 const STABILIZER_IDLE = 0;
 const STABILIZER_RESCHEDULE = 1;
 const STABILIZER_RUNNING = 2;
 const STABILIZER_SCHEDULED = 3;
-const STATE_NONE = 0;
 const STATE_CHECK = 1 << 0;
 const STATE_DIRTY = 1 << 1;
 const STATE_RECOMPUTING = 1 << 2;
@@ -16,4 +16,4 @@ const STATE_COMPUTED = 1 << 4;
 const STATE_ERROR = 1 << 5;
 const STATE_EFFECT = 1 << 6;
 const STATE_NOTIFY_MASK = (STATE_CHECK | STATE_DIRTY);
-export { COMPUTED, PACKAGE_NAME, REACTIVE_ARRAY, REACTIVE_OBJECT, SIGNAL, STABILIZER_IDLE, STABILIZER_RESCHEDULE, STABILIZER_RUNNING, STABILIZER_SCHEDULED, STATE_CHECK, STATE_COMPUTED, STATE_DIRTY, STATE_EFFECT, STATE_ERROR, STATE_IN_HEAP, STATE_NONE, STATE_NOTIFY_MASK, STATE_RECOMPUTING };
+export { COMPUTED, PACKAGE_NAME, 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 };

package/build/reactive/array.d.ts

@@ -40,7 +40,7 @@ type Listeners<T> = {
 declare class ReactiveArray<T> extends Array<T> {
     private _length;
     listeners: Listeners<T>;
-    constructor(...items: T[]);
+    constructor(items?: readonly T[]);
     static get [Symbol.species](): ArrayConstructor;
     get $length(): number;
     set $length(value: number);

package/build/reactive/array.js

@@ -1,5 +1,5 @@
 import { isArray } from '@esportsplus/utilities';
-import { REACTIVE_ARRAY } from '../constants.js';
+import { PACKAGE_NAME, REACTIVE_ARRAY } from '../constants.js';
 import { read, signal, write } from '../system.js';
 import { isReactiveObject } from './object.js';
 function dispose(value) {
@@ -10,9 +10,13 @@ function dispose(value) {
 class ReactiveArray extends Array {
     _length;
     listeners = {};
-    constructor(...items) {
-        super(...items);
-        this._length = signal(items.length);
+    constructor(items) {
+        super();
+        let n = items ? items.length : 0;
+        for (let i = 0; i < n; i++) {
+            this[i] = items[i];
+        }
+        this._length = signal(n);
     }
     static get [Symbol.species]() {
         return Array;
@@ -37,6 +41,7 @@ class ReactiveArray extends Array {
             write(this._length, i + 1);
         }
         this.dispatch('set', { index: i, item: value });
+        dispose(prev);
     }
     clear() {
         this.dispose();
@@ -69,7 +74,7 @@ class ReactiveArray extends Array {
         if (!listeners) {
             return;
         }
-        let dirty = false;
+        let dirty = false, errors = null;
         for (let i = 0, n = listeners.length; i < n; i++) {
             let listener = listeners[i];
             if (listener === null) {
@@ -82,9 +87,10 @@ class ReactiveArray extends Array {
                     listeners[i] = null;
                 }
             }
-            catch {
+            catch (e) {
                 dirty = true;
                 listeners[i] = null;
+                (errors ??= []).push(e);
             }
         }
         if (dirty) {
@@ -92,6 +98,14 @@ class ReactiveArray extends Array {
                 listeners.pop();
             }
         }
+        if (errors !== null) {
+            let error = errors.length === 1
+                ? errors[0]
+                : new AggregateError(errors, `${PACKAGE_NAME}: dispatch produced multiple errors`);
+            queueMicrotask(() => {
+                throw error;
+            });
+        }
     }
     dispose() {
         while (this.length) {
@@ -169,20 +183,17 @@ class ReactiveArray extends Array {
             super.sort(fn);
             let buckets = new Map(), order = new Array(n);
             for (let i = 0; i < n; i++) {
-                let value = before[i], list = buckets.get(value);
-                if (!list) {
-                    buckets.set(value, [i]);
+                let value = before[i], bucket = buckets.get(value);
+                if (bucket === undefined) {
+                    buckets.set(value, { indices: [i], next: 0 });
                 }
                 else {
-                    list.push(i);
+                    bucket.indices.push(i);
                 }
             }
             for (let i = 0; i < n; i++) {
-                let list = buckets.get(this[i]);
-                order[i] = list.length === 1 ? list[0] : list[list.length - 1];
-                if (list.length > 1) {
-                    list.pop();
-                }
+                let bucket = buckets.get(this[i]);
+                order[i] = bucket.indices[bucket.next++];
             }
             this.dispatch('sort', { order });
         }

package/build/reactive/index.js

@@ -4,25 +4,16 @@ import { PACKAGE_NAME } from '../constants.js';
 import { ReactiveArray } from './array.js';
 import { ReactiveObject } from './object.js';
 function reactive(input) {
-    let dispose = false, value = root(() => {
-        let response;
+    let value = root(() => {
         if (isObject(input)) {
-            response = new ReactiveObject(input);
+            return new ReactiveObject(input);
         }
-        else if (isArray(input)) {
-            response = new ReactiveArray(...input);
-        }
-        if (response) {
-            if (root.disposables) {
-                dispose = true;
-            }
-            return response;
+        if (isArray(input)) {
+            return new ReactiveArray(input);
         }
         throw new Error(`${PACKAGE_NAME}: 'reactive' received invalid input - ${JSON.stringify(input)}`);
     });
-    if (dispose) {
-        onCleanup(() => value.dispose());
-    }
+    onCleanup(() => value.dispose());
     return value;
 }
 export default reactive;

package/build/reactive/object.js

@@ -46,7 +46,7 @@ class ReactiveObject {
         });
     }
     [REACTIVE_ARRAY](value) {
-        let node = new ReactiveArray(...value);
+        let node = new ReactiveArray(value);
         (this.disposers ??= []).push(() => node.dispose());
         return node;
     }

package/build/system.d.ts

@@ -1,25 +1,22 @@
 import { Computed, ComputedResult, Settled, Signal } from './types.js';
 declare const batch: <T>(fn: () => T) => T;
-declare const computed: {
-    <T>(fn: Computed<T>["fn"], equals?: ((a: Settled<T>, b: Settled<T>) => boolean) | null): ComputedResult<T>;
-    invalidate<T>(c: Computed<T>): void;
-};
+declare function computed<T>(fn: Computed<T>['fn'], equals?: ((a: Settled<T>, b: Settled<T>) => boolean) | null): ComputedResult<T>;
+declare namespace computed {
+    var invalidate: <T>(c: Computed<T>) => void;
+}
 declare const dispose: <T>(computed: Computed<T>) => void;
-declare const effect: <T>(fn: Computed<T>["fn"], apply?: (value: T, prev: T | undefined) => void) => () => void;
+declare const effect: <T>(fn: Computed<T>['fn'], apply?: (value: T, prev: T | undefined) => void) => () => void;
 declare const flush: () => void;
 declare const isComputed: (value: unknown) => value is Computed<unknown>;
 declare const isSignal: (value: unknown) => value is Signal<unknown>;
 declare const onCleanup: (fn: VoidFunction) => typeof fn;
 declare const peek: <T>(node: Signal<T> | Computed<T>) => T;
 declare const read: <T>(node: Signal<T> | Computed<T>) => T;
-declare const root: {
-    <T>(fn: ((dispose: VoidFunction) => T) | (() => T)): T;
-    disposables: number;
-};
-declare const signal: {
-    <T>(value: T, equals?: ((a: T, b: T) => boolean) | null): Signal<T>;
-    selector<T>(node: Signal<T>, key: T): boolean;
-};
+declare const root: <T>(fn: ((dispose: VoidFunction) => T) | (() => T)) => T;
+declare function signal<T>(value: T, equals?: ((a: T, b: T) => boolean) | null): Signal<T>;
+declare namespace signal {
+    var selector: <T>(node: Signal<T>, key: T) => boolean;
+}
 declare const untrack: <T>(fn: () => T) => T;
 declare const write: <T>(signal: Signal<T>, value: T) => void;
 export { batch, computed, dispose, effect, flush, isComputed, isSignal, onCleanup, peek, read, root, signal, untrack, write };