@esportsplus/template 0.28.1 → 0.29.1

package/build/transformer/parser.js

@@ -0,0 +1,166 @@
+const SLOT_HTML = '<!--$-->';
+const ATTRIBUTE_DELIMITERS = {
+    class: ' ',
+    style: ';'
+};
+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,
+    'area': NODE_VOID,
+    'base': NODE_VOID,
+    'br': NODE_VOID,
+    'col': NODE_VOID,
+    'embed': NODE_VOID,
+    'hr': NODE_VOID,
+    'img': NODE_VOID,
+    'input': NODE_VOID,
+    'keygen': NODE_VOID,
+    'link': NODE_VOID,
+    'menuitem': NODE_VOID,
+    'meta': NODE_VOID,
+    'param': NODE_VOID,
+    'source': NODE_VOID,
+    'track': NODE_VOID,
+    'wbr': NODE_VOID
+};
+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 = '{{$}}';
+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')
+        .trim(), n = literals.length - 1;
+    if (n === 0) {
+        return { html, slots: null };
+    }
+    let attributes = {}, buffer = '', events = false, 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, statics } = attributes[found] = { names: [], statics: {} };
+            for (let i = 0, n = found.length; i < n; i++) {
+                char = found[i];
+                if (char === ' ') {
+                    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) {
+                            statics[attribute] ??= '';
+                            statics[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('spread');
+                        }
+                    }
+                    else if (buffer === 'on') {
+                        events = true;
+                    }
+                }
+            }
+        }
+    }
+    {
+        for (let match of html.matchAll(REGEX_SLOT_NODES)) {
+            let parent = levels[level], type = match[1] === undefined ? NODE_SLOT : (NODE_WHITELIST[match[1].toLowerCase()] || 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(`@esportsplus/template: attribute metadata could not be found for '${attr}'`);
+                    }
+                    slots.push({ attributes: attrs, path, type: 'attributes' });
+                    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: 'slot' });
+            }
+            if (n === slot) {
+                buffer += parsed[slot];
+                break;
+            }
+            if (type === NODE_CLOSING) {
+                level--;
+            }
+            else {
+                parent.children++;
+            }
+            index = (match.index || 0) + match[0].length;
+        }
+    }
+    if (events) {
+        buffer = buffer.replace(REGEX_EVENTS, '');
+    }
+    buffer = buffer.replace(REGEX_EMPTY_ATTRIBUTES, '');
+    return {
+        html: buffer,
+        slots: slots.length ? slots : null
+    };
+};
+export default { parse };

package/build/transformer/plugins/esbuild.d.ts

@@ -0,0 +1,5 @@
+import type { Plugin } from 'esbuild';
+declare const _default: (options?: {
+    root?: string;
+}) => Plugin;
+export default _default;

package/build/transformer/plugins/esbuild.js

@@ -0,0 +1,35 @@
+import { mightNeedTransform, PATTERNS, transform } from '../index.js';
+import { program, TRANSFORM_PATTERN } from '@esportsplus/typescript/transformer';
+import fs from 'fs';
+import ts from 'typescript';
+export default (options) => {
+    let root = options?.root ?? process.cwd();
+    return {
+        name: '@esportsplus/template/plugin-esbuild',
+        setup(build) {
+            build.onLoad({ filter: TRANSFORM_PATTERN }, async (args) => {
+                let code = await fs.promises.readFile(args.path, 'utf8');
+                if (!mightNeedTransform(code, { patterns: PATTERNS })) {
+                    return null;
+                }
+                try {
+                    let sourceFile = ts.createSourceFile(args.path, code, ts.ScriptTarget.Latest, true), result = transform(sourceFile, program.get(root));
+                    if (!result.changed) {
+                        return null;
+                    }
+                    return {
+                        contents: result.code,
+                        loader: args.path.endsWith('x') ? 'tsx' : 'ts'
+                    };
+                }
+                catch (error) {
+                    console.error(`@esportsplus/template: Error transforming ${args.path}:`, error);
+                    return null;
+                }
+            });
+            build.onEnd(() => {
+                program.delete(root);
+            });
+        }
+    };
+};

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

@@ -0,0 +1,3 @@
+import ts from 'typescript';
+declare const _default: (program: ts.Program) => ts.TransformerFactory<ts.SourceFile>;
+export default _default;

package/build/transformer/plugins/tsc.js

@@ -0,0 +1,4 @@
+import { createTransformer } from '../index.js';
+export default (program) => {
+    return createTransformer(program);
+};

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

@@ -0,0 +1,5 @@
+import type { Plugin } from 'vite';
+declare const _default: (options?: {
+    root?: string;
+}) => Plugin;
+export default _default;

package/build/transformer/plugins/vite.js

@@ -0,0 +1,37 @@
+import { mightNeedTransform, PATTERNS, transform } from '../index.js';
+import { program, TRANSFORM_PATTERN } from '@esportsplus/typescript/transformer';
+import ts from 'typescript';
+export default (options) => {
+    let root;
+    return {
+        enforce: 'pre',
+        name: '@esportsplus/template/plugin-vite',
+        configResolved(config) {
+            root = options?.root ?? config.root;
+        },
+        transform(code, id) {
+            if (!TRANSFORM_PATTERN.test(id) || id.includes('node_modules')) {
+                return null;
+            }
+            if (!mightNeedTransform(code, { patterns: PATTERNS })) {
+                return null;
+            }
+            try {
+                let sourceFile = ts.createSourceFile(id, code, ts.ScriptTarget.Latest, true), result = transform(sourceFile, program.get(root));
+                if (!result.changed) {
+                    return null;
+                }
+                return { code: result.code, map: null };
+            }
+            catch (error) {
+                console.error(`@esportsplus/template: Error transforming ${id}:`, error);
+                return null;
+            }
+        },
+        watchChange(id) {
+            if (TRANSFORM_PATTERN.test(id)) {
+                program.delete(root);
+            }
+        }
+    };
+};

package/build/transformer/ts-parser.d.ts

@@ -0,0 +1,21 @@
+import ts from 'typescript';
+type ReactiveCallInfo = {
+    arrayArg: ts.Expression;
+    callbackArg: ts.Expression;
+    end: number;
+    node: ts.CallExpression;
+    start: number;
+};
+type TemplateInfo = {
+    depth: number;
+    end: number;
+    expressions: ts.Expression[];
+    literals: string[];
+    node: ts.TaggedTemplateExpression;
+    start: number;
+};
+declare const findHtmlTemplates: (sourceFile: ts.SourceFile) => TemplateInfo[];
+declare const findReactiveCalls: (sourceFile: ts.SourceFile) => ReactiveCallInfo[];
+declare const getTemplateExpressions: (info: TemplateInfo, sourceFile: ts.SourceFile) => string[];
+export { findHtmlTemplates, findReactiveCalls, getTemplateExpressions };
+export type { ReactiveCallInfo, TemplateInfo };

package/build/transformer/ts-parser.js

@@ -0,0 +1,72 @@
+import ts from 'typescript';
+function extractTemplateInfo(node, depth) {
+    let expressions = [], 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 span = template.templateSpans[i];
+            expressions.push(span.expression);
+            literals.push(span.literal.text);
+        }
+    }
+    return {
+        depth,
+        end: node.end,
+        expressions,
+        literals,
+        node,
+        start: node.getStart()
+    };
+}
+function isFunctionNode(node) {
+    return (ts.isArrowFunction(node) ||
+        ts.isFunctionDeclaration(node) ||
+        ts.isFunctionExpression(node) ||
+        ts.isMethodDeclaration(node));
+}
+function visitReactiveCalls(node, calls) {
+    if (ts.isCallExpression(node) &&
+        ts.isPropertyAccessExpression(node.expression) &&
+        ts.isIdentifier(node.expression.expression) &&
+        node.expression.expression.text === 'html' &&
+        node.expression.name.text === 'reactive' &&
+        node.arguments.length === 2) {
+        calls.push({
+            arrayArg: node.arguments[0],
+            callbackArg: node.arguments[1],
+            end: node.end,
+            node,
+            start: node.getStart()
+        });
+    }
+    ts.forEachChild(node, child => visitReactiveCalls(child, calls));
+}
+function visitTemplates(node, depth, templates) {
+    let nextDepth = isFunctionNode(node) ? depth + 1 : depth;
+    if (ts.isTaggedTemplateExpression(node) && ts.isIdentifier(node.tag) && node.tag.text === 'html') {
+        templates.push(extractTemplateInfo(node, depth));
+    }
+    ts.forEachChild(node, child => visitTemplates(child, nextDepth, templates));
+}
+const findHtmlTemplates = (sourceFile) => {
+    let templates = [];
+    visitTemplates(sourceFile, 0, templates);
+    templates.sort((a, b) => a.depth !== b.depth ? b.depth - a.depth : a.start - b.start);
+    return templates;
+};
+const findReactiveCalls = (sourceFile) => {
+    let calls = [];
+    visitReactiveCalls(sourceFile, calls);
+    return calls;
+};
+const getTemplateExpressions = (info, sourceFile) => {
+    let exprs = [];
+    for (let i = 0, n = info.expressions.length; i < n; i++) {
+        exprs.push(info.expressions[i].getText(sourceFile));
+    }
+    return exprs;
+};
+export { findHtmlTemplates, findReactiveCalls, getTemplateExpressions };

package/build/transformer/type-analyzer.d.ts

@@ -0,0 +1,7 @@
+import ts from 'typescript';
+type SlotType = 'array-slot' | 'document-fragment' | 'effect' | 'node' | 'primitive' | 'static' | 'unknown';
+declare const analyzeExpression: (expr: ts.Expression, checker?: ts.TypeChecker) => SlotType;
+declare const generateAttributeBinding: (elementVar: string, name: string, expr: string, staticValue: string) => string;
+declare const generateSpreadBindings: (expr: ts.Expression, exprCode: string, elementVar: string, sourceFile: ts.SourceFile, checker?: ts.TypeChecker) => string[];
+export { analyzeExpression, generateAttributeBinding, generateSpreadBindings };
+export type { SlotType };

package/build/transformer/type-analyzer.js

@@ -0,0 +1,230 @@
+import { getNames } from './codegen.js';
+import { DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS } from '../event/constants.js';
+import ts from 'typescript';
+function analyzeSpread(expr, checker) {
+    while (ts.isParenthesizedExpression(expr)) {
+        expr = expr.expression;
+    }
+    if (ts.isObjectLiteralExpression(expr)) {
+        let keys = [];
+        for (let i = 0, n = expr.properties.length; i < n; i++) {
+            let prop = expr.properties[i];
+            if (ts.isPropertyAssignment(prop)) {
+                if (ts.isIdentifier(prop.name) || ts.isStringLiteral(prop.name)) {
+                    keys.push(prop.name.text);
+                }
+            }
+            else if (ts.isShorthandPropertyAssignment(prop)) {
+                keys.push(prop.name.text);
+            }
+            else if (ts.isSpreadAssignment(prop)) {
+                return { canUnpack: false, keys: [] };
+            }
+        }
+        return { canUnpack: true, keys };
+    }
+    if (checker && (ts.isIdentifier(expr) || ts.isPropertyAccessExpression(expr))) {
+        try {
+            let keys = extractTypePropertyKeys(checker.getTypeAtLocation(expr));
+            if (keys.length > 0) {
+                return { canUnpack: true, keys };
+            }
+        }
+        catch {
+        }
+    }
+    return { canUnpack: false, keys: [] };
+}
+function extractTypePropertyKeys(type) {
+    let keys = [], props = type.getProperties();
+    for (let i = 0, n = props.length; i < n; i++) {
+        let name = props[i].getName();
+        if (name.startsWith('__') || name.startsWith('[')) {
+            continue;
+        }
+        keys.push(name);
+    }
+    return keys;
+}
+function getObjectPropertyValue(expr, key, sourceFile) {
+    for (let i = 0, n = expr.properties.length; i < n; i++) {
+        let prop = expr.properties[i];
+        if (ts.isPropertyAssignment(prop)) {
+            let name = ts.isIdentifier(prop.name)
+                ? prop.name.text
+                : ts.isStringLiteral(prop.name) ? prop.name.text : null;
+            if (name === key) {
+                return prop.initializer.getText(sourceFile);
+            }
+        }
+        else if (ts.isShorthandPropertyAssignment(prop) && prop.name.text === key) {
+            return prop.name.text;
+        }
+    }
+    return null;
+}
+function inferSlotType(expr, ctx) {
+    while (ts.isParenthesizedExpression(expr)) {
+        expr = expr.expression;
+    }
+    if (ts.isArrowFunction(expr) || ts.isFunctionExpression(expr)) {
+        return 'effect';
+    }
+    if (ts.isCallExpression(expr) &&
+        ts.isPropertyAccessExpression(expr.expression) &&
+        ts.isIdentifier(expr.expression.expression) &&
+        expr.expression.expression.text === 'html' &&
+        expr.expression.name.text === 'reactive') {
+        return 'array-slot';
+    }
+    if (ts.isTaggedTemplateExpression(expr) && ts.isIdentifier(expr.tag) && expr.tag.text === 'html') {
+        return 'document-fragment';
+    }
+    if (ts.isArrayLiteralExpression(expr)) {
+        return 'array-slot';
+    }
+    if (ts.isStringLiteral(expr) || ts.isNoSubstitutionTemplateLiteral(expr)) {
+        return 'static';
+    }
+    if (ts.isNumericLiteral(expr)) {
+        return 'static';
+    }
+    if (expr.kind === ts.SyntaxKind.TrueKeyword || expr.kind === ts.SyntaxKind.FalseKeyword) {
+        return 'static';
+    }
+    if (expr.kind === ts.SyntaxKind.NullKeyword || expr.kind === ts.SyntaxKind.UndefinedKeyword) {
+        return 'static';
+    }
+    if (ts.isTemplateExpression(expr)) {
+        return 'primitive';
+    }
+    if (ts.isConditionalExpression(expr)) {
+        let whenFalse = inferSlotType(expr.whenFalse, ctx), whenTrue = inferSlotType(expr.whenTrue, ctx);
+        if (whenTrue === whenFalse) {
+            return whenTrue;
+        }
+        if (whenTrue === 'effect' || whenFalse === 'effect') {
+            return 'effect';
+        }
+        return 'unknown';
+    }
+    if (ctx?.checker) {
+        let checker = ctx.checker;
+        if (ts.isIdentifier(expr)) {
+            try {
+                let type = checker.getTypeAtLocation(expr);
+                if (isTypeFunction(type, checker)) {
+                    return 'effect';
+                }
+                if (isTypeArray(type, checker)) {
+                    return 'array-slot';
+                }
+            }
+            catch {
+            }
+        }
+        if (ts.isPropertyAccessExpression(expr)) {
+            try {
+                let type = checker.getTypeAtLocation(expr);
+                if (isTypeFunction(type, checker)) {
+                    return 'effect';
+                }
+                if (isTypeArray(type, checker)) {
+                    return 'array-slot';
+                }
+            }
+            catch {
+            }
+        }
+        if (ts.isCallExpression(expr)) {
+            try {
+                let type = checker.getTypeAtLocation(expr);
+                if (isTypeFunction(type, checker)) {
+                    return 'effect';
+                }
+                if (isTypeArray(type, checker)) {
+                    return 'array-slot';
+                }
+            }
+            catch {
+            }
+        }
+    }
+    return 'unknown';
+}
+function isTypeArray(type, checker) {
+    let typeStr = checker.typeToString(type);
+    if (typeStr.endsWith('[]') || typeStr.startsWith('Array<') || typeStr.startsWith('ReactiveArray<')) {
+        return true;
+    }
+    let symbol = type.getSymbol();
+    if (symbol && (symbol.getName() === 'Array' || symbol.getName() === 'ReactiveArray')) {
+        return true;
+    }
+    return false;
+}
+function isTypeFunction(type, checker) {
+    if (type.getCallSignatures().length > 0) {
+        return true;
+    }
+    if (type.isUnion()) {
+        for (let i = 0, n = type.types.length; i < n; i++) {
+            if (isTypeFunction(type.types[i], checker)) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+const analyzeExpression = (expr, checker) => {
+    return inferSlotType(expr, checker ? { checker } : undefined);
+};
+const generateAttributeBinding = (elementVar, name, expr, staticValue) => {
+    let n = getNames();
+    if (name.startsWith('on') && name.length > 2) {
+        let event = name.slice(2).toLowerCase(), key = name.toLowerCase();
+        if (LIFECYCLE_EVENTS.has(key)) {
+            return `${n.event}.${key}(${elementVar}, ${expr});`;
+        }
+        if (DIRECT_ATTACH_EVENTS.has(key)) {
+            return `${n.event}.direct(${elementVar}, '${event}', ${expr});`;
+        }
+        return `${n.event}.delegate(${elementVar}, '${event}', ${expr});`;
+    }
+    if (name === 'class') {
+        return `${n.attr}.setClass(${elementVar}, '${staticValue}', ${expr});`;
+    }
+    if (name === 'spread') {
+        return `${n.attr}.spread(${elementVar}, ${expr});`;
+    }
+    if (name === 'style') {
+        return `${n.attr}.setStyle(${elementVar}, '${staticValue}', ${expr});`;
+    }
+    return `${n.attr}.setProperty(${elementVar}, '${name}', ${expr});`;
+};
+const generateSpreadBindings = (expr, exprCode, elementVar, sourceFile, checker) => {
+    while (ts.isParenthesizedExpression(expr)) {
+        expr = expr.expression;
+    }
+    let analysis = analyzeSpread(expr, checker);
+    if (!analysis.canUnpack) {
+        return [`${getNames().attr}.spread(${elementVar}, ${exprCode});`];
+    }
+    let lines = [];
+    if (ts.isObjectLiteralExpression(expr)) {
+        for (let i = 0, n = analysis.keys.length; i < n; i++) {
+            let key = analysis.keys[i], value = getObjectPropertyValue(expr, key, sourceFile);
+            if (value !== null) {
+                lines.push(generateAttributeBinding(elementVar, key, value, ''));
+            }
+        }
+    }
+    else {
+        for (let i = 0, n = analysis.keys.length; i < n; i++) {
+            let key = analysis.keys[i];
+            lines.push(generateAttributeBinding(elementVar, key, `${exprCode}.${key}`, ''));
+        }
+    }
+    return lines;
+};
+export { analyzeExpression, generateAttributeBinding, generateSpreadBindings };

package/build/types.d.ts

@@ -1,4 +1,3 @@
-import { firstChild } from './utilities/node.js';
 import { ArraySlot } from './slot/array.js';
 import attributes from './attributes.js';
 import slot from './slot/index.js';
@@ -28,9 +27,9 @@ type Template = {
     html: string;
     literals: TemplateStringsArray;
     slots: {
-        fn: typeof attributes.set | typeof attributes.spread | typeof slot;
+        fn: typeof attributes.spread | typeof slot;
         name: string | null;
-        path: typeof firstChild[];
+        path: (() => ChildNode | null)[];
     }[] | null;
 };
 export type { Attribute, Attributes, Effect, Element, Renderable, SlotGroup, Template };

package/build/utilities.d.ts

@@ -0,0 +1,7 @@
+declare const clone: <T extends Node>(node: T, options?: boolean | ImportNodeOptions) => T;
+declare const fragment: (html: string) => DocumentFragment;
+declare const marker: ChildNode;
+declare const raf: typeof requestAnimationFrame;
+declare const template: (html: string) => () => DocumentFragment;
+declare const text: (value: string) => Node;
+export { clone, fragment, template, marker, raf, text };

package/build/utilities.js

@@ -0,0 +1,31 @@
+import { SLOT_HTML } from './constants.js';
+let clonableTemplate = document.createElement('template'), clonableText = document.createTextNode('');
+const clone = typeof navigator !== 'undefined' && navigator.userAgent.includes('Firefox')
+    ? document.importNode.bind(document)
+    : (node, deep = true) => node.cloneNode(deep);
+const fragment = (html) => {
+    let element = clonableTemplate.cloneNode();
+    element.innerHTML = html;
+    return element.content;
+};
+const marker = fragment(SLOT_HTML).firstChild;
+const raf = globalThis?.requestAnimationFrame;
+const template = (html) => {
+    let cached;
+    return () => {
+        if (!cached) {
+            let element = clonableTemplate.cloneNode();
+            element.innerHTML = html;
+            cached = element.content;
+        }
+        return clone(cached, true);
+    };
+};
+const text = (value) => {
+    let element = clonableText.cloneNode();
+    if (value !== '') {
+        element.nodeValue = value;
+    }
+    return element;
+};
+export { clone, fragment, template, marker, raf, text };