@esportsplus/reactivity 0.24.1 → 0.24.3

package/src/transformer/index.ts

@@ -1,67 +1,194 @@
-import type { Bindings, TransformResult } from '~/types';
+import { uid } from '@esportsplus/typescript/transformer';
+import type { Bindings, Namespaces } from '~/types';
+import { createArrayTransformer } from './transforms/array';
+import { createObjectTransformer, type GeneratedClass } from './transforms/object';
+import { createPrimitivesTransformer } from './transforms/primitives';
 import { mightNeedTransform } from './detector';
-import { transformReactiveArrays } from './transforms/array';
-import { transformReactiveObjects } from './transforms/object';
-import { transformReactivePrimitives } from './transforms/primitives';
 import { ts } from '@esportsplus/typescript';
 
 
-const createTransformer = (): ts.TransformerFactory<ts.SourceFile> => {
-    return () => {
+function addImportsTransformer(
+    neededImports: Set<string>,
+    ns: Namespaces
+): (context: ts.TransformationContext) => (sourceFile: ts.SourceFile) => ts.SourceFile {
+    return (context: ts.TransformationContext) => {
         return (sourceFile: ts.SourceFile): ts.SourceFile => {
-            let result = transform(sourceFile);
+            if (neededImports.size === 0) {
+                return sourceFile;
+            }
+
+            let factory = context.factory,
+                needsArray = false,
+                needsConstants = false,
+                needsReactivity = false,
+                newStatements: ts.Statement[] = [];
+
+            for (let imp of neededImports) {
+                if (imp === 'ReactiveArray') {
+                    needsArray = true;
+                }
+                else if (imp === 'REACTIVE_OBJECT') {
+                    needsConstants = true;
+                }
+                else {
+                    needsReactivity = true;
+                }
+            }
+
+            // Add namespace imports
+            if (needsReactivity) {
+                newStatements.push(
+                    factory.createImportDeclaration(
+                        undefined,
+                        factory.createImportClause(
+                            false,
+                            undefined,
+                            factory.createNamespaceImport(factory.createIdentifier(ns.reactivity))
+                        ),
+                        factory.createStringLiteral('@esportsplus/reactivity')
+                    )
+                );
+            }
+
+            if (needsArray) {
+                newStatements.push(
+                    factory.createImportDeclaration(
+                        undefined,
+                        factory.createImportClause(
+                            false,
+                            undefined,
+                            factory.createNamespaceImport(factory.createIdentifier(ns.array))
+                        ),
+                        factory.createStringLiteral('@esportsplus/reactivity/reactive/array')
+                    )
+                );
+            }
+
+            if (needsConstants) {
+                newStatements.push(
+                    factory.createImportDeclaration(
+                        undefined,
+                        factory.createImportClause(
+                            false,
+                            undefined,
+                            factory.createNamespaceImport(factory.createIdentifier(ns.constants))
+                        ),
+                        factory.createStringLiteral('@esportsplus/reactivity/constants')
+                    )
+                );
+            }
+
+            // Insert new imports after existing imports
+            let insertIndex = 0,
+                statements = sourceFile.statements;
 
-            return result.transformed ? result.sourceFile : sourceFile;
+            for (let i = 0, n = statements.length; i < n; i++) {
+                if (ts.isImportDeclaration(statements[i])) {
+                    insertIndex = i + 1;
+                }
+                else {
+                    break;
+                }
+            }
+
+            let updatedStatements = [
+                ...statements.slice(0, insertIndex),
+                ...newStatements,
+                ...statements.slice(insertIndex)
+            ];
+
+            return factory.updateSourceFile(sourceFile, updatedStatements);
         };
     };
-};
+}
 
-const transform = (sourceFile: ts.SourceFile): TransformResult => {
-    let bindings: Bindings = new Map(),
-        code = sourceFile.getFullText(),
-        current = sourceFile,
-        original = code,
-        result: string;
+function insertClassesTransformer(
+    generatedClasses: GeneratedClass[]
+): (context: ts.TransformationContext) => (sourceFile: ts.SourceFile) => ts.SourceFile {
+    return (context: ts.TransformationContext) => {
+        return (sourceFile: ts.SourceFile): ts.SourceFile => {
+            if (generatedClasses.length === 0) {
+                return sourceFile;
+            }
 
-    if (!mightNeedTransform(code)) {
-        return { code, sourceFile, transformed: false };
-    }
+            let factory = context.factory;
 
-    // Run all transforms, only re-parse between transforms if code changed
-    result = transformReactiveObjects(current, bindings);
+            // Find position after imports
+            let insertIndex = 0,
+                statements = sourceFile.statements;
 
-    if (result !== code) {
-        current = ts.createSourceFile(sourceFile.fileName, result, sourceFile.languageVersion, true);
-        code = result;
-    }
+            for (let i = 0, n = statements.length; i < n; i++) {
+                if (ts.isImportDeclaration(statements[i])) {
+                    insertIndex = i + 1;
+                }
+                else {
+                    break;
+                }
+            }
 
-    result = transformReactiveArrays(current, bindings);
+            let classDecls = generatedClasses.map(gc => gc.classDecl),
+                updatedStatements = [
+                    ...statements.slice(0, insertIndex),
+                    ...classDecls,
+                    ...statements.slice(insertIndex)
+                ];
 
-    if (result !== code) {
-        current = ts.createSourceFile(sourceFile.fileName, result, sourceFile.languageVersion, true);
-        code = result;
-    }
+            return factory.updateSourceFile(sourceFile, updatedStatements);
+        };
+    };
+}
 
-    result = transformReactivePrimitives(current, bindings);
 
-    if (result !== code) {
-        current = ts.createSourceFile(sourceFile.fileName, result, sourceFile.languageVersion, true);
-        code = result;
-    }
+const createTransformer = (): ts.TransformerFactory<ts.SourceFile> => {
+    return (context: ts.TransformationContext) => {
+        return (sourceFile: ts.SourceFile): ts.SourceFile => {
+            let code = sourceFile.getFullText();
+
+            if (!mightNeedTransform(code)) {
+                return sourceFile;
+            }
+
+            let bindings: Bindings = new Map(),
+                generatedClasses: GeneratedClass[] = [],
+                neededImports = new Set<string>(),
+                ns: Namespaces = {
+                    array: uid('ra'),
+                    constants: uid('rc'),
+                    reactivity: uid('r')
+                };
+
+            // Run object transformer first (generates classes, tracks array bindings)
+            let objectTransformer = createObjectTransformer(bindings, neededImports, generatedClasses, ns)(context);
+
+            sourceFile = objectTransformer(sourceFile);
+
+            // Run array transformer (handles array.length, array[i] = v)
+            let arrayTransformer = createArrayTransformer(bindings)(context);
+
+            sourceFile = arrayTransformer(sourceFile);
 
-    if (code === original) {
-        return { code, sourceFile, transformed: false };
-    }
+            // Run primitives transformer (handles signal/computed, reads/writes)
+            let primitivesTransformer = createPrimitivesTransformer(bindings, neededImports, ns)(context);
 
-    return {
-        code,
-        sourceFile: current,
-        transformed: true
+            sourceFile = primitivesTransformer(sourceFile);
+
+            // Insert generated classes after imports
+            let classInserter = insertClassesTransformer(generatedClasses)(context);
+
+            sourceFile = classInserter(sourceFile);
+
+            // Add namespace imports
+            let importAdder = addImportsTransformer(neededImports, ns)(context);
+
+            sourceFile = importAdder(sourceFile);
+
+            return sourceFile;
+        };
     };
 };
 
 
-export { createTransformer, mightNeedTransform, transform };
-export { transformReactiveArrays } from './transforms/array';
-export { transformReactiveObjects } from './transforms/object';
-export { transformReactivePrimitives } from './transforms/primitives';
+export { createTransformer, mightNeedTransform };
+export { createArrayTransformer } from './transforms/array';
+export { createObjectTransformer } from './transforms/object';
+export { createPrimitivesTransformer } from './transforms/primitives';

package/src/transformer/plugins/vite.ts

@@ -1,5 +1,5 @@
 import { TRANSFORM_PATTERN } from '@esportsplus/typescript/transformer';
-import { mightNeedTransform, transform } from '~/transformer';
+import { createTransformer, mightNeedTransform } from '~/transformer';
 import type { Plugin } from 'vite';
 import { ts } from '@esportsplus/typescript';
 
@@ -19,14 +19,22 @@ export default (): Plugin => {
             }
 
             try {
-                let sourceFile = ts.createSourceFile(id, code, ts.ScriptTarget.Latest, true),
-                    result = transform(sourceFile);
+                let printer = ts.createPrinter(),
+                    sourceFile = ts.createSourceFile(id, code, ts.ScriptTarget.Latest, true),
+                    transformer = createTransformer(),
+                    result = ts.transform(sourceFile, [transformer]),
+                    transformed = result.transformed[0];
 
-                if (!result.transformed) {
+                if (transformed === sourceFile) {
+                    result.dispose();
                     return null;
                 }
 
-                return { code: result.code, map: null };
+                let output = printer.printFile(transformed);
+
+                result.dispose();
+
+                return { code: output, map: null };
             }
             catch (error) {
                 console.error(`@esportsplus/reactivity: Error transforming ${id}:`, error);

package/src/transformer/transforms/array.ts

@@ -1,12 +1,12 @@
 import type { Bindings } from '~/types';
-import { applyReplacements, Replacement } from './utilities';
+import { createArrayLengthCall, createArraySetCall } from '../factory';
 import { ts } from '@esportsplus/typescript';
 
 
 interface TransformContext {
     bindings: Bindings;
-    replacements: Replacement[];
-    sourceFile: ts.SourceFile;
+    context: ts.TransformationContext;
+    factory: ts.NodeFactory;
 }
 
 
@@ -42,6 +42,10 @@ function getPropertyPath(node: ts.PropertyAccessExpression): string | null {
 function isAssignmentTarget(node: ts.Node): boolean {
     let parent = node.parent;
 
+    if (!parent) {
+        return false;
+    }
+
     if (
         (ts.isBinaryExpression(parent) && parent.left === node) ||
         ts.isPostfixUnaryExpression(parent) ||
@@ -53,7 +57,8 @@ function isAssignmentTarget(node: ts.Node): boolean {
     return false;
 }
 
-function visit(ctx: TransformContext, node: ts.Node): void {
+function visit(ctx: TransformContext, node: ts.Node): ts.Node {
+    // Track array bindings from variable declarations
     if (ts.isVariableDeclaration(node) && ts.isIdentifier(node.name) && node.initializer) {
         if (ts.isIdentifier(node.initializer) && ctx.bindings.get(node.initializer.text) === 'array') {
             ctx.bindings.set(node.name.text, 'array');
@@ -68,6 +73,7 @@ function visit(ctx: TransformContext, node: ts.Node): void {
         }
     }
 
+    // Track array bindings from function parameters with ReactiveArray type
     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];
@@ -83,6 +89,7 @@ function visit(ctx: TransformContext, node: ts.Node): void {
         }
     }
 
+    // Transform array.length → array.$length()
     if (
         ts.isPropertyAccessExpression(node) &&
         node.name.text === 'length' &&
@@ -91,16 +98,14 @@ function visit(ctx: TransformContext, node: ts.Node): void {
         let name = getExpressionName(node.expression);
 
         if (name && ctx.bindings.get(name) === 'array') {
-            let objText = node.expression.getText(ctx.sourceFile);
+            // First visit children to transform the expression if needed
+            let transformedExpr = ts.visitEachChild(node.expression, n => visit(ctx, n), ctx.context) as ts.Expression;
 
-            ctx.replacements.push({
-                end: node.end,
-                newText: `${objText}.$length()`,
-                start: node.pos
-            });
+            return createArrayLengthCall(ctx.factory, transformedExpr);
         }
     }
 
+    // Transform array[index] = value → array.$set(index, value)
     if (
         ts.isBinaryExpression(node) &&
         node.operatorToken.kind === ts.SyntaxKind.EqualsToken &&
@@ -110,34 +115,33 @@ function visit(ctx: TransformContext, node: ts.Node): void {
             objName = getExpressionName(elemAccess.expression);
 
         if (objName && ctx.bindings.get(objName) === 'array') {
-            let indexText = elemAccess.argumentExpression.getText(ctx.sourceFile),
-                objText = elemAccess.expression.getText(ctx.sourceFile),
-                valueText = node.right.getText(ctx.sourceFile);
-
-            ctx.replacements.push({
-                end: node.end,
-                newText: `${objText}.$set(${indexText}, ${valueText})`,
-                start: node.pos
-            });
+            let transformedArray = ts.visitEachChild(elemAccess.expression, n => visit(ctx, n), ctx.context) as ts.Expression,
+                transformedIndex = ts.visitEachChild(elemAccess.argumentExpression, n => visit(ctx, n), ctx.context) as ts.Expression,
+                transformedValue = ts.visitEachChild(node.right, n => visit(ctx, n), ctx.context) as ts.Expression;
+
+            return createArraySetCall(ctx.factory, transformedArray, transformedIndex, transformedValue);
         }
     }
 
-    ts.forEachChild(node, n => visit(ctx, n));
+    return ts.visitEachChild(node, n => visit(ctx, n), ctx.context);
 }
 
 
-const transformReactiveArrays = (sourceFile: ts.SourceFile, bindings: Bindings): string => {
-    let code = sourceFile.getFullText(),
-        ctx: TransformContext = {
-            bindings,
-            replacements: [],
-            sourceFile
-        };
-
-    visit(ctx, sourceFile);
+const createArrayTransformer = (
+    bindings: Bindings
+): (context: ts.TransformationContext) => (sourceFile: ts.SourceFile) => ts.SourceFile => {
+    return (context: ts.TransformationContext) => {
+        return (sourceFile: ts.SourceFile): ts.SourceFile => {
+            let ctx: TransformContext = {
+                bindings,
+                context,
+                factory: context.factory
+            };
 
-    return applyReplacements(code, ctx.replacements);
+            return ts.visitNode(sourceFile, n => visit(ctx, n)) as ts.SourceFile;
+        };
+    };
 };
 
 
-export { transformReactiveArrays };
+export { createArrayTransformer };