@esportsplus/reactivity 0.24.0 → 0.24.2

package/src/transformer/index.ts

@@ -1,67 +1,193 @@
-import type { Bindings, TransformResult } from '~/types';
+import type { Bindings } 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 () => {
+interface ExtraImport {
+    module: string;
+    specifier: string;
+}
+
+const EXTRA_IMPORTS: ExtraImport[] = [
+    { module: '@esportsplus/reactivity/constants', specifier: 'REACTIVE_OBJECT' },
+    { module: '@esportsplus/reactivity/reactive/array', specifier: 'ReactiveArray' }
+];
+
+
+function addImportsTransformer(
+    neededImports: Set<string>,
+    extraImports: ExtraImport[]
+): (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 extraSpecifiers = new Set<string>(),
+                factory = context.factory,
+                newStatements: ts.Statement[] = [],
+                reactivitySpecifiers: string[] = [];
+
+            for (let i = 0, n = extraImports.length; i < n; i++) {
+                extraSpecifiers.add(extraImports[i].specifier);
+            }
+
+            for (let imp of neededImports) {
+                if (!extraSpecifiers.has(imp)) {
+                    reactivitySpecifiers.push(imp);
+                }
+            }
+
+            // Add @esportsplus/reactivity imports
+            if (reactivitySpecifiers.length > 0) {
+                newStatements.push(
+                    factory.createImportDeclaration(
+                        undefined,
+                        factory.createImportClause(
+                            false,
+                            undefined,
+                            factory.createNamedImports(
+                                reactivitySpecifiers.map(s =>
+                                    factory.createImportSpecifier(false, undefined, factory.createIdentifier(s))
+                                )
+                            )
+                        ),
+                        factory.createStringLiteral('@esportsplus/reactivity')
+                    )
+                );
+            }
 
-            return result.transformed ? result.sourceFile : sourceFile;
+            // Add extra imports (REACTIVE_OBJECT, ReactiveArray)
+            for (let i = 0, n = extraImports.length; i < n; i++) {
+                let extra = extraImports[i];
+
+                if (neededImports.has(extra.specifier)) {
+                    newStatements.push(
+                        factory.createImportDeclaration(
+                            undefined,
+                            factory.createImportClause(
+                                false,
+                                undefined,
+                                factory.createNamedImports([
+                                    factory.createImportSpecifier(false, undefined, factory.createIdentifier(extra.specifier))
+                                ])
+                            ),
+                            factory.createStringLiteral(extra.module)
+                        )
+                    );
+                }
+            }
+
+            // Insert new imports after existing imports
+            let insertIndex = 0,
+                statements = sourceFile.statements;
+
+            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);
+        };
+    };
+}
+
+
+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>();
+
+            // Run object transformer first (generates classes, tracks array bindings)
+            let objectTransformer = createObjectTransformer(bindings, neededImports, generatedClasses)(context);
 
-    result = transformReactivePrimitives(current, bindings);
+            sourceFile = objectTransformer(sourceFile);
 
-    if (result !== code) {
-        current = ts.createSourceFile(sourceFile.fileName, result, sourceFile.languageVersion, true);
-        code = result;
-    }
+            // Run array transformer (handles array.length, array[i] = v)
+            let arrayTransformer = createArrayTransformer(bindings)(context);
 
-    if (code === original) {
-        return { code, sourceFile, transformed: false };
-    }
+            sourceFile = arrayTransformer(sourceFile);
 
-    return {
-        code,
-        sourceFile: current,
-        transformed: true
+            // Run primitives transformer (handles signal/computed, reads/writes)
+            let primitivesTransformer = createPrimitivesTransformer(bindings, neededImports)(context);
+
+            sourceFile = primitivesTransformer(sourceFile);
+
+            // Insert generated classes after imports
+            let classInserter = insertClassesTransformer(generatedClasses)(context);
+
+            sourceFile = classInserter(sourceFile);
+
+            // Add missing imports
+            let importAdder = addImportsTransformer(neededImports, EXTRA_IMPORTS)(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 };