@esportsplus/reactivity 0.22.3 → 0.23.0

package/src/transformer/core/transforms/reactive-primitives.ts

@@ -0,0 +1,459 @@
+import type { BindingType, Bindings } from '~/types';
+import { uid } from '@esportsplus/typescript/transformer';
+import ts from 'typescript';
+import { addMissingImports, applyReplacements, Replacement } from './utilities';
+
+
+interface ComputedArgRange {
+    end: number;
+    start: number;
+}
+
+interface ScopeBinding {
+    name: string;
+    scope: ts.Node;
+    type: BindingType;
+}
+
+
+function findEnclosingScope(node: ts.Node): ts.Node {
+    let current = node.parent;
+
+    while (current) {
+        if (
+            ts.isBlock(current) ||
+            ts.isSourceFile(current) ||
+            ts.isFunctionDeclaration(current) ||
+            ts.isFunctionExpression(current) ||
+            ts.isArrowFunction(current) ||
+            ts.isForStatement(current) ||
+            ts.isForInStatement(current) ||
+            ts.isForOfStatement(current)
+        ) {
+            return current;
+        }
+
+        current = current.parent;
+    }
+
+    return node.getSourceFile();
+}
+
+function findBinding(bindings: ScopeBinding[], name: string, node: ts.Node): ScopeBinding | undefined {
+    for (let i = 0, n = bindings.length; i < n; i++) {
+        let b = bindings[i];
+
+        if (b.name === name && isInScope(node, b)) {
+            return b;
+        }
+    }
+
+    return undefined;
+}
+
+function isInComputedRange(ranges: ComputedArgRange[], start: number, end: number): boolean {
+    for (let i = 0, n = ranges.length; i < n; i++) {
+        let r = ranges[i];
+
+        if (start >= r.start && end <= r.end) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
+function isInScope(reference: ts.Node, binding: ScopeBinding): boolean {
+    let current: ts.Node | undefined = reference;
+
+    while (current) {
+        if (current === binding.scope) {
+            return true;
+        }
+
+        current = current.parent;
+    }
+
+    return false;
+}
+
+function classifyReactiveArg(arg: ts.Expression): 'computed' | 'signal' | null {
+    if (ts.isArrowFunction(arg) || ts.isFunctionExpression(arg)) {
+        return 'computed';
+    }
+
+    if (ts.isObjectLiteralExpression(arg) || ts.isArrayLiteralExpression(arg)) {
+        return null;
+    }
+
+    return 'signal';
+}
+
+function isInDeclarationInit(node: ts.Node): boolean {
+    let parent = node.parent;
+
+    if (ts.isVariableDeclaration(parent) && parent.initializer === node) {
+        return true;
+    }
+
+    return false;
+}
+
+function isReactiveReassignment(node: ts.Node): boolean {
+    let parent = node.parent;
+
+    if (ts.isBinaryExpression(parent) &&
+        parent.operatorToken.kind === ts.SyntaxKind.EqualsToken &&
+        parent.right === node &&
+        ts.isCallExpression(node) &&
+        ts.isIdentifier((node as ts.CallExpression).expression) &&
+        ((node as ts.CallExpression).expression as ts.Identifier).text === 'reactive') {
+        return true;
+    }
+
+    return false;
+}
+
+function isWriteContext(node: ts.Identifier): 'simple' | 'compound' | 'increment' | false {
+    let parent = node.parent;
+
+    if (ts.isBinaryExpression(parent) && parent.left === node) {
+        let op = parent.operatorToken.kind;
+
+        if (op === ts.SyntaxKind.EqualsToken) {
+            return 'simple';
+        }
+
+        if (op >= ts.SyntaxKind.PlusEqualsToken && op <= ts.SyntaxKind.CaretEqualsToken) {
+            return 'compound';
+        }
+
+        if (
+            op === ts.SyntaxKind.AmpersandAmpersandEqualsToken ||
+            op === ts.SyntaxKind.BarBarEqualsToken ||
+            op === ts.SyntaxKind.QuestionQuestionEqualsToken
+        ) {
+            return 'compound';
+        }
+    }
+
+    if (ts.isPostfixUnaryExpression(parent) || ts.isPrefixUnaryExpression(parent)) {
+        let op = parent.operator;
+
+        if (op === ts.SyntaxKind.PlusPlusToken || op === ts.SyntaxKind.MinusMinusToken) {
+            return 'increment';
+        }
+    }
+
+    return false;
+}
+
+function getCompoundOperator(kind: ts.SyntaxKind): string {
+    if (kind === ts.SyntaxKind.PlusEqualsToken) {
+        return '+';
+    }
+    else if (kind === ts.SyntaxKind.MinusEqualsToken) {
+        return '-';
+    }
+    else if (kind === ts.SyntaxKind.AsteriskEqualsToken) {
+        return '*';
+    }
+    else if (kind === ts.SyntaxKind.SlashEqualsToken) {
+        return '/';
+    }
+    else if (kind === ts.SyntaxKind.PercentEqualsToken) {
+        return '%';
+    }
+    else if (kind === ts.SyntaxKind.AsteriskAsteriskEqualsToken) {
+        return '**';
+    }
+    else if (kind === ts.SyntaxKind.AmpersandEqualsToken) {
+        return '&';
+    }
+    else if (kind === ts.SyntaxKind.BarEqualsToken) {
+        return '|';
+    }
+    else if (kind === ts.SyntaxKind.CaretEqualsToken) {
+        return '^';
+    }
+    else if (kind === ts.SyntaxKind.LessThanLessThanEqualsToken) {
+        return '<<';
+    }
+    else if (kind === ts.SyntaxKind.GreaterThanGreaterThanEqualsToken) {
+        return '>>';
+    }
+    else if (kind === ts.SyntaxKind.GreaterThanGreaterThanGreaterThanEqualsToken) {
+        return '>>>';
+    }
+    else if (kind === ts.SyntaxKind.AmpersandAmpersandEqualsToken) {
+        return '&&';
+    }
+    else if (kind === ts.SyntaxKind.BarBarEqualsToken) {
+        return '||';
+    }
+    else if (kind === ts.SyntaxKind.QuestionQuestionEqualsToken) {
+        return '??';
+    }
+    else {
+        return '+';
+    }
+}
+
+function transformComputedArg(
+    arg: ts.Expression,
+    scopedBindings: ScopeBinding[],
+    sourceFile: ts.SourceFile,
+    neededImports: Set<string>
+): string {
+    let argStart = arg.getStart(sourceFile),
+        innerReplacements: Replacement[] = [],
+        text = arg.getText(sourceFile);
+
+    function visitArg(node: ts.Node): void {
+        // Only transform identifiers that are signal bindings
+        if (ts.isIdentifier(node)) {
+            // Skip if it's a property name in property access (obj.prop - skip prop)
+            if (ts.isPropertyAccessExpression(node.parent) && node.parent.name === node) {
+                ts.forEachChild(node, visitArg);
+                return;
+            }
+
+            // Skip if it's the function name in a call expression
+            if (ts.isCallExpression(node.parent) && node.parent.expression === node) {
+                ts.forEachChild(node, visitArg);
+                return;
+            }
+
+            let binding = findBinding(scopedBindings, node.text, node);
+
+            if (binding) {
+                neededImports.add('read');
+
+                innerReplacements.push({
+                    end: node.end - argStart,
+                    newText: `read(${node.text})`,
+                    start: node.getStart(sourceFile) - argStart
+                });
+            }
+        }
+
+        ts.forEachChild(node, visitArg);
+    }
+
+    visitArg(arg);
+
+    return applyReplacements(text, innerReplacements);
+}
+
+
+const transformReactivePrimitives = (
+    sourceFile: ts.SourceFile,
+    bindings: Bindings
+): string => {
+    let code = sourceFile.getFullText(),
+        computedArgRanges: ComputedArgRange[] = [],
+        hasReactiveImport = false,
+        neededImports = new Set<string>(),
+        replacements: Replacement[] = [],
+        scopedBindings: ScopeBinding[] = [];
+
+    // Single-pass visitor: detect imports, bindings, and usages together
+    function visit(node: ts.Node): void {
+        if (
+            ts.isImportDeclaration(node) &&
+            ts.isStringLiteral(node.moduleSpecifier) &&
+            node.moduleSpecifier.text.includes('@esportsplus/reactivity')
+        ) {
+            let clause = node.importClause;
+
+            if (clause?.namedBindings && ts.isNamedImports(clause.namedBindings)) {
+                for (let i = 0, n = clause.namedBindings.elements.length; i < n; i++) {
+                    if (clause.namedBindings.elements[i].name.text === 'reactive') {
+                        hasReactiveImport = true;
+                        break;
+                    }
+                }
+            }
+        }
+
+        if (
+            hasReactiveImport &&
+            ts.isCallExpression(node) &&
+            ts.isIdentifier(node.expression) &&
+            node.expression.text === 'reactive' &&
+            node.arguments.length > 0
+        ) {
+
+            let arg = node.arguments[0],
+                classification = classifyReactiveArg(arg);
+
+            if (classification) {
+                let varName: string | null = null;
+
+                if (ts.isVariableDeclaration(node.parent) && ts.isIdentifier(node.parent.name)) {
+                    varName = node.parent.name.text;
+                }
+                else if (
+                    ts.isBinaryExpression(node.parent) &&
+                    node.parent.operatorToken.kind === ts.SyntaxKind.EqualsToken &&
+                    ts.isIdentifier(node.parent.left)
+                ) {
+                    varName = node.parent.left.text;
+                }
+
+                if (varName) {
+                    let scope = findEnclosingScope(node);
+
+                    scopedBindings.push({ name: varName, scope, type: classification });
+                    bindings.set(varName, classification);
+                }
+
+                if (classification === 'computed') {
+                    // Track range to skip identifiers inside when visitor continues
+                    computedArgRanges.push({
+                        end: arg.end,
+                        start: arg.getStart(sourceFile)
+                    });
+
+                    // Transform signal references inside the computed arg
+                    let argText = transformComputedArg(arg, scopedBindings, sourceFile, neededImports);
+
+                    replacements.push({
+                        end: node.end,
+                        newText: `computed(${argText})`,
+                        start: node.pos
+                    });
+
+                    neededImports.add('computed');
+                }
+                else {
+                    let argText = arg.getText(sourceFile);
+
+                    replacements.push({
+                        end: node.end,
+                        newText: `signal(${argText})`,
+                        start: node.pos
+                    });
+
+                    neededImports.add('signal');
+                }
+            }
+        }
+
+        // Transform identifier usages
+        if (ts.isIdentifier(node) && !isInDeclarationInit(node.parent)) {
+            // Skip if it's a property name in property access (obj.prop - skip prop)
+            if (ts.isPropertyAccessExpression(node.parent) && node.parent.name === node) {
+                ts.forEachChild(node, visit);
+                return;
+            }
+
+            let nodeStart = node.getStart(sourceFile);
+
+            // Skip if inside a computed arg we already transformed
+            let insideComputedArg = isInComputedRange(computedArgRanges, nodeStart, node.end);
+
+            if (insideComputedArg) {
+                ts.forEachChild(node, visit);
+                return;
+            }
+
+            let binding = findBinding(scopedBindings, node.text, node),
+                name = node.text;
+
+            if (binding) {
+                if (
+                    !isReactiveReassignment(node.parent) &&
+                    !(ts.isTypeOfExpression(node.parent) && node.parent.expression === node)
+                ) {
+                    let writeCtx = isWriteContext(node);
+
+                    if (writeCtx) {
+                        if (binding.type !== 'computed') {
+                            neededImports.add('set');
+
+                            let parent = node.parent;
+
+                            if (writeCtx === 'simple' && ts.isBinaryExpression(parent)) {
+                                let valueText = parent.right.getText(sourceFile);
+
+                                replacements.push({
+                                    end: parent.end,
+                                    newText: `set(${name}, ${valueText})`,
+                                    start: parent.pos
+                                });
+                            }
+                            else if (writeCtx === 'compound' && ts.isBinaryExpression(parent)) {
+                                let op = getCompoundOperator(parent.operatorToken.kind),
+                                    valueText = parent.right.getText(sourceFile);
+
+                                replacements.push({
+                                    end: parent.end,
+                                    newText: `set(${name}, ${name}.value ${op} ${valueText})`,
+                                    start: parent.pos
+                                });
+                            }
+                            else if (writeCtx === 'increment') {
+                                let isPrefix = ts.isPrefixUnaryExpression(parent),
+                                    op = (parent as ts.PrefixUnaryExpression | ts.PostfixUnaryExpression).operator,
+                                    delta = op === ts.SyntaxKind.PlusPlusToken ? '+ 1' : '- 1';
+
+                                if (ts.isExpressionStatement(parent.parent)) {
+                                    replacements.push({
+                                        end: parent.end,
+                                        newText: `set(${name}, ${name}.value ${delta})`,
+                                        start: parent.pos
+                                    });
+                                }
+                                else if (isPrefix) {
+                                    replacements.push({
+                                        end: parent.end,
+                                        newText: `(set(${name}, ${name}.value ${delta}), ${name}.value)`,
+                                        start: parent.pos
+                                    });
+                                }
+                                else {
+                                    let tmp = uid('tmp');
+
+                                    replacements.push({
+                                        end: parent.end,
+                                        newText: `((${tmp}) => (set(${name}, ${tmp} ${delta}), ${tmp}))(${name}.value)`,
+                                        start: parent.pos
+                                    });
+                                }
+                            }
+                        }
+                    }
+                    else {
+                        neededImports.add('read');
+
+                        replacements.push({
+                            end: node.end,
+                            newText: `read(${name})`,
+                            start: node.pos
+                        });
+                    }
+                }
+            }
+        }
+
+        ts.forEachChild(node, visit);
+    }
+
+    visit(sourceFile);
+
+    if (replacements.length === 0) {
+        return code;
+    }
+
+    let result = applyReplacements(code, replacements);
+
+    if (neededImports.size > 0) {
+        result = addMissingImports(result, neededImports);
+    }
+
+    return result;
+};
+
+
+export { transformReactivePrimitives };

package/src/transformer/core/transforms/utilities.ts

@@ -0,0 +1,95 @@
+import type { Replacement } from '@esportsplus/typescript/transformer';
+import { applyReplacements } from '@esportsplus/typescript/transformer';
+
+
+type ExtraImport = {
+    module: string;
+    specifier: string;
+}
+
+
+const BRACES_CONTENT_REGEX = /\{([^}]*)\}/;
+
+const REACTIVITY_IMPORT_REGEX = /(import\s*\{[^}]*\}\s*from\s*['"]@esportsplus\/reactivity['"])/;
+
+
+const addMissingImports = (code: string, needed: Set<string>, extraImports?: ExtraImport[]): string => {
+    let reactivityImportMatch = code.match(REACTIVITY_IMPORT_REGEX);
+
+    if (!reactivityImportMatch) {
+        return code;
+    }
+
+    let bracesMatch = reactivityImportMatch[1].match(BRACES_CONTENT_REGEX),
+        existing = new Set<string>(),
+        existingImport = reactivityImportMatch[1],
+        extraSpecifiers = new Set<string>(),
+        toAdd: string[] = [];
+
+    if (bracesMatch?.[1]) {
+        let parts = bracesMatch[1].split(',');
+
+        for (let i = 0, n = parts.length; i < n; i++) {
+            let trimmed = parts[i].trim();
+
+            if (trimmed) {
+                existing.add(trimmed);
+            }
+        }
+    }
+
+    if (extraImports) {
+        for (let i = 0, n = extraImports.length; i < n; i++) {
+            extraSpecifiers.add(extraImports[i].specifier);
+        }
+    }
+
+    for (let imp of needed) {
+        if (!extraSpecifiers.has(imp) && !existing.has(imp)) {
+            toAdd.push(imp);
+        }
+    }
+
+    if (toAdd.length > 0) {
+        let combined: string[] = [];
+
+        for (let item of existing) {
+            if (item) {
+                combined.push(item);
+            }
+        }
+
+        for (let i = 0, n = toAdd.length; i < n; i++) {
+            if (toAdd[i]) {
+                combined.push(toAdd[i]);
+            }
+        }
+
+        combined.sort();
+
+        code = code.replace(
+            existingImport,
+            existingImport.replace(BRACES_CONTENT_REGEX, `{ ${combined.join(', ')} }`)
+        );
+    }
+
+    if (extraImports) {
+        for (let i = 0, n = extraImports.length; i < n; i++) {
+            let extra = extraImports[i];
+
+            if (needed.has(extra.specifier) && !code.includes(extra.module)) {
+                let insertPos = code.indexOf('import');
+
+                code = code.substring(0, insertPos) +
+                       `import { ${extra.specifier} } from '${extra.module}';\n` +
+                       code.substring(insertPos);
+            }
+        }
+    }
+
+    return code;
+};
+
+
+export { addMissingImports, applyReplacements };
+export type { ExtraImport, Replacement };

package/src/transformer/plugins/esbuild.ts

@@ -0,0 +1,46 @@
+import { mightNeedTransform, transform } from '~/transformer/core';
+import type { OnLoadArgs, Plugin, PluginBuild } from 'esbuild';
+import type { TransformOptions } from '~/types';
+import fs from 'fs';
+import ts from 'typescript';
+
+
+export default (options?: TransformOptions): Plugin => {
+    return {
+        name: '@esportsplus/reactivity/plugin-esbuild',
+
+        setup(build: PluginBuild) {
+            build.onLoad({ filter: /\.[tj]sx?$/ }, async (args: OnLoadArgs) => {
+                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);
+
+                    if (!result.transformed) {
+                        return null;
+                    }
+
+                    return {
+                        contents: result.code,
+                        loader: args.path.endsWith('x') ? 'tsx' : 'ts'
+                    };
+                }
+                catch (error) {
+                    console.error(`@esportsplus/reactivity: Error transforming ${args.path}:`, error);
+                    return null;
+                }
+            });
+        }
+    };
+};
+export type { TransformOptions as PluginOptions };

package/src/transformer/plugins/tsc.ts

@@ -0,0 +1,8 @@
+import { createTransformer } from '~/transformer/core';
+import ts from 'typescript';
+
+
+// TypeScript custom transformers API requires program parameter, but we don't use it
+export default (_program: ts.Program): ts.TransformerFactory<ts.SourceFile> => {
+    return createTransformer();
+};

package/src/transformer/plugins/vite.ts

@@ -0,0 +1,41 @@
+import { mightNeedTransform, transform } from '~/transformer/core';
+import type { Plugin } from 'vite';
+import type { TransformOptions } from '~/types';
+import ts from 'typescript';
+
+
+const TRANSFORM_PATTERN = /\.[tj]sx?$/;
+
+
+export default (options?: TransformOptions): Plugin => {
+    return {
+        enforce: 'pre',
+        name: '@esportsplus/reactivity/plugin-vite',
+
+        transform(code: string, id: string) {
+            if (!TRANSFORM_PATTERN.test(id) || id.includes('node_modules')) {
+                return null;
+            }
+
+            if (!mightNeedTransform(code)) {
+                return null;
+            }
+
+            try {
+                let sourceFile = ts.createSourceFile(id, code, ts.ScriptTarget.Latest, true),
+                    result = transform(sourceFile, options);
+
+                if (!result.transformed) {
+                    return null;
+                }
+
+                return { code: result.code, map: null };
+            }
+            catch (error) {
+                console.error(`@esportsplus/reactivity: Error transforming ${id}:`, error);
+                return null;
+            }
+        }
+    };
+};
+export type { TransformOptions as PluginOptions };

package/src/types.ts

@@ -1,8 +1,12 @@
 import { COMPUTED, SIGNAL, STATE_CHECK, STATE_DIRTY, STATE_IN_HEAP, STATE_NONE, STATE_RECOMPUTING } from './constants';
-import { ReactiveArray } from './reactive/array';
-import { ReactiveObject } from './reactive/object';
+import { ReactiveArray, ReactiveObject } from './reactive';
+import ts from 'typescript';
 
 
+type BindingType = 'array' | 'computed' | 'object' | 'signal';
+
+type Bindings = Map<string, BindingType>;
+
 interface Computed<T> {
     cleanup: VoidFunction | VoidFunction[] | null;
     deps: Link | null;
@@ -25,10 +29,10 @@ interface Computed<T> {
 
 interface Link {
     dep: Signal<unknown> | Computed<unknown>;
-    sub: Computed<unknown>;
     nextDep: Link | null;
     nextSub: Link | null;
     prevSub: Link | null;
+    sub: Computed<unknown>;
     version: number;
 }
 
@@ -39,10 +43,25 @@ type Signal<T> = {
     value: T;
 };
 
+interface TransformOptions {
+    autoDispose?: boolean;
+}
+
+interface TransformResult {
+    code: string;
+    sourceFile: ts.SourceFile;
+    transformed: boolean;
+}
+
 
 export type {
+    BindingType,
+    Bindings,
     Computed,
     Link,
+    ReactiveArray,
+    ReactiveObject,
     Signal,
-    ReactiveArray, ReactiveObject
-};
+    TransformOptions,
+    TransformResult
+};