@esportsplus/reactivity 0.39.2 → 0.41.0

package/test/compiler/output.test.ts

@@ -0,0 +1,116 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { mkdtempSync, rmSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import vite from '~/compiler/plugins/vite';
+
+
+// Whole compiled modules, pinned byte for byte: every lowering form the compiler emits, each one
+// alone in its range so no output depends on how nested rewrites compose
+const FILES: Record<string, string> = {
+    'app.ts': [
+        "export { reactive as make } from '@esportsplus/reactivity';",
+        "export * from './state';",
+        "export { default as total } from './state';"
+    ].join('\n'),
+    'consumer.ts': [
+        "import { count as renamed, later, make, total } from './app';",
+        "import * as app from './app';",
+        'export let a = make(0);',
+        'export let b = () => renamed + total + later;',
+        'export let c = () => app.count + app.list.length;',
+        "export let d = () => app['count'];",
+        'export let e = () => { app.list[0] = 1; };'
+    ].join('\n'),
+    'forms.ts': [
+        "import { reactive } from '@esportsplus/reactivity';",
+        'declare function total(): number;',
+        'declare let list: number[];',
+        'declare let n: number;',
+        'let count = reactive(0);',
+        'let doubled = reactive(() => count * 2);',
+        'let typed = reactive(n);',
+        'let fn = reactive(total);',
+        'let runtime = reactive(list);',
+        'let obj = reactive({ a: 1, b: \'x\', items: [1, 2], sum: () => 3, neg: -1, source: list, flag: true });',
+        'let shorthand = reactive({ list });',
+        'let hinted = reactive<{ a: number; items: number[] }>({ a: 1, items: [] });',
+        'let spread = reactive({ ...{ a: 1 }, b: 2 });',
+        'let method = reactive({ m() { return 1; } });',
+        'let arr = reactive([1, 2, 3]);',
+        'let empty = reactive([] as string[]);',
+        'let declared: number[] = reactive([4]);',
+        'count = 5;',
+        'count += 2;',
+        'count ||= 3;',
+        'count++;',
+        '--count;',
+        'let p = count++;',
+        'let q = ++count;',
+        'let o = { count };',
+        'let t = typeof count;',
+        'arr[0] = 4;',
+        'arr[1] += 2;',
+        'arr[2]++;',
+        'let r = ++arr[0];',
+        'let size = arr.length;',
+        'arr.length = 1;',
+        'arr.length += 1;',
+        'arr.length++;',
+        'arr = [5, 6];',
+        'arr = [];',
+        'export { count, doubled, typed, fn, runtime, obj, shorthand, hinted, spread, method, empty, declared, p, q, o, t, r, size };',
+        'export default reactive(0);'
+    ].join('\n'),
+    'state.ts': [
+        "import { reactive } from '@esportsplus/reactivity';",
+        'export let count = reactive(0);',
+        'export let list = reactive([1, 2]);',
+        'export let later: number;',
+        'later = reactive(1);',
+        'export default reactive(() => 2);'
+    ].join('\n')
+};
+
+
+let fixtures: string[] = [];
+
+
+function compile(name: string): string | null {
+    let directory = mkdtempSync(join(process.cwd(), '.fixture-output-')).replace(/\\/g, '/');
+
+    fixtures.push(directory);
+
+    for (let [file, code] of Object.entries(FILES)) {
+        writeFileSync(join(directory, file), code);
+    }
+
+    writeFileSync(join(directory, 'tsconfig.json'), JSON.stringify({
+        compilerOptions: { module: 'esnext', moduleResolution: 'bundler', strict: true, target: 'esnext', types: [] },
+        files: Object.keys(FILES).map(file => './' + file)
+    }));
+
+    let plugin = vite({ root: directory });
+
+    plugin.configResolved({ command: 'build', root: directory });
+
+    return plugin.transform.handler(FILES[name], directory + '/' + name)?.code ?? null;
+}
+
+
+afterEach(() => {
+    for (let i = 0, n = fixtures.length; i < n; i++) {
+        rmSync(fixtures[i], { force: true, recursive: true });
+    }
+
+    fixtures = [];
+});
+
+
+describe('compiled output', () => {
+    for (let name of Object.keys(FILES)) {
+        it(name, () => {
+            expect(compile(name)).toMatchSnapshot();
+        });
+    }
+});

package/test/ownership.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { computed, dispose, effect, flush, hasOwner, onCleanup, read, root, signal, untrack, write } from '~/system';
+import { computed, owner as current, dispose, effect, flush, hasOwner, onCleanup, read, root, signal, untrack, write } from '~/system';
 import type { Computed } from '~/system';
 import { captureUncaught } from './lib/uncaught';
 
@@ -584,3 +584,102 @@ describe('hasOwner', () => {
     });
 });
 
+describe('owner', () => {
+    it('is the running computation, else the running root scope, else null', () => {
+        let running: Computed<unknown> | null = null,
+            scope: Computed<unknown> | null = null,
+            seen: unknown[] = [];
+
+        seen.push(current());
+
+        let stop = root((dispose) => {
+            scope = current();
+
+            effect(() => {
+                running = current();
+                seen.push(untrack(() => current()) === running);
+            });
+
+            return dispose;
+        });
+
+        seen.push(current());
+
+        expect(scope).not.toBeNull();
+        expect(running).not.toBe(scope);
+        // An effect is owned once its first run returns
+        expect(running!.owner).toBe(scope);
+
+        stop();
+
+        expect(seen).toEqual([null, true, null]);
+    });
+});
+
+describe('root with an owner', () => {
+    it('runs fn owned by the given node, its reads untracked', async () => {
+        let cleaned = 0,
+            s = signal(0),
+            node: Computed<unknown> | null = null,
+            runs = 0,
+            stop = root((dispose) => {
+                node = current();
+
+                return dispose;
+            });
+
+        root(() => {
+            runs++;
+            read(s);
+            onCleanup(() => cleaned++);
+            effect(() => { read(s); });
+        }, node);
+
+        expect(hasOwner()).toBe(false);
+        expect(registrations(node!)).toBe(2);
+
+        write(s, 1);
+        await Promise.resolve();
+
+        expect(runs).toBe(1);
+
+        stop();
+
+        expect(cleaned).toBe(1);
+        expect(registrations(node!)).toBe(0);
+    });
+
+    it('creates a child root of the given node instead of whatever is running', () => {
+        let a: Computed<unknown> | null = null,
+            b: Computed<unknown> | null = null,
+            child: Computed<unknown> | null = null,
+            stopA = root((dispose) => { a = current(); return dispose; }),
+            stopB = root((dispose) => { b = current(); return dispose; });
+
+        root(() => {
+            root((dispose) => {
+                child = current();
+
+                return dispose;
+            }, a);
+        }, b);
+
+        expect(child!.owner).toBe(a);
+        expect(registrations(b!)).toBe(0);
+
+        stopA();
+
+        expect(child!.owner).toBe(null);
+
+        stopB();
+    });
+
+    it('throws on a disposed owner', () => {
+        let node: Computed<unknown> | null = null,
+            stop = root((dispose) => { node = current(); return dispose; });
+
+        stop();
+
+        expect(() => root(() => {}, node)).toThrow('@esportsplus/reactivity: root() was given a disposed owner');
+    });
+});

package/test/reactive/array.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest';
-import { effect, read, signal, write } from '~/system';
+import { effect, flush, owner, read, root, signal, write } from '~/system';
 import { ReactiveArray } from '~/reactive/array';
 import { ReactiveObject } from '~/reactive/object';
 import reactive from '~/reactive/index';
@@ -54,7 +54,7 @@ describe('ReactiveArray', () => {
         });
 
         it('does not overflow the stack for a large array', () => {
-            let arr = new ReactiveArray(new Array(500000).fill(0));
+            let arr = new ReactiveArray(Array.from({ length: 500000 }, () => 0));
 
             expect(arr.length).toBe(500000);
             expect(arr.$length).toBe(500000);
@@ -463,7 +463,7 @@ describe('ReactiveArray', () => {
             arr.on('splice', (e) => { events.push(e); });
             arr.splice(1, 1, 20, 30);
 
-            expect(events).toEqual([{ start: 1, deleteCount: 1, items: [20, 30] }]);
+            expect(events).toEqual([{ deleteCount: 1, items: [20, 30], start: 1 }]);
         });
 
         it('no event when nothing changes', () => {
@@ -499,7 +499,7 @@ describe('ReactiveArray', () => {
 
             expect([...removed]).toEqual([4]);
             expect([...arr]).toEqual([1, 2, 3, 5]);
-            expect(events).toEqual([{ start: 3, deleteCount: 1, items: [] }]);
+            expect(events).toEqual([{ deleteCount: 1, items: [], start: 3 }]);
         });
 
         it('splice dispatches the count actually removed, not the requested count', () => {
@@ -510,7 +510,7 @@ describe('ReactiveArray', () => {
             arr.splice(1, 100);
 
             expect([...arr]).toEqual([1]);
-            expect(events).toEqual([{ start: 1, deleteCount: 2, items: [] }]);
+            expect(events).toEqual([{ deleteCount: 2, items: [], start: 1 }]);
         });
 
         it('splice clamps an out-of-range or fractional start the way Array.prototype.splice does', () => {
@@ -524,9 +524,9 @@ describe('ReactiveArray', () => {
 
             expect([...arr]).toEqual([0, 9, 1, 2, 3, 4]);
             expect(events).toEqual([
-                { start: 3, deleteCount: 0, items: [4] },
-                { start: 0, deleteCount: 0, items: [0] },
-                { start: 1, deleteCount: 0, items: [9] }
+                { deleteCount: 0, items: [4], start: 3 },
+                { deleteCount: 0, items: [0], start: 0 },
+                { deleteCount: 0, items: [9], start: 1 }
             ]);
         });
     });
@@ -652,6 +652,7 @@ describe('ReactiveArray', () => {
             arr.sort((a, b) => a - b);
 
             expect([...arr]).toEqual([1, 2, 2]);
+            expect(order).toEqual([1, 0, 2]);
         });
 
         it('order maps duplicate values stably (first stays first)', () => {
@@ -1226,3 +1227,183 @@ describe('ReactiveArray', () => {
         });
     });
 });
+
+describe('ReactiveArray batch', () => {
+    // Disposed links go back to a shared pool; a node disposed mid-run then walks pooled links
+    let pool = () => {
+        let a = signal(0),
+            b = signal(0),
+            c = signal(0);
+
+        root(() => effect(() => read(a) + read(b) + read(c)))();
+    };
+
+    it('delivers every mutation of a task once, in order, in the pass that follows', async () => {
+        let arr = new ReactiveArray([1, 2, 3]),
+            batches: unknown[][] = [];
+
+        arr.on('batch', (ops) => batches.push(ops));
+        arr.push(4);
+        arr.$set(0, 9);
+        arr.splice(1, 1, 7, 8);
+        arr.pop();
+
+        expect(batches).toEqual([]);
+
+        await Promise.resolve();
+
+        expect(batches).toEqual([[
+            { items: [4], op: 'push' },
+            { index: 0, item: 9, op: 'set' },
+            { deleteCount: 1, items: [7, 8], op: 'splice', start: 1 },
+            { item: 4, op: 'pop' }
+        ]]);
+    });
+
+    it('settles through flush()', () => {
+        let arr = new ReactiveArray<number>(),
+            batches: unknown[][] = [];
+
+        arr.on('batch', (ops) => batches.push(ops));
+        arr.push(1, 2);
+        flush();
+
+        expect(batches).toEqual([[{ items: [1, 2], op: 'push' }]]);
+    });
+
+    it('drops the mutations before a clear', () => {
+        let arr = new ReactiveArray([1]),
+            batches: unknown[][] = [];
+
+        arr.on('batch', (ops) => batches.push(ops));
+        arr.push(2);
+        arr.clear();
+        arr.unshift(5);
+        flush();
+
+        expect(batches).toEqual([[{ op: 'clear' }, { items: [5], op: 'unshift' }]]);
+    });
+
+    it('reports the order of a sort, and reverse, shift and concat', () => {
+        let arr = new ReactiveArray([3, 1, 2]),
+            batches: unknown[][] = [];
+
+        arr.on('batch', (ops) => batches.push(ops));
+        arr.sort((a, b) => a - b);
+        arr.reverse();
+        arr.shift();
+        arr.concat([9]);
+        flush();
+
+        expect(batches).toEqual([[
+            { op: 'sort', order: [1, 2, 0] },
+            { op: 'reverse' },
+            { item: 3, op: 'shift' },
+            { items: [9], op: 'concat' }
+        ]]);
+    });
+
+    it('runs listeners outside any owner, and stops delivering once the last one leaves', () => {
+        let arr = new ReactiveArray<number>(),
+            seen: unknown[] = [],
+            stop = arr.on('batch', () => seen.push(owner()));
+
+        arr.push(1);
+        flush();
+        stop();
+        arr.push(2);
+        flush();
+
+        expect(seen).toEqual([null]);
+    });
+
+    it('delivers mutations made inside an effect within the same pass', () => {
+        let arr = new ReactiveArray<number>(),
+            batches: unknown[][] = [],
+            s = signal(0);
+
+        arr.on('batch', (ops) => batches.push(ops));
+
+        let stop = root(() => effect(() => {
+            if (read(s)) {
+                arr.push(read(s));
+            }
+        }));
+
+        write(s, 5);
+        flush();
+        stop();
+
+        expect(batches).toEqual([[{ items: [5], op: 'push' }]]);
+    });
+
+    it('keeps delivering to later listeners after the last one throws and is dropped', async () => {
+        pool();
+
+        let arr = new ReactiveArray<number>(),
+            batches: unknown[][] = [],
+            lengths: number[] = [],
+            stop = root(() => effect(() => { lengths.push(arr.$length); }));
+
+        let captured = await captureUncaught(() => {
+            arr.on('batch', () => { throw new Error('reactivity: batch'); });
+            arr.push(1);
+            flush();
+        });
+
+        arr.on('batch', (ops) => batches.push(ops));
+        arr.push(2);
+        flush();
+        stop();
+
+        expect(captured.map((e) => (e as Error).message)).toEqual(['reactivity: batch']);
+        expect(batches).toEqual([[{ items: [2], op: 'push' }]]);
+        expect(lengths).toEqual([0, 1, 2]);
+    });
+
+    it('keeps delivering to later listeners after the last one unsubscribes itself during dispatch', async () => {
+        pool();
+
+        let arr = new ReactiveArray<number>(),
+            batches: unknown[][] = [],
+            first: unknown[][] = [],
+            lengths: number[] = [],
+            stop = root(() => effect(() => { lengths.push(arr.$length); })),
+            unsubscribe = arr.on('batch', (ops) => {
+                first.push(ops);
+                unsubscribe();
+            });
+
+        arr.push(1);
+        flush();
+        await Promise.resolve();
+
+        arr.push(2);
+        flush();
+
+        arr.on('batch', (ops) => batches.push(ops));
+        arr.push(3);
+        flush();
+        stop();
+
+        expect(first).toEqual([[{ items: [1], op: 'push' }]]);
+        expect(batches).toEqual([[{ items: [3], op: 'push' }]]);
+        expect(lengths).toEqual([0, 1, 2, 3]);
+    });
+
+    it('keeps the delivering effect when a listener joins before the stop runs', () => {
+        let arr = new ReactiveArray<number>(),
+            batches: unknown[][] = [],
+            unsubscribe = arr.on('batch', () => {
+                unsubscribe();
+                arr.on('batch', (ops) => batches.push(ops));
+            });
+
+        arr.push(1);
+        flush();
+        arr.push(2);
+        flush();
+
+        expect(batches).toEqual([[{ items: [2], op: 'push' }]]);
+    });
+});

package/test/reactive/reactive.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it, vi } from 'vitest';
-import { computed, effect, onCleanup, read, root, signal, write } from '~/system';
+import { computed, effect, onCleanup, read, signal, write } from '~/system';
 import { SIGNAL } from '~/constants';
-import { ReactiveObject, isReactiveObject } from '~/reactive/object';
+import { isReactiveObject, ReactiveObject } from '~/reactive/object';
 import reactive from '~/reactive/index';
 import { ReactiveArray } from '~/reactive/array';
 import { tick, waitFor } from '../lib/wait-for';
@@ -348,7 +348,7 @@ describe('isReactiveObject', () => {
 describe('reactive()', () => {
     describe('objects', () => {
         it('creates reactive object', () => {
-            let obj = reactive({ name: 'John', age: 25 });
+            let obj = reactive({ age: 25, name: 'John' });
 
             expect((obj as any).name).toBe('John');
             expect((obj as any).age).toBe(25);
@@ -515,7 +515,7 @@ describe('integration', () => {
 
     it('large dependency chain', async () => {
         let s = signal(0),
-            chain: ReturnType<typeof computed>[] = [computed(() => read(s))];
+            chain: ReturnType<typeof computed<number>>[] = [computed(() => read(s))];
 
         for (let i = 1; i < 50; i++) {
             let prev = chain[i - 1];

package/test/system.test.ts

@@ -584,8 +584,7 @@ describe('root', () => {
             stop = dispose;
 
             try {
-                root((inner) => {
-                    inner;
+                root((_inner) => {
                     throw new Error('reactivity: inner boom');
                 });
             }
@@ -1224,7 +1223,7 @@ describe('edge cases', () => {
 
     it('heap auto-resizes for computed chain deeper than 64', async () => {
         let s = signal(0),
-            chain: ReturnType<typeof computed>[] = [computed(() => read(s) + 1)];
+            chain: ReturnType<typeof computed<number>>[] = [computed(() => read(s) + 1)];
 
         for (let i = 1; i < 80; i++) {
             let prev = chain[i - 1];
@@ -1416,7 +1415,7 @@ describe('edge cases', () => {
     });
 
     it('link pool handles >1000 dependencies with disposal and reuse', async () => {
-        let signals: ReturnType<typeof signal>[] = [],
+        let signals: ReturnType<typeof signal<number>>[] = [],
             stops: (() => void)[] = [];
 
         for (let i = 0; i < 1100; i++) {

package/test/untrack.test.ts

@@ -137,7 +137,7 @@ describe('untrack ownership', () => {
                     });
                     onCleanup(() => { log.push('c'); });
                 });
-                root((d) => {
+                root((_d) => {
                     onCleanup(() => { log.push('d'); });
                 });
             });

package/tsconfig.build.json

@@ -0,0 +1,3 @@
+{
+    "extends": "@esportsplus/typescript/tsconfig.package.json"
+}

package/tsconfig.json

@@ -1,3 +1,3 @@
 {
-    "extends": "@esportsplus/typescript/tsconfig.package.json"
-}
+    "extends": "@esportsplus/typescript/tsconfig.package.dev.json"
+}

package/vitest.config.ts

@@ -5,8 +5,8 @@ import { resolve } from 'path';
 export default defineConfig({
     resolve: {
         alias: {
-            '~': resolve(import.meta.dirname, 'src'),
-            '@esportsplus/reactivity': resolve(import.meta.dirname, 'src/index.ts')
+            '@esportsplus/reactivity': resolve(import.meta.dirname, 'src/index.ts'),
+            '~': resolve(import.meta.dirname, 'src')
         }
     },
     test: {

package/bench/tsconfig.json

@@ -1,16 +0,0 @@
-{
-    "extends": "../tsconfig.json",
-    "compilerOptions": {
-        "noEmit": true,
-        "paths": {
-            "~/*": [
-                "../src/*"
-            ]
-        },
-        "rootDir": ".."
-    },
-    "include": [
-        "./**/*",
-        "../src/**/*"
-    ]
-}

package/test/tsconfig.json

@@ -1,16 +0,0 @@
-{
-    "extends": "../tsconfig.json",
-    "compilerOptions": {
-        "noEmit": true,
-        "paths": {
-            "~/*": [
-                "../src/*"
-            ]
-        },
-        "rootDir": ".."
-    },
-    "include": [
-        "./**/*",
-        "../src/**/*"
-    ]
-}