@esportsplus/template 0.37.0 → 0.38.0

package/build/compiler/codegen.d.ts

@@ -1,10 +1,12 @@
+import type { ReplacementIntent } from '@esportsplus/typescript/compiler';
 import { ts } from '@esportsplus/typescript';
-import type { ReactiveCallInfo, TemplateInfo } from './ts-parser.js';
+import type { TemplateInfo } from './ts-parser.js';
 type CodegenResult = {
-    changed: boolean;
-    code: string;
+    imports: Map<string, string>;
+    prepend: string[];
+    replacements: ReplacementIntent[];
+    templates: Map<string, string>;
 };
-declare const generateCode: (templates: TemplateInfo[], originalCode: string, sourceFile: ts.SourceFile, checker?: ts.TypeChecker, existingAliases?: Map<string, string>) => CodegenResult;
-declare const generateReactiveInlining: (calls: ReactiveCallInfo[], code: string, sourceFile: ts.SourceFile, arraySlotAlias: string) => string;
-export { generateCode, generateReactiveInlining };
+declare const generateCode: (templates: TemplateInfo[], sourceFile: ts.SourceFile, checker?: ts.TypeChecker, existingAliases?: Map<string, string>) => CodegenResult;
+export { generateCode };
 export type { CodegenResult };

package/build/compiler/codegen.js

@@ -1,6 +1,6 @@
 import { ts } from '@esportsplus/typescript';
-import { ast, code as c, imports, uid } from '@esportsplus/typescript/compiler';
-import { COMPILER_ENTRYPOINT, COMPILER_TYPES, DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS, PACKAGE } from '../constants.js';
+import { ast, uid } from '@esportsplus/typescript/compiler';
+import { COMPILER_ENTRYPOINT, COMPILER_TYPES, DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS } from '../constants.js';
 import { analyze } from './analyzer.js';
 import parser from './parser.js';
 const ARROW_EMPTY_PARAMS = /\(\s*\)\s*=>\s*$/;
@@ -13,6 +13,18 @@ function addImport(ctx, name) {
     }
     return alias;
 }
+function collectNestedTemplateReplacements(ctx, node, exprStart, replacements) {
+    if (isNestedHtmlTemplate(node)) {
+        replacements.push({
+            end: node.end - exprStart,
+            newText: generateNestedTemplateCode(ctx, node),
+            start: node.getStart(ctx.sourceFile) - exprStart
+        });
+    }
+    else {
+        ts.forEachChild(node, child => collectNestedTemplateReplacements(ctx, child, exprStart, replacements));
+    }
+}
 function generateAttributeBinding(ctx, element, name, expr, staticValue) {
     if (name.startsWith('on') && name.length > 2) {
         let event = name.slice(2).toLowerCase(), key = name.toLowerCase();
@@ -32,18 +44,6 @@ function generateAttributeBinding(ctx, element, name, expr, staticValue) {
     }
     return `${addImport(ctx, 'setProperty')}(${element}, '${name}', ${expr});`;
 }
-function collectNestedTemplateReplacements(ctx, node, exprStart, replacements) {
-    if (isNestedHtmlTemplate(node)) {
-        replacements.push({
-            end: node.end - exprStart,
-            newText: generateNestedTemplateCode(ctx, node),
-            start: node.getStart() - exprStart
-        });
-    }
-    else {
-        ts.forEachChild(node, child => collectNestedTemplateReplacements(ctx, child, exprStart, replacements));
-    }
-}
 function generateNestedTemplateCode(ctx, node) {
     let expressions = [], exprTexts = [], literals = [], template = node.template;
     if (ts.isNoSubstitutionTemplateLiteral(template)) {
@@ -151,6 +151,14 @@ function getOrCreateTemplateId(ctx, html) {
 function isNestedHtmlTemplate(expr) {
     return ts.isTaggedTemplateExpression(expr) && ts.isIdentifier(expr.tag) && expr.tag.text === COMPILER_ENTRYPOINT;
 }
+function replaceReverse(text, replacements) {
+    let sorted = replacements.slice().sort((a, b) => b.start - a.start);
+    for (let i = 0, n = sorted.length; i < n; i++) {
+        let r = sorted[i];
+        text = text.slice(0, r.start) + r.newText + text.slice(r.end);
+    }
+    return text;
+}
 function rewriteExpression(ctx, expr) {
     if (isNestedHtmlTemplate(expr)) {
         return generateNestedTemplateCode(ctx, expr);
@@ -159,87 +167,65 @@ function rewriteExpression(ctx, expr) {
         return ctx.printer.printNode(ts.EmitHint.Expression, expr, ctx.sourceFile);
     }
     let replacements = [];
-    collectNestedTemplateReplacements(ctx, expr, expr.getStart(), replacements);
-    return c.replaceReverse(expr.getText(ctx.sourceFile), replacements);
+    collectNestedTemplateReplacements(ctx, expr, expr.getStart(ctx.sourceFile), replacements);
+    return replaceReverse(expr.getText(ctx.sourceFile), replacements);
 }
-const generateCode = (templates, originalCode, sourceFile, checker, existingAliases) => {
+const generateCode = (templates, sourceFile, checker, existingAliases) => {
+    let result = {
+        imports: existingAliases ?? new Map(),
+        prepend: [],
+        replacements: [],
+        templates: new Map()
+    };
     if (templates.length === 0) {
-        return { changed: false, code: originalCode };
+        return result;
     }
     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++) {
-            ranges.push({ end: exprs[j].end, start: exprs[j].getStart() });
+            ranges.push({ end: exprs[j].end, start: exprs[j].getStart(sourceFile) });
         }
     }
-    let rootTemplates = templates.filter(t => !ast.inRange(ranges, t.start, t.end));
+    let rootTemplates = templates.filter(t => !ast.inRange(ranges, t.node.getStart(sourceFile), t.node.end));
     if (rootTemplates.length === 0) {
-        return { changed: false, code: originalCode };
+        return result;
     }
     let ctx = {
         checker,
-        imports: existingAliases ?? new Map(),
+        imports: result.imports,
         printer,
         sourceFile,
-        templates: new Map(),
-    }, replacements = [], templateAlias = addImport(ctx, 'template');
+        templates: result.templates
+    }, templateAlias = addImport(ctx, 'template');
     for (let i = 0, n = rootTemplates.length; i < n; i++) {
-        let exprTexts = [], template = rootTemplates[i];
-        for (let j = 0, m = template.expressions.length; j < m; j++) {
-            exprTexts.push(rewriteExpression(ctx, template.expressions[j]));
-        }
-        let codeBefore = originalCode.slice(0, template.start), isArrowBody = codeBefore.trimEnd().endsWith('=>'), parsed = parser.parse(template.literals);
-        if (isArrowBody && (!parsed.slots || parsed.slots.length === 0)) {
-            let arrowMatch = codeBefore.match(ARROW_EMPTY_PARAMS);
-            if (arrowMatch) {
-                replacements.push({
-                    end: template.end,
-                    newText: getOrCreateTemplateId(ctx, parsed.html),
-                    start: template.start - arrowMatch[0].length
-                });
-                continue;
-            }
-        }
-        replacements.push({
-            end: template.end,
-            newText: generateTemplateCode(ctx, parsed, exprTexts, template.expressions, isArrowBody),
-            start: template.start
-        });
-    }
-    let changed = replacements.length > 0, code = c.replaceReverse(originalCode, replacements);
-    if (changed && ctx.templates.size > 0) {
-        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, updatedSourceFile, PACKAGE, {
-            add: new Set(aliasedImports),
-            remove: [COMPILER_ENTRYPOINT]
+        let template = rootTemplates[i];
+        result.replacements.push({
+            generate: (sf) => {
+                let codeBefore = sf.getFullText().slice(0, template.node.getStart(sf)), exprTexts = [], isArrowBody = codeBefore.trimEnd().endsWith('=>'), localCtx = {
+                    checker,
+                    imports: ctx.imports,
+                    printer,
+                    sourceFile: sf,
+                    templates: ctx.templates
+                }, parsed = parser.parse(template.literals);
+                for (let j = 0, m = template.expressions.length; j < m; j++) {
+                    exprTexts.push(rewriteExpression(localCtx, template.expressions[j]));
+                }
+                if (isArrowBody && (!parsed.slots || parsed.slots.length === 0)) {
+                    let arrowMatch = codeBefore.match(ARROW_EMPTY_PARAMS);
+                    if (arrowMatch) {
+                        return getOrCreateTemplateId(localCtx, parsed.html);
+                    }
+                }
+                return generateTemplateCode(localCtx, parsed, exprTexts, template.expressions, isArrowBody);
+            },
+            node: template.node
         });
-        code = factories.join('\n') + '\n\n' + code;
     }
-    return { changed, code };
-};
-const generateReactiveInlining = (calls, code, sourceFile, arraySlotAlias) => {
-    if (calls.length === 0) {
-        return code;
-    }
-    let replacements = [];
-    for (let i = 0, n = calls.length; i < n; i++) {
-        let call = calls[i];
-        replacements.push({
-            end: call.end,
-            newText: `new ${arraySlotAlias}(
-                ${printer.printNode(ts.EmitHint.Expression, call.arrayArg, sourceFile)},
-                ${printer.printNode(ts.EmitHint.Expression, call.callbackArg, sourceFile)}
-            )`,
-            start: call.start
-        });
+    for (let [html, id] of ctx.templates) {
+        result.prepend.push(`const ${id} = ${templateAlias}(\`${html}\`);`);
     }
-    return c.replaceReverse(code, replacements);
+    return result;
 };
-export { generateCode, generateReactiveInlining };
+export { generateCode };

package/build/compiler/index.d.ts

@@ -1,10 +1,5 @@
-import type { PluginContext } from '@esportsplus/typescript/compiler';
-import { ts } from '@esportsplus/typescript';
-type TransformResult = {
-    changed: boolean;
-    code: string;
-    sourceFile: ts.SourceFile;
-};
-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 };
+import type { Plugin } from '@esportsplus/typescript/compiler';
+import reactiveInliningPlugin from './reactive-inlining.js';
+declare const templatePlugin: Plugin;
+export default templatePlugin;
+export { reactiveInliningPlugin, templatePlugin };

package/build/compiler/index.js

@@ -1,82 +1,38 @@
-import { ts } from '@esportsplus/typescript';
-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;
-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;
-    }
-    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) {
-        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, 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 };
+import { COMPILER_ENTRYPOINT, PACKAGE } from '../constants.js';
+import { generateCode } from './codegen.js';
+import reactiveInliningPlugin, { SHARED_KEY } from './reactive-inlining.js';
+import { findHtmlTemplates } from './ts-parser.js';
+const PATTERNS = [`${COMPILER_ENTRYPOINT}\``];
+const templatePlugin = {
+    patterns: PATTERNS,
+    transform: (ctx) => {
+        let templates = findHtmlTemplates(ctx.sourceFile, ctx.checker);
+        if (templates.length === 0) {
+            return {};
         }
-        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;
+        let existingAliases = new Map(), existingArraySlotAlias = ctx.shared.get(SHARED_KEY);
+        if (existingArraySlotAlias) {
+            existingAliases.set('ArraySlot', existingArraySlotAlias);
         }
-        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', 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())
-        };
-    }
-    if (analyzed.templates.length > 0) {
-        let codegenResult = generateCode(analyzed.templates, result, sourceFile, program.getTypeChecker(), existingAliases);
-        if (codegenResult.changed) {
-            changed = true;
-            codegenChanged = true;
-            result = codegenResult.code;
+        let result = generateCode(templates, ctx.sourceFile, ctx.checker, existingAliases);
+        if (result.replacements.length === 0) {
+            return {};
         }
-    }
-    if (existingAliases.size > 0 && !codegenChanged) {
         let aliasedImports = [];
-        for (let [name, alias] of existingAliases) {
+        for (let [name, alias] of result.imports) {
             aliasedImports.push(`${name} as ${alias}`);
         }
-        result = imports.modify(result, sourceFile, PACKAGE, { add: aliasedImports });
-    }
-    if (changed) {
-        sourceFile = ts.createSourceFile(sourceFile.fileName, result, sourceFile.languageVersion, true);
+        let imports = [{
+                add: aliasedImports,
+                package: PACKAGE,
+                remove: [COMPILER_ENTRYPOINT]
+            }];
+        return {
+            imports,
+            prepend: result.prepend,
+            replacements: result.replacements
+        };
     }
-    return { changed, code: result, sourceFile };
 };
-export { analyze, transform };
+export default templatePlugin;
+export { reactiveInliningPlugin, templatePlugin };

package/build/compiler/plugins/tsc.js

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

package/build/compiler/plugins/vite.js

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

package/build/compiler/reactive-inlining.d.ts

@@ -0,0 +1,5 @@
+import type { Plugin } from '@esportsplus/typescript/compiler';
+declare const SHARED_KEY = "template:arraySlotAlias";
+declare const plugin: Plugin;
+export default plugin;
+export { SHARED_KEY };

package/build/compiler/reactive-inlining.js

@@ -0,0 +1,75 @@
+import { ts } from '@esportsplus/typescript';
+import { uid } from '@esportsplus/typescript/compiler';
+import { COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY, PACKAGE } from '../constants.js';
+const PATTERNS = [`${COMPILER_ENTRYPOINT}.${COMPILER_ENTRYPOINT_REACTIVITY}`];
+const SHARED_KEY = 'template:arraySlotAlias';
+let printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed });
+function isHtmlFromPackage(node, checker) {
+    if (node.text !== COMPILER_ENTRYPOINT) {
+        return false;
+    }
+    if (!checker) {
+        return true;
+    }
+    let symbol = checker.getSymbolAtLocation(node);
+    if (!symbol) {
+        return true;
+    }
+    if (symbol.flags & ts.SymbolFlags.Alias) {
+        symbol = checker.getAliasedSymbol(symbol);
+    }
+    let declarations = symbol.getDeclarations();
+    if (!declarations || declarations.length === 0) {
+        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')) {
+            return true;
+        }
+    }
+    return false;
+}
+function visit(node, calls, checker) {
+    if (ts.isCallExpression(node) &&
+        ts.isPropertyAccessExpression(node.expression) &&
+        ts.isIdentifier(node.expression.expression) &&
+        node.expression.name.text === COMPILER_ENTRYPOINT_REACTIVITY &&
+        node.arguments.length === 2 &&
+        isHtmlFromPackage(node.expression.expression, checker)) {
+        calls.push({
+            arrayArg: node.arguments[0],
+            callbackArg: node.arguments[1],
+            node
+        });
+    }
+    ts.forEachChild(node, child => visit(child, calls, checker));
+}
+const plugin = {
+    patterns: PATTERNS,
+    transform: (ctx) => {
+        let calls = [];
+        visit(ctx.sourceFile, calls, ctx.checker);
+        if (calls.length === 0) {
+            return {};
+        }
+        let arraySlotAlias = uid('ArraySlot'), replacements = [];
+        ctx.shared.set(SHARED_KEY, arraySlotAlias);
+        for (let i = 0, n = calls.length; i < n; i++) {
+            let call = calls[i];
+            replacements.push({
+                generate: (sourceFile) => `new ${arraySlotAlias}(${printer.printNode(ts.EmitHint.Expression, call.arrayArg, sourceFile)}, ${printer.printNode(ts.EmitHint.Expression, call.callbackArg, sourceFile)})`,
+                node: call.node
+            });
+        }
+        return {
+            imports: [{
+                    add: [`ArraySlot as ${arraySlotAlias}`],
+                    package: PACKAGE
+                }],
+            replacements
+        };
+    }
+};
+export default plugin;
+export { SHARED_KEY };

package/package.json

@@ -2,8 +2,8 @@
   "author": "ICJR",
   "dependencies": {
     "@esportsplus/queue": "^0.2.0",
-    "@esportsplus/reactivity": "^0.27.3",
-    "@esportsplus/typescript": "^0.24.2",
+    "@esportsplus/reactivity": "^0.28.0",
+    "@esportsplus/typescript": "^0.25.0",
     "@esportsplus/utilities": "^0.27.2",
     "serve": "^14.2.5"
   },
@@ -35,7 +35,7 @@
   },
   "type": "module",
   "types": "./build/index.d.ts",
-  "version": "0.37.0",
+  "version": "0.38.0",
   "scripts": {
     "build": "tsc",
     "build:test": "vite build --config test/vite.config.ts",

package/src/compiler/codegen.ts

@@ -1,7 +1,8 @@
+import type { ReplacementIntent } from '@esportsplus/typescript/compiler';
 import { ts } from '@esportsplus/typescript';
-import { ast, code as c, imports, uid, type Replacement } from '@esportsplus/typescript/compiler';
-import { COMPILER_ENTRYPOINT, COMPILER_TYPES, DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS, PACKAGE } from '~/constants';
-import type { ReactiveCallInfo, TemplateInfo } from './ts-parser';
+import { ast, uid } from '@esportsplus/typescript/compiler';
+import { COMPILER_ENTRYPOINT, COMPILER_TYPES, DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS } from '~/constants';
+import type { TemplateInfo } from './ts-parser';
 import { analyze } from './analyzer';
 import parser from './parser';
 
@@ -24,8 +25,10 @@ type CodegenContext = {
 };
 
 type CodegenResult = {
-    changed: boolean;
-    code: string;
+    imports: Map<string, string>;
+    prepend: string[];
+    replacements: ReplacementIntent[];
+    templates: Map<string, string>;
 };
 
 type Node = {
@@ -38,6 +41,12 @@ type ParseResult = {
     slots: (Attribute | Node)[] | null;
 };
 
+type Replacement = {
+    end: number;
+    newText: string;
+    start: number;
+};
+
 
 const ARROW_EMPTY_PARAMS = /\(\s*\)\s*=>\s*$/;
 
@@ -56,6 +65,24 @@ function addImport(ctx: CodegenContext, name: string): string {
     return alias;
 }
 
+function collectNestedTemplateReplacements(
+    ctx: CodegenContext,
+    node: ts.Node,
+    exprStart: number,
+    replacements: Replacement[]
+): void {
+    if (isNestedHtmlTemplate(node as ts.Expression)) {
+        replacements.push({
+            end: node.end - exprStart,
+            newText: generateNestedTemplateCode(ctx, node as ts.TaggedTemplateExpression),
+            start: node.getStart(ctx.sourceFile) - exprStart
+        });
+    }
+    else {
+        ts.forEachChild(node, child => collectNestedTemplateReplacements(ctx, child, exprStart, replacements));
+    }
+}
+
 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(),
@@ -83,24 +110,6 @@ function generateAttributeBinding(ctx: CodegenContext, element: string, name: st
     return `${addImport(ctx, 'setProperty')}(${element}, '${name}', ${expr});`;
 }
 
-function collectNestedTemplateReplacements(
-    ctx: CodegenContext,
-    node: ts.Node,
-    exprStart: number,
-    replacements: Replacement[]
-): void {
-    if (isNestedHtmlTemplate(node as ts.Expression)) {
-        replacements.push({
-            end: node.end - exprStart,
-            newText: generateNestedTemplateCode(ctx, node as ts.TaggedTemplateExpression),
-            start: node.getStart() - exprStart
-        });
-    }
-    else {
-        ts.forEachChild(node, child => collectNestedTemplateReplacements(ctx, child, exprStart, replacements));
-    }
-}
-
 function generateNestedTemplateCode(ctx: CodegenContext, node: ts.TaggedTemplateExpression): string {
     let expressions: ts.Expression[] = [],
         exprTexts: string[] = [],
@@ -211,7 +220,6 @@ function generateTemplateCode(
             segments = path.slice(start),
             value = `${ancestor}.${segments.join('!.')}`;
 
-        // Cast root.firstChild to Element since DocumentFragment.firstChild returns ChildNode
         if (ancestor === root && segments[0] === 'firstChild') {
             value = value.replace(`${ancestor}.firstChild!`, `(${ancestor}.firstChild! as ${alias})`);
         }
@@ -285,6 +293,18 @@ function isNestedHtmlTemplate(expr: ts.Expression): expr is ts.TaggedTemplateExp
     return ts.isTaggedTemplateExpression(expr) && ts.isIdentifier(expr.tag) && expr.tag.text === COMPILER_ENTRYPOINT;
 }
 
+function replaceReverse(text: string, replacements: Replacement[]): string {
+    let sorted = replacements.slice().sort((a, b) => b.start - a.start);
+
+    for (let i = 0, n = sorted.length; i < n; i++) {
+        let r = sorted[i];
+
+        text = text.slice(0, r.start) + r.newText + text.slice(r.end);
+    }
+
+    return text;
+}
+
 function rewriteExpression(ctx: CodegenContext, expr: ts.Expression): string {
     if (isNestedHtmlTemplate(expr)) {
         return generateNestedTemplateCode(ctx, expr);
@@ -296,132 +316,97 @@ function rewriteExpression(ctx: CodegenContext, expr: ts.Expression): string {
 
     let replacements: Replacement[] = [];
 
-    collectNestedTemplateReplacements(ctx, expr, expr.getStart(), replacements);
+    collectNestedTemplateReplacements(ctx, expr, expr.getStart(ctx.sourceFile), replacements);
 
-    return c.replaceReverse(expr.getText(ctx.sourceFile), replacements);
+    return replaceReverse(expr.getText(ctx.sourceFile), replacements);
 }
 
 
-const generateCode = (templates: TemplateInfo[], originalCode: string, sourceFile: ts.SourceFile, checker?: ts.TypeChecker, existingAliases?: Map<string, string>): CodegenResult => {
+const generateCode = (templates: TemplateInfo[], sourceFile: ts.SourceFile, checker?: ts.TypeChecker, existingAliases?: Map<string, string>): CodegenResult => {
+    let result: CodegenResult = {
+        imports: existingAliases ?? new Map(),
+        prepend: [],
+        replacements: [],
+        templates: new Map()
+    };
+
     if (templates.length === 0) {
-        return { changed: false, code: originalCode };
+        return result;
     }
 
-    // Precompute expression ranges for nested template detection
     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++) {
-            ranges.push({ end: exprs[j].end, start: exprs[j].getStart() });
+            ranges.push({ end: exprs[j].end, start: exprs[j].getStart(sourceFile) });
         }
     }
 
-    let rootTemplates = templates.filter(t => !ast.inRange(ranges, t.start, t.end));
+    let rootTemplates = templates.filter(t => !ast.inRange(ranges, t.node.getStart(sourceFile), t.node.end));
 
     if (rootTemplates.length === 0) {
-        return { changed: false, code: originalCode };
+        return result;
     }
 
     let ctx: CodegenContext = {
             checker,
-            imports: existingAliases ?? new Map(),
+            imports: result.imports,
             printer,
             sourceFile,
-            templates: new Map(),
+            templates: result.templates
         },
-        replacements: Replacement[] = [],
         templateAlias = addImport(ctx, 'template');
 
     for (let i = 0, n = rootTemplates.length; i < n; i++) {
-        let exprTexts: string[] = [],
-            template = rootTemplates[i];
+        let template = rootTemplates[i];
+
+        result.replacements.push({
+            generate: (sf) => {
+                let codeBefore = sf.getFullText().slice(0, template.node.getStart(sf)),
+                    exprTexts: string[] = [],
+                    isArrowBody = codeBefore.trimEnd().endsWith('=>'),
+                    localCtx: CodegenContext = {
+                        checker,
+                        imports: ctx.imports,
+                        printer,
+                        sourceFile: sf,
+                        templates: ctx.templates
+                    },
+                    parsed = parser.parse(template.literals) as ParseResult;
+
+                for (let j = 0, m = template.expressions.length; j < m; j++) {
+                    exprTexts.push(rewriteExpression(localCtx, template.expressions[j]));
+                }
 
-        for (let j = 0, m = template.expressions.length; j < m; j++) {
-            exprTexts.push(rewriteExpression(ctx, template.expressions[j]));
-        }
+                if (isArrowBody && (!parsed.slots || parsed.slots.length === 0)) {
+                    let arrowMatch = codeBefore.match(ARROW_EMPTY_PARAMS);
 
-        let codeBefore = originalCode.slice(0, template.start),
-            isArrowBody = codeBefore.trimEnd().endsWith('=>'),
-            parsed = parser.parse(template.literals) as ParseResult;
-
-        // Optimize: when template has no slots and is `() => template`, use template directly
-        if (isArrowBody && (!parsed.slots || parsed.slots.length === 0)) {
-            let arrowMatch = codeBefore.match(ARROW_EMPTY_PARAMS);
-
-            if (arrowMatch) {
-                replacements.push({
-                    end: template.end,
-                    newText: getOrCreateTemplateId(ctx, parsed.html),
-                    start: template.start - arrowMatch[0].length
-                });
-                continue;
-            }
-        }
+                    if (arrowMatch) {
+                        return getOrCreateTemplateId(localCtx, parsed.html);
+                    }
+                }
 
-        replacements.push({
-            end: template.end,
-            newText: generateTemplateCode(
-                ctx,
-                parsed,
-                exprTexts,
-                template.expressions,
-                isArrowBody
-            ),
-            start: template.start
+                return generateTemplateCode(
+                    localCtx,
+                    parsed,
+                    exprTexts,
+                    template.expressions,
+                    isArrowBody
+                );
+            },
+            node: template.node
         });
     }
 
-    let changed = replacements.length > 0,
-        code = c.replaceReverse(originalCode, replacements);
-
-    if (changed && ctx.templates.size > 0) {
-        let aliasedImports: string[] = [],
-            factories: string[] = [],
-            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}\`);`);
-        }
-
-        // Remove html entrypoint and add aliased imports
-        code = imports.modify(code, updatedSourceFile, PACKAGE, {
-            add: new Set(aliasedImports),
-            remove: [COMPILER_ENTRYPOINT]
-        });
-        code = factories.join('\n') + '\n\n' + code;
+    for (let [html, id] of ctx.templates) {
+        result.prepend.push(`const ${id} = ${templateAlias}(\`${html}\`);`);
     }
 
-    return { changed, code };
+    return result;
 };
 
-const generateReactiveInlining = (calls: ReactiveCallInfo[], code: string, sourceFile: ts.SourceFile, arraySlotAlias: string): string => {
-    if (calls.length === 0) {
-        return code;
-    }
-
-    let replacements: Replacement[] = [];
-
-    for (let i = 0, n = calls.length; i < n; i++) {
-        let call = calls[i];
-
-        replacements.push({
-            end: call.end,
-            newText: `new ${arraySlotAlias}(
-                ${printer.printNode(ts.EmitHint.Expression, call.arrayArg, sourceFile)},
-                ${printer.printNode(ts.EmitHint.Expression, call.callbackArg, sourceFile)}
-            )`,
-            start: call.start
-        });
-    }
-
-    return c.replaceReverse(code, replacements);
-};
 
-export { generateCode, generateReactiveInlining };
+export { generateCode };
 export type { CodegenResult };

package/src/compiler/index.ts

@@ -1,139 +1,56 @@
-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, type ReactiveCallInfo, type TemplateInfo } from './ts-parser';
+import type { ImportIntent, Plugin, TransformContext } from '@esportsplus/typescript/compiler';
+import { COMPILER_ENTRYPOINT, PACKAGE } from '~/constants';
+import { generateCode } from './codegen';
+import reactiveInliningPlugin, { SHARED_KEY } from './reactive-inlining';
+import { findHtmlTemplates } from './ts-parser';
 
 
-type AnalyzedFile = {
-    reactiveCalls: ReactiveCallInfo[];
-    templates: TemplateInfo[];
-};
-
-type TransformResult = {
-    changed: boolean;
-    code: string;
-    sourceFile: ts.SourceFile;
-};
-
-
-const CONTEXT_KEY = 'template:analyzed';
-
-const PATTERNS = [`${COMPILER_ENTRYPOINT}\``, `${COMPILER_ENTRYPOINT}.${COMPILER_ENTRYPOINT_REACTIVITY}`];
-
-const REGEX_BACKSLASH = /\\/g;
-
-const REGEX_FORWARD_SLASH = /\//g;
-
-
-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;
-    }
-
-    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, '\\'));
+const PATTERNS = [`${COMPILER_ENTRYPOINT}\``];
 
-    if (programSourceFile) {
-        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;
+const templatePlugin: Plugin = {
+    patterns: PATTERNS,
 
-    // Try to get pre-analyzed data from context
-    let analyzed = getAnalyzedFile(context, filename);
+    transform: (ctx: TransformContext) => {
+        let templates = findHtmlTemplates(ctx.sourceFile, ctx.checker);
 
-    // Fall back to inline analysis (for Vite or when context unavailable)
-    if (!analyzed) {
-        if (!c.contains(code, { patterns: PATTERNS })) {
-            return { changed: false, code, sourceFile };
+        if (templates.length === 0) {
+            return {};
         }
 
-        let checker = program.getTypeChecker(),
-            programSourceFile = program.getSourceFile(filename)
-                || program.getSourceFile(filename.replace(REGEX_BACKSLASH, '/'))
-                || program.getSourceFile(filename.replace(REGEX_FORWARD_SLASH, '\\'));
+        let existingAliases = new Map<string, string>(),
+            existingArraySlotAlias = ctx.shared.get(SHARED_KEY) as string | undefined;
 
-        if (programSourceFile) {
-            sourceFile = programSourceFile;
+        if (existingArraySlotAlias) {
+            existingAliases.set('ArraySlot', existingArraySlotAlias);
         }
 
-        analyzed = {
-            reactiveCalls: findReactiveCalls(sourceFile, checker),
-            templates: findHtmlTemplates(sourceFile, checker)
-        };
-    }
+        let result = generateCode(templates, ctx.sourceFile, ctx.checker, existingAliases);
 
-    let changed = false,
-        codegenChanged = false,
-        existingAliases = new Map<string, string>(),
-        result = code;
-
-    if (analyzed.reactiveCalls.length > 0) {
-        changed = true;
-        existingAliases.set('ArraySlot', uid('ArraySlot'));
-        result = generateReactiveInlining(analyzed.reactiveCalls, result, sourceFile, existingAliases.get('ArraySlot')!);
-        sourceFile = ts.createSourceFile(sourceFile.fileName, result, sourceFile.languageVersion, true);
-
-        // Re-analyze templates after reactive inlining modifies the code
-        analyzed = {
-            reactiveCalls: [],
-            templates: findHtmlTemplates(sourceFile, program.getTypeChecker())
-        };
-    }
-
-    if (analyzed.templates.length > 0) {
-        let codegenResult = generateCode(analyzed.templates, result, sourceFile, program.getTypeChecker(), existingAliases);
-
-        if (codegenResult.changed) {
-            changed = true;
-            codegenChanged = true;
-            result = codegenResult.code;
+        if (result.replacements.length === 0) {
+            return {};
         }
-    }
 
-    // Add aliased ArraySlot import if reactive calls were processed but codegen didn't run
-    if (existingAliases.size > 0 && !codegenChanged) {
         let aliasedImports: string[] = [];
 
-        for (let [name, alias] of existingAliases) {
+        for (let [name, alias] of result.imports) {
             aliasedImports.push(`${name} as ${alias}`);
         }
 
-        result = imports.modify(result, sourceFile, PACKAGE, { add: aliasedImports });
-    }
+        let imports: ImportIntent[] = [{
+            add: aliasedImports,
+            package: PACKAGE,
+            remove: [COMPILER_ENTRYPOINT]
+        }];
 
-    if (changed) {
-        sourceFile = ts.createSourceFile(sourceFile.fileName, result, sourceFile.languageVersion, true);
+        return {
+            imports,
+            prepend: result.prepend,
+            replacements: result.replacements
+        };
     }
-
-    return { changed, code: result, sourceFile };
 };
 
 
-export { analyze, transform };
+export default templatePlugin;
+export { reactiveInliningPlugin, templatePlugin };

package/src/compiler/plugins/tsc.ts

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

package/src/compiler/plugins/vite.ts

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

package/src/compiler/reactive-inlining.ts

@@ -0,0 +1,116 @@
+import type { Plugin, ReplacementIntent, TransformContext } from '@esportsplus/typescript/compiler';
+import { ts } from '@esportsplus/typescript';
+import { uid } from '@esportsplus/typescript/compiler';
+import { COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY, PACKAGE } from '~/constants';
+
+
+type ReactiveCallInfo = {
+    arrayArg: ts.Expression;
+    callbackArg: ts.Expression;
+    node: ts.CallExpression;
+};
+
+
+const PATTERNS = [`${COMPILER_ENTRYPOINT}.${COMPILER_ENTRYPOINT_REACTIVITY}`];
+
+const SHARED_KEY = 'template:arraySlotAlias';
+
+
+let printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed });
+
+
+function isHtmlFromPackage(node: ts.Identifier, checker: ts.TypeChecker | undefined): boolean {
+    if (node.text !== COMPILER_ENTRYPOINT) {
+        return false;
+    }
+
+    if (!checker) {
+        return true;
+    }
+
+    let symbol = checker.getSymbolAtLocation(node);
+
+    if (!symbol) {
+        return true;
+    }
+
+    if (symbol.flags & ts.SymbolFlags.Alias) {
+        symbol = checker.getAliasedSymbol(symbol);
+    }
+
+    let declarations = symbol.getDeclarations();
+
+    if (!declarations || declarations.length === 0) {
+        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')) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
+function visit(node: ts.Node, calls: ReactiveCallInfo[], checker: ts.TypeChecker | undefined): void {
+    if (
+        ts.isCallExpression(node) &&
+        ts.isPropertyAccessExpression(node.expression) &&
+        ts.isIdentifier(node.expression.expression) &&
+        node.expression.name.text === COMPILER_ENTRYPOINT_REACTIVITY &&
+        node.arguments.length === 2 &&
+        isHtmlFromPackage(node.expression.expression, checker)
+    ) {
+        calls.push({
+            arrayArg: node.arguments[0],
+            callbackArg: node.arguments[1],
+            node
+        });
+    }
+
+    ts.forEachChild(node, child => visit(child, calls, checker));
+}
+
+
+const plugin: Plugin = {
+    patterns: PATTERNS,
+
+    transform: (ctx: TransformContext) => {
+        let calls: ReactiveCallInfo[] = [];
+
+        visit(ctx.sourceFile, calls, ctx.checker);
+
+        if (calls.length === 0) {
+            return {};
+        }
+
+        let arraySlotAlias = uid('ArraySlot'),
+            replacements: ReplacementIntent[] = [];
+
+        ctx.shared.set(SHARED_KEY, arraySlotAlias);
+
+        for (let i = 0, n = calls.length; i < n; i++) {
+            let call = calls[i];
+
+            replacements.push({
+                generate: (sourceFile) => `new ${arraySlotAlias}(${printer.printNode(ts.EmitHint.Expression, call.arrayArg, sourceFile)}, ${printer.printNode(ts.EmitHint.Expression, call.callbackArg, sourceFile)})`,
+                node: call.node
+            });
+        }
+
+        return {
+            imports: [{
+                add: [`ArraySlot as ${arraySlotAlias}`],
+                package: PACKAGE
+            }],
+            replacements
+        };
+    }
+};
+
+
+export default plugin;
+export { SHARED_KEY };