@esportsplus/reactivity 0.27.0 → 0.27.2

package/src/compiler/array.ts

@@ -1,10 +1,38 @@
-import { ast, code as c, type Replacement } from '@esportsplus/typescript/compiler';
 import { ts } from '@esportsplus/typescript';
-import { COMPILER_TYPES } from '~/constants';
+import { ast, code as c, type Replacement } from '@esportsplus/typescript/compiler';
+import { COMPILER_NAMESPACE, COMPILER_TYPES } from '~/constants';
 import type { Bindings } from '~/types';
+import { isReactiveCall } from '.';
+
+
+interface TransformContext {
+    bindings: Bindings;
+    checker?: ts.TypeChecker;
+    replacements: Replacement[];
+    sourceFile: ts.SourceFile;
+}
+
+
+function visit(ctx: TransformContext, node: ts.Node): void {
+    if (ts.isCallExpression(node) && isReactiveCall(node, ctx.checker) && node.arguments.length > 0) {
+        let arg = node.arguments[0],
+            expression = ts.isAsExpression(arg) ? arg.expression : arg;
+
+        if (ts.isArrayLiteralExpression(expression)) {
+            if (node.parent && ts.isVariableDeclaration(node.parent) && ts.isIdentifier(node.parent.name)) {
+                ctx.bindings.set(node.parent.name.text, COMPILER_TYPES.Array);
+            }
 
+            ctx.replacements.push({
+                end: node.end,
+                newText: expression.elements.length > 0
+                    ? ` new ${COMPILER_NAMESPACE}.ReactiveArray(...${expression.getText(ctx.sourceFile)})`
+                    : ` new ${COMPILER_NAMESPACE}.ReactiveArray()`,
+                start: node.pos
+            });
+        }
+    }
 
-function visit(ctx: { bindings: Bindings, replacements: Replacement[], sourceFile: ts.SourceFile }, 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) === COMPILER_TYPES.Array) {
             ctx.bindings.set(node.name.text, COMPILER_TYPES.Array);
@@ -61,17 +89,16 @@ function visit(ctx: { bindings: Bindings, replacements: Replacement[], sourceFil
         node.operatorToken.kind === ts.SyntaxKind.EqualsToken &&
         ts.isElementAccessExpression(node.left)
     ) {
-        let elemAccess = node.left,
-            objName = ast.getExpressionName(elemAccess.expression);
+        let element = node.left,
+            name = ast.getExpressionName(element.expression);
 
-        if (objName && ctx.bindings.get(objName) === COMPILER_TYPES.Array) {
-            let index = elemAccess.argumentExpression.getText(ctx.sourceFile),
-                obj = elemAccess.expression.getText(ctx.sourceFile),
+        if (name && ctx.bindings.get(name) === COMPILER_TYPES.Array) {
+            let index = element.argumentExpression.getText(ctx.sourceFile),
                 value = node.right.getText(ctx.sourceFile);
 
             ctx.replacements.push({
                 end: node.end,
-                newText: `${obj}.$set(${index}, ${value})`,
+                newText: `${element.expression.getText(ctx.sourceFile)}.$set(${index}, ${value})`,
                 start: node.pos
             });
         }
@@ -81,15 +108,20 @@ function visit(ctx: { bindings: Bindings, replacements: Replacement[], sourceFil
 }
 
 
-export default (sourceFile: ts.SourceFile, bindings: Bindings, _ns: string, _checker?: ts.TypeChecker): string => {
+export default (sourceFile: ts.SourceFile, bindings: Bindings, checker?: ts.TypeChecker): string => {
     let code = sourceFile.getFullText(),
-        ctx = {
+        ctx: TransformContext = {
             bindings,
+            checker,
             replacements: [],
             sourceFile
         };
 
     visit(ctx, sourceFile);
 
+    if (ctx.replacements.length === 0) {
+        return code;
+    }
+
     return c.replace(code, ctx.replacements);
-};
+};

package/src/compiler/index.ts

@@ -1,83 +1,101 @@
+import type { PluginContext } from '@esportsplus/typescript/compiler';
 import { ts } from '@esportsplus/typescript';
-import { code as c, imports } from '@esportsplus/typescript/compiler';
-import { COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REGEX, COMPILER_NAMESPACE, PACKAGE } from '~/constants';
+import { ast, imports } from '@esportsplus/typescript/compiler';
+import { COMPILER_ENTRYPOINT, COMPILER_NAMESPACE, PACKAGE } from '~/constants';
 import type { Bindings, TransformResult } from '~/types';
 import array from './array';
 import object from './object';
-import primitives from './primitives';
 
 
-let transforms = [object, array, primitives];
+type AnalyzedFile = {
+    hasReactiveImport: boolean;
+};
 
 
-function hasReactiveImport(sourceFile: ts.SourceFile): boolean {
-    let found = imports.find(sourceFile, PACKAGE);
+const CONTEXT_KEY = 'reactivity:analyzed';
 
-    for (let i = 0, n = found.length; i < n; i++) {
-        if (found[i].specifiers.has(COMPILER_ENTRYPOINT)) {
-            return true;
-        }
-    }
 
-    return false;
+let transforms = [object, array];
+
+
+function getAnalyzedFile(context: PluginContext | undefined, filename: string): AnalyzedFile | undefined {
+    return (context?.get(CONTEXT_KEY) as Map<string, AnalyzedFile> | undefined)?.get(filename);
 }
 
-function hasReactiveUsage(code: string): boolean {
-    if (!c.contains(code, { regex: COMPILER_ENTRYPOINT_REGEX })) {
-        return false;
-    }
+function hasReactiveImport(sourceFile: ts.SourceFile): boolean {
+    return imports.find(sourceFile, PACKAGE).some(i => i.specifiers.has(COMPILER_ENTRYPOINT));
+}
 
-    let sourceFile = ts.createSourceFile('detect.ts', code, ts.ScriptTarget.Latest, false),
-        used = false;
+function isReactiveCallNode(node: ts.Node): boolean {
+    return ts.isCallExpression(node) && ts.isIdentifier(node.expression) && node.expression.text === COMPILER_ENTRYPOINT;
+}
 
-    function visit(node: ts.Node): void {
-        if (used) {
-            return;
-        }
 
-        if (
-            ts.isCallExpression(node) &&
-            ts.isIdentifier(node.expression) &&
-            node.expression.text === COMPILER_ENTRYPOINT
-        ) {
-            used = true;
-            return;
-        }
+const analyze = (sourceFile: ts.SourceFile, _program: ts.Program, context: PluginContext): void => {
+    if (!hasReactiveImport(sourceFile)) {
+        return;
+    }
 
-        ts.forEachChild(node, visit);
+    let files = context.get(CONTEXT_KEY) as Map<string, AnalyzedFile> | undefined;
+
+    if (!files) {
+        files = new Map();
+        context.set(CONTEXT_KEY, files);
     }
 
-    visit(sourceFile);
+    files.set(sourceFile.fileName, {
+        hasReactiveImport: true
+    });
+};
 
-    return used;
-}
+const isReactiveCall = (node: ts.CallExpression, _checker?: ts.TypeChecker): boolean => {
+    if (!ts.isIdentifier(node.expression)) {
+        return false;
+    }
 
+    return node.expression.text === COMPILER_ENTRYPOINT;
+};
 
-const transform = (sourceFile: ts.SourceFile, program: ts.Program): TransformResult => {
+const transform = (sourceFile: ts.SourceFile, program: ts.Program, context?: PluginContext): TransformResult => {
     let bindings: Bindings = new Map(),
         changed = false,
         checker = program.getTypeChecker(),
         code = sourceFile.getFullText(),
         current = sourceFile,
+        filename = sourceFile.fileName,
         result: string;
 
-    if (!hasReactiveImport(sourceFile) || !hasReactiveUsage(code)) {
+    // Try to get pre-analyzed data from context
+    let analyzed = getAnalyzedFile(context, filename);
+
+    // Fall back to inline check (for Vite or when context unavailable)
+    if (!analyzed) {
+        if (!hasReactiveImport(sourceFile)) {
+            return { changed: false, code, sourceFile };
+        }
+    }
+    else if (!analyzed.hasReactiveImport) {
         return { changed: false, code, sourceFile };
     }
 
     for (let i = 0, n = transforms.length; i < n; i++) {
-        result = transforms[i](current, bindings, COMPILER_NAMESPACE, checker);
+        result = transforms[i](current, bindings, checker);
 
         if (result !== code) {
-            current = ts.createSourceFile(sourceFile.fileName, result, sourceFile.languageVersion, true);
             code = result;
             changed = true;
+            current = ts.createSourceFile(sourceFile.fileName, result, sourceFile.languageVersion, true);
         }
     }
 
     if (changed) {
-        code = imports.modify(code, current, PACKAGE, { remove: [COMPILER_ENTRYPOINT] });
-        code = `import * as ${COMPILER_NAMESPACE} from '@esportsplus/reactivity';\n` + code;
+        let remove: string[] = [];
+
+        if (!ast.hasMatch(current, isReactiveCallNode)) {
+            remove.push(COMPILER_ENTRYPOINT);
+        }
+
+        code = imports.modify(code, current, PACKAGE, { namespace: COMPILER_NAMESPACE, remove });
         sourceFile = ts.createSourceFile(sourceFile.fileName, code, sourceFile.languageVersion, true);
     }
 
@@ -85,4 +103,4 @@ const transform = (sourceFile: ts.SourceFile, program: ts.Program): TransformRes
 };
 
 
-export { transform };
+export { analyze, isReactiveCall, transform };

package/src/compiler/object.ts

@@ -1,10 +1,12 @@
 import { ts } from '@esportsplus/typescript';
-import { code as c, imports, type Replacement } from '@esportsplus/typescript/compiler';
-import { COMPILER_ENTRYPOINT, COMPILER_TYPES, PACKAGE } from '~/constants';
+import { code as c, uid, type Replacement } from '@esportsplus/typescript/compiler';
+import { COMPILER_NAMESPACE, COMPILER_TYPES } from '~/constants';
 import type { Bindings } from '~/types';
+import { isReactiveCall } from '.';
 
 
 interface AnalyzedProperty {
+    isStatic: boolean;
     key: string;
     type: COMPILER_TYPES;
     valueText: string;
@@ -24,7 +26,6 @@ interface TransformContext {
     checker?: ts.TypeChecker;
     classCounter: number;
     lastImportEnd: number;
-    ns: string;
     sourceFile: ts.SourceFile;
 }
 
@@ -43,82 +44,129 @@ function analyzeProperty(prop: ts.ObjectLiteralElementLike, sourceFile: ts.Sourc
         return null;
     }
 
-    let value = prop.initializer,
+    let unwrapped = prop.initializer,
+        value = unwrapped,
         valueText = value.getText(sourceFile);
 
-    if (ts.isArrowFunction(value) || ts.isFunctionExpression(value)) {
-        return { key, type: COMPILER_TYPES.Computed, valueText };
+    while (ts.isAsExpression(unwrapped) || ts.isTypeAssertionExpression(unwrapped) || ts.isParenthesizedExpression(unwrapped)) {
+        unwrapped = unwrapped.expression;
     }
 
-    if (ts.isArrayLiteralExpression(value)) {
-        let elements = value.elements,
-            elementsText = '';
+    if (ts.isArrowFunction(unwrapped) || ts.isFunctionExpression(unwrapped)) {
+        return { isStatic: false, key, type: COMPILER_TYPES.Computed, valueText };
+    }
+
+    if (ts.isArrayLiteralExpression(unwrapped)) {
+        let elements = unwrapped.elements,
+            isStatic = value === unwrapped;
 
         for (let i = 0, n = elements.length; i < n; i++) {
-            if (i > 0) {
-                elementsText += ', ';
+            if (isStatic && !isStaticValue(elements[i])) {
+                isStatic = false;
             }
-
-            elementsText += elements[i].getText(sourceFile);
         }
 
-        return { key, type: COMPILER_TYPES.Array, valueText: elementsText };
+        return { isStatic, key, type: COMPILER_TYPES.Array, valueText };
     }
 
-    return { key, type: COMPILER_TYPES.Signal, valueText };
+    return { isStatic: isStaticValue(value), key, type: COMPILER_TYPES.Signal, valueText };
 }
 
-function buildClassCode(className: string, properties: AnalyzedProperty[], ns: string): string {
+function buildClassCode(className: string, properties: AnalyzedProperty[]): string {
     let accessors: string[] = [],
-        disposeStatements: string[] = [],
+        body: string[] = [],
         fields: string[] = [],
-        paramCounter = 0;
-
-    fields.push(`[${ns}.REACTIVE_OBJECT] = true;`);
+        generics: string[] = [],
+        parameters: string[] = [],
+        setters = 0;
 
     for (let i = 0, n = properties.length; i < n; i++) {
-        let { key, type, valueText } = properties[i];
+        let { isStatic, key, type, valueText } = properties[i],
+            generic = `T${parameters.length}`,
+            parameter = `_p${parameters.length}`;
 
         if (type === COMPILER_TYPES.Signal) {
-            let param = `_v${paramCounter++}`;
-
-            accessors.push(`get ${key}() { return ${ns}.read(this.#${key}); }`);
-            accessors.push(`set ${key}(${param}) { ${ns}.write(this.#${key}, ${param}); }`);
-            fields.push(`#${key} = ${ns}.signal(${valueText});`);
+            let value = `_v${setters++}`;
+
+            if (isStatic) {
+                accessors.push(`
+                    get ${key}() {
+                        return ${COMPILER_NAMESPACE}.read(this.#${key});
+                    }
+                    set ${key}(${value}) {
+                        ${COMPILER_NAMESPACE}.write(this.#${key}, ${value});
+                    }
+                `);
+                fields.push(`#${key} = this[${COMPILER_NAMESPACE}.SIGNAL](${valueText});`);
+            }
+            else {
+                accessors.push(`
+                    get ${key}() {
+                        return ${COMPILER_NAMESPACE}.read(this.#${key}) as ${generic};
+                    }
+                    set ${key}(${value}) {
+                        ${COMPILER_NAMESPACE}.write(this.#${key}, ${value});
+                    }
+                `);
+                body.push(`this.#${key} = this[${COMPILER_NAMESPACE}.SIGNAL](${parameter});`);
+                fields.push(`#${key};`);
+                generics.push(generic);
+                parameters.push(`${parameter}: ${generic}`);
+            }
         }
         else if (type === COMPILER_TYPES.Array) {
-            disposeStatements.push(`this.${key}.dispose();`);
-            fields.push(`${key} = new ${ns}.ReactiveArray(${valueText});`);
+            accessors.push(`
+                get ${key}() {
+                    return this.#${key};
+                }
+            `);
+            body.push(`this.#${key} = this[${COMPILER_NAMESPACE}.REACTIVE_ARRAY](${parameter});`);
+            fields.push(`#${key};`);
+            generics.push(`${generic} extends unknown[]`);
+            parameters.push(`${parameter}: ${generic}`);
         }
         else if (type === COMPILER_TYPES.Computed) {
-            accessors.push(`get ${key}() { return ${ns}.read(this.#${key} ??= ${ns}.computed(${valueText})); }`);
-            disposeStatements.push(`if (this.#${key}) ${ns}.dispose(this.#${key});`);
-            fields.push(`#${key} = null;`);
+            accessors.push(`
+                get ${key}() {
+                    return ${COMPILER_NAMESPACE}.read(this.#${key});
+                }
+            `);
+            body.push(`this.#${key} = this[${COMPILER_NAMESPACE}.COMPUTED](${parameter});`);
+            fields.push(`#${key};`);
+            generics.push(`${generic} extends ${COMPILER_NAMESPACE}.Computed<ReturnType<${generic}>>['fn']`);
+            parameters.push(`${parameter}: ${generic}`);
         }
     }
 
     return `
-        class ${className} {
+        class ${className}${generics.length > 0 ? `<${generics.join(', ')}>` : ''} extends ${COMPILER_NAMESPACE}.ReactiveObject<any> {
             ${fields.join('\n')}
-            ${accessors.join('\n')}
-
-            dispose() {
-                ${disposeStatements.length > 0 ? disposeStatements.join('\n') : ''}
+            constructor(${parameters.join(', ')}) {
+                super(null);
+                ${body.join('\n')}
             }
+            ${accessors.join('\n')}
         }
     `;
 }
 
-function isReactiveCall(node: ts.CallExpression, checker?: ts.TypeChecker): boolean {
-    if (!ts.isIdentifier(node.expression)) {
-        return false;
+function isStaticValue(node: ts.Node): boolean {
+    if (
+        ts.isNumericLiteral(node) ||
+        ts.isStringLiteral(node) ||
+        node.kind === ts.SyntaxKind.TrueKeyword ||
+        node.kind === ts.SyntaxKind.FalseKeyword ||
+        node.kind === ts.SyntaxKind.NullKeyword ||
+        node.kind === ts.SyntaxKind.UndefinedKeyword
+    ) {
+        return true;
     }
 
-    if (node.expression.text !== COMPILER_ENTRYPOINT) {
-        return false;
+    if (ts.isPrefixUnaryExpression(node) && ts.isNumericLiteral(node.operand)) {
+        return true;
     }
 
-    return imports.isFromPackage(node.expression, PACKAGE, checker);
+    return false;
 }
 
 function visit(ctx: TransformContext, node: ts.Node): void {
@@ -165,7 +213,7 @@ function visit(ctx: TransformContext, node: ts.Node): void {
             }
 
             ctx.calls.push({
-                className: `_RO${ctx.classCounter++}`,
+                className: uid('ReactiveObject'),
                 end: node.end,
                 properties,
                 start: node.pos,
@@ -178,7 +226,7 @@ function visit(ctx: TransformContext, node: ts.Node): void {
 }
 
 
-export default (sourceFile: ts.SourceFile, bindings: Bindings, ns: string, checker?: ts.TypeChecker): string => {
+export default (sourceFile: ts.SourceFile, bindings: Bindings, checker?: ts.TypeChecker): string => {
     let code = sourceFile.getFullText(),
         ctx: TransformContext = {
             bindings,
@@ -186,7 +234,6 @@ export default (sourceFile: ts.SourceFile, bindings: Bindings, ns: string, check
             checker,
             classCounter: 0,
             lastImportEnd: 0,
-            ns,
             sourceFile
         };
 
@@ -196,7 +243,7 @@ export default (sourceFile: ts.SourceFile, bindings: Bindings, ns: string, check
         return code;
     }
 
-    let classes = ctx.calls.map(c => buildClassCode(c.className, c.properties, ns)).join('\n'),
+    let classes = ctx.calls.map(c => buildClassCode(c.className, c.properties)).join('\n'),
         replacements: Replacement[] = [];
 
     replacements.push({
@@ -210,11 +257,15 @@ export default (sourceFile: ts.SourceFile, bindings: Bindings, ns: string, check
 
         replacements.push({
             end: call.end,
-            newText: ` new ${call.className}()`,
+            newText: ` new ${call.className}(${
+                call.properties
+                    .filter(({ isStatic, type }) => !isStatic || type === COMPILER_TYPES.Computed)
+                    .map(p => p.valueText)
+                    .join(', ')
+            })`,
             start: call.start
         });
     }
 
     return c.replace(code, replacements);
 };
-

package/src/compiler/plugins/tsc.ts

@@ -1,5 +1,5 @@
 import { plugin } from '@esportsplus/typescript/compiler';
-import { transform } from '..';
+import { analyze, transform } from '..';
 
 
-export default plugin.tsc(transform) as ReturnType<typeof plugin.tsc>;
+export default plugin.tsc({ analyze, transform }) as ReturnType<typeof plugin.tsc>;

package/src/compiler/plugins/vite.ts

@@ -1,9 +1,10 @@
 import { PACKAGE } from '../../constants';
 import { plugin } from '@esportsplus/typescript/compiler';
-import { transform } from '..';
+import { analyze, transform } from '..';
 
 
 export default plugin.vite({
+    analyze,
     name: PACKAGE,
     transform
 });

package/src/constants.ts

@@ -5,7 +5,7 @@ const COMPILER_ENTRYPOINT = 'reactive';
 
 const COMPILER_ENTRYPOINT_REGEX = /\breactive\b/;
 
-const COMPILER_NAMESPACE = uid(COMPILER_ENTRYPOINT);
+const COMPILER_NAMESPACE = uid('reactivity');
 
 const enum COMPILER_TYPES {
     Array,
@@ -14,7 +14,6 @@ const enum COMPILER_TYPES {
     Signal
 }
 
-
 const COMPUTED = Symbol('reactivity.computed');
 
 const PACKAGE = '@esportsplus/reactivity';
@@ -25,7 +24,6 @@ const REACTIVE_OBJECT = Symbol('reactivity.reactive.object');
 
 const SIGNAL = Symbol('reactivity.signal');
 
-
 const STABILIZER_IDLE = 0;
 
 const STABILIZER_RESCHEDULE = 1;
@@ -34,7 +32,6 @@ const STABILIZER_RUNNING = 2;
 
 const STABILIZER_SCHEDULED = 3;
 
-
 const STATE_NONE = 0;
 
 const STATE_CHECK = 1 << 0;

package/src/index.ts

@@ -1,4 +1,5 @@
-export { REACTIVE_OBJECT } from './constants';
-export { default as reactive, ReactiveArray } from './reactive';
+export { isPromise } from '@esportsplus/utilities';
+export { COMPUTED, REACTIVE_ARRAY, REACTIVE_OBJECT, SIGNAL } from './constants';
+export { default as reactive, ReactiveArray, ReactiveObject } from './reactive';
 export * from './system';
 export * from './types';

package/src/reactive/array.ts

@@ -1,7 +1,8 @@
 import { isArray } from '@esportsplus/utilities';
 import { read, signal, write } from '~/system';
-import { REACTIVE_ARRAY, REACTIVE_OBJECT } from '~/constants';
+import { REACTIVE_ARRAY } from '~/constants';
 import type { Signal } from '~/types';
+import { isReactiveObject } from './object';
 
 
 type Events<T> = {
@@ -45,7 +46,7 @@ type Listeners = Record<string, (Listener<any> | null)[]>;
 
 
 function dispose(value: unknown) {
-    if (value !== null && typeof value === 'object' && (value as any)[REACTIVE_OBJECT] === true) {
+    if (isReactiveObject(value)) {
         (value as { dispose(): void }).dispose();
     }
 }
@@ -83,6 +84,7 @@ class ReactiveArray<T> extends Array<T> {
         this.dispatch('set', { index: i, item: value });
     }
 
+
     clear() {
         this.dispose();
         write(this._length, 0);

package/src/reactive/index.ts

@@ -1,6 +1,9 @@
-import { ReactiveArray } from './array';
-import { COMPILER_ENTRYPOINT, PACKAGE } from '~/constants';
+import { onCleanup, root } from '@esportsplus/reactivity';
+import { isArray, isObject } from '@esportsplus/utilities';
 import { Reactive } from '~/types';
+import { ReactiveArray } from './array';
+import { ReactiveObject } from './object';
+import { PACKAGE } from '~/constants';
 
 
 type Guard<T> =
@@ -11,14 +14,38 @@ type Guard<T> =
         : never;
 
 
-function reactive<T extends Record<PropertyKey, any>>(_input: Guard<T>): Reactive<T>;
-function reactive<T>(_input: T): Reactive<T> {
-    throw new Error(
-        `${PACKAGE}: ${COMPILER_ENTRYPOINT}() called at runtime. ` +
-        'Ensure vite plugin is configured.'
-    );
+function reactive<T extends unknown[]>(input: T): Reactive<T>;
+function reactive<T extends Record<PropertyKey, unknown>>(input: Guard<T>): Reactive<T>;
+function reactive<T extends unknown[] | Record<PropertyKey, unknown>>(input: T): Reactive<T> {
+    let dispose = false,
+        value = root(() => {
+            let response: Reactive<T> | undefined;
+
+            if (isObject(input)) {
+                response = new ReactiveObject(input) as any as Reactive<T>;
+            }
+            else if (isArray(input)) {
+                response = new ReactiveArray(...input) as any as Reactive<T>;
+            }
+
+            if (response) {
+                if (root.disposables) {
+                    dispose = true;
+                }
+
+                return response;
+            }
+
+            throw new Error(`${PACKAGE}: 'reactive' received invalid input - ${JSON.stringify(input)}`);
+        });
+
+    if (dispose) {
+        onCleanup(() => value.dispose());
+    }
+
+    return value;
 }
 
 
 export default reactive;
-export { reactive, ReactiveArray };
+export { reactive, ReactiveArray, ReactiveObject };