@esportsplus/reactivity 0.23.0 → 0.23.2

package/build/transformer/detector.js

@@ -0,0 +1,38 @@
+import { mightNeedTransform as checkTransform } from '@esportsplus/typescript/transformer';
+import ts from 'typescript';
+const REACTIVE_REGEX = /\breactive\b/;
+function visit(ctx, node) {
+    if (ctx.hasImport && ctx.hasUsage) {
+        return;
+    }
+    if (ts.isImportDeclaration(node) &&
+        node.importClause?.namedBindings &&
+        ts.isNamedImports(node.importClause.namedBindings)) {
+        let elements = node.importClause.namedBindings.elements;
+        for (let i = 0, n = elements.length; i < n; i++) {
+            let el = elements[i], name = el.propertyName?.text ?? el.name.text;
+            if (name === 'reactive') {
+                ctx.hasImport = true;
+                break;
+            }
+        }
+    }
+    if (ts.isCallExpression(node) &&
+        ts.isIdentifier(node.expression) &&
+        node.expression.text === 'reactive') {
+        ctx.hasUsage = true;
+    }
+    ts.forEachChild(node, n => visit(ctx, n));
+}
+const mightNeedTransform = (code) => {
+    if (!checkTransform(code, { regex: REACTIVE_REGEX })) {
+        return false;
+    }
+    let ctx = {
+        hasImport: false,
+        hasUsage: false
+    };
+    visit(ctx, ts.createSourceFile('detect.ts', code, ts.ScriptTarget.Latest, false));
+    return ctx.hasImport && ctx.hasUsage;
+};
+export { mightNeedTransform };

package/build/transformer/index.d.ts

@@ -0,0 +1,9 @@
+import type { TransformResult } from '../types.js';
+import { mightNeedTransform } from './detector.js';
+import ts from 'typescript';
+declare const createTransformer: () => ts.TransformerFactory<ts.SourceFile>;
+declare const transform: (sourceFile: ts.SourceFile) => TransformResult;
+export { createTransformer, mightNeedTransform, transform };
+export { transformReactiveArrays } from './transforms/array.js';
+export { transformReactiveObjects } from './transforms/object.js';
+export { transformReactivePrimitives } from './transforms/primitives.js';

package/build/transformer/{core/index.js → index.js}

@@ -1,18 +1,17 @@
-import { injectAutoDispose } from './transforms/auto-dispose.js';
 import { mightNeedTransform } from './detector.js';
-import { transformReactiveArrays } from './transforms/reactive-array.js';
-import { transformReactiveObjects } from './transforms/reactive-object.js';
-import { transformReactivePrimitives } from './transforms/reactive-primitives.js';
+import { transformReactiveArrays } from './transforms/array.js';
+import { transformReactiveObjects } from './transforms/object.js';
+import { transformReactivePrimitives } from './transforms/primitives.js';
 import ts from 'typescript';
-const createTransformer = (options) => {
+const createTransformer = () => {
     return () => {
         return (sourceFile) => {
-            let result = transform(sourceFile, options);
+            let result = transform(sourceFile);
             return result.transformed ? result.sourceFile : sourceFile;
         };
     };
 };
-const transform = (sourceFile, options) => {
+const transform = (sourceFile) => {
     let bindings = new Map(), code = sourceFile.getFullText(), current = sourceFile, original = code, result;
     if (!mightNeedTransform(code)) {
         return { code, sourceFile, transformed: false };
@@ -32,13 +31,6 @@ const transform = (sourceFile, options) => {
         current = ts.createSourceFile(sourceFile.fileName, result, sourceFile.languageVersion, true);
         code = result;
     }
-    if (options?.autoDispose) {
-        result = injectAutoDispose(current);
-        if (result !== code) {
-            current = ts.createSourceFile(sourceFile.fileName, result, sourceFile.languageVersion, true);
-            code = result;
-        }
-    }
     if (code === original) {
         return { code, sourceFile, transformed: false };
     }
@@ -49,7 +41,6 @@ const transform = (sourceFile, options) => {
     };
 };
 export { createTransformer, mightNeedTransform, transform };
-export { injectAutoDispose } from './transforms/auto-dispose.js';
-export { transformReactiveArrays } from './transforms/reactive-array.js';
-export { transformReactiveObjects } from './transforms/reactive-object.js';
-export { transformReactivePrimitives } from './transforms/reactive-primitives.js';
+export { transformReactiveArrays } from './transforms/array.js';
+export { transformReactiveObjects } from './transforms/object.js';
+export { transformReactivePrimitives } from './transforms/primitives.js';

package/build/transformer/plugins/esbuild.d.ts

@@ -1,5 +1,3 @@
 import type { Plugin } from 'esbuild';
-import type { TransformOptions } from '../../types.js';
-declare const _default: (options?: TransformOptions) => Plugin;
+declare const _default: () => Plugin;
 export default _default;
-export type { TransformOptions as PluginOptions };

package/build/transformer/plugins/esbuild.js

@@ -1,17 +1,18 @@
-import { mightNeedTransform, transform } from '../../transformer/core/index.js';
+import { TRANSFORM_PATTERN } from '@esportsplus/typescript/transformer';
+import { mightNeedTransform, transform } from '../../transformer/index.js';
 import fs from 'fs';
 import ts from 'typescript';
-export default (options) => {
+export default () => {
     return {
         name: '@esportsplus/reactivity/plugin-esbuild',
         setup(build) {
-            build.onLoad({ filter: /\.[tj]sx?$/ }, async (args) => {
+            build.onLoad({ filter: TRANSFORM_PATTERN }, async (args) => {
                 let code = await fs.promises.readFile(args.path, 'utf8');
                 if (!mightNeedTransform(code)) {
                     return null;
                 }
                 try {
-                    let sourceFile = ts.createSourceFile(args.path, code, ts.ScriptTarget.Latest, true), result = transform(sourceFile, options);
+                    let sourceFile = ts.createSourceFile(args.path, code, ts.ScriptTarget.Latest, true), result = transform(sourceFile);
                     if (!result.transformed) {
                         return null;
                     }

package/build/transformer/plugins/tsc.js

@@ -1,4 +1,4 @@
-import { createTransformer } from '../../transformer/core/index.js';
+import { createTransformer } from '../../transformer/index.js';
 export default (_program) => {
     return createTransformer();
 };

package/build/transformer/plugins/vite.d.ts

@@ -1,5 +1,3 @@
 import type { Plugin } from 'vite';
-import type { TransformOptions } from '../../types.js';
-declare const _default: (options?: TransformOptions) => Plugin;
+declare const _default: () => Plugin;
 export default _default;
-export type { TransformOptions as PluginOptions };

package/build/transformer/plugins/vite.js

@@ -1,7 +1,7 @@
-import { mightNeedTransform, transform } from '../../transformer/core/index.js';
+import { TRANSFORM_PATTERN } from '@esportsplus/typescript/transformer';
+import { mightNeedTransform, transform } from '../../transformer/index.js';
 import ts from 'typescript';
-const TRANSFORM_PATTERN = /\.[tj]sx?$/;
-export default (options) => {
+export default () => {
     return {
         enforce: 'pre',
         name: '@esportsplus/reactivity/plugin-vite',
@@ -13,7 +13,7 @@ export default (options) => {
                 return null;
             }
             try {
-                let sourceFile = ts.createSourceFile(id, code, ts.ScriptTarget.Latest, true), result = transform(sourceFile, options);
+                let sourceFile = ts.createSourceFile(id, code, ts.ScriptTarget.Latest, true), result = transform(sourceFile);
                 if (!result.transformed) {
                     return null;
                 }

package/build/transformer/{core/transforms/reactive-array.d.ts → transforms/array.d.ts}

@@ -1,4 +1,4 @@
-import type { Bindings } from '../../../types.js';
+import type { Bindings } from '../../types.js';
 import ts from 'typescript';
 declare const transformReactiveArrays: (sourceFile: ts.SourceFile, bindings: Bindings) => string;
 export { transformReactiveArrays };

package/build/transformer/transforms/array.js

@@ -0,0 +1,93 @@
+import { applyReplacements } from './utilities.js';
+import ts from 'typescript';
+function getExpressionName(node) {
+    if (ts.isIdentifier(node)) {
+        return node.text;
+    }
+    if (ts.isPropertyAccessExpression(node)) {
+        return getPropertyPath(node);
+    }
+    return null;
+}
+function getPropertyPath(node) {
+    let current = node, parts = [];
+    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) {
+    let parent = node.parent;
+    if ((ts.isBinaryExpression(parent) && parent.left === node) ||
+        ts.isPostfixUnaryExpression(parent) ||
+        ts.isPrefixUnaryExpression(parent)) {
+        return true;
+    }
+    return false;
+}
+function visit(ctx, node) {
+    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, bindings) => {
+    let code = sourceFile.getFullText(), ctx = {
+        bindings,
+        replacements: [],
+        sourceFile
+    };
+    visit(ctx, sourceFile);
+    return applyReplacements(code, ctx.replacements);
+};
+export { transformReactiveArrays };

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

@@ -1,4 +1,4 @@
-import type { Bindings } from '../../../types.js';
+import type { Bindings } from '../../types.js';
 import ts from 'typescript';
 declare const transformReactiveObjects: (sourceFile: ts.SourceFile, bindings: Bindings) => string;
 export { transformReactiveObjects };

package/build/transformer/transforms/object.js

@@ -0,0 +1,163 @@
+import { uid } from '@esportsplus/typescript/transformer';
+import { addMissingImports, applyReplacements } from './utilities.js';
+import ts from 'typescript';
+const CLASS_NAME_REGEX = /class (\w+)/;
+const EXTRA_IMPORTS = [
+    { module: '@esportsplus/reactivity/constants', specifier: 'REACTIVE_OBJECT' },
+    { module: '@esportsplus/reactivity/reactive/array', specifier: 'ReactiveArray' }
+];
+function analyzeProperty(prop, sourceFile) {
+    if (!ts.isPropertyAssignment(prop)) {
+        return null;
+    }
+    let key;
+    if (ts.isIdentifier(prop.name) || ts.isStringLiteral(prop.name)) {
+        key = prop.name.text;
+    }
+    else {
+        return null;
+    }
+    let value = prop.initializer, valueText = value.getText(sourceFile);
+    if (ts.isArrowFunction(value) || ts.isFunctionExpression(value)) {
+        return { key, type: 'computed', valueText };
+    }
+    if (ts.isArrayLiteralExpression(value)) {
+        return { key, type: 'array', valueText };
+    }
+    return { key, type: 'signal', valueText };
+}
+function buildClassCode(className, properties) {
+    let accessors = [], disposeStatements = [], fields = [];
+    fields.push(`[REACTIVE_OBJECT] = true;`);
+    for (let i = 0, n = properties.length; i < n; i++) {
+        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 (type === 'array') {
+            let elements = valueText.slice(1, -1);
+            fields.push(`${key} = new ReactiveArray(${elements});`);
+            disposeStatements.push(`this.${key}.dispose();`);
+        }
+        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});`);
+        }
+    }
+    return `
+        class ${className} {
+            ${fields.join('\n')}
+            ${accessors.join('\n')}
+
+            dispose() {
+                ${disposeStatements.length > 0 ? disposeStatements.join('\n') : ''}
+            }
+        }
+    `;
+}
+function visit(ctx, node) {
+    if (ts.isImportDeclaration(node)) {
+        ctx.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') {
+                        ctx.hasReactiveImport = true;
+                        break;
+                    }
+                }
+            }
+        }
+    }
+    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 = null;
+            if (ts.isVariableDeclaration(node.parent) && ts.isIdentifier(node.parent.name)) {
+                varName = node.parent.name.text;
+                ctx.bindings.set(varName, 'object');
+            }
+            let needsImports = new Set(), properties = [];
+            needsImports.add('REACTIVE_OBJECT');
+            let props = arg.properties;
+            for (let i = 0, n = props.length; i < n; i++) {
+                let prop = props[i];
+                if (ts.isSpreadAssignment(prop)) {
+                    ts.forEachChild(node, n => visit(ctx, n));
+                    return;
+                }
+                let analyzed = analyzeProperty(prop, ctx.sourceFile);
+                if (!analyzed) {
+                    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');
+                }
+            }
+            needsImports.forEach(imp => ctx.allNeededImports.add(imp));
+            ctx.calls.push({
+                end: node.end,
+                generatedClass: buildClassCode(uid('ReactiveObject'), properties),
+                needsImports,
+                start: node.pos,
+                varName
+            });
+        }
+    }
+    ts.forEachChild(node, n => visit(ctx, n));
+}
+const transformReactiveObjects = (sourceFile, bindings) => {
+    let code = sourceFile.getFullText(), ctx = {
+        allNeededImports: new Set(),
+        bindings,
+        calls: [],
+        hasReactiveImport: false,
+        lastImportEnd: 0,
+        sourceFile
+    };
+    visit(ctx, sourceFile);
+    if (ctx.calls.length === 0) {
+        return code;
+    }
+    let replacements = [];
+    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 { transformReactiveObjects };

package/build/transformer/{core/transforms/reactive-primitives.d.ts → transforms/primitives.d.ts}

@@ -1,4 +1,4 @@
-import type { Bindings } from '../../../types.js';
+import type { Bindings } from '../../types.js';
 import ts from 'typescript';
 declare const transformReactivePrimitives: (sourceFile: ts.SourceFile, bindings: Bindings) => string;
 export { transformReactivePrimitives };