@esportsplus/reactivity 0.37.2 → 0.38.1

package/src/compiler/array.ts

@@ -1,21 +1,56 @@
 import { ts } from '@esportsplus/typescript';
 import type { ReplacementIntent } from '@esportsplus/typescript/compiler';
-import { COMPOUND_OPERATORS, NAMESPACE, TYPES } from './constants';
+import { COMPOUND_OPERATORS, NAMESPACE } from './constants';
 import type { Bindings, IsReactiveCall } from './types';
+import type { Failure } from './primitives';
 import scope from './bindings';
 
 
-type VisitContext = {
-    bindings: Bindings;
-    isReactiveCall: IsReactiveCall;
+type ArrayTransformResult = {
+    failures: Failure[];
+    // Whether the output references the runtime namespace (ReactiveArray construction)
+    namespaced: boolean;
+    // The array expressions found reactive by type
+    reactive: ts.Expression[];
     replacements: ReplacementIntent[];
-    sourceFile: ts.SourceFile;
 };
 
+// Sites that must go through a ReactiveArray's tracking API when their array is reactive
+type Candidates = {
+    // `arr.length` reads and writes
+    lengths: ts.PropertyAccessExpression[];
+    // `arr = [...]`
+    reassignments: ts.BinaryExpression[];
+    // `arr[i] = v`, `arr[i] op= v`, `arr[i]++`, `delete arr[i]`
+    writes: ts.ElementAccessExpression[];
+};
+
+
+function collect(node: ts.Node, candidates: Candidates): void {
+    if (ts.isTypeNode(node)) {
+        return;
+    }
+
+    if (ts.isPropertyAccessExpression(node) && node.name.text === 'length') {
+        candidates.lengths.push(node);
+    }
+    else if (ts.isElementAccessExpression(node) && isWritten(node)) {
+        candidates.writes.push(node);
+    }
+    else if (
+        ts.isBinaryExpression(node) &&
+        node.operatorToken.kind === ts.SyntaxKind.EqualsToken &&
+        ts.isIdentifier(node.left) &&
+        ts.isArrayLiteralExpression(scope.unwrap(node.right))
+    ) {
+        candidates.reassignments.push(node);
+    }
 
-// Pass 1, in source order so an alias (`let b = a`) sees the array it copies: reactive([...])
-// declarations, `ReactiveArray`-typed parameters, and aliases of an existing array binding
-function declare(ctx: VisitContext, node: ts.Node): void {
+    node.forEachChild(child => collect(child, candidates));
+}
+
+// Pass 1: reactive([...]) literals become ReactiveArray instances
+function declare(ctx: { isReactiveCall: IsReactiveCall; replacements: ReplacementIntent[]; sourceFile: ts.SourceFile }, node: ts.Node): void {
     if (ctx.isReactiveCall(node) && node.arguments.length > 0) {
         let arg = node.arguments[0],
             expression = ts.isAsExpression(arg) ? arg.expression : arg;
@@ -30,10 +65,6 @@ function declare(ctx: VisitContext, node: ts.Node): void {
                 elementType = getElementTypeText(node.parent.type, ctx.sourceFile);
             }
 
-            if (node.parent && ts.isVariableDeclaration(node.parent) && ts.isIdentifier(node.parent.name)) {
-                scope.declare(ctx.bindings, node.parent.name, TYPES.Array);
-            }
-
             let typeParam = elementType ? `<${elementType}>` : '';
 
             ctx.replacements.push({
@@ -45,32 +76,6 @@ function declare(ctx: VisitContext, node: ts.Node): void {
         }
     }
 
-    if (
-        ts.isVariableDeclaration(node) &&
-        ts.isIdentifier(node.name) &&
-        node.initializer &&
-        (ts.isIdentifier(node.initializer) || ts.isPropertyAccessExpression(node.initializer)) &&
-        scope.isArray(ctx.bindings, node.initializer)
-    ) {
-        scope.declare(ctx.bindings, node.name, TYPES.Array);
-    }
-
-    if ((ts.isFunctionDeclaration(node) || ts.isArrowFunction(node)) && node.parameters) {
-        for (let i = 0, n = node.parameters.length; i < n; i++) {
-            let param = node.parameters[i];
-
-            if (
-                ts.isIdentifier(param.name) &&
-                param.type &&
-                ts.isTypeReferenceNode(param.type) &&
-                ts.isIdentifier(param.type.typeName) &&
-                param.type.typeName.text === 'ReactiveArray'
-            ) {
-                scope.declare(ctx.bindings, param.name, TYPES.Array);
-            }
-        }
-    }
-
     node.forEachChild(child => declare(ctx, child));
 }
 
@@ -92,108 +97,149 @@ function getElementTypeText(typeNode: ts.TypeNode, sourceFile: ts.SourceFile): s
     return null;
 }
 
-// Pass 2: rewrite `.length`, index writes and whole-array reassignment on array bindings only
-function rewrite(ctx: VisitContext, node: ts.Node): void {
-    if (ts.isTypeNode(node)) {
-        return;
-    }
+function isWritten(access: ts.ElementAccessExpression): boolean {
+    let parent = access.parent;
 
-    if (ts.isPropertyAccessExpression(node) && node.name.text === 'length' && scope.isArray(ctx.bindings, node.expression)) {
-        let expr = node.expression,
-            parent = node.parent;
+    if (!parent) {
+        return false;
+    }
 
-        // arr.length = value OR arr.length += value
-        if (parent && ts.isBinaryExpression(parent) && parent.left === node && (parent.operatorToken.kind === ts.SyntaxKind.EqualsToken || COMPOUND_OPERATORS.has(parent.operatorToken.kind))) {
-            let op = COMPOUND_OPERATORS.get(parent.operatorToken.kind);
+    if (ts.isBinaryExpression(parent)) {
+        let op = parent.operatorToken.kind;
 
-            if (op === undefined) {
-                ctx.replacements.push({
-                    node: parent,
-                    generate: (sf) => `${expr.getText(sf)}.$length = ${parent.right.getText(sf)}`
-                });
-            }
-            else {
-                ctx.replacements.push({
-                    node: parent,
-                    generate: (sf) => `${expr.getText(sf)}.$length = ${expr.getText(sf)}.length ${op} ${parent.right.getText(sf)}`
-                });
-            }
-        }
-        // arr.length++ / arr.length-- / ++arr.length / --arr.length
-        else if (parent && (ts.isPostfixUnaryExpression(parent) || ts.isPrefixUnaryExpression(parent))) {
-            let op = parent.operator === ts.SyntaxKind.PlusPlusToken ? '+' : '-';
+        return parent.left === access && (op === ts.SyntaxKind.EqualsToken || COMPOUND_OPERATORS.has(op));
+    }
 
-            ctx.replacements.push({
-                node: parent,
-                generate: (sf) => `${expr.getText(sf)}.$length = ${expr.getText(sf)}.length ${op} 1`
-            });
-        }
-        // Read-only: arr.length → arr.$length
-        else {
-            ctx.replacements.push({
-                node,
-                generate: (sf) => `${expr.getText(sf)}.$length`
-            });
-        }
+    if (ts.isPostfixUnaryExpression(parent) || ts.isPrefixUnaryExpression(parent)) {
+        return parent.operator === ts.SyntaxKind.PlusPlusToken || parent.operator === ts.SyntaxKind.MinusMinusToken;
     }
 
-    if (
-        ts.isBinaryExpression(node) &&
-        node.operatorToken.kind === ts.SyntaxKind.EqualsToken &&
-        ts.isElementAccessExpression(node.left) &&
-        scope.isArray(ctx.bindings, node.left.expression)
+    return ts.isDeleteExpression(parent);
+}
+
+function length(access: ts.PropertyAccessExpression, replacements: ReplacementIntent[]): void {
+    let expr = access.expression,
+        parent = access.parent;
+
+    // arr.length = value OR arr.length op= value
+    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)}`
+        });
+    }
+    // arr.length++ / arr.length-- / ++arr.length / --arr.length
+    else if (
+        parent &&
+        (ts.isPostfixUnaryExpression(parent) || ts.isPrefixUnaryExpression(parent)) &&
+        (parent.operator === ts.SyntaxKind.PlusPlusToken || parent.operator === ts.SyntaxKind.MinusMinusToken)
     ) {
-        let element = node.left;
+        let op = parent.operator === ts.SyntaxKind.PlusPlusToken ? '+' : '-';
+
+        replacements.push({
+            node: parent,
+            generate: (sf) => `${expr.getText(sf)}.$length = ${expr.getText(sf)}.length ${op} 1`
+        });
+    }
+    // Read-only: arr.length -> arr.$length
+    else {
+        replacements.push({
+            node: access,
+            generate: (sf) => `${expr.getText(sf)}.$length`
+        });
+    }
+}
+
+// An element write must notify, so it goes through $set; operands are evaluated once
+function write(access: ts.ElementAccessExpression, ctx: ArrayTransformResult): void {
+    let parent = access.parent!,
+        array = (sf: ts.SourceFile) => access.expression.getText(sf),
+        index = (sf: ts.SourceFile) => access.argumentExpression.getText(sf);
+
+    if (ts.isDeleteExpression(parent)) {
+        ctx.failures.push({ message: 'an element of a reactive array cannot be deleted; use splice()', node: parent });
+        return;
+    }
+
+    if (ts.isBinaryExpression(parent)) {
+        let op = COMPOUND_OPERATORS.get(parent.operatorToken.kind),
+            right = parent.right;
 
         ctx.replacements.push({
-            node,
-            generate: (sf) => `${element.expression.getText(sf)}.$set(
-                    ${element.argumentExpression.getText(sf)},
-                    ${node.right.getText(sf)}
-                )`
+            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)})`
         });
+
+        return;
     }
 
-    if (
-        ts.isBinaryExpression(node) &&
-        node.operatorToken.kind === ts.SyntaxKind.EqualsToken &&
-        ts.isIdentifier(node.left) &&
-        scope.isArray(ctx.bindings, node.left)
-    ) {
-        let name = node.left.text,
-            right = node.right;
+    let unary = parent as ts.PostfixUnaryExpression | ts.PrefixUnaryExpression,
+        op = unary.operator === ts.SyntaxKind.PlusPlusToken ? '+' : '-';
 
-        // Unwrap "as" expressions: arr = [] as Type[]
-        while (ts.isAsExpression(right) || ts.isTypeAssertion(right)) {
-            right = right.expression;
-        }
+    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)}])`
+    });
+}
 
-        if (ts.isArrayLiteralExpression(right)) {
-            let elements = right;
 
-            ctx.replacements.push({
-                node,
-                generate: (sf) => elements.elements.length > 0
-                    ? `${name}.splice(0, ${name}.length, ...${elements.getText(sf)})`
-                    : `${name}.splice(0, ${name}.length)`
-            });
+// Reactive arrays are recognized by type, so `.length` and element writes compile wherever the
+// array came from: a local reactive([...]), an import, an object property, a parameter
+export default (sourceFile: ts.SourceFile, bindings: Bindings, isReactiveCall: IsReactiveCall): ArrayTransformResult => {
+    let candidates: Candidates = { lengths: [], reassignments: [], writes: [] },
+        result: ArrayTransformResult = { failures: [], namespaced: false, reactive: [], replacements: [] };
+
+    declare({ isReactiveCall, replacements: result.replacements, sourceFile }, sourceFile);
+
+    result.namespaced = result.replacements.length > 0;
+    collect(sourceFile, candidates);
+
+    let reactive = scope.arrays(bindings, [
+            ...candidates.lengths.map(access => access.expression),
+            ...candidates.reassignments.map(assignment => assignment.left),
+            ...candidates.writes.map(access => access.expression)
+        ]);
+
+    result.reactive = [...reactive] as ts.Expression[];
+
+    for (let i = 0, n = candidates.lengths.length; i < n; i++) {
+        if (reactive.has(candidates.lengths[i].expression)) {
+            length(candidates.lengths[i], result.replacements);
         }
     }
 
-    node.forEachChild(child => rewrite(ctx, child));
-}
+    for (let i = 0, n = candidates.writes.length; i < n; i++) {
+        if (reactive.has(candidates.writes[i].expression)) {
+            write(candidates.writes[i], result);
+        }
+    }
+
+    // `arr = [...]` refills the same ReactiveArray so everything holding it stays live
+    for (let i = 0, n = candidates.reassignments.length; i < n; i++) {
+        let assignment = candidates.reassignments[i];
 
+        if (!reactive.has(assignment.left) || isReactiveCall(scope.unwrap(assignment.right))) {
+            continue;
+        }
 
-export default (sourceFile: ts.SourceFile, bindings: Bindings, isReactiveCall: IsReactiveCall): ReplacementIntent[] => {
-    let ctx: VisitContext = {
-            bindings,
-            isReactiveCall,
-            replacements: [],
-            sourceFile
-        };
+        let name = (assignment.left as ts.Identifier).text,
+            elements = scope.unwrap(assignment.right) as ts.ArrayLiteralExpression;
 
-    declare(ctx, sourceFile);
-    rewrite(ctx, sourceFile);
+        result.replacements.push({
+            node: assignment,
+            generate: (sf) => elements.elements.length > 0
+                ? `${name}.splice(0, ${name}.length, ...${elements.getText(sf)})`
+                : `${name}.splice(0, ${name}.length)`
+        });
+    }
 
-    return ctx.replacements;
+    return result;
 };