@esportsplus/reactivity 0.24.4 → 0.25.0

package/src/transformer/transforms/object.ts

@@ -1,33 +1,42 @@
 import { uid } from '@esportsplus/typescript/transformer';
-import type { Bindings, Namespaces } from '~/types';
+import type { Bindings } from '~/types';
+import { addMissingImports, applyReplacements, ExtraImport, Replacement } from './utilities';
 import { ts } from '@esportsplus/typescript';
 
 
+const CLASS_NAME_REGEX = /class (\w+)/;
+
+const EXTRA_IMPORTS: ExtraImport[] = [
+    { module: '@esportsplus/reactivity/constants', specifier: 'REACTIVE_OBJECT' },
+    { module: '@esportsplus/reactivity/reactive/array', specifier: 'ReactiveArray' }
+];
+
+
 interface AnalyzedProperty {
-    elements?: ts.Expression[];
     key: string;
     type: 'array' | 'computed' | 'signal';
-    value: ts.Expression;
+    valueText: string;
 }
 
-interface GeneratedClass {
-    classDecl: ts.ClassDeclaration;
-    className: string;
+interface ReactiveObjectCall {
+    end: number;
+    generatedClass: string;
     needsImports: Set<string>;
+    start: number;
+    varName: string | null;
 }
 
 interface TransformContext {
+    allNeededImports: Set<string>;
     bindings: Bindings;
-    context: ts.TransformationContext;
-    factory: ts.NodeFactory;
-    generatedClasses: GeneratedClass[];
+    calls: ReactiveObjectCall[];
     hasReactiveImport: boolean;
-    neededImports: Set<string>;
-    ns: Namespaces;
+    lastImportEnd: number;
+    sourceFile: ts.SourceFile;
 }
 
 
-function analyzeProperty(prop: ts.ObjectLiteralElementLike): AnalyzedProperty | null {
+function analyzeProperty(prop: ts.ObjectLiteralElementLike, sourceFile: ts.SourceFile): AnalyzedProperty | null {
     if (!ts.isPropertyAssignment(prop)) {
         return null;
     }
@@ -41,246 +50,66 @@ function analyzeProperty(prop: ts.ObjectLiteralElementLike): AnalyzedProperty |
         return null;
     }
 
-    let value = prop.initializer;
+    let value = prop.initializer,
+        valueText = value.getText(sourceFile);
 
     if (ts.isArrowFunction(value) || ts.isFunctionExpression(value)) {
-        return { key, type: 'computed', value };
+        return { key, type: 'computed', valueText };
     }
 
     if (ts.isArrayLiteralExpression(value)) {
-        return { elements: [...value.elements], key, type: 'array', value };
+        return { key, type: 'array', valueText };
     }
 
-    return { key, type: 'signal', value };
+    return { key, type: 'signal', valueText };
 }
 
-function buildReactiveClass(
-    ctx: TransformContext,
-    className: string,
-    properties: AnalyzedProperty[],
-    varName: string | null
-): ts.ClassDeclaration {
-    let factory = ctx.factory,
-        members: ts.ClassElement[] = [],
-        needsImports = new Set<string>();
-
-    needsImports.add('REACTIVE_OBJECT');
-
-    // [ns.constants.REACTIVE_OBJECT] = true
-    members.push(
-        factory.createPropertyDeclaration(
-            undefined,
-            factory.createComputedPropertyName(
-                factory.createPropertyAccessExpression(factory.createIdentifier(ctx.ns.constants), 'REACTIVE_OBJECT')
-            ),
-            undefined,
-            undefined,
-            factory.createTrue()
-        )
-    );
+function buildClassCode(className: string, properties: AnalyzedProperty[]): string {
+    let accessors: string[] = [],
+        disposeStatements: string[] = [],
+        fields: string[] = [];
 
-    let disposeStatements: ts.Statement[] = [];
+    fields.push(`[REACTIVE_OBJECT] = true;`);
 
     for (let i = 0, n = properties.length; i < n; i++) {
-        let prop = properties[i];
-
-        if (prop.type === 'signal') {
-            needsImports.add('read');
-            needsImports.add('set');
-            needsImports.add('signal');
-
-            let privateName = factory.createPrivateIdentifier(`#${prop.key}`),
-                paramName = uid('v');
-
-            // Private field: #key = ns.signal(value)
-            members.push(
-                factory.createPropertyDeclaration(
-                    undefined,
-                    privateName,
-                    undefined,
-                    undefined,
-                    factory.createCallExpression(
-                        factory.createPropertyAccessExpression(factory.createIdentifier(ctx.ns.reactivity), 'signal'),
-                        undefined,
-                        [prop.value]
-                    )
-                )
-            );
-
-            // Getter: get key() { return ns.read(this.#key); }
-            members.push(
-                factory.createGetAccessorDeclaration(
-                    undefined,
-                    factory.createIdentifier(prop.key),
-                    [],
-                    undefined,
-                    factory.createBlock([
-                        factory.createReturnStatement(
-                            factory.createCallExpression(
-                                factory.createPropertyAccessExpression(factory.createIdentifier(ctx.ns.reactivity), 'read'),
-                                undefined,
-                                [factory.createPropertyAccessExpression(factory.createThis(), privateName)]
-                            )
-                        )
-                    ], true)
-                )
-            );
-
-            // Setter: set key(v) { ns.set(this.#key, v); }
-            members.push(
-                factory.createSetAccessorDeclaration(
-                    undefined,
-                    factory.createIdentifier(prop.key),
-                    [factory.createParameterDeclaration(undefined, undefined, paramName)],
-                    factory.createBlock([
-                        factory.createExpressionStatement(
-                            factory.createCallExpression(
-                                factory.createPropertyAccessExpression(factory.createIdentifier(ctx.ns.reactivity), 'set'),
-                                undefined,
-                                [
-                                    factory.createPropertyAccessExpression(factory.createThis(), privateName),
-                                    factory.createIdentifier(paramName)
-                                ]
-                            )
-                        )
-                    ], true)
-                )
-            );
+        let { key, type, valueText } = properties[i];
+
+        if (type === 'signal') {
+            let param = uid('v');
+
+            fields.push(`#${key} = signal(${valueText});`);
+            accessors.push(`get ${key}() { return read(this.#${key}); }`);
+            accessors.push(`set ${key}(${param}) { set(this.#${key}, ${param}); }`);
         }
-        else if (prop.type === 'array') {
-            needsImports.add('ReactiveArray');
-
-            // Public field: key = new ns.array.ReactiveArray(elements...)
-            members.push(
-                factory.createPropertyDeclaration(
-                    undefined,
-                    factory.createIdentifier(prop.key),
-                    undefined,
-                    undefined,
-                    factory.createNewExpression(
-                        factory.createPropertyAccessExpression(factory.createIdentifier(ctx.ns.array), 'ReactiveArray'),
-                        undefined,
-                        prop.elements || []
-                    )
-                )
-            );
-
-            // Track as array binding
-            if (varName) {
-                ctx.bindings.set(`${varName}.${prop.key}`, 'array');
-            }
+        else if (type === 'array') {
+            let elements = valueText.slice(1, -1);
 
-            // dispose: this.key.dispose()
-            disposeStatements.push(
-                factory.createExpressionStatement(
-                    factory.createCallExpression(
-                        factory.createPropertyAccessExpression(
-                            factory.createPropertyAccessExpression(factory.createThis(), prop.key),
-                            'dispose'
-                        ),
-                        undefined,
-                        []
-                    )
-                )
-            );
+            fields.push(`${key} = new ReactiveArray(${elements});`);
+            disposeStatements.push(`this.${key}.dispose();`);
         }
-        else if (prop.type === 'computed') {
-            needsImports.add('computed');
-            needsImports.add('dispose');
-            needsImports.add('read');
-
-            let privateName = factory.createPrivateIdentifier(`#${prop.key}`);
-
-            // Private field: #key: Computed<unknown> | null = null
-            members.push(
-                factory.createPropertyDeclaration(
-                    undefined,
-                    privateName,
-                    undefined,
-                    factory.createUnionTypeNode([
-                        factory.createTypeReferenceNode('Computed', [
-                            factory.createKeywordTypeNode(ts.SyntaxKind.UnknownKeyword)
-                        ]),
-                        factory.createLiteralTypeNode(factory.createNull())
-                    ]),
-                    factory.createNull()
-                )
-            );
-
-            // Getter: get key() { return ns.read(this.#key ??= ns.computed(fn)); }
-            members.push(
-                factory.createGetAccessorDeclaration(
-                    undefined,
-                    factory.createIdentifier(prop.key),
-                    [],
-                    undefined,
-                    factory.createBlock([
-                        factory.createReturnStatement(
-                            factory.createCallExpression(
-                                factory.createPropertyAccessExpression(factory.createIdentifier(ctx.ns.reactivity), 'read'),
-                                undefined,
-                                [
-                                    factory.createBinaryExpression(
-                                        factory.createPropertyAccessExpression(factory.createThis(), privateName),
-                                        ts.SyntaxKind.QuestionQuestionEqualsToken,
-                                        factory.createCallExpression(
-                                            factory.createPropertyAccessExpression(factory.createIdentifier(ctx.ns.reactivity), 'computed'),
-                                            undefined,
-                                            [prop.value]
-                                        )
-                                    )
-                                ]
-                            )
-                        )
-                    ], true)
-                )
-            );
-
-            // dispose: if (this.#key) ns.dispose(this.#key)
-            disposeStatements.push(
-                factory.createIfStatement(
-                    factory.createPropertyAccessExpression(factory.createThis(), privateName),
-                    factory.createExpressionStatement(
-                        factory.createCallExpression(
-                            factory.createPropertyAccessExpression(factory.createIdentifier(ctx.ns.reactivity), 'dispose'),
-                            undefined,
-                            [factory.createPropertyAccessExpression(factory.createThis(), privateName)]
-                        )
-                    )
-                )
-            );
+        else if (type === 'computed') {
+            fields.push(`#${key}: Computed<unknown> | null = null;`);
+            accessors.push(`get ${key}() { return read(this.#${key} ??= computed(${valueText})); }`);
+            disposeStatements.push(`if (this.#${key}) dispose(this.#${key});`);
         }
     }
 
-    // dispose() method
-    members.push(
-        factory.createMethodDeclaration(
-            undefined,
-            undefined,
-            'dispose',
-            undefined,
-            undefined,
-            [],
-            undefined,
-            factory.createBlock(disposeStatements, true)
-        )
-    );
+    return `
+        class ${className} {
+            ${fields.join('\n')}
+            ${accessors.join('\n')}
 
-    // Store needed imports
-    needsImports.forEach(imp => ctx.neededImports.add(imp));
-
-    return factory.createClassDeclaration(
-        undefined,
-        className,
-        undefined,
-        undefined,
-        members
-    );
+            dispose() {
+                ${disposeStatements.length > 0 ? disposeStatements.join('\n') : ''}
+            }
+        }
+    `;
 }
 
-function visit(ctx: TransformContext, node: ts.Node): ts.Node | ts.Node[] {
-    // Check for reactive import
+function visit(ctx: TransformContext, node: ts.Node): void {
     if (ts.isImportDeclaration(node)) {
+        ctx.lastImportEnd = node.end;
+
         if (
             ts.isStringLiteral(node.moduleSpecifier) &&
             node.moduleSpecifier.text.includes('@esportsplus/reactivity')
@@ -300,7 +129,6 @@ function visit(ctx: TransformContext, node: ts.Node): ts.Node | ts.Node[] {
         }
     }
 
-    // Transform reactive({ ... }) or reactive([...]) calls
     if (
         ctx.hasReactiveImport &&
         ts.isCallExpression(node) &&
@@ -309,25 +137,6 @@ function visit(ctx: TransformContext, node: ts.Node): ts.Node | ts.Node[] {
     ) {
         let arg = node.arguments[0];
 
-        // Handle reactive([...]) → new ns.array.ReactiveArray(...)
-        if (arg && ts.isArrayLiteralExpression(arg)) {
-            let varName: string | null = null;
-
-            if (node.parent && ts.isVariableDeclaration(node.parent) && ts.isIdentifier(node.parent.name)) {
-                varName = node.parent.name.text;
-                ctx.bindings.set(varName, 'array');
-            }
-
-            ctx.neededImports.add('ReactiveArray');
-
-            return ctx.factory.createNewExpression(
-                ctx.factory.createPropertyAccessExpression(ctx.factory.createIdentifier(ctx.ns.array), 'ReactiveArray'),
-                undefined,
-                [...arg.elements]
-            );
-        }
-
-        // Handle reactive({ ... }) → new ReactiveObject class
         if (arg && ts.isObjectLiteralExpression(arg)) {
             let varName: string | null = null;
 
@@ -336,71 +145,107 @@ function visit(ctx: TransformContext, node: ts.Node): ts.Node | ts.Node[] {
                 ctx.bindings.set(varName, 'object');
             }
 
-            let properties: AnalyzedProperty[] = [],
-                props = arg.properties;
+            let needsImports = new Set<string>(),
+                properties: AnalyzedProperty[] = [];
+
+            needsImports.add('REACTIVE_OBJECT');
+
+            let props = arg.properties;
 
             for (let i = 0, n = props.length; i < n; i++) {
                 let prop = props[i];
 
-                // Bail out on spread assignments
                 if (ts.isSpreadAssignment(prop)) {
-                    return ts.visitEachChild(node, n => visit(ctx, n), ctx.context);
+                    ts.forEachChild(node, n => visit(ctx, n));
+                    return;
                 }
 
-                let analyzed = analyzeProperty(prop);
+                let analyzed = analyzeProperty(prop, ctx.sourceFile);
 
                 if (!analyzed) {
-                    return ts.visitEachChild(node, n => visit(ctx, n), ctx.context);
+                    ts.forEachChild(node, n => visit(ctx, n));
+                    return;
                 }
 
                 properties.push(analyzed);
+
+                if (analyzed.type === 'signal') {
+                    needsImports.add('read');
+                    needsImports.add('set');
+                    needsImports.add('signal');
+                }
+                else if (analyzed.type === 'array') {
+                    needsImports.add('ReactiveArray');
+
+                    if (varName) {
+                        ctx.bindings.set(`${varName}.${analyzed.key}`, 'array');
+                    }
+                }
+                else if (analyzed.type === 'computed') {
+                    needsImports.add('computed');
+                    needsImports.add('dispose');
+                    needsImports.add('read');
+                }
             }
 
-            let className = uid('ReactiveObject'),
-                classDecl = buildReactiveClass(ctx, className, properties, varName);
+            needsImports.forEach(imp => ctx.allNeededImports.add(imp));
 
-            ctx.generatedClasses.push({
-                classDecl,
-                className,
-                needsImports: new Set(ctx.neededImports)
+            ctx.calls.push({
+                end: node.end,
+                generatedClass: buildClassCode(uid('ReactiveObject'), properties),
+                needsImports,
+                start: node.pos,
+                varName
             });
-
-            // Replace reactive({...}) with new ClassName()
-            return ctx.factory.createNewExpression(
-                ctx.factory.createIdentifier(className),
-                undefined,
-                []
-            );
         }
     }
 
-    return ts.visitEachChild(node, n => visit(ctx, n), ctx.context);
+    ts.forEachChild(node, n => visit(ctx, n));
 }
 
 
-const createObjectTransformer = (
-    bindings: Bindings,
-    neededImports: Set<string>,
-    generatedClasses: GeneratedClass[],
-    ns: Namespaces
-): (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,
-                generatedClasses,
-                hasReactiveImport: false,
-                neededImports,
-                ns
-            };
-
-            return ts.visitNode(sourceFile, n => visit(ctx, n)) as ts.SourceFile;
+const transformReactiveObjects = (sourceFile: ts.SourceFile, bindings: Bindings): string => {
+    let code = sourceFile.getFullText(),
+        ctx: TransformContext = {
+            allNeededImports: new Set<string>(),
+            bindings,
+            calls: [],
+            hasReactiveImport: false,
+            lastImportEnd: 0,
+            sourceFile
         };
-    };
+
+    visit(ctx, sourceFile);
+
+    if (ctx.calls.length === 0) {
+        return code;
+    }
+
+    let replacements: Replacement[] = [];
+
+    replacements.push({
+        end: ctx.lastImportEnd,
+        newText: code.substring(0, ctx.lastImportEnd) + '\n' + ctx.calls.map(c => c.generatedClass).join('\n') + '\n',
+        start: 0
+    });
+
+    for (let i = 0, n = ctx.calls.length; i < n; i++) {
+        let call = ctx.calls[i],
+            classMatch = call.generatedClass.match(CLASS_NAME_REGEX);
+
+        replacements.push({
+            end: call.end,
+            newText: ` new ${classMatch ? classMatch[1] : 'ReactiveObject'}()`,
+            start: call.start
+        });
+    }
+
+    return addMissingImports(
+        applyReplacements(code, replacements),
+        ctx.allNeededImports,
+        EXTRA_IMPORTS
+    );
 };
 
 
-export { createObjectTransformer };
-export type { GeneratedClass };
+export { transformReactiveObjects };