@esportsplus/template 0.37.0 → 0.38.1

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_ENTRYPOINT_REACTIVITY, COMPILER_NAMESPACE, COMPILER_TYPES, DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS } from '~/constants';
+import type { TemplateInfo } from './ts-parser';
 import { analyze } from './analyzer';
 import parser from './parser';
 
@@ -17,15 +18,15 @@ type Attribute = {
 
 type CodegenContext = {
     checker?: ts.TypeChecker;
-    imports: Map<string, string>;
     printer: ts.Printer;
     sourceFile: ts.SourceFile;
     templates: Map<string, string>;
 };
 
 type CodegenResult = {
-    changed: boolean;
-    code: string;
+    prepend: string[];
+    replacements: ReplacementIntent[];
+    templates: Map<string, string>;
 };
 
 type Node = {
@@ -38,6 +39,12 @@ type ParseResult = {
     slots: (Attribute | Node)[] | null;
 };
 
+type Replacement = {
+    end: number;
+    newText: string;
+    start: number;
+};
+
 
 const ARROW_EMPTY_PARAMS = /\(\s*\)\s*=>\s*$/;
 
@@ -45,60 +52,56 @@ const ARROW_EMPTY_PARAMS = /\(\s*\)\s*=>\s*$/;
 let printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed });
 
 
-function addImport(ctx: CodegenContext, name: string): string {
-    let alias = ctx.imports.get(name);
-
-    if (!alias) {
-        alias = uid(name);
-        ctx.imports.set(name, alias);
+function collectNestedReplacements(
+    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 if (isReactiveCall(node as ts.Expression)) {
+        replacements.push({
+            end: node.end - exprStart,
+            newText: rewriteReactiveCall(ctx, node as ts.CallExpression),
+            start: node.getStart(ctx.sourceFile) - exprStart
+        });
+    }
+    else {
+        ts.forEachChild(node, child => collectNestedReplacements(ctx, child, exprStart, replacements));
     }
-
-    return alias;
 }
 
-function generateAttributeBinding(ctx: CodegenContext, element: string, name: string, expr: string, staticValue: string): string {
+function generateAttributeBinding(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});`;
+            return `${COMPILER_NAMESPACE}.${key}(${element}, ${expr});`;
         }
 
         if (DIRECT_ATTACH_EVENTS.has(key)) {
-            return `${addImport(ctx, 'on')}(${element}, '${event}', ${expr});`;
+            return `${COMPILER_NAMESPACE}.on(${element}, '${event}', ${expr});`;
         }
 
-        return `${addImport(ctx, 'delegate')}(${element}, '${event}', ${expr});`;
+        return `${COMPILER_NAMESPACE}.delegate(${element}, '${event}', ${expr});`;
     }
 
     if (name === 'class') {
-        return `${addImport(ctx, 'setClass')}(${element}, '${staticValue}', ${expr});`;
+        return `${COMPILER_NAMESPACE}.setClass(${element}, '${staticValue}', ${expr});`;
     }
 
     if (name === 'style') {
-        return `${addImport(ctx, 'setStyle')}(${element}, '${staticValue}', ${expr});`;
+        return `${COMPILER_NAMESPACE}.setStyle(${element}, '${staticValue}', ${expr});`;
     }
 
-    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));
-    }
+    return `${COMPILER_NAMESPACE}.setProperty(${element}, '${name}', ${expr});`;
 }
 
 function generateNestedTemplateCode(ctx: CodegenContext, node: ts.TaggedTemplateExpression): string {
@@ -133,30 +136,30 @@ function generateNestedTemplateCode(ctx: CodegenContext, node: ts.TaggedTemplate
 
 function generateNodeBinding(ctx: CodegenContext, anchor: string, exprText: string, exprNode: ts.Expression | undefined): string {
     if (!exprNode) {
-        return `${addImport(ctx, 'slot')}(${anchor}, ${exprText});`;
+        return `${COMPILER_NAMESPACE}.slot(${anchor}, ${exprText});`;
     }
 
     if (isNestedHtmlTemplate(exprNode)) {
-        return `${anchor}.parentNode.insertBefore(${generateNestedTemplateCode(ctx, exprNode)}, ${anchor});`;
+        return `${anchor}.parentNode!.insertBefore(${generateNestedTemplateCode(ctx, exprNode)}, ${anchor});`;
     }
 
     let slotType = analyze(exprNode, ctx.checker);
 
     switch (slotType) {
-        case COMPILER_TYPES.Effect:
-            return `new ${addImport(ctx, 'EffectSlot')}(${anchor}, ${exprText});`;
-
         case COMPILER_TYPES.ArraySlot:
-            return `new ${addImport(ctx, 'ArraySlot')}(${anchor}, ${exprText});`;
+            return `${anchor}.parentNode!.insertBefore(new ${COMPILER_NAMESPACE}.ArraySlot(${exprText}).fragment, ${anchor});`;
+
+        case COMPILER_TYPES.DocumentFragment:
+            return `${anchor}.parentNode!.insertBefore(${exprText}, ${anchor});`;
+
+        case COMPILER_TYPES.Effect:
+            return `new ${COMPILER_NAMESPACE}.EffectSlot(${anchor}, ${exprText});`;
 
         case COMPILER_TYPES.Static:
             return `${anchor}.textContent = ${exprText};`;
 
-        case COMPILER_TYPES.DocumentFragment:
-            return `${anchor}.parentNode.insertBefore(${exprText}, ${anchor});`;
-
         default:
-            return `${addImport(ctx, 'slot')}(${anchor}, ${exprText});`;
+            return `${COMPILER_NAMESPACE}.slot(${anchor}, ${exprText});`;
     }
 }
 
@@ -206,17 +209,15 @@ function generateTemplateCode(
             }
         }
 
-        let alias = addImport(ctx, 'Element'),
-            name = uid('element'),
+        let name = uid('element'),
             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})`);
+            value = value.replace(`${ancestor}.firstChild!`, `(${ancestor}.firstChild! as ${COMPILER_NAMESPACE}.Element)`);
         }
 
-        declarations.push(`${name} = ${value} as ${alias}`);
+        declarations.push(`${name} = ${value} as ${COMPILER_NAMESPACE}.Element`);
         nodes.set(key, name);
     }
 
@@ -239,14 +240,13 @@ function generateTemplateCode(
 
                 if (name === COMPILER_TYPES.Attributes) {
                     code.push(
-                        `${addImport(ctx, 'setProperties')}(${element}, ${exprTexts[index] || 'undefined'});`
+                        `${COMPILER_NAMESPACE}.setProperties(${element}, ${exprTexts[index] || 'undefined'});`
                     );
                     index++;
                 }
                 else {
                     code.push(
                         generateAttributeBinding(
-                            ctx,
                             element,
                             name,
                             exprTexts[index++] || 'undefined',
@@ -285,143 +285,194 @@ function isNestedHtmlTemplate(expr: ts.Expression): expr is ts.TaggedTemplateExp
     return ts.isTaggedTemplateExpression(expr) && ts.isIdentifier(expr.tag) && expr.tag.text === COMPILER_ENTRYPOINT;
 }
 
+function isReactiveCall(expr: ts.Expression): expr is ts.CallExpression {
+    return (
+        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
+    );
+}
+
+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);
     }
 
-    if (!ast.hasMatch(expr, n => isNestedHtmlTemplate(n as ts.Expression))) {
+    if (isReactiveCall(expr)) {
+        return rewriteReactiveCall(ctx, expr);
+    }
+
+    if (!ast.hasMatch(expr, n => isNestedHtmlTemplate(n as ts.Expression) || isReactiveCall(n as ts.Expression))) {
         return ctx.printer.printNode(ts.EmitHint.Expression, expr, ctx.sourceFile);
     }
 
     let replacements: Replacement[] = [];
 
-    collectNestedTemplateReplacements(ctx, expr, expr.getStart(), replacements);
+    collectNestedReplacements(ctx, expr, expr.getStart(ctx.sourceFile), replacements);
 
-    return c.replaceReverse(expr.getText(ctx.sourceFile), replacements);
+    return replaceReverse(expr.getText(ctx.sourceFile), replacements);
 }
 
+function rewriteReactiveCall(ctx: CodegenContext, node: ts.CallExpression): string {
+    let arrayArg = node.arguments[0],
+        arrayText = ctx.printer.printNode(ts.EmitHint.Expression, arrayArg, ctx.sourceFile),
+        callbackArg = node.arguments[1],
+        callbackText = rewriteExpression(ctx, callbackArg as ts.Expression);
 
-const generateCode = (templates: TemplateInfo[], originalCode: string, sourceFile: ts.SourceFile, checker?: ts.TypeChecker, existingAliases?: Map<string, string>): CodegenResult => {
-    if (templates.length === 0) {
-        return { changed: false, code: originalCode };
-    }
+    return `${arrayText}, ${callbackText}`;
+}
 
-    // Precompute expression ranges for nested template detection
-    let ranges: { end: number; start: number }[] = [];
+// Eager discovery - walk all expressions to find templates before prepend generation
+function discoverTemplatesInExpression(ctx: CodegenContext, node: ts.Node): void {
+    if (isNestedHtmlTemplate(node as ts.Expression)) {
+        let template = node as ts.TaggedTemplateExpression,
+            expressions: ts.Expression[] = [],
+            literals: string[] = [],
+            tpl = template.template;
 
-    for (let i = 0, n = templates.length; i < n; i++) {
-        let exprs = templates[i].expressions;
+        if (ts.isNoSubstitutionTemplateLiteral(tpl)) {
+            literals.push(tpl.text);
+        }
+        else if (ts.isTemplateExpression(tpl)) {
+            literals.push(tpl.head.text);
 
-        for (let j = 0, m = exprs.length; j < m; j++) {
-            ranges.push({ end: exprs[j].end, start: exprs[j].getStart() });
+            for (let i = 0, n = tpl.templateSpans.length; i < n; i++) {
+                expressions.push(tpl.templateSpans[i].expression);
+                literals.push(tpl.templateSpans[i].literal.text);
+            }
         }
-    }
 
-    let rootTemplates = templates.filter(t => !ast.inRange(ranges, t.start, t.end));
+        let parsed = parser.parse(literals) as ParseResult;
 
-    if (rootTemplates.length === 0) {
-        return { changed: false, code: originalCode };
+        getOrCreateTemplateId(ctx, parsed.html);
+
+        for (let i = 0, n = expressions.length; i < n; i++) {
+            discoverTemplatesInExpression(ctx, expressions[i]);
+        }
     }
+    else if (isReactiveCall(node as ts.Expression)) {
+        let call = node as ts.CallExpression;
 
-    let ctx: CodegenContext = {
-            checker,
-            imports: existingAliases ?? new Map(),
-            printer,
-            sourceFile,
-            templates: new Map(),
-        },
-        replacements: Replacement[] = [],
-        templateAlias = addImport(ctx, 'template');
+        if (call.arguments.length >= 2) {
+            discoverTemplatesInExpression(ctx, call.arguments[1]);
+        }
+    }
+    else {
+        ts.forEachChild(node, child => discoverTemplatesInExpression(ctx, child));
+    }
+}
 
-    for (let i = 0, n = rootTemplates.length; i < n; i++) {
-        let exprTexts: string[] = [],
-            template = rootTemplates[i];
+function discoverAllTemplates(ctx: CodegenContext, templates: TemplateInfo[]): void {
+    for (let i = 0, n = templates.length; i < n; i++) {
+        let parsed = parser.parse(templates[i].literals) as ParseResult;
 
-        for (let j = 0, m = template.expressions.length; j < m; j++) {
-            exprTexts.push(rewriteExpression(ctx, template.expressions[j]));
-        }
+        getOrCreateTemplateId(ctx, parsed.html);
 
-        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;
-            }
+        for (let j = 0, m = templates[i].expressions.length; j < m; j++) {
+            discoverTemplatesInExpression(ctx, templates[i].expressions[j]);
         }
+    }
+}
 
-        replacements.push({
-            end: template.end,
-            newText: generateTemplateCode(
-                ctx,
-                parsed,
-                exprTexts,
-                template.expressions,
-                isArrowBody
-            ),
-            start: template.start
-        });
+
+const generateCode = (templates: TemplateInfo[], sourceFile: ts.SourceFile, checker?: ts.TypeChecker): CodegenResult => {
+    let result: CodegenResult = {
+        prepend: [],
+        replacements: [],
+        templates: new Map()
+    };
+
+    if (templates.length === 0) {
+        return result;
     }
 
-    let changed = replacements.length > 0,
-        code = c.replaceReverse(originalCode, replacements);
+    let ranges: { end: number; start: number }[] = [];
 
-    if (changed && ctx.templates.size > 0) {
-        let aliasedImports: string[] = [],
-            factories: string[] = [],
-            updatedSourceFile = ts.createSourceFile(sourceFile.fileName, code, sourceFile.languageVersion, true);
+    for (let i = 0, n = templates.length; i < n; i++) {
+        let exprs = templates[i].expressions;
 
-        for (let [name, alias] of ctx.imports) {
-            aliasedImports.push(`${name} as ${alias}`);
+        for (let j = 0, m = exprs.length; j < m; j++) {
+            ranges.push({ end: exprs[j].end, start: exprs[j].getStart(sourceFile) });
         }
+    }
 
-        for (let [html, id] of ctx.templates) {
-            factories.push(`const ${id} = ${templateAlias}(\`${html}\`);`);
-        }
+    let rootTemplates = templates.filter(t => !ast.inRange(ranges, t.node.getStart(sourceFile), t.node.end));
 
-        // 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;
+    if (rootTemplates.length === 0) {
+        return result;
     }
 
-    return { changed, code };
-};
+    let ctx: CodegenContext = {
+        checker,
+        printer,
+        sourceFile,
+        templates: result.templates
+    };
 
-const generateReactiveInlining = (calls: ReactiveCallInfo[], code: string, sourceFile: ts.SourceFile, arraySlotAlias: string): string => {
-    if (calls.length === 0) {
-        return code;
-    }
+    for (let i = 0, n = rootTemplates.length; i < n; 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,
+                        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]));
+                }
 
-    let replacements: Replacement[] = [];
+                if (isArrowBody && (!parsed.slots || parsed.slots.length === 0)) {
+                    let arrowMatch = codeBefore.match(ARROW_EMPTY_PARAMS);
 
-    for (let i = 0, n = calls.length; i < n; i++) {
-        let call = calls[i];
+                    if (arrowMatch) {
+                        return getOrCreateTemplateId(localCtx, parsed.html);
+                    }
+                }
 
-        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 generateTemplateCode(
+                    localCtx,
+                    parsed,
+                    exprTexts,
+                    template.expressions,
+                    isArrowBody
+                );
+            },
+            node: template.node
         });
     }
 
-    return c.replaceReverse(code, replacements);
+    // Eager discovery: find all templates before prepend generation
+    discoverAllTemplates(ctx, templates);
+
+    for (let [html, id] of ctx.templates) {
+        result.prepend.push(`const ${id} = ${COMPILER_NAMESPACE}.template(\`${html}\`);`);
+    }
+
+    return result;
 };
 
-export { generateCode, generateReactiveInlining };
+
+export { generateCode };
 export type { CodegenResult };