@esportsplus/reactivity 0.37.0 → 0.37.2

package/test/compiler/compiler.test.ts

@@ -5,6 +5,7 @@ import type { ReplacementIntent } from '@esportsplus/typescript/compiler';
 import { NAMESPACE, TYPES } from '~/compiler/constants';
 import type { Bindings } from '~/compiler/types';
 import array from '~/compiler/array';
+import scope from '~/compiler/bindings';
 import object from '~/compiler/object';
 import primitives from '~/compiler/primitives';
 import pipeline from '~/compiler/index';
@@ -30,29 +31,39 @@ function isReactiveCall(node: ts.Node): node is ts.CallExpression {
     return ts.isCallExpression(node) && ts.isIdentifier(node.expression) && node.expression.text === 'reactive';
 }
 
-function parse(code: string): ts.SourceFile {
-    return languageService.parse(process.cwd() + '/test.ts', code);
+// Bindings resolve by symbol, so every transform needs a checker over the parsed source
+function parse(code: string): { bindings: Bindings; sourceFile: ts.SourceFile } {
+    let { checker, sourceFile } = languageService.scratch(process.cwd() + '/test.ts', code);
+
+    return { bindings: scope.create(checker), sourceFile };
+}
+
+// Full pipeline over a module importing reactive(): what a real consumer compiles
+function transformModule(code: string): string {
+    code = `import { reactive } from '@esportsplus/reactivity';\n` + code;
+
+    let { checker, sourceFile } = languageService.scratch(process.cwd() + '/module.ts', code),
+        result = pipeline.transform({ checker, code, sourceFile } as never);
+
+    return applyIntents(code, sourceFile, result.replacements ?? []);
 }
 
 function transformPrimitives(code: string): { bindings: Bindings; output: string } {
-    let bindings: Bindings = new Map(),
-        sourceFile = parse(code),
+    let { bindings, sourceFile } = parse(code),
         { replacements } = primitives(sourceFile, bindings, isReactiveCall);
 
     return { bindings, output: applyIntents(code, sourceFile, replacements) };
 }
 
-function transformArray(code: string, bindings?: Bindings): { bindings: Bindings; output: string } {
-    let b: Bindings = bindings ?? new Map(),
-        sourceFile = parse(code),
-        intents = array(sourceFile, b, isReactiveCall);
+function transformArray(code: string): { bindings: Bindings; output: string } {
+    let { bindings, sourceFile } = parse(code),
+        intents = array(sourceFile, bindings, isReactiveCall);
 
-    return { bindings: b, output: applyIntents(code, sourceFile, intents) };
+    return { bindings, output: applyIntents(code, sourceFile, intents) };
 }
 
 function transformObject(code: string): { bindings: Bindings; output: string; prepend: string[] } {
-    let bindings: Bindings = new Map(),
-        sourceFile = parse(code),
+    let { bindings, sourceFile } = parse(code),
         result = object(sourceFile, bindings, isReactiveCall);
 
     return {
@@ -62,6 +73,26 @@ function transformObject(code: string): { bindings: Bindings; output: string; pr
     };
 }
 
+function typeOf(bindings: Bindings, name: string): number | undefined {
+    for (let [symbol, type] of bindings.symbols) {
+        if (symbol.name === name) {
+            return type;
+        }
+    }
+
+    return undefined;
+}
+
+function hasPath(bindings: Bindings, name: string, path: string): boolean {
+    for (let [symbol, paths] of bindings.paths) {
+        if (symbol.name === name && paths.has(path)) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
 
 describe('primitives transform', () => {
     it('transforms reactive(0) to signal', () => {
@@ -128,13 +159,13 @@ describe('primitives transform', () => {
     it('tracks bindings for signal type', () => {
         let { bindings } = transformPrimitives('let x = reactive(0);');
 
-        expect(bindings.get('x')).toBe(TYPES.Signal);
+        expect(typeOf(bindings, 'x')).toBe(TYPES.Signal);
     });
 
     it('tracks bindings for computed type', () => {
         let { bindings } = transformPrimitives('let x = reactive(0); let d = reactive(() => x * 2);');
 
-        expect(bindings.get('d')).toBe(TYPES.Computed);
+        expect(typeOf(bindings, 'd')).toBe(TYPES.Computed);
     });
 
     it('leaves a same-named plain variable in a sibling function untouched', () => {
@@ -222,7 +253,7 @@ describe('object transform', () => {
     it('tracks nested array bindings', () => {
         let { bindings } = transformObject('let obj = reactive({ items: [1, 2, 3] });');
 
-        expect(bindings.get('obj.items')).toBe(TYPES.Array);
+        expect(hasPath(bindings, 'obj', 'items')).toBe(true);
     });
 });
 
@@ -242,49 +273,33 @@ describe('array transform', () => {
     });
 
     it('transforms arr.length read to arr.$length', () => {
-        let bindings: Bindings = new Map();
-
-        bindings.set('arr', 0); // TYPES.Array = 0
-        let { output } = transformArray('let x = arr.length;', bindings);
+        let { output } = transformArray('let arr = reactive([1]); let x = arr.length;');
 
         expect(output).toContain('arr.$length');
     });
 
     it('transforms arr.length = n to arr.$length = n', () => {
-        let bindings: Bindings = new Map();
-
-        bindings.set('arr', 0);
-        let { output } = transformArray('arr.length = 5;', bindings);
+        let { output } = transformArray('let arr = reactive([1]); arr.length = 5;');
 
         expect(output).toContain('arr.$length = 5');
     });
 
     it('transforms arr.length += n to arr.$length = arr.length + n', () => {
-        let bindings: Bindings = new Map();
-
-        bindings.set('arr', 0);
-        let { output } = transformArray('arr.length += 3;', bindings);
+        let { output } = transformArray('let arr = reactive([1]); arr.length += 3;');
 
         expect(output).toContain('arr.$length = arr.length + 3');
     });
 
     it('transforms every compound operator on arr.length with its own token', () => {
-        let bindings: Bindings = new Map();
-
-        bindings.set('arr', 0);
-
         for (let op of ['<<', '>>', '>>>', '??', '||', '&&', '-', '*', '/', '%', '**', '&', '|', '^']) {
-            let { output } = transformArray(`arr.length ${op}= 2;`, bindings);
+            let { output } = transformArray(`let arr = reactive([1]); arr.length ${op}= 2;`);
 
             expect(output).toContain(`arr.$length = arr.length ${op} 2`);
         }
     });
 
     it('transforms arr[i] = value to arr.$set(i, value)', () => {
-        let bindings: Bindings = new Map();
-
-        bindings.set('arr', 0);
-        let { output } = transformArray('arr[0] = 42;', bindings);
+        let { output } = transformArray('let arr = reactive([1]); arr[0] = 42;');
 
         expect(output).toContain('arr.$set(');
         expect(output).toContain('42');
@@ -293,24 +308,19 @@ describe('array transform', () => {
     it('tracks reactive array binding from reactive call', () => {
         let { bindings } = transformArray('let arr = reactive([1, 2, 3]);');
 
-        expect(bindings.get('arr')).toBe(TYPES.Array);
+        expect(typeOf(bindings, 'arr')).toBe(TYPES.Array);
     });
 
     it('tracks alias binding from reactive array', () => {
-        let bindings: Bindings = new Map();
-
-        bindings.set('a', 0);
-        transformArray('let b = a;', bindings);
+        let { bindings } = transformArray('let a = reactive([1]); let b = a;');
 
-        expect(bindings.get('b')).toBe(0);
+        expect(typeOf(bindings, 'b')).toBe(TYPES.Array);
     });
 
     it('tracks typed parameter as ReactiveArray', () => {
-        let bindings: Bindings = new Map();
-
-        transformArray('function fn(arr: ReactiveArray) { return arr; }', bindings);
+        let { bindings } = transformArray('function fn(arr: ReactiveArray) { return arr; }');
 
-        expect(bindings.get('arr')).toBe(0);
+        expect(typeOf(bindings, 'arr')).toBe(TYPES.Array);
     });
 
     it('transforms empty array', () => {
@@ -321,6 +331,66 @@ describe('array transform', () => {
 });
 
 
+describe('binding resolution (full pipeline)', () => {
+    it('leaves a local array that shadows a reactive array untouched', () => {
+        let output = transformModule('let rows = reactive([] as number[]);\nfunction build(n: number) { let rows: number[] = []; rows[0] = n; return rows.length; }');
+
+        expect(output).toContain('let rows: number[] = []; rows[0] = n; return rows.length;');
+    });
+
+    it('leaves a parameter that shadows a reactive array untouched', () => {
+        let output = transformModule('let rows = reactive([1]);\nconst f = (rows: number[]) => { rows[0] = 2; };');
+
+        expect(output).toContain('const f = (rows: number[]) => { rows[0] = 2; };');
+    });
+
+    it('leaves a local that shadows a signal untouched', () => {
+        let output = transformModule('let count = reactive(0);\nfunction f() { let count = 5; count++; return count; }');
+
+        expect(output).toContain('function f() { let count = 5; count++; return count; }');
+    });
+
+    it('leaves a parameter that shadows a signal untouched', () => {
+        let output = transformModule('let count = reactive(0);\nconst f = (count: number) => count + 1;');
+
+        expect(output).toContain('const f = (count: number) => count + 1;');
+    });
+
+    it('never rewrites property names, type members or destructured parameters', () => {
+        let output = transformModule('let count = reactive(0);\nlet o = { count: 1 };\nlet p = o.count;\nfunction f({ count }: { count: number }) { return count; }');
+
+        expect(output).toContain('let o = { count: 1 };');
+        expect(output).toContain('let p = o.count;');
+        expect(output).toContain('function f({ count }: { count: number }) { return count; }');
+    });
+
+    it('expands a shorthand property into a read', () => {
+        let output = transformModule('let count = reactive(0);\nlet o = { count };');
+
+        expect(output).toContain(`let o = { count: ${NAMESPACE}.read(count) };`);
+    });
+
+    it('rewrites a use that precedes the declaration in source order', () => {
+        let output = transformModule('function inc() { count++; }\nlet count = reactive(0);');
+
+        expect(output).toContain(`function inc() { ${NAMESPACE}.write(count, count.value + 1); }`);
+    });
+
+    it('exports the signal itself rather than splicing a read into the export list', () => {
+        let output = transformModule('let count = reactive(0);\nexport { count };');
+
+        expect(output).toContain('export { count };');
+    });
+
+    it('transforms a namespace-qualified reactive() call', () => {
+        let output = transformModule("import * as r from '@esportsplus/reactivity';\nlet count = r.reactive(0);\nlet next = count + 1;");
+
+        expect(output).toContain(`let count = ${NAMESPACE}.signal(0);`);
+        expect(output).toContain(`let next = ${NAMESPACE}.read(count) + 1;`);
+    });
+});
+
+
 describe('index transform', () => {
     it('exports patterns array', () => {
         expect(pipeline.patterns).toEqual(['reactive(', 'reactive<']);

package/test/reactive/array.test.ts

@@ -282,19 +282,21 @@ describe('ReactiveArray', () => {
             expect(dispatched).toBe(false);
         });
 
-        it('does not dispatch when popping explicit undefined value', () => {
+        // An element's value says nothing about whether one was removed: listeners (e.g. a rendered
+        // list) must see every removal or they desync from the array
+        it('dispatches when popping an explicit undefined value', () => {
             let arr = new ReactiveArray<number | undefined>([1, undefined]),
-                dispatched = false;
+                events: { item: number | undefined }[] = [];
 
-            arr.on('pop', () => { dispatched = true; });
+            arr.on('pop', (e) => { events.push(e); });
             let item = arr.pop();
 
             expect(item).toBe(undefined);
             expect(arr.length).toBe(1);
-            expect(dispatched).toBe(false);
+            expect(events).toEqual([{ item: undefined }]);
         });
 
-        it('does not update reactive length when popping explicit undefined value', async () => {
+        it('updates reactive length when popping an explicit undefined value', async () => {
             let arr = new ReactiveArray<number | undefined>([1, undefined]),
                 lengths: number[] = [];
 
@@ -307,7 +309,7 @@ describe('ReactiveArray', () => {
             arr.pop();
             await Promise.resolve();
 
-            expect(lengths).toEqual([2]);
+            expect(lengths).toEqual([2, 1]);
         });
     });
 
@@ -337,20 +339,20 @@ describe('ReactiveArray', () => {
             expect(events).toEqual([{ item: 10 }]);
         });
 
-        it('does not dispatch when shifting explicit undefined value', () => {
+        it('dispatches when shifting an explicit undefined value', () => {
             let arr = new ReactiveArray<number | undefined>([undefined, 1, 2]),
-                dispatched = false;
+                events: { item: number | undefined }[] = [];
 
-            arr.on('shift', () => { dispatched = true; });
+            arr.on('shift', (e) => { events.push(e); });
             let item = arr.shift();
 
             expect(item).toBe(undefined);
             expect(arr.length).toBe(2);
             expect(arr[0]).toBe(1);
-            expect(dispatched).toBe(false);
+            expect(events).toEqual([{ item: undefined }]);
         });
 
-        it('does not update reactive length when shifting explicit undefined value', async () => {
+        it('updates reactive length when shifting an explicit undefined value', async () => {
             let arr = new ReactiveArray<number | undefined>([undefined, 1, 2]),
                 lengths: number[] = [];
 
@@ -363,7 +365,17 @@ describe('ReactiveArray', () => {
             arr.shift();
             await Promise.resolve();
 
-            expect(lengths).toEqual([3]);
+            expect(lengths).toEqual([3, 2]);
+        });
+
+        it('does not dispatch when shifting an empty array', () => {
+            let arr = new ReactiveArray<number>(),
+                dispatched = false;
+
+            arr.on('shift', () => { dispatched = true; });
+
+            expect(arr.shift()).toBe(undefined);
+            expect(dispatched).toBe(false);
         });
     });
 
@@ -477,7 +489,7 @@ describe('ReactiveArray', () => {
             expect(dispatched).toBe(false);
         });
 
-        it('splice with negative start removes from end', () => {
+        it('splice with negative start dispatches the resolved start', () => {
             let arr = new ReactiveArray([1, 2, 3, 4, 5]),
                 events: { start: number; deleteCount: number; items: number[] }[] = [];
 
@@ -487,7 +499,35 @@ describe('ReactiveArray', () => {
 
             expect([...removed]).toEqual([4]);
             expect([...arr]).toEqual([1, 2, 3, 5]);
-            expect(events).toEqual([{ start: -2, deleteCount: 1, items: [] }]);
+            expect(events).toEqual([{ start: 3, deleteCount: 1, items: [] }]);
+        });
+
+        it('splice dispatches the count actually removed, not the requested count', () => {
+            let arr = new ReactiveArray([1, 2, 3]),
+                events: { start: number; deleteCount: number; items: number[] }[] = [];
+
+            arr.on('splice', (e) => { events.push(e); });
+            arr.splice(1, 100);
+
+            expect([...arr]).toEqual([1]);
+            expect(events).toEqual([{ start: 1, deleteCount: 2, items: [] }]);
+        });
+
+        it('splice clamps an out-of-range or fractional start the way Array.prototype.splice does', () => {
+            let arr = new ReactiveArray([1, 2, 3]),
+                events: { start: number; deleteCount: number; items: number[] }[] = [];
+
+            arr.on('splice', (e) => { events.push(e); });
+            arr.splice(100, 0, 4);
+            arr.splice(-100, 0, 0);
+            arr.splice(1.9, 0, 9);
+
+            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] }
+            ]);
         });
     });
 

package/vitest.config.ts

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