@esportsplus/template 0.35.1 → 0.37.0

package/build/compiler/analyzer.d.ts

@@ -0,0 +1,4 @@
+import { COMPILER_TYPES } from '../constants.js';
+import { ts } from '@esportsplus/typescript';
+declare const analyze: (expr: ts.Expression, checker?: ts.TypeChecker) => COMPILER_TYPES;
+export { analyze };

package/build/compiler/{type-analyzer.js → analyzer.js}

@@ -1,6 +1,17 @@
-import { COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY, COMPILER_TYPES, DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS } from '../constants.js';
+import { COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY, COMPILER_TYPES } from '../constants.js';
 import { ts } from '@esportsplus/typescript';
-function inferCOMPILER_TYPES(expr, checker) {
+function isTypeFunction(type, checker) {
+    if (type.isUnion()) {
+        for (let i = 0, n = type.types.length; i < n; i++) {
+            if (!isTypeFunction(type.types[i], checker)) {
+                return false;
+            }
+        }
+        return type.types.length > 0;
+    }
+    return type.getCallSignatures().length > 0;
+}
+const analyze = (expr, checker) => {
     while (ts.isParenthesizedExpression(expr)) {
         expr = expr.expression;
     }
@@ -30,7 +41,7 @@ function inferCOMPILER_TYPES(expr, checker) {
         return COMPILER_TYPES.Primitive;
     }
     if (ts.isConditionalExpression(expr)) {
-        let whenFalse = inferCOMPILER_TYPES(expr.whenFalse, checker), whenTrue = inferCOMPILER_TYPES(expr.whenTrue, checker);
+        let whenFalse = analyze(expr.whenFalse, checker), whenTrue = analyze(expr.whenTrue, checker);
         if (whenTrue === whenFalse) {
             return whenTrue;
         }
@@ -50,48 +61,5 @@ function inferCOMPILER_TYPES(expr, checker) {
         }
     }
     return COMPILER_TYPES.Unknown;
-}
-function isTypeFunction(type, checker) {
-    if (type.isUnion()) {
-        let allFunctions = true, hasFunction = false;
-        for (let i = 0, n = type.types.length; i < n; i++) {
-            if (isTypeFunction(type.types[i], checker)) {
-                hasFunction = true;
-            }
-            else {
-                allFunctions = false;
-            }
-        }
-        return hasFunction && allFunctions;
-    }
-    return type.getCallSignatures().length > 0;
-}
-const analyzeExpression = (expr, checker) => {
-    return inferCOMPILER_TYPES(expr, checker);
-};
-const generateAttributeBinding = (elementVar, name, expr, staticValue, addImport) => {
-    if (name.startsWith('on') && name.length > 2) {
-        let event = name.slice(2).toLowerCase(), key = name.toLowerCase();
-        if (LIFECYCLE_EVENTS.has(key)) {
-            return `${addImport(key)}(${elementVar}, ${expr});`;
-        }
-        if (DIRECT_ATTACH_EVENTS.has(key)) {
-            return `${addImport('on')}(${elementVar}, '${event}', ${expr});`;
-        }
-        return `${addImport('delegate')}(${elementVar}, '${event}', ${expr});`;
-    }
-    if (name === 'class') {
-        return `${addImport('setClass')}(${elementVar}, '${staticValue}', ${expr});`;
-    }
-    if (name === COMPILER_TYPES.Attributes) {
-        return `${addImport('setProperties')}(${elementVar}, ${expr});`;
-    }
-    if (name === 'style') {
-        return `${addImport('setStyle')}(${elementVar}, '${staticValue}', ${expr});`;
-    }
-    return `${addImport('setProperty')}(${elementVar}, '${name}', ${expr});`;
-};
-const generateSpreadBindings = (exprCode, elementVar, addImport) => {
-    return [`${addImport('setProperties')}(${elementVar}, ${exprCode});`];
 };
-export { analyzeExpression, generateAttributeBinding, generateSpreadBindings };
+export { analyze };

package/build/compiler/codegen.js

@@ -1,7 +1,7 @@
 import { ts } from '@esportsplus/typescript';
 import { ast, code as c, imports, uid } from '@esportsplus/typescript/compiler';
-import { COMPILER_ENTRYPOINT, COMPILER_TYPES, PACKAGE } from '../constants.js';
-import { analyzeExpression, generateAttributeBinding, generateSpreadBindings } from './type-analyzer.js';
+import { COMPILER_ENTRYPOINT, COMPILER_TYPES, DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS, PACKAGE } from '../constants.js';
+import { analyze } from './analyzer.js';
 import parser from './parser.js';
 const ARROW_EMPTY_PARAMS = /\(\s*\)\s*=>\s*$/;
 let printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed });
@@ -13,6 +13,25 @@ function addImport(ctx, name) {
     }
     return alias;
 }
+function generateAttributeBinding(ctx, element, name, expr, staticValue) {
+    if (name.startsWith('on') && name.length > 2) {
+        let event = name.slice(2).toLowerCase(), key = name.toLowerCase();
+        if (LIFECYCLE_EVENTS.has(key)) {
+            return `${addImport(ctx, key)}(${element}, ${expr});`;
+        }
+        if (DIRECT_ATTACH_EVENTS.has(key)) {
+            return `${addImport(ctx, 'on')}(${element}, '${event}', ${expr});`;
+        }
+        return `${addImport(ctx, 'delegate')}(${element}, '${event}', ${expr});`;
+    }
+    if (name === 'class') {
+        return `${addImport(ctx, 'setClass')}(${element}, '${staticValue}', ${expr});`;
+    }
+    if (name === 'style') {
+        return `${addImport(ctx, 'setStyle')}(${element}, '${staticValue}', ${expr});`;
+    }
+    return `${addImport(ctx, 'setProperty')}(${element}, '${name}', ${expr});`;
+}
 function collectNestedTemplateReplacements(ctx, node, exprStart, replacements) {
     if (isNestedHtmlTemplate(node)) {
         replacements.push({
@@ -48,7 +67,7 @@ function generateNodeBinding(ctx, anchor, exprText, exprNode) {
     if (isNestedHtmlTemplate(exprNode)) {
         return `${anchor}.parentNode.insertBefore(${generateNestedTemplateCode(ctx, exprNode)}, ${anchor});`;
     }
-    let slotType = analyzeExpression(exprNode, ctx.checker);
+    let slotType = analyze(exprNode, ctx.checker);
     switch (slotType) {
         case COMPILER_TYPES.Effect:
             return `new ${addImport(ctx, 'EffectSlot')}(${anchor}, ${exprText});`;
@@ -104,14 +123,11 @@ function generateTemplateCode(ctx, { html, slots }, exprTexts, exprNodes, isArro
             for (let j = 0, m = names.length; j < m; j++) {
                 let name = names[j];
                 if (name === COMPILER_TYPES.Attributes) {
-                    let bindings = generateSpreadBindings(exprTexts[index] || 'undefined', element, n => addImport(ctx, n));
-                    for (let k = 0, o = bindings.length; k < o; k++) {
-                        code.push(bindings[k]);
-                    }
+                    code.push(`${addImport(ctx, 'setProperties')}(${element}, ${exprTexts[index] || 'undefined'});`);
                     index++;
                 }
                 else {
-                    code.push(generateAttributeBinding(element, name, exprTexts[index++] || 'undefined', slot.attributes.statics[name] || '', n => addImport(ctx, n)));
+                    code.push(generateAttributeBinding(ctx, element, name, exprTexts[index++] || 'undefined', slot.attributes.statics[name] || ''));
                 }
             }
         }
@@ -163,10 +179,10 @@ const generateCode = (templates, originalCode, sourceFile, checker, existingAlia
     }
     let ctx = {
         checker,
-        templates: new Map(),
         imports: existingAliases ?? new Map(),
         printer,
-        sourceFile
+        sourceFile,
+        templates: new Map(),
     }, replacements = [], templateAlias = addImport(ctx, 'template');
     for (let i = 0, n = rootTemplates.length; i < n; i++) {
         let exprTexts = [], template = rootTemplates[i];
@@ -193,14 +209,14 @@ const generateCode = (templates, originalCode, sourceFile, checker, existingAlia
     }
     let changed = replacements.length > 0, code = c.replaceReverse(originalCode, replacements);
     if (changed && ctx.templates.size > 0) {
-        let aliasedImports = [], factories = [];
+        let aliasedImports = [], factories = [], updatedSourceFile = ts.createSourceFile(sourceFile.fileName, code, sourceFile.languageVersion, true);
         for (let [name, alias] of ctx.imports) {
             aliasedImports.push(`${name} as ${alias}`);
         }
         for (let [html, id] of ctx.templates) {
             factories.push(`const ${id} = ${templateAlias}(\`${html}\`);`);
         }
-        code = imports.modify(code, sourceFile, PACKAGE, {
+        code = imports.modify(code, updatedSourceFile, PACKAGE, {
             add: new Set(aliasedImports),
             remove: [COMPILER_ENTRYPOINT]
         });

package/build/compiler/index.d.ts

@@ -1,8 +1,10 @@
+import type { PluginContext } from '@esportsplus/typescript/compiler';
 import { ts } from '@esportsplus/typescript';
 type TransformResult = {
     changed: boolean;
     code: string;
     sourceFile: ts.SourceFile;
 };
-declare const transform: (sourceFile: ts.SourceFile, program: ts.Program) => TransformResult;
-export { transform };
+declare const analyze: (sourceFile: ts.SourceFile, program: ts.Program, context: PluginContext) => void;
+declare const transform: (sourceFile: ts.SourceFile, program: ts.Program, context?: PluginContext) => TransformResult;
+export { analyze, transform };

package/build/compiler/index.js

@@ -3,32 +3,64 @@ import { code as c, imports, uid } from '@esportsplus/typescript/compiler';
 import { COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY, PACKAGE } from '../constants.js';
 import { generateCode, generateReactiveInlining } from './codegen.js';
 import { findHtmlTemplates, findReactiveCalls } from './ts-parser.js';
+const CONTEXT_KEY = 'template:analyzed';
 const PATTERNS = [`${COMPILER_ENTRYPOINT}\``, `${COMPILER_ENTRYPOINT}.${COMPILER_ENTRYPOINT_REACTIVITY}`];
 const REGEX_BACKSLASH = /\\/g;
 const REGEX_FORWARD_SLASH = /\//g;
-const transform = (sourceFile, program) => {
+function getAnalyzedFile(context, filename) {
+    return context?.get(CONTEXT_KEY)?.get(filename);
+}
+const analyze = (sourceFile, program, context) => {
     let code = sourceFile.getFullText();
     if (!c.contains(code, { patterns: PATTERNS })) {
-        return { changed: false, code, sourceFile };
+        return;
     }
-    let checker, fileName = sourceFile.fileName, programSourceFile = program.getSourceFile(fileName)
-        || program.getSourceFile(fileName.replace(REGEX_BACKSLASH, '/'))
-        || program.getSourceFile(fileName.replace(REGEX_FORWARD_SLASH, '\\'));
+    let checker = program.getTypeChecker(), filename = sourceFile.fileName, files = context.get(CONTEXT_KEY), programSourceFile = program.getSourceFile(filename)
+        || program.getSourceFile(filename.replace(REGEX_BACKSLASH, '/'))
+        || program.getSourceFile(filename.replace(REGEX_FORWARD_SLASH, '\\'));
     if (programSourceFile) {
-        checker = program.getTypeChecker();
         sourceFile = programSourceFile;
     }
-    let changed = false, codegenChanged = false, existingAliases = new Map(), reactiveCalls = findReactiveCalls(sourceFile, checker), result = code;
-    if (reactiveCalls.length > 0) {
-        let arraySlotAlias = uid('ArraySlot');
+    if (!files) {
+        files = new Map();
+        context.set(CONTEXT_KEY, files);
+    }
+    files.set(filename, {
+        reactiveCalls: findReactiveCalls(sourceFile, checker),
+        templates: findHtmlTemplates(sourceFile, checker)
+    });
+};
+const transform = (sourceFile, program, context) => {
+    let code = sourceFile.getFullText(), filename = sourceFile.fileName;
+    let analyzed = getAnalyzedFile(context, filename);
+    if (!analyzed) {
+        if (!c.contains(code, { patterns: PATTERNS })) {
+            return { changed: false, code, sourceFile };
+        }
+        let checker = program.getTypeChecker(), programSourceFile = program.getSourceFile(filename)
+            || program.getSourceFile(filename.replace(REGEX_BACKSLASH, '/'))
+            || program.getSourceFile(filename.replace(REGEX_FORWARD_SLASH, '\\'));
+        if (programSourceFile) {
+            sourceFile = programSourceFile;
+        }
+        analyzed = {
+            reactiveCalls: findReactiveCalls(sourceFile, checker),
+            templates: findHtmlTemplates(sourceFile, checker)
+        };
+    }
+    let changed = false, codegenChanged = false, existingAliases = new Map(), result = code;
+    if (analyzed.reactiveCalls.length > 0) {
         changed = true;
-        existingAliases.set('ArraySlot', arraySlotAlias);
-        result = generateReactiveInlining(reactiveCalls, result, sourceFile, arraySlotAlias);
+        existingAliases.set('ArraySlot', uid('ArraySlot'));
+        result = generateReactiveInlining(analyzed.reactiveCalls, result, sourceFile, existingAliases.get('ArraySlot'));
         sourceFile = ts.createSourceFile(sourceFile.fileName, result, sourceFile.languageVersion, true);
+        analyzed = {
+            reactiveCalls: [],
+            templates: findHtmlTemplates(sourceFile, program.getTypeChecker())
+        };
     }
-    let templates = findHtmlTemplates(sourceFile, checker);
-    if (templates.length > 0) {
-        let codegenResult = generateCode(templates, result, sourceFile, checker, existingAliases);
+    if (analyzed.templates.length > 0) {
+        let codegenResult = generateCode(analyzed.templates, result, sourceFile, program.getTypeChecker(), existingAliases);
         if (codegenResult.changed) {
             changed = true;
             codegenChanged = true;
@@ -47,4 +79,4 @@ const transform = (sourceFile, program) => {
     }
     return { changed, code: result, sourceFile };
 };
-export { transform };
+export { analyze, transform };

package/build/compiler/plugins/tsc.js

@@ -1,3 +1,3 @@
 import { plugin } from '@esportsplus/typescript/compiler';
-import { transform } from '../index.js';
-export default plugin.tsc(transform);
+import { analyze, transform } from '../index.js';
+export default plugin.tsc({ analyze, transform });

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

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

package/build/compiler/plugins/vite.js

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

package/build/compiler/ts-parser.js

@@ -19,8 +19,8 @@ function isHtmlFromPackage(node, checker) {
         return true;
     }
     for (let i = 0, n = declarations.length; i < n; i++) {
-        let fileName = declarations[i].getSourceFile().fileName;
-        if (fileName.includes(PACKAGE) || fileName.includes('@esportsplus/template')) {
+        let filename = declarations[i].getSourceFile().fileName;
+        if (filename.includes(PACKAGE) || filename.includes('@esportsplus/template')) {
             return true;
         }
     }

package/package.json

@@ -2,14 +2,14 @@
   "author": "ICJR",
   "dependencies": {
     "@esportsplus/queue": "^0.2.0",
-    "@esportsplus/reactivity": "^0.27.0",
+    "@esportsplus/reactivity": "^0.27.3",
+    "@esportsplus/typescript": "^0.24.2",
     "@esportsplus/utilities": "^0.27.2",
     "serve": "^14.2.5"
   },
   "devDependencies": {
-    "@esportsplus/typescript": "^0.22.0",
     "@types/node": "^25.0.3",
-    "vite": "^7.3.0",
+    "vite": "^7.3.1",
     "vite-tsconfig-paths": "^6.0.3"
   },
   "exports": {
@@ -35,7 +35,7 @@
   },
   "type": "module",
   "types": "./build/index.d.ts",
-  "version": "0.35.1",
+  "version": "0.37.0",
   "scripts": {
     "build": "tsc",
     "build:test": "vite build --config test/vite.config.ts",

package/src/compiler/analyzer.ts

@@ -0,0 +1,92 @@
+import { COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY, COMPILER_TYPES } from '~/constants';
+import { ts } from '@esportsplus/typescript';
+
+
+// Union types that mix functions with non-functions (e.g., Renderable)
+// should fall through to runtime slot dispatch
+function isTypeFunction(type: ts.Type, checker: ts.TypeChecker): boolean {
+    if (type.isUnion()) {
+        for (let i = 0, n = type.types.length; i < n; i++) {
+            if (!isTypeFunction(type.types[i], checker)) {
+                return false;
+            }
+        }
+
+        return type.types.length > 0;
+    }
+
+    return type.getCallSignatures().length > 0;
+}
+
+
+const analyze = (expr: ts.Expression, checker?: ts.TypeChecker): COMPILER_TYPES => {
+    while (ts.isParenthesizedExpression(expr)) {
+        expr = expr.expression;
+    }
+
+    if (ts.isArrowFunction(expr) || ts.isFunctionExpression(expr)) {
+        return COMPILER_TYPES.Effect;
+    }
+
+    // Only html.reactive() calls become ArraySlot - handled by generateReactiveInlining
+    if (
+        ts.isCallExpression(expr) &&
+        ts.isPropertyAccessExpression(expr.expression) &&
+        ts.isIdentifier(expr.expression.expression) &&
+        expr.expression.expression.text === COMPILER_ENTRYPOINT &&
+        expr.expression.name.text === COMPILER_ENTRYPOINT_REACTIVITY
+    ) {
+        return COMPILER_TYPES.ArraySlot;
+    }
+
+    if (ts.isTaggedTemplateExpression(expr) && ts.isIdentifier(expr.tag) && expr.tag.text === COMPILER_ENTRYPOINT) {
+        return COMPILER_TYPES.DocumentFragment;
+    }
+
+    if (
+        ts.isNumericLiteral(expr) ||
+        ts.isStringLiteral(expr) ||
+        ts.isNoSubstitutionTemplateLiteral(expr) ||
+        expr.kind === ts.SyntaxKind.TrueKeyword ||
+        expr.kind === ts.SyntaxKind.FalseKeyword ||
+        expr.kind === ts.SyntaxKind.NullKeyword ||
+        expr.kind === ts.SyntaxKind.UndefinedKeyword
+    ) {
+        return COMPILER_TYPES.Static;
+    }
+
+    if (ts.isTemplateExpression(expr)) {
+        return COMPILER_TYPES.Primitive;
+    }
+
+    if (ts.isConditionalExpression(expr)) {
+        let whenFalse = analyze(expr.whenFalse, checker),
+            whenTrue = analyze(expr.whenTrue, checker);
+
+        if (whenTrue === whenFalse) {
+            return whenTrue;
+        }
+
+        if (whenTrue === COMPILER_TYPES.Effect || whenFalse === COMPILER_TYPES.Effect) {
+            return COMPILER_TYPES.Effect;
+        }
+
+        return COMPILER_TYPES.Unknown;
+    }
+
+    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 {
+        }
+    }
+
+    return COMPILER_TYPES.Unknown;
+};
+
+export { analyze };

package/src/compiler/codegen.ts

@@ -1,8 +1,8 @@
 import { ts } from '@esportsplus/typescript';
 import { ast, code as c, imports, uid, type Replacement } from '@esportsplus/typescript/compiler';
-import { COMPILER_ENTRYPOINT, COMPILER_TYPES, PACKAGE } from '~/constants';
+import { COMPILER_ENTRYPOINT, COMPILER_TYPES, DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS, PACKAGE } from '~/constants';
 import type { ReactiveCallInfo, TemplateInfo } from './ts-parser';
-import { analyzeExpression, generateAttributeBinding, generateSpreadBindings } from './type-analyzer';
+import { analyze } from './analyzer';
 import parser from './parser';
 
 
@@ -56,6 +56,33 @@ function addImport(ctx: CodegenContext, name: string): string {
     return alias;
 }
 
+function generateAttributeBinding(ctx: CodegenContext, element: string, name: string, expr: string, staticValue: string): string {
+    if (name.startsWith('on') && name.length > 2) {
+        let event = name.slice(2).toLowerCase(),
+            key = name.toLowerCase();
+
+        if (LIFECYCLE_EVENTS.has(key)) {
+            return `${addImport(ctx, key)}(${element}, ${expr});`;
+        }
+
+        if (DIRECT_ATTACH_EVENTS.has(key)) {
+            return `${addImport(ctx, 'on')}(${element}, '${event}', ${expr});`;
+        }
+
+        return `${addImport(ctx, 'delegate')}(${element}, '${event}', ${expr});`;
+    }
+
+    if (name === 'class') {
+        return `${addImport(ctx, 'setClass')}(${element}, '${staticValue}', ${expr});`;
+    }
+
+    if (name === 'style') {
+        return `${addImport(ctx, 'setStyle')}(${element}, '${staticValue}', ${expr});`;
+    }
+
+    return `${addImport(ctx, 'setProperty')}(${element}, '${name}', ${expr});`;
+}
+
 function collectNestedTemplateReplacements(
     ctx: CodegenContext,
     node: ts.Node,
@@ -113,7 +140,7 @@ function generateNodeBinding(ctx: CodegenContext, anchor: string, exprText: stri
         return `${anchor}.parentNode.insertBefore(${generateNestedTemplateCode(ctx, exprNode)}, ${anchor});`;
     }
 
-    let slotType = analyzeExpression(exprNode, ctx.checker);
+    let slotType = analyze(exprNode, ctx.checker);
 
     switch (slotType) {
         case COMPILER_TYPES.Effect:
@@ -211,26 +238,19 @@ function generateTemplateCode(
                 let name = names[j];
 
                 if (name === COMPILER_TYPES.Attributes) {
-                    let bindings = generateSpreadBindings(
-                            exprTexts[index] || 'undefined',
-                            element,
-                            n => addImport(ctx, n)
-                        );
-
-                    for (let k = 0, o = bindings.length; k < o; k++) {
-                        code.push(bindings[k]);
-                    }
-
+                    code.push(
+                        `${addImport(ctx, 'setProperties')}(${element}, ${exprTexts[index] || 'undefined'});`
+                    );
                     index++;
                 }
                 else {
                     code.push(
                         generateAttributeBinding(
+                            ctx,
                             element,
                             name,
                             exprTexts[index++] || 'undefined',
-                            slot.attributes.statics[name] || '',
-                            n => addImport(ctx, n)
+                            slot.attributes.statics[name] || ''
                         )
                     );
                 }
@@ -306,10 +326,10 @@ const generateCode = (templates: TemplateInfo[], originalCode: string, sourceFil
 
     let ctx: CodegenContext = {
             checker,
-            templates: new Map(),
             imports: existingAliases ?? new Map(),
             printer,
-            sourceFile
+            sourceFile,
+            templates: new Map(),
         },
         replacements: Replacement[] = [],
         templateAlias = addImport(ctx, 'template');
@@ -358,7 +378,8 @@ const generateCode = (templates: TemplateInfo[], originalCode: string, sourceFil
 
     if (changed && ctx.templates.size > 0) {
         let aliasedImports: string[] = [],
-            factories: string[] = [];
+            factories: string[] = [],
+            updatedSourceFile = ts.createSourceFile(sourceFile.fileName, code, sourceFile.languageVersion, true);
 
         for (let [name, alias] of ctx.imports) {
             aliasedImports.push(`${name} as ${alias}`);
@@ -369,7 +390,7 @@ const generateCode = (templates: TemplateInfo[], originalCode: string, sourceFil
         }
 
         // Remove html entrypoint and add aliased imports
-        code = imports.modify(code, sourceFile, PACKAGE, {
+        code = imports.modify(code, updatedSourceFile, PACKAGE, {
             add: new Set(aliasedImports),
             remove: [COMPILER_ENTRYPOINT]
         });

package/src/compiler/index.ts

@@ -1,10 +1,16 @@
+import type { PluginContext } from '@esportsplus/typescript/compiler';
 import { ts } from '@esportsplus/typescript';
 import { code as c, imports, uid } from '@esportsplus/typescript/compiler';
 import { COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY, PACKAGE } from '~/constants';
 import { generateCode, generateReactiveInlining } from './codegen';
-import { findHtmlTemplates, findReactiveCalls } from './ts-parser';
+import { findHtmlTemplates, findReactiveCalls, type ReactiveCallInfo, type TemplateInfo } from './ts-parser';
 
 
+type AnalyzedFile = {
+    reactiveCalls: ReactiveCallInfo[];
+    templates: TemplateInfo[];
+};
+
 type TransformResult = {
     changed: boolean;
     code: string;
@@ -12,6 +18,8 @@ type TransformResult = {
 };
 
 
+const CONTEXT_KEY = 'template:analyzed';
+
 const PATTERNS = [`${COMPILER_ENTRYPOINT}\``, `${COMPILER_ENTRYPOINT}.${COMPILER_ENTRYPOINT_REACTIVITY}`];
 
 const REGEX_BACKSLASH = /\\/g;
@@ -19,43 +27,88 @@ const REGEX_BACKSLASH = /\\/g;
 const REGEX_FORWARD_SLASH = /\//g;
 
 
-const transform = (sourceFile: ts.SourceFile, program: ts.Program): TransformResult => {
+function getAnalyzedFile(context: PluginContext | undefined, filename: string): AnalyzedFile | undefined {
+    return (context?.get(CONTEXT_KEY) as Map<string, AnalyzedFile> | undefined)?.get(filename);
+}
+
+
+const analyze = (sourceFile: ts.SourceFile, program: ts.Program, context: PluginContext): void => {
     let code = sourceFile.getFullText();
 
     if (!c.contains(code, { patterns: PATTERNS })) {
-        return { changed: false, code, sourceFile };
+        return;
     }
 
-    let checker: ts.TypeChecker | undefined,
-        fileName = sourceFile.fileName,
-        programSourceFile = program.getSourceFile(fileName)
-            || program.getSourceFile(fileName.replace(REGEX_BACKSLASH, '/'))
-            || program.getSourceFile(fileName.replace(REGEX_FORWARD_SLASH, '\\'));
+    let checker = program.getTypeChecker(),
+        filename = sourceFile.fileName,
+        files = context.get(CONTEXT_KEY) as Map<string, AnalyzedFile> | undefined,
+        programSourceFile = program.getSourceFile(filename)
+            || program.getSourceFile(filename.replace(REGEX_BACKSLASH, '/'))
+            || program.getSourceFile(filename.replace(REGEX_FORWARD_SLASH, '\\'));
 
     if (programSourceFile) {
-        checker = program.getTypeChecker();
         sourceFile = programSourceFile;
     }
 
+    if (!files) {
+        files = new Map();
+        context.set(CONTEXT_KEY, files);
+    }
+
+    files.set(filename, {
+        reactiveCalls: findReactiveCalls(sourceFile, checker),
+        templates: findHtmlTemplates(sourceFile, checker)
+    });
+};
+
+const transform = (sourceFile: ts.SourceFile, program: ts.Program, context?: PluginContext): TransformResult => {
+    let code = sourceFile.getFullText(),
+        filename = sourceFile.fileName;
+
+    // Try to get pre-analyzed data from context
+    let analyzed = getAnalyzedFile(context, filename);
+
+    // Fall back to inline analysis (for Vite or when context unavailable)
+    if (!analyzed) {
+        if (!c.contains(code, { patterns: PATTERNS })) {
+            return { changed: false, code, sourceFile };
+        }
+
+        let checker = program.getTypeChecker(),
+            programSourceFile = program.getSourceFile(filename)
+                || program.getSourceFile(filename.replace(REGEX_BACKSLASH, '/'))
+                || program.getSourceFile(filename.replace(REGEX_FORWARD_SLASH, '\\'));
+
+        if (programSourceFile) {
+            sourceFile = programSourceFile;
+        }
+
+        analyzed = {
+            reactiveCalls: findReactiveCalls(sourceFile, checker),
+            templates: findHtmlTemplates(sourceFile, checker)
+        };
+    }
+
     let changed = false,
         codegenChanged = false,
         existingAliases = new Map<string, string>(),
-        reactiveCalls = findReactiveCalls(sourceFile, checker),
         result = code;
 
-    if (reactiveCalls.length > 0) {
-        let arraySlotAlias = uid('ArraySlot');
-
+    if (analyzed.reactiveCalls.length > 0) {
         changed = true;
-        existingAliases.set('ArraySlot', arraySlotAlias);
-        result = generateReactiveInlining(reactiveCalls, result, sourceFile, arraySlotAlias);
+        existingAliases.set('ArraySlot', uid('ArraySlot'));
+        result = generateReactiveInlining(analyzed.reactiveCalls, result, sourceFile, existingAliases.get('ArraySlot')!);
         sourceFile = ts.createSourceFile(sourceFile.fileName, result, sourceFile.languageVersion, true);
-    }
 
-    let templates = findHtmlTemplates(sourceFile, checker);
+        // Re-analyze templates after reactive inlining modifies the code
+        analyzed = {
+            reactiveCalls: [],
+            templates: findHtmlTemplates(sourceFile, program.getTypeChecker())
+        };
+    }
 
-    if (templates.length > 0) {
-        let codegenResult = generateCode(templates, result, sourceFile, checker, existingAliases);
+    if (analyzed.templates.length > 0) {
+        let codegenResult = generateCode(analyzed.templates, result, sourceFile, program.getTypeChecker(), existingAliases);
 
         if (codegenResult.changed) {
             changed = true;
@@ -83,4 +136,4 @@ const transform = (sourceFile: ts.SourceFile, program: ts.Program): TransformRes
 };
 
 
-export { transform };
+export { analyze, transform };

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 { plugin } from '@esportsplus/typescript/compiler';
 import { PACKAGE } from '../../constants';
-import { transform } from '..';
+import { analyze, transform } from '..';
 
 
 export default plugin.vite({
+    analyze,
     name: PACKAGE,
     transform
 });

package/src/compiler/ts-parser.ts

@@ -50,10 +50,10 @@ function isHtmlFromPackage(node: ts.Identifier, checker: ts.TypeChecker | undefi
 
     // Check if any declaration is from our package
     for (let i = 0, n = declarations.length; i < n; i++) {
-        let fileName = declarations[i].getSourceFile().fileName;
+        let filename = declarations[i].getSourceFile().fileName;
 
         // Check for package in node_modules path or direct package reference
-        if (fileName.includes(PACKAGE) || fileName.includes('@esportsplus/template')) {
+        if (filename.includes(PACKAGE) || filename.includes('@esportsplus/template')) {
             return true;
         }
     }

package/test/vite.config.ts

@@ -19,7 +19,7 @@ export default defineConfig({
                 'templates': resolve(__dirname, 'templates.ts')
             },
             formats: ['es'],
-            fileName: (_, entryName) => `${entryName}.js`
+            filename: (_, entryName) => `${entryName}.js`
         },
         outDir: resolve(__dirname, 'build'),
         emptyOutDir: true,

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

@@ -1,6 +0,0 @@
-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, addImport: (name: string) => string) => string;
-declare const generateSpreadBindings: (exprCode: string, elementVar: string, addImport: (name: string) => string) => string[];
-export { analyzeExpression, generateAttributeBinding, generateSpreadBindings };

package/src/compiler/type-analyzer.ts

@@ -1,148 +0,0 @@
-import {
-    COMPILER_ENTRYPOINT,
-    COMPILER_ENTRYPOINT_REACTIVITY,
-    COMPILER_TYPES,
-    DIRECT_ATTACH_EVENTS,
-    LIFECYCLE_EVENTS
-} from '~/constants';
-import { ts } from '@esportsplus/typescript';
-
-
-function inferCOMPILER_TYPES(expr: ts.Expression, checker?: ts.TypeChecker): COMPILER_TYPES {
-    while (ts.isParenthesizedExpression(expr)) {
-        expr = expr.expression;
-    }
-
-    if (ts.isArrowFunction(expr) || ts.isFunctionExpression(expr)) {
-        return COMPILER_TYPES.Effect;
-    }
-
-    // Only html.reactive() calls become ArraySlot - handled by generateReactiveInlining
-    if (
-        ts.isCallExpression(expr) &&
-        ts.isPropertyAccessExpression(expr.expression) &&
-        ts.isIdentifier(expr.expression.expression) &&
-        expr.expression.expression.text === COMPILER_ENTRYPOINT &&
-        expr.expression.name.text === COMPILER_ENTRYPOINT_REACTIVITY
-    ) {
-        return COMPILER_TYPES.ArraySlot;
-    }
-
-    if (ts.isTaggedTemplateExpression(expr) && ts.isIdentifier(expr.tag) && expr.tag.text === COMPILER_ENTRYPOINT) {
-        return COMPILER_TYPES.DocumentFragment;
-    }
-
-    if (
-        ts.isNumericLiteral(expr) ||
-        ts.isStringLiteral(expr) ||
-        ts.isNoSubstitutionTemplateLiteral(expr) ||
-        expr.kind === ts.SyntaxKind.TrueKeyword ||
-        expr.kind === ts.SyntaxKind.FalseKeyword ||
-        expr.kind === ts.SyntaxKind.NullKeyword ||
-        expr.kind === ts.SyntaxKind.UndefinedKeyword
-    ) {
-        return COMPILER_TYPES.Static;
-    }
-
-    if (ts.isTemplateExpression(expr)) {
-        return COMPILER_TYPES.Primitive;
-    }
-
-    if (ts.isConditionalExpression(expr)) {
-        let whenFalse = inferCOMPILER_TYPES(expr.whenFalse, checker),
-            whenTrue = inferCOMPILER_TYPES(expr.whenTrue, checker);
-
-        if (whenTrue === whenFalse) {
-            return whenTrue;
-        }
-
-        if (whenTrue === COMPILER_TYPES.Effect || whenFalse === COMPILER_TYPES.Effect) {
-            return COMPILER_TYPES.Effect;
-        }
-
-        return COMPILER_TYPES.Unknown;
-    }
-
-    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 {
-        }
-    }
-
-    return COMPILER_TYPES.Unknown;
-}
-
-function isTypeFunction(type: ts.Type, checker: ts.TypeChecker): boolean {
-    // Union types that mix functions with non-functions (e.g., Renderable)
-    // should fall through to runtime slot dispatch
-    if (type.isUnion()) {
-        let allFunctions = true,
-            hasFunction = false;
-
-        for (let i = 0, n = type.types.length; i < n; i++) {
-            if (isTypeFunction(type.types[i], checker)) {
-                hasFunction = true;
-            }
-            else {
-                allFunctions = false;
-            }
-        }
-
-        return hasFunction && allFunctions;
-    }
-
-    return type.getCallSignatures().length > 0;
-}
-
-
-const analyzeExpression = (expr: ts.Expression, checker?: ts.TypeChecker): COMPILER_TYPES => {
-    return inferCOMPILER_TYPES(expr, checker);
-};
-
-const generateAttributeBinding = (elementVar: string, name: string, expr: string, staticValue: string, addImport: (name: string) => string): string => {
-    if (name.startsWith('on') && name.length > 2) {
-        let event = name.slice(2).toLowerCase(),
-            key = name.toLowerCase();
-
-        if (LIFECYCLE_EVENTS.has(key)) {
-            return `${addImport(key)}(${elementVar}, ${expr});`;
-        }
-
-        if (DIRECT_ATTACH_EVENTS.has(key)) {
-            return `${addImport('on')}(${elementVar}, '${event}', ${expr});`;
-        }
-
-        return `${addImport('delegate')}(${elementVar}, '${event}', ${expr});`;
-    }
-
-    if (name === 'class') {
-        return `${addImport('setClass')}(${elementVar}, '${staticValue}', ${expr});`;
-    }
-
-    if (name === COMPILER_TYPES.Attributes) {
-        return `${addImport('setProperties')}(${elementVar}, ${expr});`;
-    }
-
-    if (name === 'style') {
-        return `${addImport('setStyle')}(${elementVar}, '${staticValue}', ${expr});`;
-    }
-
-    return `${addImport('setProperty')}(${elementVar}, '${name}', ${expr});`;
-};
-
-const generateSpreadBindings = (
-    exprCode: string,
-    elementVar: string,
-    addImport: (name: string) => string
-): string[] => {
-    return [`${addImport('setProperties')}(${elementVar}, ${exprCode});`];
-};
-
-
-export { analyzeExpression, generateAttributeBinding, generateSpreadBindings };