@esportsplus/template 0.32.1 → 0.32.3

package/build/index.d.ts

@@ -1,10 +1,10 @@
 import './runtime.js';
-export { default as attributes } from './attributes.js';
-export { default as event } from './event/index.js';
 export { default as html } from './html.js';
 export { default as render } from './render.js';
-export { default as slot } from './slot/index.js';
 export { default as svg } from './svg.js';
+export { default as attributes } from './attributes.js';
+export { default as event } from './event/index.js';
+export { default as slot } from './slot/index.js';
 export { ArraySlot } from './slot/array.js';
 export { EffectSlot } from './slot/effect.js';
 export type { Attributes, Element, Renderable } from './types.js';

package/build/index.js

@@ -1,10 +1,10 @@
 import './runtime.js';
-export { default as attributes } from './attributes.js';
-export { default as event } from './event/index.js';
 export { default as html } from './html.js';
 export { default as render } from './render.js';
-export { default as slot } from './slot/index.js';
 export { default as svg } from './svg.js';
+export { default as attributes } from './attributes.js';
+export { default as event } from './event/index.js';
+export { default as slot } from './slot/index.js';
 export { ArraySlot } from './slot/array.js';
 export { EffectSlot } from './slot/effect.js';
 export * from './utilities.js';

package/build/transformer/codegen.d.ts

@@ -1,12 +1,12 @@
-import type { ReactiveCallInfo, TemplateInfo } from './ts-parser.js';
 import { ts } from '@esportsplus/typescript';
+import type { ReactiveCallInfo, TemplateInfo } from './ts-parser.js';
 type CodegenResult = {
     changed: boolean;
     code: string;
 };
-declare const addArraySlotImport: (code: string) => string;
+declare const addImport: (code: string) => string;
 declare const generateCode: (templates: TemplateInfo[], originalCode: string, sourceFile: ts.SourceFile, checker?: ts.TypeChecker) => CodegenResult;
 declare const generateReactiveInlining: (calls: ReactiveCallInfo[], code: string, sourceFile: ts.SourceFile) => string;
 declare const needsArraySlotImport: (sourceFile: ts.SourceFile) => boolean;
-export { addArraySlotImport, generateCode, generateReactiveInlining, needsArraySlotImport };
+export { addImport, generateCode, generateReactiveInlining, needsArraySlotImport };
 export type { CodegenResult };

package/build/transformer/codegen.js

@@ -1,6 +1,6 @@
-import { code as c, uid } from '@esportsplus/typescript/transformer';
-import { analyzeExpression, generateAttributeBinding, generateSpreadBindings } from './type-analyzer.js';
 import { ts } from '@esportsplus/typescript';
+import { ast, code as c, uid } from '@esportsplus/typescript/transformer';
+import { analyzeExpression, generateAttributeBinding, generateSpreadBindings } from './type-analyzer.js';
 import { COMPILER_ENTRYPOINT, COMPILER_NAMESPACE, COMPILER_TYPES, PACKAGE } from '../constants.js';
 import parser from './parser.js';
 const ARROW_EMPTY_PARAMS = /\(\s*\)\s*=>\s*$/;
@@ -89,18 +89,18 @@ function generateTemplateCode(ctx, { html, slots }, exprTexts, exprNodes, isArro
             ? root
             : (nodes.get(slots[i].path.join('.')) || root), slot = slots[i];
         if (slot.type === COMPILER_TYPES.AttributeSlot) {
-            for (let j = 0, m = slot.attributes.names.length; j < m; j++) {
-                let name = slot.attributes.names[j];
+            let names = slot.attributes.names;
+            for (let j = 0, m = names.length; j < m; j++) {
+                let name = names[j];
                 if (name === 'spread') {
-                    let bindings = generateSpreadBindings(exprNodes[index], exprTexts[index] || 'undefined', elementVar, ctx.sourceFile, ctx.checker, COMPILER_NAMESPACE);
+                    let bindings = generateSpreadBindings(exprNodes[index], exprTexts[index] || 'undefined', elementVar, ctx.checker, COMPILER_NAMESPACE);
                     for (let k = 0, o = bindings.length; k < o; k++) {
                         code.push(bindings[k]);
                     }
                     index++;
                 }
                 else {
-                    let binding = generateAttributeBinding(elementVar, name, exprTexts[index++] || 'undefined', slot.attributes.statics[name] || '', COMPILER_NAMESPACE);
-                    code.push(binding);
+                    code.push(generateAttributeBinding(elementVar, name, exprTexts[index++] || 'undefined', slot.attributes.statics[name] || '', COMPILER_NAMESPACE));
                 }
             }
         }
@@ -140,64 +140,35 @@ function hasArraySlotImport(sourceFile) {
     }
     return false;
 }
-function hasMatch(node, predicate) {
-    if (predicate(node)) {
-        return true;
-    }
-    let found = false;
-    ts.forEachChild(node, child => {
-        if (!found) {
-            found = hasMatch(child, predicate);
-        }
-    });
-    return found;
-}
-function hasArraySlotUsage(node) {
-    return hasMatch(node, n => ts.isNewExpression(n) &&
-        ts.isPropertyAccessExpression(n.expression) &&
-        n.expression.name.text === 'ArraySlot');
-}
-function hasNestedTemplates(node) {
-    return hasMatch(node, n => isNestedHtmlTemplate(n));
-}
 function isNestedHtmlTemplate(expr) {
     return ts.isTaggedTemplateExpression(expr) && ts.isIdentifier(expr.tag) && expr.tag.text === COMPILER_ENTRYPOINT;
 }
-function isNestedTemplate(template, exprRanges) {
-    for (let i = 0, n = exprRanges.length; i < n; i++) {
-        let range = exprRanges[i];
-        if (template.start >= range.start && template.end <= range.end) {
-            return true;
-        }
-    }
-    return false;
-}
 function rewriteExpression(ctx, expr) {
     if (isNestedHtmlTemplate(expr)) {
         return generateNestedTemplateCode(ctx, expr);
     }
-    if (!hasNestedTemplates(expr)) {
+    if (!ast.hasMatch(expr, n => isNestedHtmlTemplate(n))) {
         return ctx.printer.printNode(ts.EmitHint.Expression, expr, ctx.sourceFile);
     }
-    let exprStart = expr.getStart(), replacements = [];
-    collectNestedTemplateReplacements(ctx, expr, exprStart, replacements);
+    let replacements = [];
+    collectNestedTemplateReplacements(ctx, expr, expr.getStart(), replacements);
     return c.replaceReverse(expr.getText(ctx.sourceFile), replacements);
 }
-const addArraySlotImport = (code) => {
+const addImport = (code) => {
     return `import * as ${COMPILER_NAMESPACE} from '${PACKAGE}';\n` + code;
 };
 const generateCode = (templates, originalCode, sourceFile, checker) => {
     if (templates.length === 0) {
         return { changed: false, code: originalCode };
     }
-    let exprRanges = [];
+    let ranges = [];
     for (let i = 0, n = templates.length; i < n; i++) {
         let exprs = templates[i].expressions;
         for (let j = 0, m = exprs.length; j < m; j++) {
-            exprRanges.push({ end: exprs[j].end, start: exprs[j].getStart() });
+            ranges.push({ end: exprs[j].end, start: exprs[j].getStart() });
         }
     }
-    let rootTemplates = templates.filter(t => !isNestedTemplate(t, exprRanges));
+    let rootTemplates = templates.filter(t => !ast.inRange(ranges, t.start, t.end));
     if (rootTemplates.length === 0) {
         return { changed: false, code: originalCode };
     }
@@ -237,7 +208,7 @@ const generateCode = (templates, originalCode, sourceFile, checker) => {
         for (let [id, html] of ctx.hoistedFactories) {
             factories.push(`const ${id} = ${COMPILER_NAMESPACE}.template(\`${html}\`);`);
         }
-        code = `import * as ${COMPILER_NAMESPACE} from '${PACKAGE}';\n\n` + factories.join('\n') + '\n\n' + code;
+        code = addImport(factories.join('\n') + code);
     }
     return { changed, code };
 };
@@ -260,6 +231,8 @@ const generateReactiveInlining = (calls, code, sourceFile) => {
     return c.replaceReverse(code, replacements);
 };
 const needsArraySlotImport = (sourceFile) => {
-    return hasArraySlotUsage(sourceFile) && !hasArraySlotImport(sourceFile);
+    return ast.hasMatch(sourceFile, n => ts.isNewExpression(n) &&
+        ts.isPropertyAccessExpression(n.expression) &&
+        n.expression.name.text === 'ArraySlot') && !hasArraySlotImport(sourceFile);
 };
-export { addArraySlotImport, generateCode, generateReactiveInlining, needsArraySlotImport };
+export { addImport, generateCode, generateReactiveInlining, needsArraySlotImport };

package/build/transformer/index.d.ts

@@ -4,8 +4,5 @@ type TransformResult = {
     code: string;
     sourceFile: ts.SourceFile;
 };
-declare const PATTERNS: string[];
-declare function createTransformer(program: ts.Program): ts.TransformerFactory<ts.SourceFile>;
 declare const transform: (sourceFile: ts.SourceFile, program: ts.Program) => TransformResult;
-declare const transformCode: (code: string, sourceFile: ts.SourceFile, checker?: ts.TypeChecker) => TransformResult;
-export { createTransformer, transform, transformCode, PATTERNS };
+export { transform };

package/build/transformer/index.js

@@ -1,47 +1,30 @@
 import { code as c } from '@esportsplus/typescript/transformer';
-import { addArraySlotImport, generateCode, generateReactiveInlining, needsArraySlotImport } from './codegen.js';
+import { addImport, generateCode, generateReactiveInlining, needsArraySlotImport } from './codegen.js';
 import { COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY } from '../constants.js';
 import { findHtmlTemplates, findReactiveCalls } from './ts-parser.js';
 import { ts } from '@esportsplus/typescript';
 const PATTERNS = [`${COMPILER_ENTRYPOINT}\``, `${COMPILER_ENTRYPOINT}.${COMPILER_ENTRYPOINT_REACTIVITY}`];
-function createTransformer(program) {
-    let typeChecker = program.getTypeChecker();
-    return (_context) => {
-        return (sourceFile) => {
-            let code = sourceFile.getFullText();
-            if (!c.contains(code, { patterns: PATTERNS })) {
-                return sourceFile;
-            }
-            let result = transformCode(code, sourceFile, typeChecker);
-            if (!result.changed) {
-                return sourceFile;
-            }
-            return result.sourceFile;
-        };
-    };
-}
+const REGEX_BACKSLASH = /\\/g;
+const REGEX_FORWARD_SLASH = /\//g;
 const transform = (sourceFile, program) => {
     let code = sourceFile.getFullText();
     if (!c.contains(code, { patterns: PATTERNS })) {
         return { changed: false, code, sourceFile };
     }
     let checker, fileName = sourceFile.fileName, programSourceFile = program.getSourceFile(fileName)
-        || program.getSourceFile(fileName.replace(/\\/g, '/'))
-        || program.getSourceFile(fileName.replace(/\//g, '\\'));
+        || program.getSourceFile(fileName.replace(REGEX_BACKSLASH, '/'))
+        || program.getSourceFile(fileName.replace(REGEX_FORWARD_SLASH, '\\'));
     if (programSourceFile) {
         checker = program.getTypeChecker();
         sourceFile = programSourceFile;
     }
-    return transformCode(code, sourceFile, checker);
-};
-const transformCode = (code, sourceFile, checker) => {
-    let changed = false, codegenChanged = false, needsImport = false, result = code, reactiveCalls = findReactiveCalls(sourceFile);
+    let changed = false, codegenChanged = false, needsImport = false, reactiveCalls = findReactiveCalls(sourceFile), result = code;
     if (reactiveCalls.length > 0) {
-        result = generateReactiveInlining(reactiveCalls, result, sourceFile);
         changed = true;
+        checker = undefined;
+        result = generateReactiveInlining(reactiveCalls, result, sourceFile);
         sourceFile = ts.createSourceFile(sourceFile.fileName, result, sourceFile.languageVersion, true);
         needsImport = needsArraySlotImport(sourceFile);
-        checker = undefined;
     }
     let templates = findHtmlTemplates(sourceFile);
     if (templates.length > 0) {
@@ -53,11 +36,11 @@ const transformCode = (code, sourceFile, checker) => {
         }
     }
     if (needsImport && !codegenChanged) {
-        result = addArraySlotImport(result);
+        result = addImport(result);
     }
     if (changed) {
         sourceFile = ts.createSourceFile(sourceFile.fileName, result, sourceFile.languageVersion, true);
     }
     return { changed, code: result, sourceFile };
 };
-export { createTransformer, transform, transformCode, PATTERNS };
+export { transform };

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

@@ -1,3 +1,3 @@
-import { ts } from '@esportsplus/typescript';
-declare const _default: (program: ts.Program) => ts.TransformerFactory<ts.SourceFile>;
+import { plugin } from '@esportsplus/typescript/transformer';
+declare const _default: ReturnType<typeof plugin.tsc>;
 export default _default;

package/build/transformer/plugins/tsc.js

@@ -1,10 +1,3 @@
-import { transformCode } from '../../transformer/index.js';
-export default (program) => {
-    let typeChecker = program.getTypeChecker();
-    return () => {
-        return (sourceFile) => {
-            let result = transformCode(sourceFile.getFullText(), sourceFile, typeChecker);
-            return result.changed ? result.sourceFile : sourceFile;
-        };
-    };
-};
+import { plugin } from '@esportsplus/typescript/transformer';
+import { transform } from '../index.js';
+export default plugin.tsc(transform);

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

@@ -1,5 +1,13 @@
-import type { Plugin } from 'vite';
-declare const _default: (options?: {
+declare const _default: ({ root }?: {
     root?: string;
-}) => Plugin;
+}) => {
+    configResolved(config: import("vite").ResolvedConfig): void;
+    enforce: string;
+    name: string;
+    transform(code: string, id: string): {
+        code: string;
+        map: null;
+    } | null;
+    watchChange(id: string): void;
+};
 export default _default;

package/build/transformer/plugins/vite.js

@@ -1,35 +1,7 @@
-import { ts } from '@esportsplus/typescript';
-import { program, TRANSFORM_PATTERN } from '@esportsplus/typescript/transformer';
+import { plugin } from '@esportsplus/typescript/transformer';
 import { PACKAGE } from '../../constants.js';
-import { transform } from '../../transformer/index.js';
-export default (options) => {
-    let root;
-    return {
-        configResolved(config) {
-            root = options?.root ?? config.root;
-        },
-        enforce: 'pre',
-        name: `${PACKAGE}/plugin-vite`,
-        transform(code, id) {
-            if (!TRANSFORM_PATTERN.test(id) || id.includes('node_modules')) {
-                return null;
-            }
-            try {
-                let result = transform(ts.createSourceFile(id, code, ts.ScriptTarget.Latest, true), program.get(root));
-                if (!result.changed) {
-                    return null;
-                }
-                return { code: result.code, map: null };
-            }
-            catch (error) {
-                console.error(`${PACKAGE}: Error transforming ${id}:`, error);
-                return null;
-            }
-        },
-        watchChange(id) {
-            if (TRANSFORM_PATTERN.test(id)) {
-                program.delete(root);
-            }
-        }
-    };
-};
+import { transform } from '../index.js';
+export default plugin.vite({
+    name: PACKAGE,
+    transform
+});

package/build/transformer/ts-parser.js

@@ -1,11 +1,5 @@
 import { COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY } from '../constants.js';
 import { ts } from '@esportsplus/typescript';
-function isFunctionNode(node) {
-    return (ts.isArrowFunction(node) ||
-        ts.isFunctionDeclaration(node) ||
-        ts.isFunctionExpression(node) ||
-        ts.isMethodDeclaration(node));
-}
 function visitReactiveCalls(node, calls) {
     if (ts.isCallExpression(node) &&
         ts.isPropertyAccessExpression(node.expression) &&
@@ -24,7 +18,9 @@ function visitReactiveCalls(node, calls) {
     ts.forEachChild(node, child => visitReactiveCalls(child, calls));
 }
 function visitTemplates(node, depth, templates) {
-    let nextDepth = isFunctionNode(node) ? depth + 1 : depth;
+    let nextDepth = (ts.isArrowFunction(node) || ts.isFunctionDeclaration(node) || ts.isFunctionExpression(node) || ts.isMethodDeclaration(node))
+        ? depth + 1
+        : depth;
     if (ts.isTaggedTemplateExpression(node) && ts.isIdentifier(node.tag) && node.tag.text === COMPILER_ENTRYPOINT) {
         let expressions = [], literals = [], template = node.template;
         if (ts.isNoSubstitutionTemplateLiteral(template)) {

package/build/transformer/type-analyzer.d.ts

@@ -2,5 +2,5 @@ import { COMPILER_TYPES } from '../constants.js';
 import { ts } from '@esportsplus/typescript';
 declare const analyzeExpression: (expr: ts.Expression, checker?: ts.TypeChecker) => COMPILER_TYPES;
 declare const generateAttributeBinding: (elementVar: string, name: string, expr: string, staticValue: string, ns: string) => string;
-declare const generateSpreadBindings: (expr: ts.Expression, exprCode: string, elementVar: string, sourceFile: ts.SourceFile, checker: ts.TypeChecker | undefined, ns: string) => string[];
+declare const generateSpreadBindings: (expr: ts.Expression, exprCode: string, elementVar: string, checker: ts.TypeChecker | undefined, ns: string) => string[];
 export { analyzeExpression, generateAttributeBinding, generateSpreadBindings };

package/build/transformer/type-analyzer.js

@@ -24,28 +24,23 @@ function analyzeSpread(expr, checker) {
     }
     if (checker && (ts.isIdentifier(expr) || ts.isPropertyAccessExpression(expr))) {
         try {
-            let keys = extractTypePropertyKeys(checker.getTypeAtLocation(expr));
+            let keys = [], props = checker.getTypeAtLocation(expr).getProperties();
+            for (let i = 0, n = props.length; i < n; i++) {
+                let name = props[i].getName();
+                if (name.startsWith('__') || name.startsWith('[')) {
+                    continue;
+                }
+                keys.push(name);
+            }
             if (keys.length > 0) {
                 return { canUnpack: true, keys };
             }
         }
-        catch {
-        }
+        catch { }
     }
     return { canUnpack: false, keys: [] };
 }
-function extractTypePropertyKeys(type) {
-    let keys = [], props = type.getProperties();
-    for (let i = 0, n = props.length; i < n; i++) {
-        let name = props[i].getName();
-        if (name.startsWith('__') || name.startsWith('[')) {
-            continue;
-        }
-        keys.push(name);
-    }
-    return keys;
-}
-function inferCOMPILER_TYPES(expr, ctx) {
+function inferCOMPILER_TYPES(expr, checker) {
     while (ts.isParenthesizedExpression(expr)) {
         expr = expr.expression;
     }
@@ -78,7 +73,7 @@ function inferCOMPILER_TYPES(expr, ctx) {
         return COMPILER_TYPES.Primitive;
     }
     if (ts.isConditionalExpression(expr)) {
-        let whenFalse = inferCOMPILER_TYPES(expr.whenFalse, ctx), whenTrue = inferCOMPILER_TYPES(expr.whenTrue, ctx);
+        let whenFalse = inferCOMPILER_TYPES(expr.whenFalse, checker), whenTrue = inferCOMPILER_TYPES(expr.whenTrue, checker);
         if (whenTrue === whenFalse) {
             return whenTrue;
         }
@@ -87,46 +82,17 @@ function inferCOMPILER_TYPES(expr, ctx) {
         }
         return COMPILER_TYPES.Unknown;
     }
-    if (ctx?.checker) {
-        let checker = ctx.checker;
-        if (ts.isIdentifier(expr)) {
-            try {
-                let type = checker.getTypeAtLocation(expr);
-                if (isTypeFunction(type, checker)) {
-                    return COMPILER_TYPES.Effect;
-                }
-                if (isTypeArray(type, checker)) {
-                    return COMPILER_TYPES.ArraySlot;
-                }
-            }
-            catch {
-            }
-        }
-        if (ts.isPropertyAccessExpression(expr)) {
-            try {
-                let type = checker.getTypeAtLocation(expr);
-                if (isTypeFunction(type, checker)) {
-                    return COMPILER_TYPES.Effect;
-                }
-                if (isTypeArray(type, checker)) {
-                    return COMPILER_TYPES.ArraySlot;
-                }
+    if (checker && (ts.isIdentifier(expr) || ts.isPropertyAccessExpression(expr) || ts.isCallExpression(expr))) {
+        try {
+            let type = checker.getTypeAtLocation(expr);
+            if (isTypeFunction(type, checker)) {
+                return COMPILER_TYPES.Effect;
             }
-            catch {
+            if (isTypeArray(type, checker)) {
+                return COMPILER_TYPES.ArraySlot;
             }
         }
-        if (ts.isCallExpression(expr)) {
-            try {
-                let type = checker.getTypeAtLocation(expr);
-                if (isTypeFunction(type, checker)) {
-                    return COMPILER_TYPES.Effect;
-                }
-                if (isTypeArray(type, checker)) {
-                    return COMPILER_TYPES.ArraySlot;
-                }
-            }
-            catch {
-            }
+        catch {
         }
     }
     return COMPILER_TYPES.Unknown;
@@ -135,8 +101,7 @@ function isTypeArray(type, checker) {
     if (checker.isArrayType(type)) {
         return true;
     }
-    let symbol = type.getSymbol();
-    return symbol?.getName() === 'ReactiveArray';
+    return type.getSymbol()?.getName() === 'ReactiveArray';
 }
 function isTypeFunction(type, checker) {
     if (type.getCallSignatures().length > 0) {
@@ -152,7 +117,7 @@ function isTypeFunction(type, checker) {
     return false;
 }
 const analyzeExpression = (expr, checker) => {
-    return inferCOMPILER_TYPES(expr, checker ? { checker } : undefined);
+    return inferCOMPILER_TYPES(expr, checker);
 };
 const generateAttributeBinding = (elementVar, name, expr, staticValue, ns) => {
     if (name.startsWith('on') && name.length > 2) {
@@ -176,7 +141,7 @@ const generateAttributeBinding = (elementVar, name, expr, staticValue, ns) => {
     }
     return `${ns}.attributes.setProperty(${elementVar}, '${name}', ${expr});`;
 };
-const generateSpreadBindings = (expr, exprCode, elementVar, sourceFile, checker, ns) => {
+const generateSpreadBindings = (expr, exprCode, elementVar, checker, ns) => {
     while (ts.isParenthesizedExpression(expr)) {
         expr = expr.expression;
     }
@@ -191,11 +156,11 @@ const generateSpreadBindings = (expr, exprCode, elementVar, sourceFile, checker,
             for (let j = 0, m = expr.properties.length; j < m; j++) {
                 let prop = expr.properties[j];
                 if (ts.isPropertyAssignment(prop)) {
-                    let name = ts.isIdentifier(prop.name)
+                    let text = ts.isIdentifier(prop.name)
                         ? prop.name.text
                         : ts.isStringLiteral(prop.name) ? prop.name.text : null;
-                    if (name === key) {
-                        value = prop.initializer.getText(sourceFile);
+                    if (text === key) {
+                        value = prop.initializer.getText();
                         break;
                     }
                 }

package/package.json

@@ -2,12 +2,12 @@
   "author": "ICJR",
   "dependencies": {
     "@esportsplus/queue": "^0.2.0",
-    "@esportsplus/reactivity": "^0.25.7",
+    "@esportsplus/reactivity": "^0.25.14",
     "@esportsplus/utilities": "^0.27.2",
     "serve": "^14.2.5"
   },
   "devDependencies": {
-    "@esportsplus/typescript": "^0.17.5",
+    "@esportsplus/typescript": "^0.20.0",
     "@types/node": "^25.0.3",
     "vite": "^7.3.0",
     "vite-tsconfig-paths": "^6.0.3"
@@ -40,7 +40,7 @@
   },
   "type": "module",
   "types": "./build/index.d.ts",
-  "version": "0.32.1",
+  "version": "0.32.3",
   "scripts": {
     "build": "tsc",
     "build:test": "vite build --config test/vite.config.ts",

package/src/index.ts

@@ -1,10 +1,12 @@
 import './runtime';
-export { default as attributes } from './attributes';
-export { default as event } from './event';
 export { default as html } from './html';
 export { default as render } from './render';
-export { default as slot } from './slot';
 export { default as svg } from './svg';
+
+// Must be exported for compilation even if not used directly
+export { default as attributes } from './attributes';
+export { default as event } from './event';
+export { default as slot } from './slot';
 export { ArraySlot } from './slot/array';
 export { EffectSlot } from './slot/effect';
 export type { Attributes, Element, Renderable } from './types';

package/src/transformer/codegen.ts

@@ -1,14 +1,11 @@
-import { code as c, uid } from '@esportsplus/typescript/transformer';
-import type { Replacement } from '@esportsplus/typescript/transformer';
+import { ts } from '@esportsplus/typescript';
+import { ast, code as c, uid, type Replacement } from '@esportsplus/typescript/transformer';
 import type { ReactiveCallInfo, TemplateInfo } from './ts-parser';
 import { analyzeExpression, generateAttributeBinding, generateSpreadBindings } from './type-analyzer';
-import { ts } from '@esportsplus/typescript';
 import {
-    COMPILER_ENTRYPOINT,
-    COMPILER_NAMESPACE,
-    COMPILER_TYPES,
+    COMPILER_ENTRYPOINT, COMPILER_NAMESPACE, COMPILER_TYPES,
     PACKAGE
-} from '../constants';
+} from '~/constants';
 import parser from './parser';
 
 
@@ -47,6 +44,7 @@ type ParseResult = {
 
 const ARROW_EMPTY_PARAMS = /\(\s*\)\s*=>\s*$/;
 
+
 let printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed });
 
 
@@ -192,15 +190,16 @@ function generateTemplateCode(
             slot = slots[i];
 
         if (slot.type === COMPILER_TYPES.AttributeSlot) {
-            for (let j = 0, m = slot.attributes.names.length; j < m; j++) {
-                let name = slot.attributes.names[j];
+            let names = slot.attributes.names;
+
+            for (let j = 0, m = names.length; j < m; j++) {
+                let name = names[j];
 
                 if (name === 'spread') {
                     let bindings = generateSpreadBindings(
                             exprNodes[index],
                             exprTexts[index] || 'undefined',
                             elementVar,
-                            ctx.sourceFile,
                             ctx.checker,
                             COMPILER_NAMESPACE
                         );
@@ -212,20 +211,22 @@ function generateTemplateCode(
                     index++;
                 }
                 else {
-                    let binding = generateAttributeBinding(
+                    code.push(
+                        generateAttributeBinding(
                             elementVar,
                             name,
                             exprTexts[index++] || 'undefined',
                             slot.attributes.statics[name] || '',
                             COMPILER_NAMESPACE
-                        );
-
-                    code.push(binding);
+                        )
+                    );
                 }
             }
         }
         else {
-            code.push(generateNodeBinding(ctx, elementVar, exprTexts[index] || 'undefined', exprNodes[index]));
+            code.push(
+                generateNodeBinding(ctx, elementVar, exprTexts[index] || 'undefined', exprNodes[index])
+            );
             index++;
         }
     }
@@ -272,69 +273,28 @@ function hasArraySlotImport(sourceFile: ts.SourceFile): boolean {
     return false;
 }
 
-function hasMatch(node: ts.Node, predicate: (n: ts.Node) => boolean): boolean {
-    if (predicate(node)) {
-        return true;
-    }
-
-    let found = false;
-
-    ts.forEachChild(node, child => {
-        if (!found) {
-            found = hasMatch(child, predicate);
-        }
-    });
-
-    return found;
-}
-
-function hasArraySlotUsage(node: ts.Node): boolean {
-    return hasMatch(node, n =>
-        ts.isNewExpression(n) &&
-        ts.isPropertyAccessExpression(n.expression) &&
-        n.expression.name.text === 'ArraySlot'
-    );
-}
-
-function hasNestedTemplates(node: ts.Node): boolean {
-    return hasMatch(node, n => isNestedHtmlTemplate(n as ts.Expression));
-}
-
 function isNestedHtmlTemplate(expr: ts.Expression): expr is ts.TaggedTemplateExpression {
     return ts.isTaggedTemplateExpression(expr) && ts.isIdentifier(expr.tag) && expr.tag.text === COMPILER_ENTRYPOINT;
 }
 
-function isNestedTemplate(template: TemplateInfo, exprRanges: { end: number; start: number }[]): boolean {
-    for (let i = 0, n = exprRanges.length; i < n; i++) {
-        let range = exprRanges[i];
-
-        if (template.start >= range.start && template.end <= range.end) {
-            return true;
-        }
-    }
-
-    return false;
-}
-
 function rewriteExpression(ctx: CodegenContext, expr: ts.Expression): string {
     if (isNestedHtmlTemplate(expr)) {
         return generateNestedTemplateCode(ctx, expr);
     }
 
-    if (!hasNestedTemplates(expr)) {
+    if (!ast.hasMatch(expr, n => isNestedHtmlTemplate(n as ts.Expression))) {
         return ctx.printer.printNode(ts.EmitHint.Expression, expr, ctx.sourceFile);
     }
 
-    let exprStart = expr.getStart(),
-        replacements: Replacement[] = [];
+    let replacements: Replacement[] = [];
 
-    collectNestedTemplateReplacements(ctx, expr, exprStart, replacements);
+    collectNestedTemplateReplacements(ctx, expr, expr.getStart(), replacements);
 
     return c.replaceReverse(expr.getText(ctx.sourceFile), replacements);
 }
 
 
-const addArraySlotImport = (code: string): string => {
+const addImport = (code: string): string => {
     return `import * as ${COMPILER_NAMESPACE} from '${PACKAGE}';\n` + code;
 };
 
@@ -344,17 +304,17 @@ const generateCode = (templates: TemplateInfo[], originalCode: string, sourceFil
     }
 
     // Precompute expression ranges for nested template detection
-    let exprRanges: { end: number; start: number }[] = [];
+    let ranges: { end: number; start: number }[] = [];
 
     for (let i = 0, n = templates.length; i < n; i++) {
         let exprs = templates[i].expressions;
 
         for (let j = 0, m = exprs.length; j < m; j++) {
-            exprRanges.push({ end: exprs[j].end, start: exprs[j].getStart() });
+            ranges.push({ end: exprs[j].end, start: exprs[j].getStart() });
         }
     }
 
-    let rootTemplates = templates.filter(t => !isNestedTemplate(t, exprRanges));
+    let rootTemplates = templates.filter(t => !ast.inRange(ranges, t.start, t.end));
 
     if (rootTemplates.length === 0) {
         return { changed: false, code: originalCode };
@@ -418,7 +378,7 @@ const generateCode = (templates: TemplateInfo[], originalCode: string, sourceFil
             factories.push(`const ${id} = ${COMPILER_NAMESPACE}.template(\`${html}\`);`);
         }
 
-        code = `import * as ${COMPILER_NAMESPACE} from '${PACKAGE}';\n\n` + factories.join('\n') + '\n\n' + code;
+        code = addImport(factories.join('\n') + code);
     }
 
     return { changed, code };
@@ -448,9 +408,13 @@ const generateReactiveInlining = (calls: ReactiveCallInfo[], code: string, sourc
 };
 
 const needsArraySlotImport = (sourceFile: ts.SourceFile): boolean => {
-    return hasArraySlotUsage(sourceFile) && !hasArraySlotImport(sourceFile);
+    return ast.hasMatch(sourceFile, n =>
+        ts.isNewExpression(n) &&
+        ts.isPropertyAccessExpression(n.expression) &&
+        n.expression.name.text === 'ArraySlot'
+    ) && !hasArraySlotImport(sourceFile);
 };
 
 
-export { addArraySlotImport, generateCode, generateReactiveInlining, needsArraySlotImport };
+export { addImport, generateCode, generateReactiveInlining, needsArraySlotImport };
 export type { CodegenResult };

package/src/transformer/index.ts

@@ -1,5 +1,5 @@
 import { code as c } from '@esportsplus/typescript/transformer';
-import { addArraySlotImport, generateCode, generateReactiveInlining, needsArraySlotImport } from './codegen';
+import { addImport, generateCode, generateReactiveInlining, needsArraySlotImport } from './codegen';
 import { COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY } from '../constants';
 import { findHtmlTemplates, findReactiveCalls } from './ts-parser';
 import { ts } from '@esportsplus/typescript';
@@ -14,28 +14,9 @@ type TransformResult = {
 
 const PATTERNS = [`${COMPILER_ENTRYPOINT}\``, `${COMPILER_ENTRYPOINT}.${COMPILER_ENTRYPOINT_REACTIVITY}`];
 
+const REGEX_BACKSLASH = /\\/g;
 
-function createTransformer(program: ts.Program): ts.TransformerFactory<ts.SourceFile> {
-    let typeChecker = program.getTypeChecker();
-
-    return (_context: ts.TransformationContext) => {
-        return (sourceFile: ts.SourceFile): ts.SourceFile => {
-            let code = sourceFile.getFullText();
-
-            if (!c.contains(code, { patterns: PATTERNS })) {
-                return sourceFile;
-            }
-
-            let result = transformCode(code, sourceFile, typeChecker);
-
-            if (!result.changed) {
-                return sourceFile;
-            }
-
-            return result.sourceFile;
-        };
-    };
-}
+const REGEX_FORWARD_SLASH = /\//g;
 
 
 const transform = (sourceFile: ts.SourceFile, program: ts.Program): TransformResult => {
@@ -48,30 +29,26 @@ const transform = (sourceFile: ts.SourceFile, program: ts.Program): TransformRes
     let checker: ts.TypeChecker | undefined,
         fileName = sourceFile.fileName,
         programSourceFile = program.getSourceFile(fileName)
-            || program.getSourceFile(fileName.replace(/\\/g, '/'))
-            || program.getSourceFile(fileName.replace(/\//g, '\\'));
+            || program.getSourceFile(fileName.replace(REGEX_BACKSLASH, '/'))
+            || program.getSourceFile(fileName.replace(REGEX_FORWARD_SLASH, '\\'));
 
     if (programSourceFile) {
         checker = program.getTypeChecker();
         sourceFile = programSourceFile;
     }
 
-    return transformCode(code, sourceFile, checker);
-};
-
-const transformCode = (code: string, sourceFile: ts.SourceFile, checker?: ts.TypeChecker): TransformResult => {
     let changed = false,
         codegenChanged = false,
         needsImport = false,
-        result = code,
-        reactiveCalls = findReactiveCalls(sourceFile);
+        reactiveCalls = findReactiveCalls(sourceFile),
+        result = code;
 
     if (reactiveCalls.length > 0) {
-        result = generateReactiveInlining(reactiveCalls, result, sourceFile);
         changed = true;
+        checker = undefined;
+        result = generateReactiveInlining(reactiveCalls, result, sourceFile);
         sourceFile = ts.createSourceFile(sourceFile.fileName, result, sourceFile.languageVersion, true);
         needsImport = needsArraySlotImport(sourceFile);
-        checker = undefined;
     }
 
     let templates = findHtmlTemplates(sourceFile);
@@ -87,7 +64,7 @@ const transformCode = (code: string, sourceFile: ts.SourceFile, checker?: ts.Typ
     }
 
     if (needsImport && !codegenChanged) {
-        result = addArraySlotImport(result);
+        result = addImport(result);
     }
 
     if (changed) {
@@ -98,4 +75,4 @@ const transformCode = (code: string, sourceFile: ts.SourceFile, checker?: ts.Typ
 };
 
 
-export { createTransformer, transform, transformCode, PATTERNS };
+export { transform };

package/src/transformer/plugins/tsc.ts

@@ -1,15 +1,5 @@
-import { ts } from '@esportsplus/typescript';
-import { transformCode } from '~/transformer';
+import { plugin } from '@esportsplus/typescript/transformer';
+import { transform } from '..';
 
 
-export default (program: ts.Program): ts.TransformerFactory<ts.SourceFile> => {
-    let typeChecker = program.getTypeChecker();
-
-    return () => {
-        return (sourceFile: ts.SourceFile): ts.SourceFile => {
-            let result = transformCode(sourceFile.getFullText(), sourceFile, typeChecker);
-
-            return result.changed ? result.sourceFile : sourceFile;
-        };
-    };
-};
+export default plugin.tsc(transform) as ReturnType<typeof plugin.tsc>;

package/src/transformer/plugins/vite.ts

@@ -1,45 +1,9 @@
-import type { Plugin, ResolvedConfig } from 'vite';
-import { ts } from '@esportsplus/typescript';
-import { program, TRANSFORM_PATTERN } from '@esportsplus/typescript/transformer';
-import { PACKAGE } from '~/constants';
-import { transform } from '~/transformer';
+import { plugin } from '@esportsplus/typescript/transformer';
+import { PACKAGE } from '../../constants';
+import { transform } from '..';
 
 
-export default (options?: { root?: string }): Plugin => {
-    let root: string;
-
-    return {
-        configResolved(config: ResolvedConfig) {
-            root = options?.root ?? config.root;
-        },
-        enforce: 'pre',
-        name: `${PACKAGE}/plugin-vite`,
-        transform(code: string, id: string) {
-            if (!TRANSFORM_PATTERN.test(id) || id.includes('node_modules')) {
-                return null;
-            }
-
-            try {
-                let result = transform(
-                        ts.createSourceFile(id, code, ts.ScriptTarget.Latest, true),
-                        program.get(root)
-                    );
-
-                if (!result.changed) {
-                    return null;
-                }
-
-                return { code: result.code, map: null };
-            }
-            catch (error) {
-                console.error(`${PACKAGE}: Error transforming ${id}:`, error);
-                return null;
-            }
-        },
-        watchChange(id: string) {
-            if (TRANSFORM_PATTERN.test(id)) {
-                program.delete(root);
-            }
-        }
-    };
-};
+export default plugin.vite({
+    name: PACKAGE,
+    transform
+});

package/src/transformer/ts-parser.ts

@@ -20,15 +20,6 @@ type TemplateInfo = {
 };
 
 
-function isFunctionNode(node: ts.Node): boolean {
-    return (
-        ts.isArrowFunction(node) ||
-        ts.isFunctionDeclaration(node) ||
-        ts.isFunctionExpression(node) ||
-        ts.isMethodDeclaration(node)
-    );
-}
-
 function visitReactiveCalls(node: ts.Node, calls: ReactiveCallInfo[]): void {
     if (
         ts.isCallExpression(node) &&
@@ -51,7 +42,9 @@ function visitReactiveCalls(node: ts.Node, calls: ReactiveCallInfo[]): void {
 }
 
 function visitTemplates(node: ts.Node, depth: number, templates: TemplateInfo[]): void {
-    let nextDepth = isFunctionNode(node) ? depth + 1 : depth;
+    let nextDepth = (ts.isArrowFunction(node) || ts.isFunctionDeclaration(node) || ts.isFunctionExpression(node) || ts.isMethodDeclaration(node))
+            ? depth + 1
+            : depth;
 
     if (ts.isTaggedTemplateExpression(node) && ts.isIdentifier(node.tag) && node.tag.text === COMPILER_ENTRYPOINT) {
         let expressions: ts.Expression[] = [],

package/src/transformer/type-analyzer.ts

@@ -8,10 +8,6 @@ import {
 import { ts } from '@esportsplus/typescript';
 
 
-type AnalyzerContext = {
-    checker?: ts.TypeChecker;
-};
-
 type SpreadAnalysis = {
     canUnpack: boolean;
     keys: string[];
@@ -47,37 +43,30 @@ function analyzeSpread(expr: ts.Expression, checker?: ts.TypeChecker): SpreadAna
 
     if (checker && (ts.isIdentifier(expr) || ts.isPropertyAccessExpression(expr))) {
         try {
-            let keys = extractTypePropertyKeys(checker.getTypeAtLocation(expr));
+            let keys: string[] = [],
+                props = checker.getTypeAtLocation(expr).getProperties();
+
+            for (let i = 0, n = props.length; i < n; i++) {
+                let name = props[i].getName();
+
+                if (name.startsWith('__') || name.startsWith('[')) {
+                    continue;
+                }
+
+                keys.push(name);
+            }
 
             if (keys.length > 0) {
                 return { canUnpack: true, keys };
             }
         }
-        catch {
-        }
+        catch { }
     }
 
     return { canUnpack: false, keys: [] };
 }
 
-function extractTypePropertyKeys(type: ts.Type): string[] {
-    let keys: string[] = [],
-        props = type.getProperties();
-
-    for (let i = 0, n = props.length; i < n; i++) {
-        let name = props[i].getName();
-
-        if (name.startsWith('__') || name.startsWith('[')) {
-            continue;
-        }
-
-        keys.push(name);
-    }
-
-    return keys;
-}
-
-function inferCOMPILER_TYPES(expr: ts.Expression, ctx?: AnalyzerContext): COMPILER_TYPES {
+function inferCOMPILER_TYPES(expr: ts.Expression, checker?: ts.TypeChecker): COMPILER_TYPES {
     while (ts.isParenthesizedExpression(expr)) {
         expr = expr.expression;
     }
@@ -121,8 +110,8 @@ function inferCOMPILER_TYPES(expr: ts.Expression, ctx?: AnalyzerContext): COMPIL
     }
 
     if (ts.isConditionalExpression(expr)) {
-        let whenFalse = inferCOMPILER_TYPES(expr.whenFalse, ctx),
-            whenTrue = inferCOMPILER_TYPES(expr.whenTrue, ctx);
+        let whenFalse = inferCOMPILER_TYPES(expr.whenFalse, checker),
+            whenTrue = inferCOMPILER_TYPES(expr.whenTrue, checker);
 
         if (whenTrue === whenFalse) {
             return whenTrue;
@@ -135,55 +124,19 @@ function inferCOMPILER_TYPES(expr: ts.Expression, ctx?: AnalyzerContext): COMPIL
         return COMPILER_TYPES.Unknown;
     }
 
-    if (ctx?.checker) {
-        let checker = ctx.checker;
-
-        if (ts.isIdentifier(expr)) {
-            try {
-                let type = checker.getTypeAtLocation(expr);
-
-                if (isTypeFunction(type, checker)) {
-                    return COMPILER_TYPES.Effect;
-                }
+    if (checker && (ts.isIdentifier(expr) || ts.isPropertyAccessExpression(expr) || ts.isCallExpression(expr))) {
+        try {
+            let type = checker.getTypeAtLocation(expr);
 
-                if (isTypeArray(type, checker)) {
-                    return COMPILER_TYPES.ArraySlot;
-                }
+            if (isTypeFunction(type, checker)) {
+                return COMPILER_TYPES.Effect;
             }
-            catch {
-            }
-        }
 
-        if (ts.isPropertyAccessExpression(expr)) {
-            try {
-                let type = checker.getTypeAtLocation(expr);
-
-                if (isTypeFunction(type, checker)) {
-                    return COMPILER_TYPES.Effect;
-                }
-
-                if (isTypeArray(type, checker)) {
-                    return COMPILER_TYPES.ArraySlot;
-                }
-            }
-            catch {
+            if (isTypeArray(type, checker)) {
+                return COMPILER_TYPES.ArraySlot;
             }
         }
-
-        if (ts.isCallExpression(expr)) {
-            try {
-                let type = checker.getTypeAtLocation(expr);
-
-                if (isTypeFunction(type, checker)) {
-                    return COMPILER_TYPES.Effect;
-                }
-
-                if (isTypeArray(type, checker)) {
-                    return COMPILER_TYPES.ArraySlot;
-                }
-            }
-            catch {
-            }
+        catch {
         }
     }
 
@@ -195,9 +148,7 @@ function isTypeArray(type: ts.Type, checker: ts.TypeChecker): boolean {
         return true;
     }
 
-    let symbol = type.getSymbol();
-
-    return symbol?.getName() === 'ReactiveArray';
+    return type.getSymbol()?.getName() === 'ReactiveArray';
 }
 
 function isTypeFunction(type: ts.Type, checker: ts.TypeChecker): boolean {
@@ -218,7 +169,7 @@ function isTypeFunction(type: ts.Type, checker: ts.TypeChecker): boolean {
 
 
 const analyzeExpression = (expr: ts.Expression, checker?: ts.TypeChecker): COMPILER_TYPES => {
-    return inferCOMPILER_TYPES(expr, checker ? { checker } : undefined);
+    return inferCOMPILER_TYPES(expr, checker);
 };
 
 const generateAttributeBinding = (elementVar: string, name: string, expr: string, staticValue: string, ns: string): string => {
@@ -256,7 +207,6 @@ const generateSpreadBindings = (
     expr: ts.Expression,
     exprCode: string,
     elementVar: string,
-    sourceFile: ts.SourceFile,
     checker: ts.TypeChecker | undefined,
     ns: string
 ): string[] => {
@@ -281,12 +231,12 @@ const generateSpreadBindings = (
                 let prop = expr.properties[j];
 
                 if (ts.isPropertyAssignment(prop)) {
-                    let name = ts.isIdentifier(prop.name)
-                        ? prop.name.text
-                        : ts.isStringLiteral(prop.name) ? prop.name.text : null;
+                    let text = ts.isIdentifier(prop.name)
+                            ? prop.name.text
+                            : ts.isStringLiteral(prop.name) ? prop.name.text : null;
 
-                    if (name === key) {
-                        value = prop.initializer.getText(sourceFile);
+                    if (text === key) {
+                        value = prop.initializer.getText();
                         break;
                     }
                 }