@esportsplus/template 0.38.2 → 0.40.0

package/src/compiler/codegen.ts

@@ -1,9 +1,11 @@
 import type { ReplacementIntent } from '@esportsplus/typescript/compiler';
-import { ts } from '@esportsplus/typescript';
-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 { analyze } from './ts-analyzer';
+import { ast, uid } from '@esportsplus/typescript/compiler';
+import { DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS } from '../constants';
+import { ENTRYPOINT, ENTRYPOINT_REACTIVITY, NAMESPACE, TYPES } from './constants';
+import { extractTemplateParts } from './ts-parser';
+import { ts } from '@esportsplus/typescript';
 import parser from './parser';
 
 
@@ -13,12 +15,11 @@ type Attribute = {
         statics: Record<string, string>;
     };
     path: string[];
-    type: COMPILER_TYPES.Attribute;
+    type: TYPES.Attribute;
 };
 
 type CodegenContext = {
     checker?: ts.TypeChecker;
-    printer: ts.Printer;
     sourceFile: ts.SourceFile;
     templates: Map<string, string>;
 };
@@ -31,7 +32,7 @@ type CodegenResult = {
 
 type Node = {
     path: string[];
-    type: COMPILER_TYPES.Node;
+    type: TYPES.Node;
 };
 
 type ParseResult = {
@@ -39,43 +40,51 @@ type ParseResult = {
     slots: (Attribute | Node)[] | null;
 };
 
-type Replacement = {
-    end: number;
-    newText: string;
-    start: number;
-};
-
-
-const ARROW_EMPTY_PARAMS = /\(\s*\)\s*=>\s*$/;
-
 
 let printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed });
 
 
-function collectNestedReplacements(
-    ctx: CodegenContext,
-    node: ts.Node,
-    exprStart: number,
-    replacements: Replacement[]
-): void {
+function collectNestedReplacements(ctx: CodegenContext, node: ts.Node, replacements: { end: number; start: number; text: string }[]): 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
+            end: node.end,
+            start: node.getStart(ctx.sourceFile),
+            text: generateNestedTemplateCode(ctx, node as ts.TaggedTemplateExpression)
         });
+
+        return;
     }
-    else if (isReactiveCall(node as ts.Expression)) {
-        // Nested reactive calls need full ArraySlot construction (not just args)
+
+    if (isReactiveCall(node as ts.Expression)) {
+        let call = node as ts.CallExpression;
+
         replacements.push({
-            end: node.end - exprStart,
-            newText: rewriteNestedReactiveCall(ctx, node as ts.CallExpression),
-            start: node.getStart(ctx.sourceFile) - exprStart
+            end: node.end,
+            start: node.getStart(ctx.sourceFile),
+            text: `new ${NAMESPACE}.ArraySlot(${rewriteExpression(ctx, call.arguments[0] as ts.Expression)}, ${rewriteExpression(ctx, call.arguments[1] as ts.Expression)})`
         });
+
+        return;
     }
-    else {
-        ts.forEachChild(node, child => collectNestedReplacements(ctx, child, exprStart, replacements));
+
+    ts.forEachChild(node, child => collectNestedReplacements(ctx, child, replacements));
+}
+
+function discoverTemplatesInExpression(ctx: CodegenContext, node: ts.Node): void {
+    if (isNestedHtmlTemplate(node as ts.Expression)) {
+        let { expressions, literals } = extractTemplateParts((node as ts.TaggedTemplateExpression).template),
+            parsed = parser.parse(literals) as ParseResult;
+
+        getOrCreateTemplateId(ctx, parsed.html);
+
+        for (let i = 0, n = expressions.length; i < n; i++) {
+            discoverTemplatesInExpression(ctx, expressions[i]);
+        }
+
+        return;
     }
+
+    ts.forEachChild(node, child => discoverTemplatesInExpression(ctx, child));
 }
 
 function generateAttributeBinding(element: string, name: string, expr: string, staticValue: string): string {
@@ -84,46 +93,33 @@ function generateAttributeBinding(element: string, name: string, expr: string, s
             key = name.toLowerCase();
 
         if (LIFECYCLE_EVENTS.has(key)) {
-            return `${COMPILER_NAMESPACE}.${key}(${element}, ${expr});`;
+            return `${NAMESPACE}.${key}(${element}, ${expr});`;
         }
 
         if (DIRECT_ATTACH_EVENTS.has(key)) {
-            return `${COMPILER_NAMESPACE}.on(${element}, '${event}', ${expr});`;
+            return `${NAMESPACE}.on(${element}, '${event}', ${expr});`;
         }
 
-        return `${COMPILER_NAMESPACE}.delegate(${element}, '${event}', ${expr});`;
+        return `${NAMESPACE}.delegate(${element}, '${event}', ${expr});`;
     }
 
     if (name === 'class') {
-        return `${COMPILER_NAMESPACE}.setClass(${element}, '${staticValue}', ${expr});`;
+        return `${NAMESPACE}.setClass(${element}, '${staticValue}', ${expr});`;
     }
 
     if (name === 'style') {
-        return `${COMPILER_NAMESPACE}.setStyle(${element}, '${staticValue}', ${expr});`;
+        return `${NAMESPACE}.setStyle(${element}, '${staticValue}', ${expr});`;
     }
 
-    return `${COMPILER_NAMESPACE}.setProperty(${element}, '${name}', ${expr});`;
+    return `${NAMESPACE}.setProperty(${element}, '${name}', ${expr});`;
 }
 
 function generateNestedTemplateCode(ctx: CodegenContext, node: ts.TaggedTemplateExpression): string {
-    let expressions: ts.Expression[] = [],
-        exprTexts: string[] = [],
-        literals: string[] = [],
-        template = node.template;
-
-    if (ts.isNoSubstitutionTemplateLiteral(template)) {
-        literals.push(template.text);
-    }
-    else if (ts.isTemplateExpression(template)) {
-        literals.push(template.head.text);
+    let { expressions, literals } = extractTemplateParts(node.template),
+        exprTexts: string[] = [];
 
-        for (let i = 0, n = template.templateSpans.length; i < n; i++) {
-            let expr = template.templateSpans[i].expression;
-
-            expressions.push(expr);
-            literals.push(template.templateSpans[i].literal.text);
-            exprTexts.push(rewriteExpression(ctx, expr));
-        }
+    for (let i = 0, n = expressions.length; i < n; i++) {
+        exprTexts.push(rewriteExpression(ctx, expressions[i]));
     }
 
     return generateTemplateCode(
@@ -131,36 +127,34 @@ function generateNestedTemplateCode(ctx: CodegenContext, node: ts.TaggedTemplate
         parser.parse(literals) as ParseResult,
         exprTexts,
         expressions,
-        false
+        node
     );
 }
 
 function generateNodeBinding(ctx: CodegenContext, anchor: string, exprText: string, exprNode: ts.Expression | undefined): string {
     if (!exprNode) {
-        return `${COMPILER_NAMESPACE}.slot(${anchor}, ${exprText});`;
+        return `${NAMESPACE}.slot(${anchor}, ${exprText});`;
     }
 
     if (isNestedHtmlTemplate(exprNode)) {
         return `${anchor}.parentNode!.insertBefore(${generateNestedTemplateCode(ctx, exprNode)}, ${anchor});`;
     }
 
-    let slotType = analyze(exprNode, ctx.checker);
-
-    switch (slotType) {
-        case COMPILER_TYPES.ArraySlot:
-            return `${anchor}.parentNode!.insertBefore(new ${COMPILER_NAMESPACE}.ArraySlot(${exprText}).fragment, ${anchor});`;
+    switch (analyze(exprNode, ctx.checker)) {
+        case TYPES.ArraySlot:
+            return `${anchor}.parentNode!.insertBefore(new ${NAMESPACE}.ArraySlot(${exprText}).fragment, ${anchor});`;
 
-        case COMPILER_TYPES.DocumentFragment:
+        case TYPES.DocumentFragment:
             return `${anchor}.parentNode!.insertBefore(${exprText}, ${anchor});`;
 
-        case COMPILER_TYPES.Effect:
-            return `new ${COMPILER_NAMESPACE}.EffectSlot(${anchor}, ${exprText});`;
+        case TYPES.Effect:
+            return `new ${NAMESPACE}.EffectSlot(${anchor}, ${exprText});`;
 
-        case COMPILER_TYPES.Static:
+        case TYPES.Static:
             return `${anchor}.textContent = ${exprText};`;
 
         default:
-            return `${COMPILER_NAMESPACE}.slot(${anchor}, ${exprText});`;
+            return `${NAMESPACE}.slot(${anchor}, ${exprText});`;
     }
 }
 
@@ -169,7 +163,7 @@ function generateTemplateCode(
     { html, slots }: ParseResult,
     exprTexts: string[],
     exprNodes: ts.Expression[],
-    isArrowBody: boolean
+    templateNode: ts.Node
 ): string {
     if (!slots || slots.length === 0) {
         return `${getOrCreateTemplateId(ctx, html)}()`;
@@ -178,6 +172,7 @@ function generateTemplateCode(
     let code: string[] = [],
         declarations: string[] = [],
         index = 0,
+        isArrowBody = isArrowExpressionBody(templateNode),
         nodes = new Map<string, string>(),
         root = uid('root');
 
@@ -215,17 +210,15 @@ function generateTemplateCode(
             value = `${ancestor}.${segments.join('!.')}`;
 
         if (ancestor === root && segments[0] === 'firstChild') {
-            value = value.replace(`${ancestor}.firstChild!`, `(${ancestor}.firstChild! as ${COMPILER_NAMESPACE}.Element)`);
+            value = value.replace(`${ancestor}.firstChild!`, `(${root}.firstChild! as ${NAMESPACE}.Element)`);
         }
 
-        declarations.push(`${name} = ${value} as ${COMPILER_NAMESPACE}.Element`);
+        declarations.push(`${name} = ${value} as ${NAMESPACE}.Element`);
         nodes.set(key, name);
     }
 
-    code.push(
-        isArrowBody ? '{' : `(() => {`,
-        `let ${declarations.join(',\n')};`
-    );
+    code.push(isArrowBody ? '{' : `(() => {`);
+    code.push(`let ${declarations.join(',\n')};`);
 
     for (let i = 0, n = slots.length; i < n; i++) {
         let element = slots[i].path.length === 0
@@ -233,15 +226,15 @@ function generateTemplateCode(
                 : (nodes.get(slots[i].path.join('.')) || root),
             slot = slots[i];
 
-        if (slot.type === COMPILER_TYPES.Attribute) {
+        if (slot.type === TYPES.Attribute) {
             let names = slot.attributes.names;
 
             for (let j = 0, m = names.length; j < m; j++) {
                 let name = names[j];
 
-                if (name === COMPILER_TYPES.Attributes) {
+                if (name === TYPES.Attributes) {
                     code.push(
-                        `${COMPILER_NAMESPACE}.setProperties(${element}, ${exprTexts[index] || 'undefined'});`
+                        `${NAMESPACE}.setProperties(${element}, ${exprTexts[index] || 'undefined'});`
                     );
                     index++;
                 }
@@ -282,8 +275,12 @@ function getOrCreateTemplateId(ctx: CodegenContext, html: string): string {
     return id;
 }
 
+function isArrowExpressionBody(node: ts.Node): boolean {
+    return ts.isArrowFunction(node.parent) && (node.parent as ts.ArrowFunction).body === node;
+}
+
 function isNestedHtmlTemplate(expr: ts.Expression): expr is ts.TaggedTemplateExpression {
-    return ts.isTaggedTemplateExpression(expr) && ts.isIdentifier(expr.tag) && expr.tag.text === COMPILER_ENTRYPOINT;
+    return ts.isTaggedTemplateExpression(expr) && ts.isIdentifier(expr.tag) && expr.tag.text === ENTRYPOINT;
 }
 
 function isReactiveCall(expr: ts.Expression): expr is ts.CallExpression {
@@ -291,122 +288,48 @@ function isReactiveCall(expr: ts.Expression): expr is ts.CallExpression {
         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
+        expr.expression.expression.text === ENTRYPOINT &&
+        expr.expression.name.text === 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 (isReactiveCall(expr)) {
-        return rewriteReactiveCall(ctx, expr);
+        return `${rewriteExpression(ctx, expr.arguments[0] as ts.Expression)}, ${rewriteExpression(ctx, expr.arguments[1] as ts.Expression)}`;
     }
 
-    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);
+    if (!ast.test(expr, n => isNestedHtmlTemplate(n as ts.Expression) || isReactiveCall(n as ts.Expression))) {
+        return printer.printNode(ts.EmitHint.Expression, expr, ctx.sourceFile);
     }
 
-    let replacements: Replacement[] = [];
-
-    collectNestedReplacements(ctx, expr, expr.getStart(ctx.sourceFile), replacements);
-
-    return replaceReverse(expr.getText(ctx.sourceFile), replacements);
-}
-
-// Returns just args "array, callback" - for direct slot usage where generateNodeBinding wraps it
-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);
+    let exprStart = expr.getStart(ctx.sourceFile),
+        replacements: { end: number; start: number; text: string }[] = [],
+        text = expr.getText(ctx.sourceFile);
 
-    return `${arrayText}, ${callbackText}`;
-}
-
-// Returns full "new ArraySlot(array, callback)" - for nested reactive calls inside expressions
-function rewriteNestedReactiveCall(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);
-
-    return `new ${COMPILER_NAMESPACE}.ArraySlot(${arrayText}, ${callbackText})`;
-}
-
-// 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;
-
-        if (ts.isNoSubstitutionTemplateLiteral(tpl)) {
-            literals.push(tpl.text);
-        }
-        else if (ts.isTemplateExpression(tpl)) {
-            literals.push(tpl.head.text);
+    ts.forEachChild(expr, child => collectNestedReplacements(ctx, child, replacements));
 
-            for (let i = 0, n = tpl.templateSpans.length; i < n; i++) {
-                expressions.push(tpl.templateSpans[i].expression);
-                literals.push(tpl.templateSpans[i].literal.text);
-            }
-        }
+    replacements.sort((a, b) => b.start - a.start);
 
-        let parsed = parser.parse(literals) as ParseResult;
+    for (let i = 0, n = replacements.length; i < n; i++) {
+        let r = replacements[i];
 
-        getOrCreateTemplateId(ctx, parsed.html);
-
-        for (let i = 0, n = expressions.length; i < n; i++) {
-            discoverTemplatesInExpression(ctx, expressions[i]);
-        }
+        text = text.slice(0, r.start - exprStart) + r.text + text.slice(r.end - exprStart);
     }
-    else if (isReactiveCall(node as ts.Expression)) {
-        let call = node as ts.CallExpression;
-
-        if (call.arguments.length >= 2) {
-            discoverTemplatesInExpression(ctx, call.arguments[1]);
-        }
-    }
-    else {
-        ts.forEachChild(node, child => discoverTemplatesInExpression(ctx, child));
-    }
-}
-
-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;
-
-        getOrCreateTemplateId(ctx, parsed.html);
 
-        for (let j = 0, m = templates[i].expressions.length; j < m; j++) {
-            discoverTemplatesInExpression(ctx, templates[i].expressions[j]);
-        }
-    }
+    return text;
 }
 
 
 const generateCode = (templates: TemplateInfo[], sourceFile: ts.SourceFile, checker?: ts.TypeChecker): CodegenResult => {
     let result: CodegenResult = {
-        prepend: [],
-        replacements: [],
-        templates: new Map()
-    };
+            prepend: [],
+            replacements: [],
+            templates: new Map()
+        };
 
     if (templates.length === 0) {
         return result;
@@ -422,69 +345,64 @@ const generateCode = (templates: TemplateInfo[], sourceFile: ts.SourceFile, chec
         }
     }
 
-    let rootTemplates = templates.filter(t => !ast.inRange(ranges, t.node.getStart(sourceFile), t.node.end));
+    let root = templates.filter(t => !ast.inRange(ranges, t.node.getStart(sourceFile), t.node.end));
 
-    if (rootTemplates.length === 0) {
+    if (root.length === 0) {
         return result;
     }
 
     let ctx: CodegenContext = {
-        checker,
-        printer,
-        sourceFile,
-        templates: result.templates
-    };
+            checker,
+            sourceFile,
+            templates: result.templates
+        };
+
+    for (let i = 0, n = root.length; i < n; i++) {
+        let exprTexts: string[] = [],
+            parsed = parser.parse(root[i].literals) as ParseResult,
+            template = root[i];
+
+        for (let j = 0, m = template.expressions.length; j < m; j++) {
+            exprTexts.push(rewriteExpression(ctx, template.expressions[j]));
+        }
 
-    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]));
-                }
+        if (
+            isArrowExpressionBody(template.node) &&
+            (template.node.parent as ts.ArrowFunction).parameters.length === 0 &&
+            (!parsed.slots || parsed.slots.length === 0)
+        ) {
+            let code = getOrCreateTemplateId(ctx, parsed.html);
+
+            result.replacements.push({
+                generate: () => code,
+                node: template.node
+            });
+        }
+        else {
+            let code = generateTemplateCode(ctx, parsed, exprTexts, template.expressions, template.node);
 
-                if (isArrowBody && (!parsed.slots || parsed.slots.length === 0)) {
-                    let arrowMatch = codeBefore.match(ARROW_EMPTY_PARAMS);
+            result.replacements.push({
+                generate: () => code,
+                node: template.node
+            });
+        }
+    }
 
-                    if (arrowMatch) {
-                        return getOrCreateTemplateId(localCtx, parsed.html);
-                    }
-                }
+    for (let i = 0, n = templates.length; i < n; i++) {
+        getOrCreateTemplateId(ctx, parser.parse(templates[i].literals).html);
 
-                return generateTemplateCode(
-                    localCtx,
-                    parsed,
-                    exprTexts,
-                    template.expressions,
-                    isArrowBody
-                );
-            },
-            node: template.node
-        });
+        for (let j = 0, m = templates[i].expressions.length; j < m; j++) {
+            discoverTemplatesInExpression(ctx, templates[i].expressions[j]);
+        }
     }
 
-    // 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}\`);`);
+        result.prepend.push(`const ${id} = ${NAMESPACE}.template(\`${html}\`);`);
     }
 
     return result;
 };
 
 
-export { generateCode };
+export { generateCode, printer };
 export type { CodegenResult };

package/src/compiler/constants.ts

@@ -0,0 +1,26 @@
+import { uid } from '@esportsplus/typescript/compiler';
+
+
+const ENTRYPOINT = 'html';
+
+const ENTRYPOINT_REACTIVITY = 'reactive';
+
+const NAMESPACE = uid('template');
+
+const PACKAGE = '@esportsplus/template';
+
+
+const enum TYPES {
+    ArraySlot = 'array-slot',
+    Attributes = 'attributes',
+    Attribute = 'attribute',
+    DocumentFragment = 'document-fragment',
+    Effect = 'effect',
+    Node = 'node',
+    Primitive = 'primitive',
+    Static = 'static',
+    Unknown = 'unknown'
+};
+
+
+export { ENTRYPOINT, ENTRYPOINT_REACTIVITY, NAMESPACE, PACKAGE, TYPES };