@esportsplus/reactivity 0.23.0 → 0.23.1

package/src/transformer/transforms/auto-dispose.ts

@@ -0,0 +1,191 @@
+import { uid, TRAILING_SEMICOLON } from '@esportsplus/typescript/transformer';
+import { applyReplacements, Replacement } from './utilities';
+import ts from 'typescript';
+
+
+interface BodyContext {
+    disposables: Disposable[];
+    effectsToCapture: { end: number; name: string; start: number }[];
+    parentBody: ts.Node;
+    returnStatement: ts.ReturnStatement | null;
+}
+
+interface Disposable {
+    name: string;
+    type: 'effect' | 'reactive';
+}
+
+interface FunctionEdit {
+    cleanupBodyEnd: number;
+    cleanupBodyStart: number;
+    disposeCode: string;
+    effectsToCapture: { end: number; name: string; start: number }[];
+}
+
+interface MainContext {
+    edits: FunctionEdit[];
+    sourceFile: ts.SourceFile;
+}
+
+
+function processFunction(
+    node: ts.ArrowFunction | ts.FunctionDeclaration | ts.FunctionExpression,
+    sourceFile: ts.SourceFile,
+    edits: FunctionEdit[]
+): void {
+    if (!node.body || !ts.isBlock(node.body)) {
+        return;
+    }
+
+    let ctx: BodyContext = {
+            disposables: [],
+            effectsToCapture: [],
+            parentBody: node.body,
+            returnStatement: null
+        };
+
+    visitBody(ctx, node.body);
+
+    if (ctx.disposables.length === 0 || !ctx.returnStatement || !ctx.returnStatement.expression) {
+        return;
+    }
+
+    let cleanupFn = ctx.returnStatement.expression as ts.ArrowFunction | ts.FunctionExpression;
+
+    if (!cleanupFn.body) {
+        return;
+    }
+
+    let disposeStatements: string[] = [];
+
+    for (let i = ctx.disposables.length - 1; i >= 0; i--) {
+        let d = ctx.disposables[i];
+
+        if (d.type === 'reactive') {
+            disposeStatements.push(`${d.name}.dispose();`);
+        }
+        else {
+            disposeStatements.push(`${d.name}();`);
+        }
+    }
+
+    let disposeCode = disposeStatements.join('\n');
+
+    if (ts.isBlock(cleanupFn.body)) {
+        edits.push({
+            cleanupBodyEnd: cleanupFn.body.statements[0]?.pos ?? cleanupFn.body.end - 1,
+            cleanupBodyStart: cleanupFn.body.pos + 1,
+            disposeCode,
+            effectsToCapture: ctx.effectsToCapture
+        });
+    }
+    else {
+        edits.push({
+            cleanupBodyEnd: cleanupFn.body.end,
+            cleanupBodyStart: cleanupFn.body.pos,
+            disposeCode: `{ ${disposeCode}\n return ${cleanupFn.body.getText(sourceFile)}; }`,
+            effectsToCapture: ctx.effectsToCapture
+        });
+    }
+}
+
+function visitBody(ctx: BodyContext, node: ts.Node): void {
+    if (
+        ts.isVariableDeclaration(node) &&
+        ts.isIdentifier(node.name) &&
+        node.initializer &&
+        ts.isCallExpression(node.initializer) &&
+        ts.isIdentifier(node.initializer.expression) &&
+        node.initializer.expression.text === 'reactive'
+    ) {
+        ctx.disposables.push({ name: node.name.text, type: 'reactive' });
+    }
+
+    if (
+        ts.isCallExpression(node) &&
+        ts.isIdentifier(node.expression) &&
+        node.expression.text === 'effect'
+    ) {
+        if (ts.isVariableDeclaration(node.parent) && ts.isIdentifier(node.parent.name)) {
+            ctx.disposables.push({ name: node.parent.name.text, type: 'effect' });
+        }
+        else if (ts.isExpressionStatement(node.parent)) {
+            let name = uid('effect');
+
+            ctx.effectsToCapture.push({
+                end: node.parent.end,
+                name,
+                start: node.parent.pos
+            });
+
+            ctx.disposables.push({ name, type: 'effect' });
+        }
+    }
+
+    if (
+        ts.isReturnStatement(node) &&
+        node.expression &&
+        (ts.isArrowFunction(node.expression) || ts.isFunctionExpression(node.expression)) &&
+        node.parent === ctx.parentBody
+    ) {
+        ctx.returnStatement = node;
+    }
+
+    ts.forEachChild(node, n => visitBody(ctx, n));
+}
+
+function visitMain(ctx: MainContext, node: ts.Node): void {
+    if (
+        ts.isFunctionDeclaration(node) ||
+        ts.isFunctionExpression(node) ||
+        ts.isArrowFunction(node)
+    ) {
+        processFunction(node, ctx.sourceFile, ctx.edits);
+    }
+
+    ts.forEachChild(node, n => visitMain(ctx, n));
+}
+
+
+const injectAutoDispose = (sourceFile: ts.SourceFile): string => {
+    let code = sourceFile.getFullText(),
+        ctx: MainContext = {
+            edits: [],
+            sourceFile
+        };
+
+    visitMain(ctx, sourceFile);
+
+    if (ctx.edits.length === 0) {
+        return code;
+    }
+
+    let replacements: Replacement[] = [];
+
+    for (let i = 0, n = ctx.edits.length; i < n; i++) {
+        let edit = ctx.edits[i],
+            effects = edit.effectsToCapture;
+
+        for (let j = 0, m = effects.length; j < m; j++) {
+            let effect = effects[j],
+                original = code.substring(effect.start, effect.end).trim();
+
+            replacements.push({
+                end: effect.end,
+                newText: `const ${effect.name} = ${original.replace(TRAILING_SEMICOLON, '')}`,
+                start: effect.start
+            });
+        }
+
+        replacements.push({
+            end: edit.cleanupBodyEnd,
+            newText: `\n${edit.disposeCode}`,
+            start: edit.cleanupBodyStart
+        });
+    }
+
+    return applyReplacements(code, replacements);
+};
+
+
+export { injectAutoDispose };

package/src/transformer/transforms/reactive-array.ts

@@ -0,0 +1,143 @@
+import type { Bindings } from '~/types';
+import { applyReplacements, Replacement } from './utilities';
+import ts from 'typescript';
+
+
+interface TransformContext {
+    bindings: Bindings;
+    replacements: Replacement[];
+    sourceFile: ts.SourceFile;
+}
+
+
+function getExpressionName(node: ts.Expression): string | null {
+    if (ts.isIdentifier(node)) {
+        return node.text;
+    }
+
+    if (ts.isPropertyAccessExpression(node)) {
+        return getPropertyPath(node);
+    }
+
+    return null;
+}
+
+function getPropertyPath(node: ts.PropertyAccessExpression): string | null {
+    let current: ts.Node = node,
+        parts: string[] = [];
+
+    while (ts.isPropertyAccessExpression(current)) {
+        parts.unshift(current.name.text);
+        current = current.expression;
+    }
+
+    if (ts.isIdentifier(current)) {
+        parts.unshift(current.text);
+        return parts.join('.');
+    }
+
+    return null;
+}
+
+function isAssignmentTarget(node: ts.Node): boolean {
+    let parent = node.parent;
+
+    if (
+        (ts.isBinaryExpression(parent) && parent.left === node) ||
+        ts.isPostfixUnaryExpression(parent) ||
+        ts.isPrefixUnaryExpression(parent)
+    ) {
+        return true;
+    }
+
+    return false;
+}
+
+function visit(ctx: TransformContext, node: ts.Node): void {
+    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');
+        }
+
+        if (ts.isPropertyAccessExpression(node.initializer)) {
+            let path = getPropertyPath(node.initializer);
+
+            if (path && ctx.bindings.get(path) === 'array') {
+                ctx.bindings.set(node.name.text, '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'
+            ) {
+                ctx.bindings.set(param.name.text, 'array');
+            }
+        }
+    }
+
+    if (
+        ts.isPropertyAccessExpression(node) &&
+        node.name.text === 'length' &&
+        !isAssignmentTarget(node)
+    ) {
+        let name = getExpressionName(node.expression);
+
+        if (name && ctx.bindings.get(name) === 'array') {
+            let objText = node.expression.getText(ctx.sourceFile);
+
+            ctx.replacements.push({
+                end: node.end,
+                newText: `${objText}.$length()`,
+                start: node.pos
+            });
+        }
+    }
+
+    if (
+        ts.isBinaryExpression(node) &&
+        node.operatorToken.kind === ts.SyntaxKind.EqualsToken &&
+        ts.isElementAccessExpression(node.left)
+    ) {
+        let elemAccess = node.left,
+            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
+            });
+        }
+    }
+
+    ts.forEachChild(node, n => visit(ctx, n));
+}
+
+
+const transformReactiveArrays = (sourceFile: ts.SourceFile, bindings: Bindings): string => {
+    let code = sourceFile.getFullText(),
+        ctx: TransformContext = {
+            bindings,
+            replacements: [],
+            sourceFile
+        };
+
+    visit(ctx, sourceFile);
+
+    return applyReplacements(code, ctx.replacements);
+};
+
+
+export { transformReactiveArrays };

package/src/transformer/{core/transforms → transforms}/reactive-object.ts

@@ -1,7 +1,7 @@
-import type { Bindings } from '~/types';
 import { uid } from '@esportsplus/typescript/transformer';
-import ts from 'typescript';
+import type { Bindings } from '~/types';
 import { addMissingImports, applyReplacements, ExtraImport, Replacement } from './utilities';
+import ts from 'typescript';
 
 
 const CLASS_NAME_REGEX = /class (\w+)/;
@@ -26,6 +26,14 @@ interface ReactiveObjectCall {
     varName: string | null;
 }
 
+interface TransformContext {
+    allNeededImports: Set<string>;
+    bindings: Bindings;
+    calls: ReactiveObjectCall[];
+    hasReactiveImport: boolean;
+    lastImportEnd: number;
+    sourceFile: ts.SourceFile;
+}
 
 
 function analyzeProperty(prop: ts.ObjectLiteralElementLike, sourceFile: ts.SourceFile): AnalyzedProperty | null {
@@ -100,130 +108,131 @@ function buildClassCode(className: string, properties: AnalyzedProperty[]): stri
     `;
 }
 
+function visit(ctx: TransformContext, node: ts.Node): void {
+    if (ts.isImportDeclaration(node)) {
+        ctx.lastImportEnd = node.end;
 
-const transformReactiveObjects = (sourceFile: ts.SourceFile, bindings: Bindings): string => {
-    let allNeededImports = new Set<string>(),
-        calls: ReactiveObjectCall[] = [],
-        code = sourceFile.getFullText(),
-        hasReactiveImport = false,
-        lastImportEnd = 0;
-
-    function visit(node: ts.Node): void {
-        // Track imports (always at top of file)
-        if (ts.isImportDeclaration(node)) {
-            lastImportEnd = node.end;
-
-            if (
-                ts.isStringLiteral(node.moduleSpecifier) &&
-                node.moduleSpecifier.text.includes('@esportsplus/reactivity')
-            ) {
-                let clause = node.importClause;
-
-                if (clause?.namedBindings && ts.isNamedImports(clause.namedBindings)) {
-                    let elements = clause.namedBindings.elements;
-
-                    for (let i = 0, n = elements.length; i < n; i++) {
-                        if (elements[i].name.text === 'reactive') {
-                            hasReactiveImport = true;
-                            break;
-                        }
+        if (
+            ts.isStringLiteral(node.moduleSpecifier) &&
+            node.moduleSpecifier.text.includes('@esportsplus/reactivity')
+        ) {
+            let clause = node.importClause;
+
+            if (clause?.namedBindings && ts.isNamedImports(clause.namedBindings)) {
+                let elements = clause.namedBindings.elements;
+
+                for (let i = 0, n = elements.length; i < n; i++) {
+                    if (elements[i].name.text === 'reactive') {
+                        ctx.hasReactiveImport = true;
+                        break;
                     }
                 }
             }
         }
+    }
 
-        // Process reactive() calls (only if import was found)
-        if (
-            hasReactiveImport &&
-            ts.isCallExpression(node) &&
-            ts.isIdentifier(node.expression) &&
-            node.expression.text === 'reactive'
-        ) {
-
-            let arg = node.arguments[0];
+    if (
+        ctx.hasReactiveImport &&
+        ts.isCallExpression(node) &&
+        ts.isIdentifier(node.expression) &&
+        node.expression.text === 'reactive'
+    ) {
+        let arg = node.arguments[0];
 
-            if (arg && ts.isObjectLiteralExpression(arg)) {
-                let varName: string | null = null;
+        if (arg && ts.isObjectLiteralExpression(arg)) {
+            let varName: string | null = null;
 
-                if (ts.isVariableDeclaration(node.parent) && ts.isIdentifier(node.parent.name)) {
-                    varName = node.parent.name.text;
-                    bindings.set(varName, 'object');
-                }
+            if (ts.isVariableDeclaration(node.parent) && ts.isIdentifier(node.parent.name)) {
+                varName = node.parent.name.text;
+                ctx.bindings.set(varName, 'object');
+            }
 
-                let needsImports = new Set<string>(),
-                    properties: AnalyzedProperty[] = [];
+            let needsImports = new Set<string>(),
+                properties: AnalyzedProperty[] = [];
 
-                needsImports.add('REACTIVE_OBJECT');
+            needsImports.add('REACTIVE_OBJECT');
 
-                let props = arg.properties;
+            let props = arg.properties;
 
-                for (let i = 0, n = props.length; i < n; i++) {
-                    let prop = props[i];
+            for (let i = 0, n = props.length; i < n; i++) {
+                let prop = props[i];
 
-                    if (ts.isSpreadAssignment(prop)) {
-                        return;
-                    }
+                if (ts.isSpreadAssignment(prop)) {
+                    ts.forEachChild(node, n => visit(ctx, n));
+                    return;
+                }
 
-                    let analyzed = analyzeProperty(prop, sourceFile);
+                let analyzed = analyzeProperty(prop, ctx.sourceFile);
 
-                    if (!analyzed) {
-                        return;
-                    }
+                if (!analyzed) {
+                    ts.forEachChild(node, n => visit(ctx, n));
+                    return;
+                }
 
-                    properties.push(analyzed);
+                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 (analyzed.type === 'signal') {
+                    needsImports.add('read');
+                    needsImports.add('set');
+                    needsImports.add('signal');
+                }
+                else if (analyzed.type === 'array') {
+                    needsImports.add('ReactiveArray');
 
-                        if (varName) {
-                            bindings.set(`${varName}.${analyzed.key}`, 'array');
-                        }
-                    }
-                    else if (analyzed.type === 'computed') {
-                        needsImports.add('computed');
-                        needsImports.add('dispose');
-                        needsImports.add('read');
+                    if (varName) {
+                        ctx.bindings.set(`${varName}.${analyzed.key}`, 'array');
                     }
                 }
+                else if (analyzed.type === 'computed') {
+                    needsImports.add('computed');
+                    needsImports.add('dispose');
+                    needsImports.add('read');
+                }
+            }
 
-                needsImports.forEach(imp => allNeededImports.add(imp));
+            needsImports.forEach(imp => ctx.allNeededImports.add(imp));
 
-                calls.push({
-                    end: node.end,
-                    generatedClass: buildClassCode(uid('ReactiveObject'), properties),
-                    needsImports,
-                    start: node.pos,
-                    varName
-                });
-            }
+            ctx.calls.push({
+                end: node.end,
+                generatedClass: buildClassCode(uid('ReactiveObject'), properties),
+                needsImports,
+                start: node.pos,
+                varName
+            });
         }
-
-        ts.forEachChild(node, visit);
     }
 
-    visit(sourceFile);
+    ts.forEachChild(node, n => visit(ctx, n));
+}
+
 
-    if (calls.length === 0) {
+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[] = [];
 
-    // Insert generated classes after imports
     replacements.push({
-        end: lastImportEnd,
-        newText: code.substring(0, lastImportEnd) + '\n' + calls.map(c => c.generatedClass).join('\n') + '\n',
+        end: ctx.lastImportEnd,
+        newText: code.substring(0, ctx.lastImportEnd) + '\n' + ctx.calls.map(c => c.generatedClass).join('\n') + '\n',
         start: 0
     });
 
-    // Replace each reactive() call with new ClassName()
-    for (let i = 0, n = calls.length; i < n; i++) {
-        let call = calls[i],
+    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({
@@ -235,7 +244,7 @@ const transformReactiveObjects = (sourceFile: ts.SourceFile, bindings: Bindings)
 
     return addMissingImports(
         applyReplacements(code, replacements),
-        allNeededImports,
+        ctx.allNeededImports,
         EXTRA_IMPORTS
     );
 };