@esportsplus/reactivity 0.30.2 → 0.31.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

@@ -0,0 +1,227 @@
+import { bench, describe } from 'vitest';
+import { ReactiveArray } from '~/reactive/array';
+import { effect } from '~/system';
+
+
+describe('ReactiveArray creation', () => {
+    bench('create empty', () => {
+        new ReactiveArray<number>();
+    });
+
+    bench('create with 10 items', () => {
+        new ReactiveArray(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
+    });
+
+    bench('create with 100 items', () => {
+        let items = [];
+
+        for (let i = 0; i < 100; i++) {
+            items.push(i);
+        }
+
+        new ReactiveArray(...items);
+    });
+});
+
+
+describe('ReactiveArray push', () => {
+    bench('push 1 item', () => {
+        let arr = new ReactiveArray<number>();
+
+        arr.push(1);
+    });
+
+    bench('push 10 items (single call)', () => {
+        let arr = new ReactiveArray<number>();
+
+        arr.push(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
+    });
+
+    bench('push 10 items (10 calls)', () => {
+        let arr = new ReactiveArray<number>();
+
+        for (let i = 0; i < 10; i++) {
+            arr.push(i);
+        }
+    });
+
+    bench('push with listener', () => {
+        let arr = new ReactiveArray<number>();
+
+        arr.on('push', () => {});
+        arr.push(1);
+    });
+});
+
+
+describe('ReactiveArray pop', () => {
+    bench('pop', () => {
+        let arr = new ReactiveArray(1, 2, 3, 4, 5);
+
+        arr.pop();
+    });
+});
+
+
+describe('ReactiveArray splice', () => {
+    bench('splice remove 1', () => {
+        let arr = new ReactiveArray(1, 2, 3, 4, 5);
+
+        arr.splice(2, 1);
+    });
+
+    bench('splice insert 1', () => {
+        let arr = new ReactiveArray(1, 2, 3, 4, 5);
+
+        arr.splice(2, 0, 99);
+    });
+
+    bench('splice replace 1', () => {
+        let arr = new ReactiveArray(1, 2, 3, 4, 5);
+
+        arr.splice(2, 1, 99);
+    });
+});
+
+
+describe('ReactiveArray sort', () => {
+    bench('sort 10 items', () => {
+        let arr = new ReactiveArray(5, 3, 8, 1, 9, 2, 7, 4, 6, 10);
+
+        arr.sort((a, b) => a - b);
+    });
+
+    bench('sort 100 items', () => {
+        let items = [];
+
+        for (let i = 100; i > 0; i--) {
+            items.push(i);
+        }
+
+        let arr = new ReactiveArray(...items);
+
+        arr.sort((a, b) => a - b);
+    });
+});
+
+
+describe('ReactiveArray $set', () => {
+    bench('$set', () => {
+        let arr = new ReactiveArray(1, 2, 3, 4, 5);
+
+        arr.$set(2, 99);
+    });
+
+    bench('$set same value (no-op)', () => {
+        let arr = new ReactiveArray(1, 2, 3, 4, 5);
+
+        arr.$set(2, 3);
+    });
+});
+
+
+describe('ReactiveArray events', () => {
+    bench('dispatch to 1 listener', () => {
+        let arr = new ReactiveArray<number>();
+
+        arr.on('push', () => {});
+        arr.push(1);
+    });
+
+    bench('dispatch to 10 listeners', () => {
+        let arr = new ReactiveArray<number>();
+
+        for (let i = 0; i < 10; i++) {
+            arr.on('push', () => {});
+        }
+
+        arr.push(1);
+    });
+
+    bench('on + once interleaved', () => {
+        let arr = new ReactiveArray<number>();
+
+        arr.on('push', () => {});
+        arr.once('push', () => {});
+        arr.on('push', () => {});
+        arr.push(1);
+    });
+});
+
+
+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);
+
+        let stop = effect(() => {
+            arr.$length;
+        });
+
+        stop();
+    });
+});

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();
+    });
+});