@esportsplus/reactivity 0.32.0 → 0.34.0

package/src/compiler/object.ts

@@ -28,7 +28,7 @@ interface ReactiveObjectCall {
 interface VisitContext {
     bindings: Bindings;
     calls: ReactiveObjectCall[];
-    checker: ts.TypeChecker | undefined;
+    checker: ts.Checker | undefined;
     sourceFile: ts.SourceFile;
 }
 
@@ -51,11 +51,11 @@ function analyzeProperty(prop: ts.ObjectLiteralElementLike, sourceFile: ts.Sourc
         value = unwrapped,
         valueText = value.getText(sourceFile);
 
-    while (ts.isAsExpression(unwrapped) || ts.isTypeAssertionExpression(unwrapped) || ts.isParenthesizedExpression(unwrapped)) {
+    while (ts.isAsExpression(unwrapped) || ts.isTypeAssertion(unwrapped) || ts.isParenthesizedExpression(unwrapped)) {
         unwrapped = unwrapped.expression;
     }
 
-    if (ts.isAsExpression(value) || ts.isTypeAssertionExpression(value)) {
+    if (ts.isAsExpression(value) || ts.isTypeAssertion(value)) {
         let type = (value as ts.AsExpression).type;
 
         if (
@@ -216,7 +216,7 @@ function isStaticValue(node: ts.Node): boolean {
         (ts.isPrefixUnaryExpression(node) && ts.isNumericLiteral(node.operand));
 }
 
-function isReactiveCall(checker: ts.TypeChecker | undefined, node: ts.Node): node is ts.CallExpression {
+function isReactiveCall(checker: ts.Checker | undefined, node: ts.Node): node is ts.CallExpression {
     if (!ts.isCallExpression(node) || !ts.isIdentifier(node.expression)) {
         return false;
     }
@@ -250,14 +250,14 @@ function visit(ctx: VisitContext, node: ts.Node): void {
                 let prop = props[i];
 
                 if (ts.isSpreadAssignment(prop)) {
-                    ts.forEachChild(node, n => visit(ctx, n));
+                    node.forEachChild(n => visit(ctx, n));
                     return;
                 }
 
                 let analyzed = analyzeProperty(prop, ctx.sourceFile);
 
                 if (!analyzed) {
-                    ts.forEachChild(node, n => visit(ctx, n));
+                    node.forEachChild(n => visit(ctx, n));
                     return;
                 }
 
@@ -278,11 +278,11 @@ function visit(ctx: VisitContext, node: ts.Node): void {
         }
     }
 
-    ts.forEachChild(node, n => visit(ctx, n));
+    node.forEachChild(n => visit(ctx, n));
 }
 
 
-export default (sourceFile: ts.SourceFile, bindings: Bindings, checker?: ts.TypeChecker): ObjectTransformResult => {
+export default (sourceFile: ts.SourceFile, bindings: Bindings, checker?: ts.Checker): ObjectTransformResult => {
     let ctx: VisitContext = {
             bindings,
             calls: [],

package/src/compiler/primitives.ts

@@ -67,7 +67,7 @@ function visit(ctx: TransformContext, node: ts.Node): void {
             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;
                 }
 
@@ -80,7 +80,7 @@ function visit(ctx: TransformContext, node: ts.Node): void {
                         generate: () => `${NAMESPACE}.reactive`,
                         node: call.expression
                     });
-                    ts.forEachChild(node, n => visit(ctx, n));
+                    node.forEachChild(n => visit(ctx, n));
                     return;
                 }
             }
@@ -148,7 +148,7 @@ function visit(ctx: TransformContext, node: ts.Node): void {
         !(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;
         }
 
@@ -251,7 +251,7 @@ function visit(ctx: TransformContext, node: ts.Node): void {
         }
     }
 
-    ts.forEachChild(node, n => visit(ctx, n));
+    node.forEachChild(n => visit(ctx, n));
 }
 
 

package/src/reactive/array.ts

@@ -54,7 +54,10 @@ function dispose(value: unknown) {
 }
 
 
+// Derived arrays (splice removals, map/filter/slice) must be plain Arrays: species-creating a
+// ReactiveArray runs the reactive constructor per call and seeds _length from the length argument.
 class ReactiveArray<T> extends Array<T> {
+
     private _length: Signal<number>;
 
     listeners: Listeners<T> = {};
@@ -66,6 +69,24 @@ class ReactiveArray<T> extends Array<T> {
     }
 
 
+    static get [Symbol.species]() {
+        return Array;
+    }
+
+
+    get $length() {
+        return read(this._length);
+    }
+
+    set $length(value: number) {
+        if (value > this.length) {
+            throw Error(`@esportsplus/reactivity: cannot set length to a value larger than the current length, use splice instead.`);
+        }
+
+        this.splice(value, this.length);
+    }
+
+
     $set(i: number, value: T) {
         let prev = this[i];
 
@@ -204,7 +225,6 @@ class ReactiveArray<T> extends Array<T> {
         if (item !== undefined) {
             dispose(item);
             write(this._length, this.length);
-
             this.dispatch('pop', { item });
         }
 
@@ -219,6 +239,7 @@ class ReactiveArray<T> extends Array<T> {
         let length = super.push(...items);
 
         write(this._length, length);
+
         this.dispatch('push', { items });
 
         return length;
@@ -237,7 +258,6 @@ class ReactiveArray<T> extends Array<T> {
         if (item !== undefined) {
             dispose(item);
             write(this._length, this.length);
-
             this.dispatch('shift', { item });
         }
 
@@ -245,41 +265,46 @@ class ReactiveArray<T> extends Array<T> {
     }
 
     sort(fn?: (a: T, b: T) => number) {
-        let n = this.length,
-            before = new Array(n) as T[];
-
-        for (let i = 0; i < n; i++) {
-            before[i] = this[i];
+        if (this.listeners.sort === undefined) {
+            super.sort(fn);
         }
+        else {
+            let n = this.length,
+                before = new Array(n) as T[];
 
-        super.sort(fn);
+            for (let i = 0; i < n; i++) {
+                before[i] = this[i];
+            }
 
-        let buckets = new Map<T, number[]>(),
-            order = new Array(n);
+            super.sort(fn);
 
-        for (let i = 0; i < n; i++) {
-            let value = before[i],
-                list = buckets.get(value);
+            let buckets = new Map<T, number[]>(),
+                order = new Array(n);
 
-            if (!list) {
-                buckets.set(value, [i]);
-            }
-            else {
-                list.push(i);
+            for (let i = 0; i < n; i++) {
+                let value = before[i],
+                    list = buckets.get(value);
+
+                if (!list) {
+                    buckets.set(value, [i]);
+                }
+                else {
+                    list.push(i);
+                }
             }
-        }
 
-        for (let i = 0; i < n; i++) {
-            let list = buckets.get(this[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];
+                order[i] = list.length === 1 ? list[0] : list[list.length - 1];
 
-            if (list.length > 1) {
-                list.pop();
+                if (list.length > 1) {
+                    list.pop();
+                }
             }
-        }
 
-        this.dispatch('sort', { order });
+            this.dispatch('sort', { order });
+        }
 
         return this;
     }
@@ -312,19 +337,6 @@ class ReactiveArray<T> extends Array<T> {
 
         return length;
     }
-
-
-    get $length() {
-        return read(this._length);
-    }
-
-    set $length(value: number) {
-        if (value > this.length) {
-            throw Error(`@esportsplus/reactivity: cannot set length to a value larger than the current length, use splice instead.`);
-        }
-
-        this.splice(value, this.length);
-    }
 }
 
 Object.defineProperty(ReactiveArray.prototype, REACTIVE_ARRAY, { value: true });

package/src/system.ts

@@ -4,7 +4,7 @@ import {
     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
 } from './constants';
-import { Computed, Link, SelectorSignal, Settled, Signal } from './types';
+import { Computed, ComputedResult, Link, SelectorSignal, Settled, Signal } from './types';
 import { isObject, isPromise } from '@esportsplus/utilities';
 
 
@@ -613,12 +613,14 @@ function update<T>(root: Computed<T>): void {
 function makeAsyncComputed<T>(factory: Computed<Promise<T> | AsyncIterable<T> | T>): Computed<T | undefined> {
     let error = signal<unknown>(undefined),
         node = signal<T | undefined>(undefined),
+        pending = signal(false),
         v = 0;
 
     let stop = effect(() => {
         let fail = (e: unknown) => {
                 if (id === v && !(factory.state & (STATE_IN_HEAP | STATE_NOTIFY_MASK))) {
                     write(error, e === undefined ? new Error('reactivity: async computed rejected with undefined') : e);
+                    write(pending, false);
                 }
             },
             id = ++v,
@@ -626,11 +628,16 @@ function makeAsyncComputed<T>(factory: Computed<Promise<T> | AsyncIterable<T> |
             result = read(factory);
 
         if (isPromise(result)) {
+            if (id === v && !(factory.state & (STATE_IN_HEAP | STATE_NOTIFY_MASK))) {
+                write(pending, true);
+            }
+
             (result as Promise<T>).then(
                 (value) => {
                     if (id === v && !(factory.state & (STATE_IN_HEAP | STATE_NOTIFY_MASK))) {
                         write(error, undefined);
                         write(node, value);
+                        write(pending, false);
                     }
                 },
                 fail
@@ -651,15 +658,24 @@ function makeAsyncComputed<T>(factory: Computed<Promise<T> | AsyncIterable<T> |
                 if (!r.done) {
                     write(error, undefined);
                     write(node, r.value);
+                    write(pending, false);
                     it.next().then(step, fail);
                 }
+                else {
+                    write(pending, false);
+                }
             };
 
+            if (id === v && !(factory.state & (STATE_IN_HEAP | STATE_NOTIFY_MASK))) {
+                write(pending, true);
+            }
+
             untrack(() => it.next()).then(step, fail);
         }
         else {
             write(error, undefined);
             write(node, result as T);
+            write(pending, false);
         }
     });
 
@@ -673,6 +689,8 @@ function makeAsyncComputed<T>(factory: Computed<Promise<T> | AsyncIterable<T> |
             return read(node);
         });
 
+    (wrapper as Computed<T | undefined> & { pending: Signal<boolean> }).pending = pending;
+
     asyncMeta.set(wrapper as Computed<unknown>, { factory: factory as Computed<unknown> });
     wrapper.disposal = stop;
 
@@ -753,7 +771,7 @@ const batch = <T>(fn: () => T): T => {
 
 // A fn returning a Promise or AsyncIterable transparently becomes an async computed: the first run is
 // the probe, reused as the factory (no duplicate dispatch). A plain fn returns the node directly.
-const computed = <T>(fn: Computed<T>['fn'], equals: ((a: Settled<T>, b: Settled<T>) => boolean) | null = null): Computed<Settled<T>> => {
+const computed = <T>(fn: Computed<T>['fn'], equals: ((a: Settled<T>, b: Settled<T>) => boolean) | null = null): ComputedResult<T> => {
     // eager probe so self.value carries fn's return even when this is a non-first tracked op — the
     // detection below cannot depend on the deferred branch, which never runs fn synchronously.
     let o = observer,
@@ -774,7 +792,7 @@ const computed = <T>(fn: Computed<T>['fn'], equals: ((a: Settled<T>, b: Settled<
 
     self.equals = equals as ((a: unknown, b: unknown) => boolean) | null;
 
-    return self as Computed<Settled<T>>;
+    return self as unknown as ComputedResult<T>;
 };
 
 // Forces a re-derivation without the dummy-signal-dependency hack. writes++ FIRST so a gv-stamped
@@ -803,7 +821,6 @@ const dispose = <T>(computed: Computed<T>): void => {
     // processed inline (no worklist node) and the pool is touched only for re-entrant deep cascades.
     if (draining) {
         disposeHead = walkPush(computed as Computed<unknown>, null, disposeHead);
-
         return;
     }
 
@@ -847,16 +864,18 @@ const dispose = <T>(computed: Computed<T>): void => {
     }
 };
 
-const effect = <T>(fn: Computed<T>['fn'], onError?: (e: unknown) => void) => {
+const effect = <T>(fn: Computed<T>['fn'], apply?: (value: T, prev: T | undefined) => void) => {
+    let prev: T | undefined;
+
     let c = makeComputed<T | undefined>(
-            onError
+            apply
                 ? (o) => {
-                    try {
-                        return fn(o);
-                    }
-                    catch (e) {
-                        onError(e);
-                    }
+                    let v = fn(o);
+
+                    untrack(() => apply(v, prev));
+                    prev = v;
+
+                    return v;
                 }
                 : fn
         );
@@ -1001,9 +1020,12 @@ root.disposables = 0;
 const signal = <T>(value: T, equals: ((a: T, b: T) => boolean) | null = null): Signal<T> => {
     return {
         equals: equals as ((a: unknown, b: unknown) => boolean) | null,
+        key: undefined,
         keys: null,
         nextPending: null,
+        parent: undefined,
         rv: 0,
+        state: 0,
         subs: null,
         subsTail: null,
         type: SIGNAL,
@@ -1029,6 +1051,7 @@ signal.selector = <T>(node: Signal<T>, key: T): boolean => {
             nextPending: null,
             parent: node,
             rv: 0,
+            state: 0,
             subs: null,
             subsTail: null,
             type: SIGNAL,

package/src/types.ts

@@ -22,6 +22,11 @@ interface Computed<T> {
     value: T;
 }
 
+type ComputedResult<T> =
+    T extends Promise<any> | AsyncIterable<any>
+        ? Computed<Settled<T>> & { pending: Signal<boolean> }
+        : Computed<Settled<T>>;
+
 interface Link {
     dep: Signal<unknown> | Computed<unknown>;
     nextDep: Link | null;
@@ -56,9 +61,12 @@ type Settled<T> =
 
 type Signal<T> = {
     equals: ((a: unknown, b: unknown) => boolean) | null;
+    key: unknown;
     keys: Map<T, SelectorSignal<T>> | null;
     nextPending: Signal<unknown> | null;
+    parent: Signal<unknown> | undefined;
     rv: number;
+    state: number;
     subs: Link | null;
     subsTail: Link | null;
     type: typeof SIGNAL;
@@ -74,6 +82,7 @@ interface TransformResult {
 
 export type {
     Computed,
+    ComputedResult,
     Link,
     Reactive,
     SelectorSignal,

package/test/async-computed.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 import { computed, dispose, effect, isComputed, isSignal, read, root, signal, write } from '~/system';
 import { tick, waitFor } from './lib/wait-for';
-import type { Computed } from '~/system';
+import type { Computed, Signal } from '~/system';
 
 
 describe('asyncComputed', () => {
@@ -295,6 +295,92 @@ describe('asyncComputed', () => {
         expect(read(node)).toBe(3);
     });
 
+    it('pending toggles true then false across a resolving promise', async () => {
+        let node!: Computed<number | undefined> & { pending: Signal<boolean> },
+            resolve!: (v: number) => void;
+
+        root(() => {
+            node = computed(() => new Promise<number>((r) => {
+                resolve = r;
+            }));
+        });
+
+        // The polling effect dispatches synchronously at creation — in flight now
+        expect(read(node.pending)).toBe(true);
+        expect(read(node)).toBeUndefined();
+
+        resolve(42);
+        await waitFor(() => read(node) === 42, 'node resolves to 42');
+
+        expect(read(node)).toBe(42);
+        expect(read(node.pending)).toBe(false);
+    });
+
+    it('pending rises on refetch while the value stays stale', async () => {
+        let node!: Computed<number | undefined> & { pending: Signal<boolean> },
+            resolvers: ((v: number) => void)[] = [],
+            s = signal(1);
+
+        root(() => {
+            node = computed(() => {
+                read(s);
+
+                return new Promise<number>((r) => {
+                    resolvers.push(r);
+                });
+            });
+        });
+
+        expect(read(node.pending)).toBe(true);
+
+        resolvers[0](10);
+        await waitFor(() => read(node) === 10, 'node settles to 10');
+
+        expect(read(node)).toBe(10);
+        expect(read(node.pending)).toBe(false);
+
+        // Refetch — dependency change re-dispatches the factory
+        write(s, 2);
+        await waitFor(() => resolvers.length === 2, 'refetch dispatched');
+
+        // stale-while-revalidate: value stays 10, but pending rises to signal the in-flight fetch
+        expect(read(node)).toBe(10);
+        expect(read(node.pending)).toBe(true);
+
+        resolvers[1](20);
+        await waitFor(() => read(node) === 20, 'node settles to 20');
+
+        expect(read(node)).toBe(20);
+        expect(read(node.pending)).toBe(false);
+    });
+
+    it('pending clears on rejection', async () => {
+        let node!: Computed<number | undefined> & { pending: Signal<boolean> },
+            reject!: (e: Error) => void;
+
+        root(() => {
+            node = computed(() => new Promise<number>((_, r) => {
+                reject = r;
+            }));
+        });
+
+        expect(read(node.pending)).toBe(true);
+
+        reject(new Error('boom'));
+        await waitFor(() => read(node.pending) === false, 'pending clears after rejection');
+
+        expect(read(node.pending)).toBe(false);
+        expect(() => read(node)).toThrow('boom');
+    });
+
+    it('sync computed has no pending', () => {
+        root(() => {
+            let node = computed(() => 42);
+
+            expect((node as { pending?: unknown }).pending).toBeUndefined();
+        });
+    });
+
     it('disposing the returned computed stops the polling effect and the factory', async () => {
         let calls = 0,
             s = signal(1);

package/test/compiler/compiler.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'vitest';
 import { ts } from '@esportsplus/typescript';
+import { languageService } from '@esportsplus/typescript/compiler';
 import type { ReplacementIntent } from '@esportsplus/typescript/compiler';
 import { NAMESPACE } from '~/compiler/constants';
 import type { Bindings } from '~/compiler/types';
@@ -30,7 +31,7 @@ function isReactiveCall(node: ts.Node): boolean {
 }
 
 function parse(code: string): ts.SourceFile {
-    return ts.createSourceFile('test.ts', code, ts.ScriptTarget.Latest, true);
+    return languageService.parse(process.cwd() + '/test.ts', code);
 }
 
 function transformPrimitives(code: string): { bindings: Bindings; output: string } {

package/test/effects.test.ts

@@ -269,3 +269,65 @@ describe('effect patterns', () => {
         });
     });
 });
+
+
+describe('effect apply phase', () => {
+    it('apply receives (value, prev) after each run', async () => {
+        let calls: [number, number | undefined][] = [],
+            s = signal(1);
+
+        effect(
+            () => read(s),
+            (value, prev) => {
+                calls.push([value, prev]);
+            }
+        );
+
+        expect(calls).toEqual([[1, undefined]]);
+
+        write(s, 2);
+        await Promise.resolve();
+
+        expect(calls).toEqual([[1, undefined], [2, 1]]);
+
+        write(s, 3);
+        await Promise.resolve();
+
+        expect(calls).toEqual([[1, undefined], [2, 1], [3, 2]]);
+    });
+
+    it('apply runs untracked — its reads do not subscribe', async () => {
+        let applied: number[] = [],
+            runs = 0,
+            s = signal(1),
+            t = signal(100);
+
+        effect(
+            () => {
+                runs++;
+
+                return read(s);
+            },
+            (value) => {
+                applied.push(value + read(t));
+            }
+        );
+
+        expect(runs).toBe(1);
+        expect(applied).toEqual([101]);
+
+        // apply read t untracked, so writing t must NOT re-run the effect
+        write(t, 200);
+        await Promise.resolve();
+
+        expect(runs).toBe(1);
+        expect(applied).toEqual([101]);
+
+        // writing s re-runs fn; apply then reads the current t (200)
+        write(s, 2);
+        await Promise.resolve();
+
+        expect(runs).toBe(2);
+        expect(applied).toEqual([101, 202]);
+    });
+});

package/test/errors.test.ts

@@ -174,19 +174,19 @@ describe('effect error contract', () => {
         stop();
     });
 
-    it('effect onError receives the error and nothing rethrows', async () => {
+    it('effect catching its own error internally rethrows nothing', async () => {
         let errors: unknown[] = [],
             s = signal(0),
-            stop = effect(
-                () => {
+            stop = effect(() => {
+                try {
                     if (read(s) === 1) {
                         throw new Error('handled');
                     }
-                },
-                (e) => {
+                }
+                catch (e) {
                     errors.push(e);
                 }
-            );
+            });
 
         let captured = await captureUncaught(() => {
             write(s, 1);

package/test/system.test.ts

@@ -1031,14 +1031,14 @@ describe('edge cases', () => {
                 return val * 10;
             });
 
-        effect(
-            () => {
+        effect(() => {
+            try {
                 effectValues.push(read(c));
-            },
-            (e) => {
+            }
+            catch (e) {
                 effectErrors.push(e);
             }
-        );
+        });
 
         expect(effectValues).toEqual([0]);
 
@@ -1072,14 +1072,14 @@ describe('edge cases', () => {
                 return val;
             });
 
-        effect(
-            () => {
+        effect(() => {
+            try {
                 effectValues.push(read(c));
-            },
-            (e) => {
+            }
+            catch (e) {
                 effectErrors.push(e);
             }
-        );
+        });
 
         expect(effectValues).toEqual([0]);