@esportsplus/reactivity 0.30.2 → 0.30.3

package/tests/bench/array.ts

@@ -0,0 +1,162 @@
+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 reactive length', () => {
+    bench('read $length in effect', () => {
+        let arr = new ReactiveArray(1, 2, 3);
+
+        let stop = effect(() => {
+            arr.$length;
+        });
+
+        stop();
+    });
+});

package/tests/bench/system.ts

@@ -0,0 +1,230 @@
+import { bench, describe } from 'vitest';
+import { computed, dispose, effect, read, root, signal, write } from '~/system';
+
+
+describe('signal', () => {
+    bench('create signal', () => {
+        signal(0);
+    });
+
+    bench('read signal (no observer)', () => {
+        let s = signal(0);
+
+        read(s);
+    });
+
+    bench('write signal (no subscribers)', () => {
+        let s = signal(0);
+
+        write(s, 1);
+    });
+
+    bench('write signal (1 subscriber)', () => {
+        let s = signal(0),
+            i = 0;
+
+        effect(() => {
+            read(s);
+        });
+
+        write(s, ++i);
+    });
+
+    bench('write + read cycle', () => {
+        let s = signal(0);
+
+        write(s, 1);
+
+        read(s);
+    });
+});
+
+
+describe('computed', () => {
+    bench('create computed', () => {
+        let s = signal(0);
+
+        computed(() => read(s));
+    });
+
+    bench('read computed', () => {
+        let s = signal(0),
+            c = computed(() => read(s));
+
+        read(c);
+    });
+
+    bench('computed chain (depth 5)', () => {
+        let s = signal(0),
+            c1 = computed(() => read(s) + 1),
+            c2 = computed(() => read(c1) + 1),
+            c3 = computed(() => read(c2) + 1),
+            c4 = computed(() => read(c3) + 1),
+            c5 = computed(() => read(c4) + 1);
+
+        read(c5);
+    });
+
+    bench('computed diamond', () => {
+        let s = signal(0),
+            a = computed(() => read(s) + 1),
+            b = computed(() => read(s) * 2),
+            c = computed(() => read(a) + read(b));
+
+        read(c);
+    });
+});
+
+
+describe('effect', () => {
+    bench('create + dispose effect', () => {
+        let stop = effect(() => {});
+
+        stop();
+    });
+
+    bench('effect with 1 signal', () => {
+        let s = signal(0);
+
+        let stop = effect(() => {
+            read(s);
+        });
+
+        stop();
+    });
+
+    bench('effect with 10 signals', () => {
+        let signals: ReturnType<typeof signal<number>>[] = [];
+
+        for (let i = 0; i < 10; i++) {
+            signals.push(signal(i));
+        }
+
+        let stop = effect(() => {
+            for (let i = 0; i < 10; i++) {
+                read(signals[i]);
+            }
+        });
+
+        stop();
+    });
+});
+
+
+describe('propagation', () => {
+    bench('1 signal → 1 effect (sync write)', () => {
+        let s = signal(0),
+            i = 0;
+
+        effect(() => {
+            read(s);
+        });
+
+        write(s, ++i);
+    });
+
+    bench('1 signal → 10 effects (sync write)', () => {
+        let s = signal(0),
+            i = 0;
+
+        for (let j = 0; j < 10; j++) {
+            effect(() => {
+                read(s);
+            });
+        }
+
+        write(s, ++i);
+    });
+
+    bench('10 signals → 1 computed → 1 effect', () => {
+        let signals: ReturnType<typeof signal<number>>[] = [],
+            i = 0;
+
+        for (let j = 0; j < 10; j++) {
+            signals.push(signal(j));
+        }
+
+        let c = computed(() => {
+            let sum = 0;
+
+            for (let j = 0; j < 10; j++) {
+                sum += read(signals[j]);
+            }
+
+            return sum;
+        });
+
+        effect(() => {
+            read(c);
+        });
+
+        write(signals[0], ++i);
+    });
+
+    bench('deep chain (10 computeds)', () => {
+        let s = signal(0),
+            chain: ReturnType<typeof computed>[] = [],
+            i = 0;
+
+        chain[0] = computed(() => read(s) + 1);
+
+        for (let j = 1; j < 10; j++) {
+            let prev = chain[j - 1];
+
+            chain[j] = computed(() => read(prev) + 1);
+        }
+
+        effect(() => {
+            read(chain[9]);
+        });
+
+        write(s, ++i);
+    });
+
+    bench('wide fan-out (1 signal → 100 computeds)', () => {
+        let s = signal(0),
+            i = 0;
+
+        for (let j = 0; j < 100; j++) {
+            computed(() => read(s) + j);
+        }
+
+        write(s, ++i);
+    });
+});
+
+
+describe('memory', () => {
+    bench('create + dispose 100 computeds', () => {
+        let computeds: ReturnType<typeof computed<number>>[] = [];
+
+        for (let i = 0; i < 100; i++) {
+            computeds.push(computed(() => i));
+        }
+
+        for (let i = 0; i < 100; i++) {
+            dispose(computeds[i]);
+        }
+    });
+
+    bench('link pool (create + dispose cycle)', () => {
+        let s = signal(0);
+
+        for (let i = 0; i < 100; i++) {
+            let c = computed(() => read(s));
+
+            read(c);
+            dispose(c);
+        }
+    });
+
+    bench('root scope create + dispose', () => {
+        root((dispose) => {
+            let s = signal(0);
+
+            computed(() => read(s));
+
+            dispose();
+        });
+    });
+});

package/tests/effects.ts

@@ -0,0 +1,211 @@
+import { describe, expect, it } from 'vitest';
+import { computed, effect, onCleanup, read, root, signal, write } from '~/system';
+import { ReactiveArray } from '~/reactive/array';
+import { ReactiveObject } from '~/reactive/object';
+
+
+// These tests validate effect patterns from the compiler integration tests,
+// including cleanup tracking, root scope, and multi-object dependencies.
+
+describe('effect patterns', () => {
+    describe('basic effect lifecycle', () => {
+        it('effect runs on creation and updates', async () => {
+            let s = signal(0),
+                runs = 0;
+
+            let dispose = effect(() => {
+                read(s);
+                runs++;
+            });
+
+            expect(runs).toBe(1);
+
+            write(s, 1);
+            await Promise.resolve();
+
+            write(s, 2);
+            await Promise.resolve();
+
+            write(s, 3);
+            await Promise.resolve();
+
+            expect(runs).toBe(4);
+
+            dispose();
+
+            write(s, 4);
+            write(s, 5);
+            await Promise.resolve();
+
+            expect(runs).toBe(4);
+        });
+    });
+
+
+    describe('cleanup tracking', () => {
+        it('counts cleanup calls across re-runs', async () => {
+            let s = signal(0),
+                cleanupCalls = 0,
+                effectValues: number[] = [];
+
+            let dispose = effect(() => {
+                let current = read(s);
+
+                effectValues.push(current);
+
+                onCleanup(() => {
+                    cleanupCalls++;
+                });
+            });
+
+            expect(effectValues).toEqual([0]);
+            expect(cleanupCalls).toBe(0);
+
+            write(s, 1);
+            await Promise.resolve();
+
+            expect(effectValues).toEqual([0, 1]);
+            expect(cleanupCalls).toBe(1);
+
+            write(s, 2);
+            await Promise.resolve();
+
+            expect(effectValues).toEqual([0, 1, 2]);
+            expect(cleanupCalls).toBe(2);
+
+            dispose();
+
+            expect(cleanupCalls).toBe(3);
+        });
+    });
+
+
+    describe('effect with computed', () => {
+        it('effect tracks computed property updates', async () => {
+            let s = signal(10),
+                doubled = computed(() => read(s) * 2),
+                reads = 0,
+                values: number[] = [];
+
+            effect(() => {
+                reads++;
+                values.push(read(doubled));
+            });
+
+            expect(reads).toBe(1);
+            expect(values).toEqual([20]);
+
+            write(s, 20);
+            await Promise.resolve();
+
+            expect(reads).toBe(2);
+            expect(values).toEqual([20, 40]);
+
+            write(s, 30);
+            await Promise.resolve();
+
+            expect(reads).toBe(3);
+            expect(values).toEqual([20, 40, 60]);
+        });
+    });
+
+
+    describe('root scope', () => {
+        it('root with reactive object and effect inside', async () => {
+            let rootDisposed = false,
+                effectRuns = 0;
+
+            let result = root((dispose) => {
+                let s = signal(1),
+                    obj = new ReactiveObject({
+                        doubled: () => read(s) * 2
+                    }) as any;
+
+                effect(() => {
+                    effectRuns++;
+                    read(s);
+                });
+
+                expect(effectRuns).toBe(1);
+                expect(obj.doubled).toBe(2);
+
+                write(s, 5);
+
+                onCleanup(() => {
+                    rootDisposed = true;
+                });
+
+                dispose();
+
+                return 'root result';
+            });
+
+            expect(result).toBe('root result');
+            expect(rootDisposed).toBe(true);
+        });
+    });
+
+
+    describe('multiple object dependencies', () => {
+        it('effect tracks properties from multiple objects', async () => {
+            let obj1 = new ReactiveObject({ x: 1 }) as any,
+                obj2 = new ReactiveObject({ y: 2 }) as any,
+                obj3 = new ReactiveObject({ z: 3 }) as any,
+                runs = 0,
+                sums: number[] = [];
+
+            effect(() => {
+                runs++;
+                sums.push(obj1.x + obj2.y + obj3.z);
+            });
+
+            expect(sums).toEqual([6]);
+
+            obj1.x = 10;
+            await Promise.resolve();
+
+            expect(sums).toEqual([6, 15]);
+
+            obj2.y = 20;
+            await Promise.resolve();
+
+            expect(sums).toEqual([6, 15, 33]);
+
+            obj3.z = 30;
+            await Promise.resolve();
+
+            expect(sums).toEqual([6, 15, 33, 60]);
+        });
+    });
+
+
+    describe('effect with reactive array', () => {
+        it('effect tracks array length changes', async () => {
+            let arr = new ReactiveArray(1, 2, 3),
+                runs = 0,
+                lengths: number[] = [];
+
+            effect(() => {
+                runs++;
+                lengths.push(arr.$length);
+            });
+
+            expect(lengths).toEqual([3]);
+
+            arr.push(4);
+            await Promise.resolve();
+
+            expect(lengths).toEqual([3, 4]);
+
+            arr.pop();
+            await Promise.resolve();
+
+            expect(lengths).toEqual([3, 4, 3]);
+
+            arr.splice(0, 1);
+            await Promise.resolve();
+
+            expect(lengths).toEqual([3, 4, 3, 2]);
+        });
+    });
+});