@esportsplus/template 0.28.1 → 0.29.1

package/src/transformer/codegen.ts

@@ -0,0 +1,518 @@
+import { addImport, applyReplacementsReverse, uid } from '@esportsplus/typescript/transformer';
+import type { Replacement } from '@esportsplus/typescript/transformer';
+import type { ReactiveCallInfo, TemplateInfo } from './ts-parser';
+import { analyzeExpression, generateAttributeBinding, generateSpreadBindings } from './type-analyzer';
+import ts from 'typescript';
+import parser from './parser';
+
+
+type AttributeSlot = {
+    attributes: {
+        names: string[];
+        statics: Record<string, string>;
+    };
+    path: string[];
+    type: 'attributes';
+};
+
+type CodegenResult = {
+    changed: boolean;
+    code: string;
+};
+
+type NodeSlot = {
+    path: string[];
+    type: 'slot';
+};
+
+type ParseResult = {
+    html: string;
+    slots: (AttributeSlot | NodeSlot)[] | null;
+};
+
+
+const ARROW_EMPTY_PARAMS = /\(\s*\)\s*=>\s*$/;
+
+
+let currentChecker: ts.TypeChecker | undefined,
+    hoistedFactories = new Map<string, string>(),
+    htmlToTemplateId = new Map<string, string>(),
+    nameArraySlot = '',
+    nameAttr = '',
+    nameEffectSlot = '',
+    nameEvent = '',
+    nameSlot = '',
+    nameTemplate = '',
+    needsArraySlot = false,
+    needsAttr = false,
+    needsEffectSlot = false,
+    needsEvent = false,
+    needsSlot = false;
+
+
+function collectNestedTemplateReplacements(
+    node: ts.Node,
+    exprStart: number,
+    sourceFile: ts.SourceFile,
+    replacements: Replacement[]
+): void {
+    if (isNestedHtmlTemplate(node as ts.Expression)) {
+        replacements.push({
+            end: node.end - exprStart,
+            newText: generateNestedTemplateCode(node as ts.TaggedTemplateExpression, sourceFile),
+            start: node.getStart() - exprStart
+        });
+    }
+    else {
+        ts.forEachChild(node, child => collectNestedTemplateReplacements(child, exprStart, sourceFile, replacements));
+    }
+}
+
+function generateImports(): string {
+    let specifiers: string[] = [];
+
+    if (needsArraySlot) {
+        specifiers.push(`ArraySlot as ${nameArraySlot}`);
+    }
+
+    if (needsEffectSlot) {
+        specifiers.push(`EffectSlot as ${nameEffectSlot}`);
+    }
+
+    if (needsAttr) {
+        specifiers.push(`attributes as ${nameAttr}`);
+    }
+
+    if (needsEvent) {
+        specifiers.push(`event as ${nameEvent}`);
+    }
+
+    if (needsSlot) {
+        specifiers.push(`slot as ${nameSlot}`);
+    }
+
+    specifiers.push(`template as ${nameTemplate}`);
+
+    return `import { ${specifiers.join(', ')} } from '@esportsplus/template';`;
+}
+
+function generateNestedTemplateCode(node: ts.TaggedTemplateExpression, sourceFile: ts.SourceFile): 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);
+
+        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(expr, sourceFile));
+        }
+    }
+
+    return generateTemplateCode(
+        parser.parse(literals) as ParseResult,
+        exprTexts,
+        expressions,
+        sourceFile,
+        false
+    );
+}
+
+function generateNodeBinding(anchor: string, exprText: string, exprNode: ts.Expression | undefined, sourceFile: ts.SourceFile): string {
+    if (!exprNode) {
+        needsSlot = true;
+        return `${nameSlot}(${anchor}, ${exprText});`;
+    }
+
+    if (isNestedHtmlTemplate(exprNode)) {
+        return `${anchor}.parentNode.insertBefore(${generateNestedTemplateCode(exprNode, sourceFile)}, ${anchor});`;
+    }
+
+    let slotType = analyzeExpression(exprNode, currentChecker);
+
+    switch (slotType) {
+        case 'effect':
+            needsEffectSlot = true;
+            return `new ${nameEffectSlot}(${anchor}, ${exprText});`;
+
+        case 'array-slot':
+            needsArraySlot = true;
+            return `new ${nameArraySlot}(${anchor}, ${exprText});`;
+
+        case 'static':
+            return `${anchor}.textContent = ${exprText};`;
+
+        case 'document-fragment':
+            return `${anchor}.parentNode.insertBefore(${exprText}, ${anchor});`;
+
+        default:
+            needsSlot = true;
+            return `${nameSlot}(${anchor}, ${exprText});`;
+    }
+}
+
+function generateTemplateCode(
+    { html, slots }: ParseResult,
+    exprTexts: string[],
+    exprNodes: ts.Expression[],
+    sourceFile: ts.SourceFile,
+    isArrowBody: boolean
+): string {
+    if (!slots || slots.length === 0) {
+        return `${getOrCreateTemplateId(html)}()`;
+    }
+
+    let code: string[] = [],
+        declarations: string[] = [],
+        index = 0,
+        nodes = new Map<string, string>(),
+        root = uid('root');
+
+    declarations.push(`${root} = ${getOrCreateTemplateId(html)}()`);
+    nodes.set('', root);
+
+    for (let i = 0, n = slots.length; i < n; i++) {
+        let path = slots[i].path;
+
+        if (path.length === 0) {
+            continue;
+        }
+
+        let key = path.join('.');
+
+        if (nodes.has(key)) {
+            continue;
+        }
+
+        let ancestorVar = root,
+            startIdx = 0;
+
+        for (let j = path.length - 1; j >= 0; j--) {
+            let prefix = path.slice(0, j).join('.');
+
+            if (nodes.has(prefix)) {
+                ancestorVar = nodes.get(prefix)!;
+                startIdx = j;
+                break;
+            }
+        }
+
+        let name = uid('element'),
+            suffix = path.slice(startIdx).join('.');
+
+        declarations.push(`${name} = ${ancestorVar}.${suffix}`);
+        nodes.set(key, name);
+    }
+
+    code.push(
+        isArrowBody ? '{' : `(() => {`,
+        `let ${declarations.join(',\n')};`
+    );
+
+    for (let i = 0, n = slots.length; i < n; i++) {
+        let elementVar = slots[i].path.length === 0
+                ? root
+                : (nodes.get(slots[i].path.join('.')) || root),
+            slot = slots[i];
+
+        if (slot.type === 'attributes') {
+            for (let j = 0, m = slot.attributes.names.length; j < m; j++) {
+                let name = slot.attributes.names[j];
+
+                if (name === 'spread') {
+                    let bindings = generateSpreadBindings(
+                            exprNodes[index],
+                            exprTexts[index] || 'undefined',
+                            elementVar,
+                            sourceFile,
+                            currentChecker
+                        );
+
+                    for (let k = 0, o = bindings.length; k < o; k++) {
+                        trackBindingUsage(bindings[k]);
+                        code.push(bindings[k]);
+                    }
+
+                    index++;
+                }
+                else {
+                    let binding = generateAttributeBinding(
+                            elementVar,
+                            name,
+                            exprTexts[index++] || 'undefined',
+                            slot.attributes.statics[name] || ''
+                        );
+
+                    trackBindingUsage(binding);
+                    code.push(binding);
+                }
+            }
+        }
+        else {
+            code.push(generateNodeBinding(elementVar, exprTexts[index] || 'undefined', exprNodes[index], sourceFile));
+            index++;
+        }
+    }
+
+    code.push(`return ${root};`);
+    code.push(isArrowBody ? `}` : `})()`);
+
+    return code.join('\n');
+}
+
+function getOrCreateTemplateId(html: string): string {
+    let id = htmlToTemplateId.get(html);
+
+    if (!id) {
+        id = uid('tmpl');
+        hoistedFactories.set(id, html);
+        htmlToTemplateId.set(html, id);
+    }
+
+    return id;
+}
+
+function hasArraySlotImport(sourceFile: ts.SourceFile): boolean {
+    for (let i = 0, n = sourceFile.statements.length; i < n; i++) {
+        let stmt = sourceFile.statements[i];
+
+        if (!ts.isImportDeclaration(stmt) || !stmt.importClause?.namedBindings) {
+            continue;
+        }
+
+        let bindings = stmt.importClause.namedBindings;
+
+        if (!ts.isNamedImports(bindings)) {
+            continue;
+        }
+
+        for (let j = 0, m = bindings.elements.length; j < m; j++) {
+            if (bindings.elements[j].name.text === 'ArraySlot') {
+                return true;
+            }
+        }
+    }
+
+    return false;
+}
+
+function hasArraySlotUsage(node: ts.Node): boolean {
+    if (
+        ts.isNewExpression(node) &&
+        ts.isIdentifier(node.expression) &&
+        node.expression.text === 'ArraySlot'
+    ) {
+        return true;
+    }
+
+    let found = false;
+
+    ts.forEachChild(node, child => {
+        if (!found && hasArraySlotUsage(child)) {
+            found = true;
+        }
+    });
+
+    return found;
+}
+
+function hasNestedTemplates(node: ts.Node): boolean {
+    if (isNestedHtmlTemplate(node as ts.Expression)) {
+        return true;
+    }
+
+    let found = false;
+
+    ts.forEachChild(node, child => {
+        if (!found && hasNestedTemplates(child)) {
+            found = true;
+        }
+    });
+
+    return found;
+}
+
+function isNestedHtmlTemplate(expr: ts.Expression): expr is ts.TaggedTemplateExpression {
+    return ts.isTaggedTemplateExpression(expr) && ts.isIdentifier(expr.tag) && expr.tag.text === 'html';
+}
+
+function isNestedTemplate(template: TemplateInfo, allTemplates: TemplateInfo[]): boolean {
+    for (let i = 0, n = allTemplates.length; i < n; i++) {
+        let other = allTemplates[i];
+
+        if (other === template) {
+            continue;
+        }
+
+        for (let j = 0, m = other.expressions.length; j < m; j++) {
+            let expr = other.expressions[j];
+
+            if (template.start >= expr.getStart() && template.end <= expr.end) {
+                return true;
+            }
+        }
+    }
+
+    return false;
+}
+
+function rewriteExpression(expr: ts.Expression, sourceFile: ts.SourceFile): string {
+    if (isNestedHtmlTemplate(expr)) {
+        return generateNestedTemplateCode(expr, sourceFile);
+    }
+
+    if (!hasNestedTemplates(expr)) {
+        return ts.createPrinter({ newLine: ts.NewLineKind.LineFeed }).printNode(ts.EmitHint.Expression, expr, sourceFile);
+    }
+
+    let exprStart = expr.getStart(),
+        replacements: Replacement[] = [];
+
+    collectNestedTemplateReplacements(expr, exprStart, sourceFile, replacements);
+
+    return applyReplacementsReverse(expr.getText(sourceFile), replacements);
+}
+
+function trackBindingUsage(binding: string): void {
+    if (binding.startsWith(nameEvent + '.')) {
+        needsEvent = true;
+    }
+    else if (binding.startsWith(nameAttr + '.')) {
+        needsAttr = true;
+    }
+}
+
+
+const addArraySlotImport = (code: string): string => {
+    return addImport(code, '@esportsplus/template', ['ArraySlot']);
+};
+
+const generateCode = (templates: TemplateInfo[], originalCode: string, sourceFile: ts.SourceFile): CodegenResult => {
+    if (templates.length === 0) {
+        return { changed: false, code: originalCode };
+    }
+
+    hoistedFactories.clear();
+    htmlToTemplateId.clear();
+    nameArraySlot = uid('ArraySlot');
+    nameAttr = uid('attr');
+    nameEffectSlot = uid('EffectSlot');
+    nameEvent = uid('event');
+    nameSlot = uid('slot');
+    nameTemplate = uid('template');
+    needsArraySlot = false;
+    needsAttr = false;
+    needsEffectSlot = false;
+    needsEvent = false;
+    needsSlot = false;
+
+    let rootTemplates = templates.filter(t => !isNestedTemplate(t, templates));
+
+    if (rootTemplates.length === 0) {
+        return { changed: false, code: originalCode };
+    }
+
+    let replacements: Replacement[] = [];
+
+    for (let i = 0, n = rootTemplates.length; i < n; i++) {
+        let exprTexts: string[] = [],
+            template = rootTemplates[i];
+
+        for (let j = 0, m = template.expressions.length; j < m; j++) {
+            exprTexts.push(rewriteExpression(template.expressions[j], sourceFile));
+        }
+
+        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(parsed.html),
+                    start: template.start - arrowMatch[0].length
+                });
+                continue;
+            }
+        }
+
+        replacements.push({
+            end: template.end,
+            newText: generateTemplateCode(
+                parsed,
+                exprTexts,
+                template.expressions,
+                sourceFile,
+                isArrowBody
+            ),
+            start: template.start
+        });
+    }
+
+    let changed = replacements.length > 0,
+        code = applyReplacementsReverse(originalCode, replacements);
+
+    if (changed && hoistedFactories.size > 0) {
+        let factories: string[] = [];
+
+        for (let [id, html] of hoistedFactories) {
+            factories.push(`const ${id} = ${nameTemplate}(\`${html}\`);`);
+        }
+
+        code = generateImports() + '\n\n' + factories.join('\n') + '\n\n' + code;
+    }
+
+    return { changed, code };
+};
+
+const generateReactiveInlining = (calls: ReactiveCallInfo[], code: string, sourceFile: ts.SourceFile): string => {
+    if (calls.length === 0) {
+        return code;
+    }
+
+    let printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed }),
+        result = code;
+
+    for (let i = calls.length - 1; i >= 0; i--) {
+        let call = calls[i];
+
+        result = result.slice(0, call.start);
+        result += `new ${nameArraySlot}(
+                ${printer.printNode(ts.EmitHint.Expression, call.arrayArg, sourceFile)},
+                ${printer.printNode(ts.EmitHint.Expression, call.callbackArg, sourceFile)}
+            )`;
+        result += result.slice(call.end);
+    }
+
+    return result;
+};
+
+const getNames = () => ({
+    attr: nameAttr,
+    event: nameEvent,
+    slot: nameSlot
+});
+
+const needsArraySlotImport = (sourceFile: ts.SourceFile): boolean => {
+    return hasArraySlotUsage(sourceFile) && !hasArraySlotImport(sourceFile);
+};
+
+const setTypeChecker = (checker: ts.TypeChecker | undefined): void => {
+    currentChecker = checker;
+};
+
+
+export { addArraySlotImport, generateCode, generateReactiveInlining, getNames, needsArraySlotImport, setTypeChecker };
+export type { CodegenResult };

package/src/transformer/index.ts

@@ -0,0 +1,98 @@
+import { mightNeedTransform } from '@esportsplus/typescript/transformer';
+import { addArraySlotImport, generateCode, generateReactiveInlining, needsArraySlotImport, setTypeChecker } from './codegen';
+import { findHtmlTemplates, findReactiveCalls } from './ts-parser';
+import ts from 'typescript';
+
+
+type TransformResult = {
+    changed: boolean;
+    code: string;
+    sourceFile: ts.SourceFile;
+};
+
+
+const PATTERNS = ['html`', 'html.reactive'];
+
+
+function createTransformer(program: ts.Program): ts.TransformerFactory<ts.SourceFile> {
+    let typeChecker = program.getTypeChecker();
+
+    return (_context: ts.TransformationContext) => {
+        return (sourceFile: ts.SourceFile): ts.SourceFile => {
+            let code = sourceFile.getFullText();
+
+            if (!mightNeedTransform(code, { patterns: PATTERNS })) {
+                return sourceFile;
+            }
+
+            setTypeChecker(typeChecker);
+
+            let result = transformCode(code, sourceFile);
+
+            if (!result.changed) {
+                return sourceFile;
+            }
+
+            return result.sourceFile;
+        };
+    };
+}
+
+function transformCode(code: string, sourceFile: ts.SourceFile): TransformResult {
+    let changed = false,
+        result = code;
+
+    let reactiveCalls = findReactiveCalls(sourceFile);
+
+    if (reactiveCalls.length > 0) {
+        result = generateReactiveInlining(reactiveCalls, result, sourceFile);
+        changed = true;
+        sourceFile = ts.createSourceFile(sourceFile.fileName, result, sourceFile.languageVersion, true);
+
+        if (needsArraySlotImport(sourceFile)) {
+            result = addArraySlotImport(result);
+            sourceFile = ts.createSourceFile(sourceFile.fileName, result, sourceFile.languageVersion, true);
+        }
+
+        setTypeChecker(undefined);
+    }
+
+    let templates = findHtmlTemplates(sourceFile);
+
+    if (templates.length > 0) {
+        let codegenResult = generateCode(templates, result, sourceFile);
+
+        if (codegenResult.changed) {
+            changed = true;
+            result = codegenResult.code;
+            sourceFile = ts.createSourceFile(sourceFile.fileName, result, sourceFile.languageVersion, true);
+        }
+    }
+
+    return { changed, code: result, sourceFile };
+}
+
+
+const transform = (sourceFile: ts.SourceFile, program: ts.Program): TransformResult => {
+    let code = sourceFile.getFullText();
+
+    if (!mightNeedTransform(code, { patterns: PATTERNS })) {
+        return { changed: false, code, sourceFile };
+    }
+
+    let programSourceFile = program.getSourceFile(sourceFile.fileName);
+
+    if (programSourceFile) {
+        setTypeChecker(program.getTypeChecker());
+        sourceFile = programSourceFile;
+    }
+    else {
+        setTypeChecker(undefined);
+    }
+
+    return transformCode(code, sourceFile);
+};
+
+
+export type { TransformResult };
+export { createTransformer, mightNeedTransform, PATTERNS, transform };