@esportsplus/reactivity 0.30.3 → 0.31.0

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,26 @@ 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]);
+        });
     });
 
 
@@ -186,6 +207,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 +262,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]);
+        });
     });
 
 
@@ -338,6 +416,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]]);
+        });
     });
 
 
@@ -521,6 +610,50 @@ 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);
+        });
     });
 
 
@@ -654,4 +787,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,195 @@
+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('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);
+    });
+});

package/tests/bench/array.ts

@@ -149,6 +149,71 @@ describe('ReactiveArray events', () => {
 });
 
 
+describe('ReactiveArray dispose/clear', () => {
+    bench('dispose with 100 items', () => {
+        let items = [];
+
+        for (let i = 0; i < 100; i++) {
+            items.push(i);
+        }
+
+        let arr = new ReactiveArray(...items);
+
+        arr.dispose();
+    });
+
+    bench('clear with 100 items', () => {
+        let items = [];
+
+        for (let i = 0; i < 100; i++) {
+            items.push(i);
+        }
+
+        let arr = new ReactiveArray(...items);
+
+        arr.clear();
+    });
+});
+
+
+describe('ReactiveArray concat/unshift/shift/reverse', () => {
+    bench('concat 100 items', () => {
+        let arr = new ReactiveArray<number>(),
+            items = [];
+
+        for (let i = 0; i < 100; i++) {
+            items.push(i);
+        }
+
+        arr.concat(items);
+    });
+
+    bench('unshift 10 items', () => {
+        let arr = new ReactiveArray(1, 2, 3, 4, 5);
+
+        arr.unshift(10, 20, 30, 40, 50, 60, 70, 80, 90, 100);
+    });
+
+    bench('shift', () => {
+        let arr = new ReactiveArray(1, 2, 3, 4, 5);
+
+        arr.shift();
+    });
+
+    bench('reverse 100 items', () => {
+        let items = [];
+
+        for (let i = 0; i < 100; i++) {
+            items.push(i);
+        }
+
+        let arr = new ReactiveArray(...items);
+
+        arr.reverse();
+    });
+});
+
+
 describe('ReactiveArray reactive length', () => {
     bench('read $length in effect', () => {
         let arr = new ReactiveArray(1, 2, 3);

package/tests/bench/reactive-object.ts

@@ -0,0 +1,54 @@
+import { bench, describe } from 'vitest';
+import { computed, dispose, effect, read, root, signal, write } from '~/system';
+import { ReactiveArray } from '~/reactive/array';
+import { ReactiveObject } from '~/reactive/object';
+
+
+describe('ReactiveObject creation', () => {
+    bench('create with 5 signal properties', () => {
+        new ReactiveObject({ a: 1, b: 2, c: 3, d: 4, e: 5 });
+    });
+
+    bench('create with computed properties', () => {
+        new ReactiveObject({
+            a: 1,
+            b: 2,
+            sum: () => 0
+        });
+    });
+});
+
+
+describe('ReactiveObject read/write', () => {
+    bench('read property (signal-backed)', () => {
+        let obj = new ReactiveObject({ a: 1, b: 2, c: 3, d: 4, e: 5 });
+
+        (obj as any).a;
+    });
+
+    bench('write property (signal-backed)', () => {
+        let obj = new ReactiveObject({ a: 1, b: 2, c: 3, d: 4, e: 5 }),
+            i = 0;
+
+        (obj as any).a = ++i;
+    });
+});
+
+
+describe('ReactiveObject dispose', () => {
+    bench('dispose with 5 properties', () => {
+        let obj = new ReactiveObject({ a: 1, b: 2, c: 3, d: 4, e: 5 });
+
+        obj.dispose();
+    });
+
+    bench('dispose with arrays + computeds', () => {
+        let obj = new ReactiveObject({
+            items: [1, 2, 3],
+            name: 'test',
+            total: () => 0
+        });
+
+        obj.dispose();
+    });
+});

package/tests/bench/system.ts

@@ -1,5 +1,5 @@
 import { bench, describe } from 'vitest';
-import { computed, dispose, effect, read, root, signal, write } from '~/system';
+import { computed, dispose, effect, onCleanup, read, root, signal, write } from '~/system';
 
 
 describe('signal', () => {
@@ -228,3 +228,90 @@ describe('memory', () => {
         });
     });
 });
+
+
+describe('effect stress', () => {
+    bench('create + dispose 1000 effects (pool recycling)', () => {
+        for (let i = 0; i < 1000; i++) {
+            let stop = effect(() => {});
+
+            stop();
+        }
+    });
+});
+
+
+describe('deep propagation', () => {
+    bench('deep chain (50 computeds)', () => {
+        let s = signal(0),
+            chain: ReturnType<typeof computed>[] = [],
+            i = 0;
+
+        chain[0] = computed(() => read(s) + 1);
+
+        for (let j = 1; j < 50; j++) {
+            let prev = chain[j - 1];
+
+            chain[j] = computed(() => read(prev) + 1);
+        }
+
+        effect(() => {
+            read(chain[49]);
+        });
+
+        write(s, ++i);
+    });
+});
+
+
+describe('stabilization', () => {
+    bench('write during stabilization (reschedule path)', () => {
+        let a = signal(0),
+            b = signal(0),
+            i = 0;
+
+        effect(() => {
+            let val = read(a);
+
+            if (val > 0) {
+                write(b, val * 10);
+            }
+        });
+
+        effect(() => {
+            read(b);
+        });
+
+        write(a, ++i);
+    });
+});
+
+
+describe('root', () => {
+    bench('root scope creation + disposal', () => {
+        root((dispose) => {
+            dispose();
+        });
+    });
+});
+
+
+describe('onCleanup', () => {
+    bench('register 1 cleanup', () => {
+        root(() => {
+            effect(() => {
+                onCleanup(() => {});
+            });
+        });
+    });
+
+    bench('register 10 cleanups', () => {
+        root(() => {
+            effect(() => {
+                for (let i = 0; i < 10; i++) {
+                    onCleanup(() => {});
+                }
+            });
+        });
+    });
+});