@esportsplus/template 0.16.0

package/build/compiler/codegen.js

@@ -0,0 +1,303 @@
+import { ast, uid } from '@esportsplus/typescript/compiler';
+import { pick } from '@esportsplus/utilities';
+import { analyze } from './ts-analyzer.js';
+import { DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS } from '../constants.js';
+import { ENTRYPOINT, ENTRYPOINT_REACTIVITY, NAMESPACE, TYPES } from './constants.js';
+import { extractTemplateParts } from './ts-parser.js';
+import { ts } from '@esportsplus/typescript';
+import parser from './parser.js';
+let printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed });
+function collectNestedReplacements(ctx, node, replacements) {
+    if (isNestedHtmlTemplate(node)) {
+        replacements.push({
+            end: node.end,
+            start: node.getStart(ctx.sourceFile),
+            text: generateNestedTemplateCode(ctx, node)
+        });
+        return;
+    }
+    if (isReactiveCall(node)) {
+        let call = node;
+        replacements.push({
+            end: node.end,
+            start: node.getStart(ctx.sourceFile),
+            text: `new ${NAMESPACE}.ArraySlot(
+                ${rewriteExpression(ctx, call.arguments[0])},
+                ${rewriteExpression(ctx, call.arguments[1])}
+            )`
+        });
+        return;
+    }
+    ts.forEachChild(node, child => collectNestedReplacements(ctx, child, replacements));
+}
+function discoverTemplatesInExpression(ctx, node) {
+    if (isNestedHtmlTemplate(node)) {
+        let { expressions, literals } = extractTemplateParts(node.template), parsed = parser.parse(literals);
+        getTemplateID(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, name, expr, attributes) {
+    if (name.startsWith('on') && name.length > 2) {
+        let event = name.slice(2).toLowerCase(), key = name.toLowerCase();
+        if (LIFECYCLE_EVENTS.has(key)) {
+            return `${NAMESPACE}.${key}(${element}, ${expr});`;
+        }
+        if (DIRECT_ATTACH_EVENTS.has(key)) {
+            return `${NAMESPACE}.on(${element}, '${event}', ${expr});`;
+        }
+        return `${NAMESPACE}.delegate(${element}, '${event}', ${expr});`;
+    }
+    if (name === 'class' || name === 'style') {
+        return `${NAMESPACE}.setList(${element}, '${name}', ${expr}, ${attributes});`;
+    }
+    return `${NAMESPACE}.setProperty(${element}, '${name}', ${expr});`;
+}
+function generateNestedTemplateCode(ctx, node) {
+    let { expressions, literals } = extractTemplateParts(node.template), exprTexts = [];
+    for (let i = 0, n = expressions.length; i < n; i++) {
+        exprTexts.push(rewriteExpression(ctx, expressions[i]));
+    }
+    return generateTemplateCode(ctx, parser.parse(literals), exprTexts, expressions, node);
+}
+function generateNodeBinding(ctx, anchor, exprText, exprNode) {
+    if (!exprNode) {
+        return `${NAMESPACE}.slot(${anchor}, ${exprText});`;
+    }
+    if (isNestedHtmlTemplate(exprNode)) {
+        return `${anchor}.parentNode!.insertBefore(${generateNestedTemplateCode(ctx, exprNode)}, ${anchor});`;
+    }
+    switch (analyze(exprNode, ctx.checker)) {
+        case TYPES.ArraySlot:
+            return `${anchor}.parentNode!.insertBefore(new ${NAMESPACE}.ArraySlot(${exprText}).fragment, ${anchor});`;
+        case TYPES.DocumentFragment:
+            return `${anchor}.parentNode!.insertBefore(${exprText}, ${anchor});`;
+        case TYPES.Effect:
+            return `new ${NAMESPACE}.EffectSlot(${anchor}, ${exprText});`;
+        case TYPES.Static:
+            return `${anchor}.textContent = ${exprText};`;
+        default:
+            return `${NAMESPACE}.slot(${anchor}, ${exprText});`;
+    }
+}
+function generateTemplateCode(ctx, { html, slots }, exprTexts, exprNodes, templateNode) {
+    if (!slots || slots.length === 0) {
+        return `${getTemplateID(ctx, html)}()`;
+    }
+    let attributes = new Map(), code = [], declarations = [], index = 0, isArrowBody = isArrowExpressionBody(templateNode), nodes = new Map(), root = uid('root');
+    declarations.push(`${root} = ${getTemplateID(ctx, 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 ancestor = root, start = 0;
+        for (let j = path.length - 1; j >= 0; j--) {
+            let prefix = path.slice(0, j).join('.');
+            if (nodes.has(prefix)) {
+                ancestor = nodes.get(prefix);
+                start = j;
+                break;
+            }
+        }
+        let name = uid('element'), segments = path.slice(start), value = `${ancestor}.${segments.join('!.')}`;
+        if (ancestor === root && segments[0] === 'firstChild') {
+            value = value.replace(`${ancestor}.firstChild!`, `(${root}.firstChild! as ${NAMESPACE}.Element)`);
+        }
+        declarations.push(`${name} = ${value} as ${NAMESPACE}.Element`);
+        nodes.set(key, name);
+    }
+    code.push(isArrowBody ? '{' : `(() => {`);
+    for (let i = 0, n = slots.length; i < n; i++) {
+        let element = slots[i].path.length === 0
+            ? root
+            : (nodes.get(slots[i].path.join('.')) || root), slot = slots[i];
+        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 === TYPES.Attributes) {
+                    let exprNode = exprNodes[index];
+                    if (exprNode && ts.isObjectLiteralExpression(exprNode)) {
+                        let canExpand = true, props = exprNode.properties;
+                        for (let k = 0, p = props.length; k < p; k++) {
+                            let prop = props[k];
+                            if (ts.isSpreadAssignment(prop) ||
+                                (ts.isPropertyAssignment(prop) && ts.isComputedPropertyName(prop.name)) ||
+                                (ts.isShorthandPropertyAssignment(prop) && prop.objectAssignmentInitializer)) {
+                                canExpand = false;
+                                break;
+                            }
+                        }
+                        if (canExpand) {
+                            for (let k = 0, p = props.length; k < p; k++) {
+                                let prop = props[k];
+                                if (ts.isPropertyAssignment(prop)) {
+                                    let propName = ts.isIdentifier(prop.name)
+                                        ? prop.name.text
+                                        : ts.isStringLiteral(prop.name)
+                                            ? prop.name.text
+                                            : null;
+                                    if (propName) {
+                                        code.push(generateAttributeBinding(element, propName, rewriteExpression(ctx, prop.initializer), getAttributes(declarations, i, propName, slot, attributes)));
+                                    }
+                                }
+                                else if (ts.isShorthandPropertyAssignment(prop)) {
+                                    let propName = prop.name.text;
+                                    code.push(generateAttributeBinding(element, propName, propName, getAttributes(declarations, i, propName, slot, attributes)));
+                                }
+                                else if (ts.isMethodDeclaration(prop) && ts.isIdentifier(prop.name)) {
+                                    let propName = prop.name.text;
+                                    code.push(generateAttributeBinding(element, propName, printer.printNode(ts.EmitHint.Expression, prop, ctx.sourceFile), getAttributes(declarations, i, propName, slot, attributes)));
+                                }
+                            }
+                        }
+                        else {
+                            code.push(`${NAMESPACE}.setProperties(
+                                    ${element}, ${exprTexts[index] || 'undefined'},
+                                    ${getAttributes(declarations, i, 'attributes', slot, attributes)}
+                                );`);
+                        }
+                    }
+                    else {
+                        code.push(`${NAMESPACE}.setProperties(
+                                ${element}, ${exprTexts[index] || 'undefined'},
+                                ${getAttributes(declarations, i, 'attributes', slot, attributes)}
+                            );`);
+                    }
+                    index++;
+                }
+                else {
+                    code.push(generateAttributeBinding(element, name, exprTexts[index++] || 'undefined', getAttributes(declarations, i, name, slot, attributes)));
+                }
+            }
+        }
+        else {
+            code.push(generateNodeBinding(ctx, element, exprTexts[index] || 'undefined', exprNodes[index]));
+            index++;
+        }
+    }
+    code.splice(1, 0, `let ${declarations.join(',\n')};`);
+    code.push(`return ${root};`);
+    code.push(isArrowBody ? `}` : `})()`);
+    return code.join('\n');
+}
+function getAttributes(declarations, i, name, slot, attributes) {
+    if (name !== 'class' && name !== 'attributes' && name !== 'style') {
+        return undefined;
+    }
+    let attribute = attributes.get(i);
+    if (!attribute) {
+        declarations.push(`${attribute = uid('attributes')} = ${JSON.stringify(pick(slot.attributes.static, ['class', 'style']))}`);
+        attributes.set(i, attribute);
+    }
+    return attribute;
+}
+function getTemplateID(ctx, html) {
+    let id = ctx.templates.get(html);
+    if (!id) {
+        id = uid('template');
+        ctx.templates.set(html, id);
+    }
+    return id;
+}
+function isArrowExpressionBody(node) {
+    return ts.isArrowFunction(node.parent) && node.parent.body === node;
+}
+function isNestedHtmlTemplate(expr) {
+    return ts.isTaggedTemplateExpression(expr) && ts.isIdentifier(expr.tag) && expr.tag.text === ENTRYPOINT;
+}
+function isReactiveCall(expr) {
+    return (ts.isCallExpression(expr) &&
+        ts.isPropertyAccessExpression(expr.expression) &&
+        ts.isIdentifier(expr.expression.expression) &&
+        expr.expression.expression.text === ENTRYPOINT &&
+        expr.expression.name.text === ENTRYPOINT_REACTIVITY);
+}
+const generateCode = (templates, sourceFile, checker, callRanges = []) => {
+    let result = {
+        prepend: [],
+        replacements: [],
+        templates: new Map()
+    };
+    if (templates.length === 0) {
+        return result;
+    }
+    let ranges = [...callRanges];
+    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(sourceFile) });
+        }
+    }
+    let root = templates.filter(t => !ast.inRange(ranges, t.node.getStart(sourceFile), t.node.end));
+    if (root.length === 0) {
+        return result;
+    }
+    let ctx = {
+        checker,
+        sourceFile,
+        templates: result.templates
+    };
+    for (let i = 0, n = root.length; i < n; i++) {
+        let exprTexts = [], parsed = parser.parse(root[i].literals), template = root[i];
+        for (let j = 0, m = template.expressions.length; j < m; j++) {
+            exprTexts.push(rewriteExpression(ctx, template.expressions[j]));
+        }
+        if (isArrowExpressionBody(template.node) &&
+            template.node.parent.parameters.length === 0 &&
+            (!parsed.slots || parsed.slots.length === 0)) {
+            let code = getTemplateID(ctx, parsed.html);
+            result.replacements.push({
+                generate: () => code,
+                node: template.node
+            });
+        }
+        else {
+            let code = generateTemplateCode(ctx, parsed, exprTexts, template.expressions, template.node);
+            result.replacements.push({
+                generate: () => code,
+                node: template.node
+            });
+        }
+    }
+    for (let i = 0, n = templates.length; i < n; i++) {
+        getTemplateID(ctx, parser.parse(templates[i].literals).html);
+        for (let j = 0, m = templates[i].expressions.length; j < m; j++) {
+            discoverTemplatesInExpression(ctx, templates[i].expressions[j]);
+        }
+    }
+    for (let [html, id] of ctx.templates) {
+        result.prepend.push(`const ${id} = ${NAMESPACE}.template(\`${html}\`);`);
+    }
+    return result;
+};
+const rewriteExpression = (ctx, expr) => {
+    if (isNestedHtmlTemplate(expr)) {
+        return generateNestedTemplateCode(ctx, expr);
+    }
+    if (isReactiveCall(expr)) {
+        return `${rewriteExpression(ctx, expr.arguments[0])}, ${rewriteExpression(ctx, expr.arguments[1])}`;
+    }
+    if (!ast.test(expr, n => isNestedHtmlTemplate(n) || isReactiveCall(n))) {
+        return printer.printNode(ts.EmitHint.Expression, expr, ctx.sourceFile);
+    }
+    let replacements = [], start = expr.getStart(ctx.sourceFile), text = expr.getText(ctx.sourceFile);
+    ts.forEachChild(expr, child => collectNestedReplacements(ctx, child, replacements));
+    replacements.sort((a, b) => b.start - a.start);
+    for (let i = 0, n = replacements.length; i < n; i++) {
+        let r = replacements[i];
+        text = text.slice(0, r.start - start) + r.text + text.slice(r.end - start);
+    }
+    return text;
+};
+export { generateCode, printer, rewriteExpression };

package/build/compiler/constants.d.ts

@@ -0,0 +1,16 @@
+declare const ENTRYPOINT = "html";
+declare const ENTRYPOINT_REACTIVITY = "reactive";
+declare const NAMESPACE: string;
+declare 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, TYPES };
+export { PACKAGE_NAME } from '../constants.js';

package/build/compiler/constants.js

@@ -0,0 +1,19 @@
+import { uid } from '@esportsplus/typescript/compiler';
+const ENTRYPOINT = 'html';
+const ENTRYPOINT_REACTIVITY = 'reactive';
+const NAMESPACE = uid('template');
+var TYPES;
+(function (TYPES) {
+    TYPES["ArraySlot"] = "array-slot";
+    TYPES["Attributes"] = "attributes";
+    TYPES["Attribute"] = "attribute";
+    TYPES["DocumentFragment"] = "document-fragment";
+    TYPES["Effect"] = "effect";
+    TYPES["Node"] = "node";
+    TYPES["Primitive"] = "primitive";
+    TYPES["Static"] = "static";
+    TYPES["Unknown"] = "unknown";
+})(TYPES || (TYPES = {}));
+;
+export { ENTRYPOINT, ENTRYPOINT_REACTIVITY, NAMESPACE, TYPES };
+export { PACKAGE_NAME } from '../constants.js';

package/build/compiler/index.d.ts

@@ -0,0 +1,14 @@
+import type { ImportIntent, ReplacementIntent, TransformContext } from '@esportsplus/typescript/compiler';
+declare const _default: {
+    patterns: string[];
+    transform: (ctx: TransformContext) => {
+        imports?: undefined;
+        prepend?: undefined;
+        replacements?: undefined;
+    } | {
+        imports: ImportIntent[];
+        prepend: string[];
+        replacements: ReplacementIntent[];
+    };
+};
+export default _default;

package/build/compiler/index.js

@@ -0,0 +1,61 @@
+import { ts } from '@esportsplus/typescript';
+import { ast } from '@esportsplus/typescript/compiler';
+import { ENTRYPOINT, ENTRYPOINT_REACTIVITY, NAMESPACE, PACKAGE_NAME } from './constants.js';
+import { generateCode, printer, rewriteExpression } from './codegen.js';
+import { findHtmlTemplates, findReactiveCalls } from './ts-parser.js';
+export default {
+    patterns: [
+        `${ENTRYPOINT}\``,
+        `${ENTRYPOINT}.${ENTRYPOINT_REACTIVITY}`
+    ],
+    transform: (ctx) => {
+        let callRanges = [], callTemplates = new Map(), imports = [], prepend = [], ranges = [], remove = [], replacements = [], templates = findHtmlTemplates(ctx.sourceFile, ctx.checker);
+        for (let i = 0, n = templates.length; i < n; i++) {
+            ranges.push({
+                end: templates[i].end,
+                start: templates[i].start
+            });
+        }
+        let calls = findReactiveCalls(ctx.sourceFile, ctx.checker);
+        for (let i = 0, n = calls.length; i < n; i++) {
+            let call = calls[i];
+            if (ast.inRange(ranges, call.start, call.end)) {
+                continue;
+            }
+            callRanges.push({
+                end: call.callbackArg.end,
+                start: call.callbackArg.getStart(ctx.sourceFile)
+            });
+            let rewrittenCallback = rewriteExpression({
+                checker: ctx.checker,
+                sourceFile: ctx.sourceFile,
+                templates: callTemplates
+            }, call.callbackArg);
+            replacements.push({
+                generate: (sourceFile) => `new ${NAMESPACE}.ArraySlot(
+                    ${printer.printNode(ts.EmitHint.Expression, call.arrayArg, sourceFile)},
+                    ${rewrittenCallback}
+                )`,
+                node: call.node
+            });
+        }
+        for (let [html, id] of callTemplates) {
+            prepend.push(`const ${id} = ${NAMESPACE}.template(\`${html}\`);`);
+        }
+        if (templates.length > 0) {
+            let result = generateCode(templates, ctx.sourceFile, ctx.checker, callRanges);
+            prepend.push(...result.prepend);
+            replacements.push(...result.replacements);
+            remove.push(ENTRYPOINT);
+        }
+        if (replacements.length === 0 && prepend.length === 0) {
+            return {};
+        }
+        imports.push({
+            namespace: NAMESPACE,
+            package: PACKAGE_NAME,
+            remove: remove
+        });
+        return { imports, prepend, replacements };
+    }
+};

package/build/compiler/parser.d.ts

@@ -0,0 +1,19 @@
+import { TYPES } from './constants.js';
+type NodePath = ('firstChild' | 'firstElementChild' | 'nextElementSibling' | 'nextSibling')[];
+declare const _default: {
+    parse: (literals: string[]) => {
+        html: string;
+        slots: ({
+            path: NodePath;
+            type: TYPES.Node;
+        } | {
+            attributes: {
+                names: string[];
+                static: Record<string, string>;
+            };
+            path: NodePath;
+            type: TYPES.Attribute;
+        })[] | null;
+    };
+};
+export default _default;

package/build/compiler/parser.js

@@ -0,0 +1,164 @@
+import { ATTRIBUTE_DELIMITERS, SLOT_HTML } from '../constants.js';
+import { PACKAGE_NAME, TYPES } from './constants.js';
+const NODE_CLOSING = 1;
+const NODE_COMMENT = 2;
+const NODE_ELEMENT = 3;
+const NODE_SLOT = 4;
+const NODE_VOID = 5;
+const NODE_WHITELIST = {
+    '!': NODE_COMMENT,
+    '/': NODE_CLOSING
+};
+const REGEX_CLEANUP_WHITESPACE = /\s+/g;
+const REGEX_EMPTY_ATTRIBUTES = /\s+[\w:-]+\s*=\s*["']\s*["']|\s+(?=>)/g;
+const REGEX_EMPTY_TEXT_NODES = /(>|}|\s)\s+(<|{|\s)/g;
+const REGEX_EVENTS = /(?:\s*on[\w-:]+\s*=(?:\s*["'][^"']*["'])*)/g;
+const REGEX_SLOT_ATTRIBUTES = /<[\w-]+([^><]*{{\$}}[^><]*)>/g;
+const REGEX_SLOT_NODES = /<([\w-]+|[\/!])(?:([^><]*{{\$}}[^><]*)|(?:[^><]*))?>|{{\$}}/g;
+const SLOT_MARKER = '{{$}}';
+[
+    'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
+    'keygen', 'link', 'menuitem', 'meta', 'param', 'source', 'track', 'wbr',
+    'animate', 'animateMotion', 'animateTransform', 'circle', 'ellipse',
+    'feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix',
+    'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood',
+    'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage', 'feMergeNode',
+    'feMorphology', 'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence',
+    'hatch', 'hatchpath', 'image', 'line', 'mpath', 'path', 'polygon', 'polyline',
+    'rect', 'set', 'stop', 'use', 'view'
+].map(tag => NODE_WHITELIST[tag] = NODE_VOID);
+function methods(children, copy, first, next) {
+    let length = copy.length, result = new Array(length + 1 + children);
+    for (let i = 0, n = length; i < n; i++) {
+        result[i] = copy[i];
+    }
+    result[length] = first;
+    for (let i = 0, n = children; i < n; i++) {
+        result[length + 1 + i] = next;
+    }
+    return result;
+}
+const parse = (literals) => {
+    let html = literals
+        .join(SLOT_MARKER)
+        .replace(REGEX_EMPTY_TEXT_NODES, '$1$2')
+        .replace(REGEX_CLEANUP_WHITESPACE, ' ')
+        .trim(), n = literals.length - 1;
+    if (n === 0) {
+        return { html, slots: null };
+    }
+    let attributes = {}, buffer = '', index = 0, level = 0, levels = [{ children: 0, elements: 0, path: [] }], parsed = html.split(SLOT_MARKER), slot = 0, slots = [];
+    {
+        let attribute = '', buffer = '', char = '', quote = '';
+        for (let match of html.matchAll(REGEX_SLOT_ATTRIBUTES)) {
+            let found = match[1];
+            if (attributes[found]) {
+                continue;
+            }
+            let { names, static: s } = attributes[found] = { names: [], static: {} };
+            for (let i = 0, n = found.length; i < n; i++) {
+                char = found[i];
+                if (char === ' ') {
+                    if (attribute && attribute in ATTRIBUTE_DELIMITERS) {
+                        s[attribute] ??= '';
+                        s[attribute] += `${buffer && s[attribute] ? ATTRIBUTE_DELIMITERS[attribute] : ''}${buffer}`;
+                    }
+                    buffer = '';
+                }
+                else if (char === '=') {
+                    attribute = buffer;
+                    buffer = '';
+                }
+                else if (char === '"' || char === "'") {
+                    if (!attribute) {
+                        continue;
+                    }
+                    else if (!quote) {
+                        quote = char;
+                    }
+                    else if (quote === char) {
+                        if (attribute && attribute in ATTRIBUTE_DELIMITERS) {
+                            s[attribute] ??= '';
+                            s[attribute] += `${buffer && s[attribute] ? ATTRIBUTE_DELIMITERS[attribute] : ''}${buffer}`;
+                        }
+                        attribute = '';
+                        buffer = '';
+                        quote = '';
+                    }
+                }
+                else if (char === '{' && char !== buffer) {
+                    buffer = char;
+                }
+                else {
+                    buffer += char;
+                    if (buffer === SLOT_MARKER) {
+                        buffer = '';
+                        if (attribute) {
+                            names.push(attribute);
+                            if (!quote) {
+                                attribute = '';
+                            }
+                        }
+                        else {
+                            names.push(TYPES.Attributes);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    {
+        for (let match of html.matchAll(REGEX_SLOT_NODES)) {
+            let parent = levels[level], type = match[1] === undefined ? NODE_SLOT : (NODE_WHITELIST[match[1].toLowerCase()] ||
+                (match[0].at(-2) === '/' ? NODE_VOID : NODE_ELEMENT));
+            if ((match.index || 1) - 1 > index) {
+                parent.children++;
+            }
+            if (type === NODE_ELEMENT || type === NODE_VOID) {
+                let attr = match[2], path = parent.path.length
+                    ? methods(parent.elements, parent.path, 'firstElementChild', 'nextElementSibling')
+                    : methods(parent.children, [], 'firstChild', 'nextSibling');
+                if (attr) {
+                    let attrs = attributes[attr];
+                    if (!attrs) {
+                        throw new Error(`${PACKAGE_NAME}: attribute metadata could not be found for '${attr}'`);
+                    }
+                    slots.push({ attributes: attrs, path, type: TYPES.Attribute });
+                    for (let i = 0, n = attrs.names.length; i < n; i++) {
+                        buffer += parsed[slot++];
+                    }
+                }
+                if (type === NODE_ELEMENT) {
+                    levels[++level] = { children: 0, elements: 0, path };
+                }
+                parent.elements++;
+            }
+            else if (type === NODE_SLOT) {
+                buffer += parsed[slot++] + SLOT_HTML;
+                slots.push({
+                    path: methods(parent.children, parent.path, 'firstChild', 'nextSibling'),
+                    type: TYPES.Node
+                });
+            }
+            if (n === slot) {
+                buffer += parsed[slot];
+                break;
+            }
+            if (type === NODE_CLOSING) {
+                level--;
+            }
+            else {
+                parent.children++;
+            }
+            index = (match.index || 0) + match[0].length;
+        }
+    }
+    buffer = buffer
+        .replace(REGEX_EVENTS, '')
+        .replace(REGEX_EMPTY_ATTRIBUTES, '');
+    return {
+        html: buffer,
+        slots: slots.length ? slots : null
+    };
+};
+export default { parse };

package/build/compiler/plugins/tsc.d.ts

@@ -0,0 +1,3 @@
+import { plugin } from '@esportsplus/typescript/compiler';
+declare const _default: ReturnType<typeof plugin.tsc>;
+export default _default;

package/build/compiler/plugins/tsc.js

@@ -0,0 +1,4 @@
+import { plugin } from '@esportsplus/typescript/compiler';
+import reactivity from '@esportsplus/reactivity/compiler';
+import template from '../index.js';
+export default plugin.tsc([reactivity, template]);

package/build/compiler/plugins/vite.d.ts

@@ -0,0 +1,13 @@
+declare const _default: ({ root }?: {
+    root?: string;
+}) => {
+    configResolved: (config: unknown) => void;
+    enforce: "pre";
+    name: string;
+    transform: (code: string, id: string) => {
+        code: string;
+        map: null;
+    } | null;
+    watchChange: (id: string) => void;
+};
+export default _default;

package/build/compiler/plugins/vite.js

@@ -0,0 +1,8 @@
+import { plugin } from '@esportsplus/typescript/compiler';
+import { PACKAGE_NAME } from '../constants.js';
+import reactivity from '@esportsplus/reactivity/compiler';
+import template from '../index.js';
+export default plugin.vite({
+    name: PACKAGE_NAME,
+    plugins: [reactivity, template]
+});

package/build/compiler/ts-analyzer.d.ts

@@ -0,0 +1,4 @@
+import { ts } from '@esportsplus/typescript';
+import { TYPES } from './constants.js';
+declare const analyze: (expr: ts.Expression, checker?: ts.TypeChecker) => TYPES;
+export { analyze };