@esportsplus/reactivity 0.39.2 → 0.41.0

package/README.md

@@ -222,7 +222,8 @@ let user = new ReactiveObject_1();
 | `reactive({...})` | Creates a reactive object with signals and computeds |
 | `reactive([...])` | Creates a reactive array |
 | `effect(fn, apply?)` | Runs a function that re-executes when dependencies change. Returns a dispose function. Optional `apply(value, prev)` runs untracked after each run with `fn`'s return value |
-| `root(fn)` | Creates an untracked scope. If `fn` accepts an argument, a dispose function is provided |
+| `root(fn, owner?)` | Creates an untracked scope. If `fn` accepts an argument, a dispose function is provided. With `owner`, the scope belongs to that node instead of whatever is running: `root(() => …, owner)` runs `fn` owned by `owner` (to re-enter it after an `await`), `root((dispose) => …, owner)` creates a child root of `owner`. Reads stay untracked. Throws on a disposed owner |
+| `owner()` | The node that owns what is created now: the running effect/computed, else the running root's scope, else `null`. Its `.owner` chain reaches every enclosing owner |
 | `onCleanup(fn)` | Registers a cleanup function for the current effect/computed |
 
 ### Low-Level Functions
@@ -301,6 +302,7 @@ All standard array methods (`push`, `pop`, `shift`, `unshift`, `splice`, `sort`,
 
 | Event | Payload | Description |
 |-------|---------|-------------|
+| `batch` | `ArrayOp<T>[]` | Every mutation of a task, in order, each as `{ op, ...payload }` of its event; delivered once inside the reactivity pass that follows (`flush()` settles it), outside any owner. A `clear` drops the mutations before it |
 | `clear` | `undefined` | Array was cleared |
 | `concat` | `{ items: T[] }` | Items were concatenated |
 | `pop` | `{ item: T }` | Item was popped |
@@ -330,13 +332,17 @@ All standard array methods (`push`, `pop`, `shift`, `unshift`, `splice`, `sort`,
 
 ```bash
 pnpm install
-pnpm build   # tsc
-pnpm test    # vitest run
-pnpm bench   # vitest bench --run
+pnpm build       # tsc -p tsconfig.build.json
+pnpm typecheck   # tsc --noEmit over src, test and bench
+pnpm lint        # oxlint, type-aware, warnings denied
+pnpm test        # vitest run
+pnpm bench       # vitest bench --run (add --reporter=verbose to print results when piped)
+pnpm verify      # build, typecheck, lint and test
 ```
 
-`agent:test` (`tsc --noEmit && vitest run`) and `agent:bench` (`vitest bench --run`) are the
-CI-facing aliases of the same build/test/bench commands.
+`agent:test` (`pnpm typecheck && vitest run`) and `agent:bench` (`vitest bench --run`) are the
+CI-facing aliases of the same test/bench commands. `test/compiler/output.test.ts` pins whole
+compiled modules; a compiler change that alters them must update the snapshot deliberately.
 
 ## Changes in 0.35.0
 

package/bench/compiler.bench.ts

@@ -0,0 +1,115 @@
+import { afterAll, test } from 'vitest';
+import { mkdtempSync, rmSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { pathToFileURL } from 'node:url';
+import { coordinator, languageService } from '@esportsplus/typescript/compiler';
+
+import pipeline from '~/compiler/index';
+
+
+// A small app: a state module, a central barrel, consumers reading through it, and modules the
+// compiler must leave alone (no import at all, or imports that never reach reactive)
+const FILES: Record<string, string> = {
+    'app.ts': [
+        "export { reactive as make } from '@esportsplus/reactivity';",
+        "export * from './state';"
+    ].join('\n'),
+    'consumer.ts': [
+        "import { count, list, make, store } from './app';",
+        "import * as app from './app';",
+        'export let local = make(0);',
+        'export let a = () => count + app.count + local;',
+        'export let b = () => list.length + store.items.length;',
+        'export let c = () => { list[0] = count; local += count; };'
+    ].join('\n'),
+    'helpers.ts': [
+        "import { join } from 'node:path';",
+        'export let path = (a: string, b: string) => join(a, b);',
+        'export let sum = (values: number[]) => values.reduce((total, value) => total + value, 0);'
+    ].join('\n'),
+    'plain.ts': [
+        'export let clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));',
+        'export let range = (n: number) => Array.from({ length: n }, (_, i) => i);'
+    ].join('\n'),
+    'runtime.ts': [
+        "import { reactive } from '@esportsplus/reactivity';",
+        'let count = reactive(0);',
+        'let doubled = reactive(() => count * 2);',
+        'let list = reactive([1, 2, 3]);',
+        'let store = reactive({ items: [1], n: 1 });',
+        'export let run = (): number => {',
+        '    let total = 0;',
+        '    for (let i = 0; i < 100; i++) {',
+        '        count++;',
+        '        list[0] = i;',
+        '        store.n = i;',
+        '        total += doubled + list.length + store.n;',
+        '    }',
+        '    return total;',
+        '};'
+    ].join('\n'),
+    'state.ts': [
+        "import { reactive } from '@esportsplus/reactivity';",
+        'export let count = reactive(0);',
+        'export let list = reactive([1, 2]);',
+        'export let store = reactive({ items: [1], n: 1 });'
+    ].join('\n')
+};
+
+const NAMES = Object.keys(FILES);
+
+
+let directory = mkdtempSync(join(process.cwd(), '.fixture-bench-')).replace(/\\/g, '/'),
+    config = directory + '/tsconfig.json';
+
+for (let i = 0, n = NAMES.length; i < n; i++) {
+    writeFileSync(join(directory, NAMES[i]), FILES[NAMES[i]]);
+}
+
+writeFileSync(config, JSON.stringify({
+    compilerOptions: { module: 'esnext', moduleResolution: 'bundler', strict: true, target: 'esnext', types: [] },
+    files: NAMES.map(name => './' + name)
+}));
+
+
+// Each pass hands the coordinator a checker it has not seen, so its memo starts empty and every
+// query a transform needs reaches tsgo, as when a build transforms each module once
+function transform(name: string): string {
+    let id = directory + '/' + name,
+        { checker, program } = languageService.update(config, id, FILES[name]);
+
+    return coordinator.transform([pipeline], FILES[name], program.getSourceFile(id)!, { checker: new Proxy(checker, {}), program }, directory, new Map()).code;
+}
+
+
+afterAll(() => {
+    languageService.dispose();
+    rmSync(directory, { force: true, recursive: true });
+});
+
+
+test('compiler transform', async ({ bench }) => {
+    await bench.compare(
+        bench('every module of the app', () => {
+            for (let i = 0, n = NAMES.length; i < n; i++) {
+                transform(NAMES[i]);
+            }
+        }),
+        bench('modules without reactive (no import, unrelated import)', () => {
+            transform('helpers.ts');
+            transform('plain.ts');
+        })
+    );
+});
+
+test('compiled output', async ({ bench }) => {
+    let file = directory + '/runtime.compiled.ts';
+
+    writeFileSync(file, transform('runtime.ts'));
+
+    let { run } = await import(pathToFileURL(file).href) as { run: () => number };
+
+    await bench('signal, computed, array and object reads and writes', () => {
+        run();
+    }).run();
+});

package/bench/kairo.bench.ts

@@ -157,7 +157,7 @@ function diamond() {
 }
 
 function mux() {
-    let heads = new Array(100).fill(null).map(() => framework.signal(0));
+    let heads = Array.from({ length: 100 }, () => framework.signal(0));
 
     let muxed = framework.computed(() => Object.fromEntries(heads.map((h) => h.read()).entries()));
 

package/bench/reactive/array.bench.ts

@@ -231,6 +231,7 @@ test('ReactiveArray reactive length', async ({ bench }) => {
         let arr = new ReactiveArray([1, 2, 3]);
 
         let stop = effect(() => {
+            // oxlint-disable-next-line no-unused-expressions -- the tracked read is what is measured
             arr.$length;
         });
 

package/bench/reactive/reactive-object.bench.ts

@@ -16,8 +16,8 @@ test('ReactiveObject creation', async ({ bench }) => {
         }),
         bench('create with async computed property', () => {
             new ReactiveObject({
-                value: 1,
-                async: () => Promise.resolve(0)
+                async: () => Promise.resolve(0),
+                value: 1
             });
         })
     );
@@ -29,6 +29,7 @@ test('ReactiveObject read/write', async ({ bench }) => {
         bench('read property (signal-backed)', () => {
             let obj = new ReactiveObject({ a: 1, b: 2, c: 3, d: 4, e: 5 });
 
+            // oxlint-disable-next-line no-unused-expressions -- the getter read is what is measured
             (obj as any).a;
         }),
         bench('write property (signal-backed)', () => {

package/build/compiler/array.js

@@ -32,10 +32,10 @@ function declare(ctx, node) {
             }
             let typeParam = elementType ? `<${elementType}>` : '';
             ctx.replacements.push({
-                node,
-                generate: (sf) => expression.elements.length > 0
-                    ? ` new ${NAMESPACE}.ReactiveArray${typeParam}(${expression.getText(sf)})`
-                    : ` new ${NAMESPACE}.ReactiveArray${typeParam}()`
+                generate: (_sourceFile, text) => expression.elements.length > 0
+                    ? ` new ${NAMESPACE}.ReactiveArray${typeParam}(${text(expression)})`
+                    : ` new ${NAMESPACE}.ReactiveArray${typeParam}()`,
+                node
             });
         }
     }
@@ -73,10 +73,10 @@ function length(access, replacements) {
     if (parent && ts.isBinaryExpression(parent) && parent.left === access && (parent.operatorToken.kind === ts.SyntaxKind.EqualsToken || COMPOUND_OPERATORS.has(parent.operatorToken.kind))) {
         let op = COMPOUND_OPERATORS.get(parent.operatorToken.kind);
         replacements.push({
-            node: parent,
-            generate: (sf) => op === undefined
-                ? `${expr.getText(sf)}.$length = ${parent.right.getText(sf)}`
-                : `${expr.getText(sf)}.$length = ${expr.getText(sf)}.length ${op} ${parent.right.getText(sf)}`
+            generate: (_sourceFile, text) => op === undefined
+                ? `${text(expr)}.$length = ${text(parent.right)}`
+                : `${text(expr)}.$length = ${text(expr)}.length ${op} ${text(parent.right)}`,
+            node: parent
         });
     }
     else if (parent &&
@@ -84,19 +84,19 @@ function length(access, replacements) {
         (parent.operator === ts.SyntaxKind.PlusPlusToken || parent.operator === ts.SyntaxKind.MinusMinusToken)) {
         let op = parent.operator === ts.SyntaxKind.PlusPlusToken ? '+' : '-';
         replacements.push({
-            node: parent,
-            generate: (sf) => `${expr.getText(sf)}.$length = ${expr.getText(sf)}.length ${op} 1`
+            generate: (_sourceFile, text) => `${text(expr)}.$length = ${text(expr)}.length ${op} 1`,
+            node: parent
         });
     }
     else {
         replacements.push({
-            node: access,
-            generate: (sf) => `${expr.getText(sf)}.$length`
+            generate: (_sourceFile, text) => `${text(expr)}.$length`,
+            node: access
         });
     }
 }
 function write(access, ctx) {
-    let parent = access.parent, array = (sf) => access.expression.getText(sf), index = (sf) => access.argumentExpression.getText(sf);
+    let parent = access.parent;
     if (ts.isDeleteExpression(parent)) {
         ctx.failures.push({ message: 'an element of a reactive array cannot be deleted; use splice()', node: parent });
         return;
@@ -104,19 +104,22 @@ function write(access, ctx) {
     if (ts.isBinaryExpression(parent)) {
         let op = COMPOUND_OPERATORS.get(parent.operatorToken.kind), right = parent.right;
         ctx.replacements.push({
-            node: parent,
-            generate: (sf) => op === undefined
-                ? `${array(sf)}.$set(${index(sf)}, ${right.getText(sf)})`
-                : `((_a, _k) => _a.$set(_k, _a[_k] ${op} (${right.getText(sf)})))(${array(sf)}, ${index(sf)})`
+            generate: (_sourceFile, text) => op === undefined
+                ? `${text(access.expression)}.$set(${text(access.argumentExpression)}, ${text(right)})`
+                : `((_a, _k) => _a.$set(_k, _a[_k] ${op} (${text(right)})))(${text(access.expression)}, ${text(access.argumentExpression)})`,
+            node: parent
         });
         return;
     }
     let unary = parent, op = unary.operator === ts.SyntaxKind.PlusPlusToken ? '+' : '-';
     ctx.replacements.push({
-        node: unary,
-        generate: (sf) => ts.isPrefixUnaryExpression(unary)
-            ? `((_a, _k) => (_a.$set(_k, _a[_k] ${op} 1), _a[_k]))(${array(sf)}, ${index(sf)})`
-            : `((_a, _k, _v) => (_a.$set(_k, _v ${op} 1), _v))(${array(sf)}, ${index(sf)}, ${array(sf)}[${index(sf)}])`
+        generate: (_sourceFile, text) => {
+            let array = text(access.expression), index = text(access.argumentExpression);
+            return ts.isPrefixUnaryExpression(unary)
+                ? `((_a, _k) => (_a.$set(_k, _a[_k] ${op} 1), _a[_k]))(${array}, ${index})`
+                : `((_a, _k, _v) => (_a.$set(_k, _v ${op} 1), _v))(${array}, ${index}, ${array}[${index}])`;
+        },
+        node: unary
     });
 }
 export default (sourceFile, bindings, isReactiveCall) => {
@@ -147,10 +150,10 @@ export default (sourceFile, bindings, isReactiveCall) => {
         }
         let name = assignment.left.text, elements = scope.unwrap(assignment.right);
         result.replacements.push({
-            node: assignment,
-            generate: (sf) => elements.elements.length > 0
-                ? `${name}.splice(0, ${name}.length, ...${elements.getText(sf)})`
-                : `${name}.splice(0, ${name}.length)`
+            generate: (_sourceFile, text) => elements.elements.length > 0
+                ? `${name}.splice(0, ${name}.length, ...${text(elements)})`
+                : `${name}.splice(0, ${name}.length)`,
+            node: assignment
         });
     }
     return result;

package/build/compiler/bindings.d.ts

@@ -4,12 +4,13 @@ import { TYPES } from './constants.js';
 import type { Bindings } from './types.js';
 declare const arrays: (bindings: Bindings, nodes: ts.Node[]) => Set<ts.Node>;
 declare const classify: (bindings: Bindings, call: ts.CallExpression) => TYPES | null;
-declare const create: (checker: ts.Checker, program: ts.Program, sourceFile: ts.SourceFile) => Bindings;
+declare const create: (queries: ts.Checker, program: ts.Program, sourceFile: ts.SourceFile) => Bindings;
 declare const denotes: (bindings: Bindings, expression: ts.Expression) => boolean;
 declare const holds: (bindings: Bindings, found: Origin | null) => boolean;
 declare const isReactiveCall: (bindings: Bindings, node: ts.Node) => node is ts.CallExpression;
 declare const kind: (bindings: Bindings, found: Origin | null) => TYPES | null;
 declare const origin: (bindings: Bindings, node: ts.Node) => Origin | null;
+declare const prefetch: (bindings: Bindings, calls: ts.CallExpression[]) => void;
 declare const unwrap: (expression: ts.Expression) => ts.Expression;
 declare const _default: {
     arrays: typeof arrays;
@@ -20,6 +21,7 @@ declare const _default: {
     isReactiveCall: typeof isReactiveCall;
     kind: typeof kind;
     origin: typeof origin;
+    prefetch: typeof prefetch;
     unwrap: typeof unwrap;
 };
 export default _default;

package/build/compiler/bindings.js

@@ -1,5 +1,5 @@
 import { ts } from '@esportsplus/typescript';
-import { references } from '@esportsplus/typescript/compiler';
+import { checker, references } from '@esportsplus/typescript/compiler';
 import { ENTRYPOINT, PACKAGE_NAME, TYPES } from './constants.js';
 const ARRAY_BRAND = 'once';
 const REACTIVE_ARRAY = 'ReactiveArray';
@@ -121,13 +121,16 @@ const classify = (bindings, call) => {
     let type = bindings.checker.getTypeAtLocation(arg);
     return type ? kindOf(bindings.checker, type) : null;
 };
-const create = (checker, program, sourceFile) => ({
-    checker,
-    entries: new Set(references.exported(checker, program, PACKAGE_NAME, ENTRYPOINT).map(references.key)),
-    origins: references.origins(checker, program, sourceFile),
-    program,
-    sourceFile
-});
+const create = (queries, program, sourceFile) => {
+    let memoized = checker.cached(queries, program);
+    return {
+        checker: memoized,
+        entries: new Set(references.exported(memoized, program, PACKAGE_NAME, ENTRYPOINT).map(references.key)),
+        origins: references.origins(memoized, program, sourceFile),
+        program,
+        sourceFile
+    };
+};
 const denotes = (bindings, expression) => {
     return references.denotes(bindings.checker, bindings.program, expression, bindings.entries);
 };
@@ -179,7 +182,27 @@ const kind = (bindings, found) => {
 const origin = (bindings, node) => {
     return bindings.origins.get(node) ?? references.origin(bindings.checker, bindings.program, node);
 };
+const prefetch = (bindings, calls) => {
+    let nodes = [];
+    for (let i = 0, n = calls.length; i < n; i++) {
+        let arg = calls[i].arguments[0];
+        if (!arg || calls[i].arguments.length !== 1 || ts.isSpreadElement(arg)) {
+            continue;
+        }
+        let value = unwrap(arg);
+        if (ts.isArrayLiteralExpression(value) ||
+            ts.isArrowFunction(value) ||
+            ts.isFunctionExpression(value) ||
+            ts.isObjectLiteralExpression(value)) {
+            continue;
+        }
+        nodes.push(arg);
+    }
+    if (nodes.length > 0) {
+        bindings.checker.getTypeAtLocation(nodes);
+    }
+};
 const unwrap = (expression) => {
     return references.unwrap(expression);
 };
-export default { arrays, classify, create, denotes, holds, isReactiveCall, kind, origin, unwrap };
+export default { arrays, classify, create, denotes, holds, isReactiveCall, kind, origin, prefetch, unwrap };

package/build/compiler/index.d.ts

@@ -1,9 +1,10 @@
 import type { ImportIntent, ReplacementIntent, TransformContext } from '@esportsplus/typescript/compiler';
 declare const _default: {
+    name: string;
     transform: (ctx: TransformContext) => {
-        dependencies: string[];
-    } | {
         dependencies?: undefined;
+    } | {
+        dependencies: string[];
     } | {
         imports: ImportIntent[];
         prepend: string[];

package/build/compiler/index.js

@@ -4,6 +4,7 @@ import array from './array.js';
 import object from './object.js';
 import primitives from './primitives.js';
 import scope from './bindings.js';
+const REGEX_IMPORT = /\bimport\b|\brequire\s*\(/;
 function failed(sourceFile, failures) {
     let lines = [];
     for (let i = 0, n = failures.length; i < n; i++) {
@@ -42,27 +43,23 @@ function isLowered(site) {
 function siteOf(identifier) {
     let parent = identifier.parent;
     if ((ts.isPropertyAccessExpression(parent) && parent.name === identifier) ||
-        (ts.isElementAccessExpression(parent) && parent.argumentExpression === identifier)) {
+        (ts.isElementAccessExpression(parent) && parent.argumentExpression === identifier && (ts.isStringLiteral(identifier) || ts.isNoSubstitutionTemplateLiteral(identifier)))) {
         return parent;
     }
     return identifier;
 }
 export default {
+    name: PACKAGE_NAME,
     transform: (ctx) => {
-        let { checker, program, sourceFile } = ctx, bindings = scope.create(checker, program, sourceFile), calls = new Set(), dependencies = new Set(), failures = [], self = sourceFile.fileName.toLowerCase();
+        if (!REGEX_IMPORT.test(ctx.code)) {
+            return {};
+        }
+        let { checker, program, sourceFile } = ctx, bindings = scope.create(checker, program, sourceFile), calls = new Set(), dependencies = new Set(), entries = new Set(), failures = [], self = sourceFile.fileName.toLowerCase();
         for (let [identifier, found] of bindings.origins) {
-            let entry = scope.holds(bindings, found);
-            if (!entry && scope.kind(bindings, found) === null) {
-                continue;
-            }
-            for (let file of [...found.through, found.declaration.path]) {
-                if (file.toLowerCase() !== self) {
-                    dependencies.add(file);
-                }
-            }
-            if (!entry) {
+            if (!scope.holds(bindings, found)) {
                 continue;
             }
+            entries.add(identifier);
             let site = siteOf(identifier), parent = site.parent;
             while (parent && ts.isParenthesizedExpression(parent)) {
                 parent = parent.parent;
@@ -77,6 +74,17 @@ export default {
                 });
             }
         }
+        scope.prefetch(bindings, [...calls]);
+        for (let [identifier, found] of bindings.origins) {
+            if (!entries.has(identifier) && scope.kind(bindings, found) === null) {
+                continue;
+            }
+            for (let file of [...found.through, found.declaration.path]) {
+                if (file.toLowerCase() !== self) {
+                    dependencies.add(file);
+                }
+            }
+        }
         let isReactiveCall = (node) => calls.has(node), intents = {
             imports: [],
             prepend: [],
@@ -111,7 +119,7 @@ export default {
                 continue;
             }
             intents.replacements.push({
-                generate: () => `${NAMESPACE}.reactive(${call.arguments.map(a => a.getText(sourceFile)).join(', ')})`,
+                generate: (_sourceFile, text) => `${NAMESPACE}.reactive(${call.arguments.map(text).join(', ')})`,
                 node: call
             });
         }

package/build/compiler/object.js

@@ -2,7 +2,6 @@ import { ts } from '@esportsplus/typescript';
 import { code, uid } from '@esportsplus/typescript/compiler';
 import { NAMESPACE, TYPES } from './constants.js';
 function analyzeProperty(prop, bindings) {
-    let sourceFile = bindings.sourceFile;
     if (!ts.isPropertyAssignment(prop)) {
         return null;
     }
@@ -13,7 +12,7 @@ function analyzeProperty(prop, bindings) {
     else {
         return null;
     }
-    let unwrapped = prop.initializer, value = unwrapped, valueText = value.getText(sourceFile);
+    let unwrapped = prop.initializer, value = unwrapped;
     while (ts.isAsExpression(unwrapped) || ts.isTypeAssertion(unwrapped) || ts.isParenthesizedExpression(unwrapped)) {
         unwrapped = unwrapped.expression;
     }
@@ -23,11 +22,11 @@ function analyzeProperty(prop, bindings) {
             (ts.isTypeReferenceNode(type) &&
                 ts.isIdentifier(type.typeName) &&
                 type.typeName.text === 'Array')) {
-            return { isStatic: false, key, type: TYPES.Array, valueText };
+            return { isStatic: false, key, type: TYPES.Array, value };
         }
     }
     if (ts.isArrowFunction(unwrapped) || ts.isFunctionExpression(unwrapped)) {
-        return { isStatic: false, key, type: TYPES.Computed, valueText };
+        return { isStatic: false, key, type: TYPES.Computed, value };
     }
     if (ts.isArrayLiteralExpression(unwrapped)) {
         let elements = unwrapped.elements, isStatic = value === unwrapped;
@@ -36,23 +35,23 @@ function analyzeProperty(prop, bindings) {
                 isStatic = false;
             }
         }
-        return { isStatic, key, type: TYPES.Array, valueText };
+        return { isStatic, key, type: TYPES.Array, value };
     }
     let type = isStaticValue(unwrapped) ? undefined : bindings.checker.getTypeAtLocation(value);
     if (type && (bindings.checker.isArrayType(type) || bindings.checker.isTupleType(type))) {
-        return { isStatic: false, key, type: TYPES.Array, valueText };
+        return { isStatic: false, key, type: TYPES.Array, value };
     }
     return {
         isStatic: isStaticValue(value),
         key,
         type: TYPES.Signal,
-        valueText
+        value
     };
 }
-function buildClassCode(classname, properties, typehint) {
+function buildClassCode(classname, properties, sourceFile, typehint) {
     let accessors = [], body = [], constraint = [], fields = [], generics = [], parameters = [], setters = 0;
     for (let i = 0, n = properties.length; i < n; i++) {
-        let { isStatic, key, type, valueText } = properties[i], generic = typehint ? `T['${key}']` : `T${parameters.length}`, parameter = `_p${parameters.length}`;
+        let { isStatic, key, type, value: initializer } = properties[i], generic = typehint ? `T['${key}']` : `T${parameters.length}`, parameter = `_p${parameters.length}`;
         if (typehint && type === TYPES.Signal) {
             constraint.push(`'${key}'?: unknown`);
             isStatic = false;
@@ -68,7 +67,7 @@ function buildClassCode(classname, properties, typehint) {
                         ${NAMESPACE}.write(this.#${key}, ${value});
                     }
                 `);
-                fields.push(`#${key} = this[${NAMESPACE}.SIGNAL](${valueText});`);
+                fields.push(`#${key} = this[${NAMESPACE}.SIGNAL](${initializer.getText(sourceFile)});`);
             }
             else {
                 accessors.push(`
@@ -186,12 +185,12 @@ export default (sourceFile, bindings, isReactiveCall) => {
     let prepend = [], replacements = [];
     for (let i = 0, n = ctx.calls.length; i < n; i++) {
         let call = ctx.calls[i], typehint = call.typehint;
-        prepend.push(buildClassCode(call.classname, call.properties, typehint));
+        prepend.push(buildClassCode(call.classname, call.properties, sourceFile, typehint));
         replacements.push({
-            generate: () => {
+            generate: (_sourceFile, text) => {
                 let args = call.properties
                     .filter(({ isStatic, type }) => typehint || !isStatic || type !== TYPES.Signal)
-                    .map(p => p.valueText)
+                    .map(p => text(p.value))
                     .join(', ');
                 return typehint
                     ? ` new ${call.classname}<${typehint}>(${args})`

package/build/compiler/plugins/vite.d.ts

@@ -1,6 +1,7 @@
 declare const _default: ({ root }?: {
     root?: string;
 }) => {
+    buildStart: () => void;
     closeBundle: () => void;
     closeWatcher: () => void;
     configResolved: (config: unknown) => void;
@@ -20,10 +21,18 @@ declare const _default: ({ root }?: {
     renderChunk: (code: string, chunk: {
         fileName: string;
     }) => null;
-    transform: (code: string, id: string) => {
-        code: string;
-        map: import("@esportsplus/typescript/compiler").SourceMapV3;
-    } | null;
+    transform: {
+        filter: {
+            id: {
+                exclude: RegExp[];
+                include: RegExp;
+            };
+        };
+        handler: (code: string, id: string) => {
+            code: string;
+            map: import("@esportsplus/typescript/compiler").SourceMapV3;
+        } | null;
+    };
     watchChange: (id: string) => void;
 };
 export default _default;

package/build/compiler/primitives.js

@@ -86,7 +86,7 @@ function isPatternTarget(node) {
 function readNode(identifier) {
     let parent = identifier.parent;
     if ((ts.isPropertyAccessExpression(parent) && parent.name === identifier) ||
-        (ts.isElementAccessExpression(parent) && parent.argumentExpression === identifier)) {
+        (ts.isElementAccessExpression(parent) && parent.argumentExpression === identifier && (ts.isStringLiteral(identifier) || ts.isNoSubstitutionTemplateLiteral(identifier)))) {
         return parent;
     }
     return identifier;
@@ -103,10 +103,10 @@ function reference(ctx, node, kind) {
         ctx.failures.push({ message: 'a reactive binding cannot be assigned through a destructuring pattern; assign it directly', node });
         return;
     }
-    let text = node.getText(ctx.bindings.sourceFile);
+    let binding = node.getText(ctx.bindings.sourceFile);
     if (ts.isShorthandPropertyAssignment(parent)) {
         ctx.replacements.push({
-            generate: () => `${text}: ${NAMESPACE}.read(${text})`,
+            generate: () => `${binding}: ${NAMESPACE}.read(${binding})`,
             node: parent
         });
         return;
@@ -129,7 +129,7 @@ function reference(ctx, node, kind) {
     }
     if (!writeCtx) {
         ctx.replacements.push({
-            generate: () => `${NAMESPACE}.read(${text})`,
+            generate: () => `${NAMESPACE}.read(${binding})`,
             node
         });
         return;
@@ -141,14 +141,14 @@ function reference(ctx, node, kind) {
     if (writeCtx === 'simple' && ts.isBinaryExpression(parent)) {
         let right = parent.right;
         ctx.replacements.push({
-            generate: (sf) => `${NAMESPACE}.write(${text}, ${right.getText(sf)})`,
+            generate: (_sourceFile, text) => `${NAMESPACE}.write(${binding}, ${text(right)})`,
             node: parent
         });
     }
     else if (writeCtx === 'compound' && ts.isBinaryExpression(parent)) {
         let op = COMPOUND_OPERATORS.get(parent.operatorToken.kind) ?? '+', right = parent.right;
         ctx.replacements.push({
-            generate: (sf) => `${NAMESPACE}.write(${text}, ${text}.value ${op} ${right.getText(sf)})`,
+            generate: (_sourceFile, text) => `${NAMESPACE}.write(${binding}, ${binding}.value ${op} ${text(right)})`,
             node: parent
         });
     }
@@ -156,20 +156,20 @@ function reference(ctx, node, kind) {
         let unary = parent, delta = unary.operator === ts.SyntaxKind.PlusPlusToken ? '+ 1' : '- 1';
         if (ts.isExpressionStatement(unary.parent)) {
             ctx.replacements.push({
-                generate: () => `${NAMESPACE}.write(${text}, ${text}.value ${delta})`,
+                generate: () => `${NAMESPACE}.write(${binding}, ${binding}.value ${delta})`,
                 node: unary
             });
         }
         else if (ts.isPrefixUnaryExpression(unary)) {
             ctx.replacements.push({
-                generate: () => `(${NAMESPACE}.write(${text}, ${text}.value ${delta}), ${text}.value)`,
+                generate: () => `(${NAMESPACE}.write(${binding}, ${binding}.value ${delta}), ${binding}.value)`,
                 node: unary
             });
         }
         else {
             let tmp = `_t${ctx.tmpCounter++}`;
             ctx.replacements.push({
-                generate: () => `((${tmp}) => (${NAMESPACE}.write(${text}, ${tmp} ${delta}), ${tmp}))(${text}.value)`,
+                generate: () => `((${tmp}) => (${NAMESPACE}.write(${binding}, ${tmp} ${delta}), ${tmp}))(${binding}.value)`,
                 node: unary
             });
         }