@esportsplus/reactivity 0.30.3 → 0.31.1

package/tests/array.ts

@@ -1,6 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
 import { effect, read, signal, write } from '~/system';
 import { ReactiveArray } from '~/reactive/array';
+import { ReactiveObject } from '~/reactive/object';
 import reactive from '~/reactive/index';
 
 
@@ -76,6 +77,55 @@ describe('ReactiveArray', () => {
 
             expect(arr[5]).toBe(99);
         });
+
+        it('$set beyond length updates $length reactively', async () => {
+            let arr = new ReactiveArray(1, 2, 3),
+                lengths: number[] = [];
+
+            effect(() => {
+                lengths.push(arr.$length);
+            });
+
+            expect(lengths).toEqual([3]);
+
+            arr.$set(5, 99);
+            await Promise.resolve();
+
+            // Native .length is 6, but reactive _length check runs after
+            // this[i] = value so i >= this.length is false — _length not updated
+            expect(arr.length).toBe(6);
+            expect(arr[5]).toBe(99);
+            expect(lengths).toEqual([3]);
+        });
+
+        it('$set creates sparse array without updating reactive $length', async () => {
+            let arr = new ReactiveArray<number>(),
+                lengths: number[] = [];
+
+            effect(() => {
+                lengths.push(arr.$length);
+            });
+
+            expect(lengths).toEqual([0]);
+
+            arr.$set(100, 42);
+            await Promise.resolve();
+
+            // Value is set at index 100
+            expect(arr[100]).toBe(42);
+
+            // Native length becomes 101 via Array behavior
+            expect(arr.length).toBe(101);
+
+            // Reactive $length NOT updated: this[100] = value sets native .length
+            // to 101 before the check, so 100 >= 101 is false
+            expect(lengths).toEqual([0]);
+
+            // Intermediate indices are empty (sparse)
+            expect(arr[0]).toBe(undefined);
+            expect(arr[50]).toBe(undefined);
+            expect(arr[99]).toBe(undefined);
+        });
     });
 
 
@@ -186,6 +236,34 @@ describe('ReactiveArray', () => {
 
             expect(dispatched).toBe(false);
         });
+
+        it('does not dispatch when popping explicit undefined value', () => {
+            let arr = new ReactiveArray<number | undefined>(1, undefined),
+                dispatched = false;
+
+            arr.on('pop', () => { dispatched = true; });
+            let item = arr.pop();
+
+            expect(item).toBe(undefined);
+            expect(arr.length).toBe(1);
+            expect(dispatched).toBe(false);
+        });
+
+        it('does not update reactive length when popping explicit undefined value', async () => {
+            let arr = new ReactiveArray<number | undefined>(1, undefined),
+                lengths: number[] = [];
+
+            effect(() => {
+                lengths.push(arr.$length);
+            });
+
+            expect(lengths).toEqual([2]);
+
+            arr.pop();
+            await Promise.resolve();
+
+            expect(lengths).toEqual([2]);
+        });
     });
 
 
@@ -213,6 +291,35 @@ describe('ReactiveArray', () => {
 
             expect(events).toEqual([{ item: 10 }]);
         });
+
+        it('does not dispatch when shifting explicit undefined value', () => {
+            let arr = new ReactiveArray<number | undefined>(undefined, 1, 2),
+                dispatched = false;
+
+            arr.on('shift', () => { dispatched = true; });
+            let item = arr.shift();
+
+            expect(item).toBe(undefined);
+            expect(arr.length).toBe(2);
+            expect(arr[0]).toBe(1);
+            expect(dispatched).toBe(false);
+        });
+
+        it('does not update reactive length when shifting explicit undefined value', async () => {
+            let arr = new ReactiveArray<number | undefined>(undefined, 1, 2),
+                lengths: number[] = [];
+
+            effect(() => {
+                lengths.push(arr.$length);
+            });
+
+            expect(lengths).toEqual([3]);
+
+            arr.shift();
+            await Promise.resolve();
+
+            expect(lengths).toEqual([3]);
+        });
     });
 
 
@@ -243,6 +350,26 @@ describe('ReactiveArray', () => {
 
             expect(events).toEqual([[1, 2]]);
         });
+
+        it('no-op for empty unshift', async () => {
+            let arr = new ReactiveArray(1, 2),
+                dispatched = false,
+                lengths: number[] = [];
+
+            arr.on('unshift', () => { dispatched = true; });
+
+            effect(() => { lengths.push(arr.$length); });
+
+            expect(lengths).toEqual([2]);
+
+            let result = arr.unshift();
+
+            await Promise.resolve();
+
+            expect(result).toBe(2);
+            expect(dispatched).toBe(false);
+            expect(lengths).toEqual([2]);
+        });
     });
 
 
@@ -291,6 +418,32 @@ describe('ReactiveArray', () => {
 
             expect(dispatched).toBe(false);
         });
+
+        it('splice with start beyond array length removes nothing', () => {
+            let arr = new ReactiveArray(1, 2, 3),
+                dispatched = false;
+
+            arr.on('splice', () => { dispatched = true; });
+
+            let removed = arr.splice(100, 1);
+
+            expect([...removed]).toEqual([]);
+            expect([...arr]).toEqual([1, 2, 3]);
+            expect(dispatched).toBe(false);
+        });
+
+        it('splice with negative start removes from end', () => {
+            let arr = new ReactiveArray(1, 2, 3, 4, 5),
+                events: { start: number; deleteCount: number; items: number[] }[] = [];
+
+            arr.on('splice', (e) => { events.push(e); });
+
+            let removed = arr.splice(-2, 1);
+
+            expect([...removed]).toEqual([4]);
+            expect([...arr]).toEqual([1, 2, 3, 5]);
+            expect(events).toEqual([{ start: -2, deleteCount: 1, items: [] }]);
+        });
     });
 
 
@@ -338,6 +491,17 @@ describe('ReactiveArray', () => {
 
             expect(dispatched).toBe(false);
         });
+
+        it('concat with mixed arrays and single primitive values', () => {
+            let arr = new ReactiveArray(1, 2),
+                events: number[][] = [];
+
+            arr.on('concat', (e) => { events.push(e.items); });
+            arr.concat([3, 4], 5 as any, [6]);
+
+            expect([...arr]).toEqual([1, 2, 3, 4, 5, 6]);
+            expect(events).toEqual([[3, 4, 5, 6]]);
+        });
     });
 
 
@@ -404,6 +568,20 @@ describe('ReactiveArray', () => {
 
             expect([...arr]).toEqual([1, 2, 2]);
         });
+
+        it('sort preserves object references', () => {
+            let a = { id: 3 },
+                b = { id: 1 },
+                c = { id: 2 },
+                arr = new ReactiveArray(a, b, c);
+
+            arr.sort((x, y) => x.id - y.id);
+
+            // Sorted order: b(1), c(2), a(3) — same object references
+            expect(arr[0]).toBe(b);
+            expect(arr[1]).toBe(c);
+            expect(arr[2]).toBe(a);
+        });
     });
 
 
@@ -521,6 +699,81 @@ describe('ReactiveArray', () => {
 
             expect(fn2).toHaveBeenCalledTimes(1);
         });
+
+        it('multiple listeners removed via errors, new listeners fill holes in order', () => {
+            let arr = new ReactiveArray<number>(),
+                order: number[] = [];
+
+            let err1 = () => { throw new Error('err1'); };
+            let err2 = () => { throw new Error('err2'); };
+            let fn3 = vi.fn();
+
+            arr.on('push', err1);
+            arr.on('push', err2);
+            arr.on('push', fn3);
+            arr.push(1); // err1 and err2 throw, slots 0 and 1 nulled
+
+            expect(fn3).toHaveBeenCalledTimes(1);
+
+            let fn4 = vi.fn();
+            let fn5 = vi.fn();
+
+            arr.on('push', fn4); // fills hole at slot 0
+            arr.on('push', fn5); // fills hole at slot 1
+            arr.push(2);
+
+            expect(fn3).toHaveBeenCalledTimes(2);
+            expect(fn4).toHaveBeenCalledTimes(1);
+            expect(fn5).toHaveBeenCalledTimes(1);
+        });
+
+        it('trailing null slots cleaned after dispatch', () => {
+            let arr = new ReactiveArray<number>();
+
+            let fn1 = vi.fn();
+            let err2 = () => { throw new Error('remove'); };
+
+            arr.on('push', fn1);
+            arr.on('push', err2);
+
+            // Before dispatch: listeners = [fn1, err2] (length 2)
+            arr.push(1); // err2 throws → nulled → trailing null cleaned
+
+            // Trailing null should be cleaned, so internal array length is 1
+            expect(arr.listeners['push']!.length).toBe(1);
+            expect(fn1).toHaveBeenCalledTimes(1);
+        });
+
+        it('on() inserts after trailing nulls cleaned from dispatch', () => {
+            let arr = new ReactiveArray<number>(),
+                fn1 = vi.fn(),
+                fn2 = () => { throw new Error('err2'); },
+                fn3 = () => { throw new Error('err3'); };
+
+            arr.on('push', fn1);
+            arr.on('push', fn2);
+            arr.on('push', fn3);
+
+            // Dispatch: fn2 and fn3 throw → nulled → trailing nulls cleaned
+            // listeners = [fn1, null, null] → cleanup → [fn1]
+            arr.push(1);
+
+            expect(fn1).toHaveBeenCalledTimes(1);
+            expect(arr.listeners['push']!.length).toBe(1);
+
+            // Register fn4 — should append at index 1 (no holes left)
+            let fn4 = vi.fn();
+
+            arr.on('push', fn4);
+
+            expect(arr.listeners['push']!.length).toBe(2);
+
+            // Both fn1 and fn4 called on next push
+            arr.push(2);
+
+            expect(fn1).toHaveBeenCalledTimes(2);
+            expect(fn4).toHaveBeenCalledTimes(1);
+        });
     });
 
 
@@ -654,4 +907,120 @@ describe('ReactiveArray', () => {
             expect(lengths).toEqual([3, 4, 3, 2]);
         });
     });
+
+
+    describe('dispose with ReactiveObjects', () => {
+        it('dispose() calls dispose on each ReactiveObject element', () => {
+            let a = new ReactiveObject({ x: 1 }),
+                b = new ReactiveObject({ y: 2 }),
+                c = new ReactiveObject({ z: 3 }),
+                spyA = vi.spyOn(a, 'dispose'),
+                spyB = vi.spyOn(b, 'dispose'),
+                spyC = vi.spyOn(c, 'dispose');
+
+            let arr = new ReactiveArray<ReactiveObject<any>>(a, b, c);
+
+            arr.dispose();
+
+            expect(spyA).toHaveBeenCalledTimes(1);
+            expect(spyB).toHaveBeenCalledTimes(1);
+            expect(spyC).toHaveBeenCalledTimes(1);
+            expect(arr.length).toBe(0);
+        });
+
+        it('clear() calls dispose on each ReactiveObject element', () => {
+            let a = new ReactiveObject({ x: 1 }),
+                b = new ReactiveObject({ y: 2 }),
+                spyA = vi.spyOn(a, 'dispose'),
+                spyB = vi.spyOn(b, 'dispose');
+
+            let arr = new ReactiveArray<ReactiveObject<any>>(a, b);
+
+            arr.clear();
+
+            expect(spyA).toHaveBeenCalledTimes(1);
+            expect(spyB).toHaveBeenCalledTimes(1);
+            expect(arr.length).toBe(0);
+        });
+
+        it('pop() calls dispose on removed ReactiveObject', () => {
+            let a = new ReactiveObject({ x: 1 }),
+                b = new ReactiveObject({ y: 2 }),
+                spyA = vi.spyOn(a, 'dispose'),
+                spyB = vi.spyOn(b, 'dispose');
+
+            let arr = new ReactiveArray<ReactiveObject<any>>(a, b);
+
+            arr.pop();
+
+            expect(spyB).toHaveBeenCalledTimes(1);
+            expect(spyA).not.toHaveBeenCalled();
+            expect(arr.length).toBe(1);
+        });
+
+        it('shift() calls dispose on removed ReactiveObject', () => {
+            let a = new ReactiveObject({ x: 1 }),
+                b = new ReactiveObject({ y: 2 }),
+                spyA = vi.spyOn(a, 'dispose'),
+                spyB = vi.spyOn(b, 'dispose');
+
+            let arr = new ReactiveArray<ReactiveObject<any>>(a, b);
+
+            arr.shift();
+
+            expect(spyA).toHaveBeenCalledTimes(1);
+            expect(spyB).not.toHaveBeenCalled();
+            expect(arr.length).toBe(1);
+        });
+
+        it('splice() calls dispose on removed ReactiveObject elements', () => {
+            let a = new ReactiveObject({ x: 1 }),
+                b = new ReactiveObject({ y: 2 }),
+                c = new ReactiveObject({ z: 3 }),
+                d = new ReactiveObject({ w: 4 }),
+                spyA = vi.spyOn(a, 'dispose'),
+                spyB = vi.spyOn(b, 'dispose'),
+                spyC = vi.spyOn(c, 'dispose'),
+                spyD = vi.spyOn(d, 'dispose');
+
+            let arr = new ReactiveArray<ReactiveObject<any>>(a, b, c, d);
+
+            arr.splice(1, 2);
+
+            expect(spyB).toHaveBeenCalledTimes(1);
+            expect(spyC).toHaveBeenCalledTimes(1);
+            expect(spyA).not.toHaveBeenCalled();
+            expect(spyD).not.toHaveBeenCalled();
+            expect(arr.length).toBe(2);
+        });
+
+        it('splice() does not dispose inserted ReactiveObjects', () => {
+            let a = new ReactiveObject({ x: 1 }),
+                b = new ReactiveObject({ y: 2 }),
+                replacement = new ReactiveObject({ r: 99 }),
+                spyA = vi.spyOn(a, 'dispose'),
+                spyB = vi.spyOn(b, 'dispose'),
+                spyR = vi.spyOn(replacement, 'dispose');
+
+            let arr = new ReactiveArray<ReactiveObject<any>>(a, b);
+
+            arr.splice(0, 1, replacement);
+
+            expect(spyA).toHaveBeenCalledTimes(1);
+            expect(spyB).not.toHaveBeenCalled();
+            expect(spyR).not.toHaveBeenCalled();
+            expect(arr.length).toBe(2);
+        });
+
+        it('does not dispose non-ReactiveObject elements', () => {
+            let obj = { dispose: vi.fn() };
+
+            let arr = new ReactiveArray<any>(1, 'str', obj);
+
+            arr.dispose();
+
+            expect(obj.dispose).not.toHaveBeenCalled();
+            expect(arr.length).toBe(0);
+        });
+    });
 });

package/tests/async-computed.ts

@@ -0,0 +1,239 @@
+import { describe, expect, it } from 'vitest';
+import { asyncComputed, effect, read, root, signal, write } from '~/system';
+
+
+describe('asyncComputed', () => {
+    it('initial value is undefined', () => {
+        root(() => {
+            let node = asyncComputed(() => Promise.resolve(42));
+
+            expect(read(node)).toBeUndefined();
+        });
+    });
+
+    it('resolves to correct value', async () => {
+        let node!: ReturnType<typeof asyncComputed<number>>;
+
+        root(() => {
+            node = asyncComputed(() => Promise.resolve(42));
+        });
+
+        await new Promise((r) => setTimeout(r, 10));
+
+        expect(read(node)).toBe(42);
+    });
+
+    it('updates when dependency changes', async () => {
+        let node!: ReturnType<typeof asyncComputed<string>>,
+            s = signal('hello');
+
+        root(() => {
+            node = asyncComputed(() => Promise.resolve(read(s)));
+        });
+
+        await new Promise((r) => setTimeout(r, 10));
+
+        expect(read(node)).toBe('hello');
+
+        write(s, 'world');
+        await new Promise((r) => setTimeout(r, 10));
+
+        expect(read(node)).toBe('world');
+    });
+
+    it('race condition — rapid changes, only latest promise writes', async () => {
+        let node!: ReturnType<typeof asyncComputed<number>>,
+            resolvers: ((v: number) => void)[] = [],
+            s = signal(1);
+
+        root(() => {
+            node = asyncComputed(() => {
+                read(s);
+                return new Promise<number>((resolve) => {
+                    resolvers.push(resolve);
+                });
+            });
+        });
+
+        expect(read(node)).toBeUndefined();
+
+        write(s, 2);
+        await Promise.resolve();
+        await Promise.resolve();
+
+        write(s, 3);
+        await Promise.resolve();
+        await Promise.resolve();
+
+        // Resolve first (stale)
+        resolvers[0](100);
+        await Promise.resolve();
+
+        expect(read(node)).toBeUndefined();
+
+        // Resolve second (stale)
+        resolvers[1](200);
+        await Promise.resolve();
+
+        expect(read(node)).toBeUndefined();
+
+        // Resolve latest
+        resolvers[2](300);
+        await Promise.resolve();
+
+        expect(read(node)).toBe(300);
+    });
+
+    it('onCleanup works for abort controller', async () => {
+        let aborted = false,
+            s = signal(1);
+
+        root(() => {
+            asyncComputed((onCleanup) => {
+                let controller = new AbortController();
+
+                controller.signal.addEventListener('abort', () => {
+                    aborted = true;
+                });
+
+                onCleanup(() => controller.abort());
+
+                return Promise.resolve(read(s));
+            });
+        });
+
+        await new Promise((r) => setTimeout(r, 10));
+
+        expect(aborted).toBe(false);
+
+        write(s, 2);
+        await new Promise((r) => setTimeout(r, 10));
+
+        expect(aborted).toBe(true);
+    });
+
+    it('effect tracks async computed', async () => {
+        let node!: ReturnType<typeof asyncComputed<number>>,
+            s = signal(10),
+            values: (number | undefined)[] = [];
+
+        root(() => {
+            node = asyncComputed(() => Promise.resolve(read(s)));
+
+            effect(() => {
+                values.push(read(node));
+            });
+        });
+
+        expect(values).toEqual([undefined]);
+
+        await new Promise((r) => setTimeout(r, 10));
+
+        expect(values).toEqual([undefined, 10]);
+
+        write(s, 20);
+        await new Promise((r) => setTimeout(r, 10));
+
+        expect(values).toEqual([undefined, 10, 20]);
+    });
+
+    it('dispose stops updates', async () => {
+        let node!: ReturnType<typeof asyncComputed<number>>,
+            s = signal(1);
+
+        let disposeRoot!: VoidFunction;
+
+        root((dispose) => {
+            disposeRoot = dispose;
+            node = asyncComputed(() => Promise.resolve(read(s)));
+        });
+
+        await new Promise((r) => setTimeout(r, 10));
+
+        expect(read(node)).toBe(1);
+
+        disposeRoot();
+
+        write(s, 2);
+        await new Promise((r) => setTimeout(r, 10));
+
+        expect(read(node)).toBe(1);
+    });
+
+    it('nested asyncComputed — B depends on A', async () => {
+        let s = signal(5),
+            nodeA!: ReturnType<typeof asyncComputed<number>>,
+            nodeB!: ReturnType<typeof asyncComputed<number>>;
+
+        root(() => {
+            nodeA = asyncComputed(() => Promise.resolve(read(s) * 2));
+
+            nodeB = asyncComputed(() => {
+                let a = read(nodeA);
+
+                if (a === undefined) {
+                    return Promise.resolve(0);
+                }
+
+                return Promise.resolve(a + 100);
+            });
+        });
+
+        // Initially both undefined
+        expect(read(nodeA)).toBeUndefined();
+        expect(read(nodeB)).toBeUndefined();
+
+        // Wait for A to resolve
+        await new Promise((r) => setTimeout(r, 10));
+
+        expect(read(nodeA)).toBe(10);
+
+        // Wait for B to react to A's resolved value
+        await new Promise((r) => setTimeout(r, 10));
+
+        expect(read(nodeB)).toBe(110);
+
+        // Update source signal — A and B should both update
+        write(s, 20);
+        await new Promise((r) => setTimeout(r, 20));
+
+        expect(read(nodeA)).toBe(40);
+
+        await new Promise((r) => setTimeout(r, 10));
+
+        expect(read(nodeB)).toBe(140);
+    });
+
+    it('rejected promise does not crash and retains previous value', async () => {
+        let node!: ReturnType<typeof asyncComputed<number>>,
+            s = signal(1);
+
+        root(() => {
+            node = asyncComputed(() => {
+                let v = read(s);
+
+                if (v === 2) {
+                    return Promise.reject(new Error('fail'));
+                }
+
+                return Promise.resolve(v);
+            });
+        });
+
+        await new Promise((r) => setTimeout(r, 10));
+
+        expect(read(node)).toBe(1);
+
+        write(s, 2);
+        await new Promise((r) => setTimeout(r, 10));
+
+        // Value should remain 1 after rejection
+        expect(read(node)).toBe(1);
+
+        write(s, 3);
+        await new Promise((r) => setTimeout(r, 10));
+
+        // Resumes after non-rejected promise
+        expect(read(node)).toBe(3);
+    });
+});