@esportsplus/template 0.28.1 → 0.29.1

package/build/slot/cleanup.d.ts

@@ -1,4 +1,4 @@
-import { SlotGroup } from '../types.js';
+import { Element, SlotGroup } from '../types.js';
 declare const ondisconnect: (element: Element, fn: VoidFunction) => void;
 declare const remove: (...groups: SlotGroup[]) => void;
 export { ondisconnect, remove };

package/build/slot/cleanup.js

@@ -1,5 +1,4 @@
 import { CLEANUP } from '../constants.js';
-import { previousSibling } from '../utilities/node.js';
 const ondisconnect = (element, fn) => {
     (element[CLEANUP] ??= []).push(fn);
 };
@@ -13,7 +12,7 @@ const remove = (...groups) => {
                     fn();
                 }
             }
-            next = previousSibling.call(tail);
+            next = tail.previousSibling;
             tail.remove();
             if (head === tail) {
                 break;

package/build/slot/effect.js

@@ -1,8 +1,6 @@
 import { effect } from '@esportsplus/reactivity';
-import { firstChild, lastChild, nodeValue } from '../utilities/node.js';
 import { remove } from './cleanup.js';
-import raf from '../utilities/raf.js';
-import text from '../utilities/text.js';
+import { raf, text } from '../utilities.js';
 import render from './render.js';
 function read(value) {
     if (typeof value === 'function') {
@@ -60,7 +58,7 @@ class EffectSlot {
                 value = String(value);
             }
             if (textnode) {
-                nodeValue.call(textnode, value);
+                textnode.nodeValue = value;
                 if (!textnode.isConnected) {
                     anchor.after(textnode);
                 }
@@ -70,14 +68,14 @@ class EffectSlot {
             }
         }
         else {
-            let fragment = render(anchor, value), head = firstChild.call(fragment);
+            let fragment = render(anchor, value), head = fragment.firstChild;
             if (textnode?.isConnected) {
                 remove({ head: textnode, tail: textnode });
             }
             if (head) {
                 this.group = {
-                    head,
-                    tail: lastChild.call(fragment)
+                    head: head,
+                    tail: fragment.lastChild
                 };
                 anchor.after(fragment);
             }

package/build/slot/index.js

@@ -1,10 +1,4 @@
-import { EffectSlot } from './effect.js';
 import render from './render.js';
 export default (anchor, value) => {
-    if (typeof value === 'function') {
-        new EffectSlot(anchor, value);
-    }
-    else {
-        anchor.after(render(anchor, value));
-    }
+    anchor.after(render(anchor, value));
 };

package/build/slot/render.js

@@ -1,8 +1,6 @@
 import { isArray } from '@esportsplus/utilities';
 import { ARRAY_SLOT, EMPTY_FRAGMENT } from '../constants.js';
-import { cloneNode, lastChild } from '../utilities/node.js';
-import { append } from '../utilities/fragment.js';
-import text from '../utilities/text.js';
+import { clone, text } from '../utilities.js';
 export default function render(anchor, value) {
     if (value == null || value === false || value === '') {
         return EMPTY_FRAGMENT;
@@ -26,17 +24,17 @@ export default function render(anchor, value) {
         }
     }
     if (isArray(value)) {
-        let fragment = cloneNode.call(EMPTY_FRAGMENT);
+        let fragment = clone(EMPTY_FRAGMENT);
         for (let i = 0; i < n; i++) {
-            append.call(fragment, render(anchor, value[i]));
-            anchor = lastChild.call(fragment);
+            fragment.append(render(anchor, value[i]));
+            anchor = fragment.lastChild;
         }
         return fragment;
     }
     if (value instanceof NodeList) {
-        let fragment = cloneNode.call(EMPTY_FRAGMENT);
+        let fragment = clone(EMPTY_FRAGMENT);
         for (let i = 0; i < n; i++) {
-            append.call(fragment, value[i]);
+            fragment.append(value[i]);
         }
         return fragment;
     }

package/build/svg.d.ts

@@ -1,4 +1,4 @@
-import html from './html/index.js';
+import html from './html.js';
 declare const svg: typeof html & {
     sprite: (href: string) => ReturnType<typeof html>;
 };

package/build/svg.js

@@ -1,4 +1,4 @@
-import html from './html/index.js';
+import html from './html.js';
 const svg = html.bind(null);
 svg.sprite = (href) => {
     if (href[0] !== '#') {

package/build/transformer/codegen.d.ts

@@ -0,0 +1,18 @@
+import type { ReactiveCallInfo, TemplateInfo } from './ts-parser.js';
+import ts from 'typescript';
+type CodegenResult = {
+    changed: boolean;
+    code: string;
+};
+declare const addArraySlotImport: (code: string) => string;
+declare const generateCode: (templates: TemplateInfo[], originalCode: string, sourceFile: ts.SourceFile) => CodegenResult;
+declare const generateReactiveInlining: (calls: ReactiveCallInfo[], code: string, sourceFile: ts.SourceFile) => string;
+declare const getNames: () => {
+    attr: string;
+    event: string;
+    slot: string;
+};
+declare const needsArraySlotImport: (sourceFile: ts.SourceFile) => boolean;
+declare const setTypeChecker: (checker: ts.TypeChecker | undefined) => void;
+export { addArraySlotImport, generateCode, generateReactiveInlining, getNames, needsArraySlotImport, setTypeChecker };
+export type { CodegenResult };

package/build/transformer/codegen.js

@@ -0,0 +1,316 @@
+import { addImport, applyReplacementsReverse, uid } from '@esportsplus/typescript/transformer';
+import { analyzeExpression, generateAttributeBinding, generateSpreadBindings } from './type-analyzer.js';
+import ts from 'typescript';
+import parser from './parser.js';
+const ARROW_EMPTY_PARAMS = /\(\s*\)\s*=>\s*$/;
+let currentChecker, hoistedFactories = new Map(), htmlToTemplateId = new Map(), nameArraySlot = '', nameAttr = '', nameEffectSlot = '', nameEvent = '', nameSlot = '', nameTemplate = '', needsArraySlot = false, needsAttr = false, needsEffectSlot = false, needsEvent = false, needsSlot = false;
+function collectNestedTemplateReplacements(node, exprStart, sourceFile, replacements) {
+    if (isNestedHtmlTemplate(node)) {
+        replacements.push({
+            end: node.end - exprStart,
+            newText: generateNestedTemplateCode(node, sourceFile),
+            start: node.getStart() - exprStart
+        });
+    }
+    else {
+        ts.forEachChild(node, child => collectNestedTemplateReplacements(child, exprStart, sourceFile, replacements));
+    }
+}
+function generateImports() {
+    let specifiers = [];
+    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, sourceFile) {
+    let expressions = [], exprTexts = [], literals = [], 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), exprTexts, expressions, sourceFile, false);
+}
+function generateNodeBinding(anchor, exprText, exprNode, sourceFile) {
+    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 }, exprTexts, exprNodes, sourceFile, isArrowBody) {
+    if (!slots || slots.length === 0) {
+        return `${getOrCreateTemplateId(html)}()`;
+    }
+    let code = [], declarations = [], index = 0, nodes = new Map(), 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) {
+    let id = htmlToTemplateId.get(html);
+    if (!id) {
+        id = uid('tmpl');
+        hoistedFactories.set(id, html);
+        htmlToTemplateId.set(html, id);
+    }
+    return id;
+}
+function hasArraySlotImport(sourceFile) {
+    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) {
+    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) {
+    if (isNestedHtmlTemplate(node)) {
+        return true;
+    }
+    let found = false;
+    ts.forEachChild(node, child => {
+        if (!found && hasNestedTemplates(child)) {
+            found = true;
+        }
+    });
+    return found;
+}
+function isNestedHtmlTemplate(expr) {
+    return ts.isTaggedTemplateExpression(expr) && ts.isIdentifier(expr.tag) && expr.tag.text === 'html';
+}
+function isNestedTemplate(template, allTemplates) {
+    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, sourceFile) {
+    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 = [];
+    collectNestedTemplateReplacements(expr, exprStart, sourceFile, replacements);
+    return applyReplacementsReverse(expr.getText(sourceFile), replacements);
+}
+function trackBindingUsage(binding) {
+    if (binding.startsWith(nameEvent + '.')) {
+        needsEvent = true;
+    }
+    else if (binding.startsWith(nameAttr + '.')) {
+        needsAttr = true;
+    }
+}
+const addArraySlotImport = (code) => {
+    return addImport(code, '@esportsplus/template', ['ArraySlot']);
+};
+const generateCode = (templates, originalCode, sourceFile) => {
+    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 = [];
+    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(template.expressions[j], sourceFile));
+        }
+        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(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 = [];
+        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, code, sourceFile) => {
+    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) => {
+    return hasArraySlotUsage(sourceFile) && !hasArraySlotImport(sourceFile);
+};
+const setTypeChecker = (checker) => {
+    currentChecker = checker;
+};
+export { addArraySlotImport, generateCode, generateReactiveInlining, getNames, needsArraySlotImport, setTypeChecker };

package/build/transformer/index.d.ts

@@ -0,0 +1,12 @@
+import { mightNeedTransform } from '@esportsplus/typescript/transformer';
+import ts from 'typescript';
+type TransformResult = {
+    changed: boolean;
+    code: string;
+    sourceFile: ts.SourceFile;
+};
+declare const PATTERNS: string[];
+declare function createTransformer(program: ts.Program): ts.TransformerFactory<ts.SourceFile>;
+declare const transform: (sourceFile: ts.SourceFile, program: ts.Program) => TransformResult;
+export type { TransformResult };
+export { createTransformer, mightNeedTransform, PATTERNS, transform };

package/build/transformer/index.js

@@ -0,0 +1,62 @@
+import { mightNeedTransform } from '@esportsplus/typescript/transformer';
+import { addArraySlotImport, generateCode, generateReactiveInlining, needsArraySlotImport, setTypeChecker } from './codegen.js';
+import { findHtmlTemplates, findReactiveCalls } from './ts-parser.js';
+import ts from 'typescript';
+const PATTERNS = ['html`', 'html.reactive'];
+function createTransformer(program) {
+    let typeChecker = program.getTypeChecker();
+    return (_context) => {
+        return (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, sourceFile) {
+    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, program) => {
+    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 { createTransformer, mightNeedTransform, PATTERNS, transform };

package/build/transformer/parser.d.ts

@@ -0,0 +1,18 @@
+type NodePath = ('firstChild' | 'firstElementChild' | 'nextElementSibling' | 'nextSibling')[];
+declare const _default: {
+    parse: (literals: string[]) => {
+        html: string;
+        slots: ({
+            path: NodePath;
+            type: "slot";
+        } | {
+            attributes: {
+                names: string[];
+                statics: Record<string, string>;
+            };
+            path: NodePath;
+            type: "attributes";
+        })[] | null;
+    };
+};
+export default _default;