@esportsplus/template 0.28.1 → 0.29.1

package/src/transformer/parser.ts

@@ -0,0 +1,239 @@
+// Inlined to avoid importing constants.ts which depends on utilities.ts (uses document)
+const SLOT_HTML = '<!--$-->';
+
+
+type NodePath = ('firstChild' | 'firstElementChild' | 'nextElementSibling' | 'nextSibling')[];
+
+
+const ATTRIBUTE_DELIMITERS: Record<string, string> = {
+    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: Record<string, number> = {
+    '!': 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: number, copy: NodePath, first: NodePath[number], next: NodePath[number]) {
+    let length = copy.length,
+        result: NodePath = 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: string[]) => {
+    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: Record<string, { names: string[], statics: Record<string, string> }> = {},
+        buffer = '',
+        events = false,
+        index = 0,
+        level = 0,
+        levels = [{ children: 0, elements: 0, path: [] as NodePath }],
+        parsed = html.split(SLOT_MARKER),
+        slot = 0,
+        slots: (
+            { path: NodePath; type: 'slot' } |
+            { attributes: typeof attributes[string]; path: NodePath; type: 'attributes' }
+        )[] = [];
+
+    {
+        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: {} } as typeof attributes[string];
+
+            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/src/transformer/plugins/esbuild.ts

@@ -0,0 +1,46 @@
+import { mightNeedTransform, PATTERNS, transform } from '../index';
+import { program, TRANSFORM_PATTERN } from '@esportsplus/typescript/transformer';
+import type { OnLoadArgs, Plugin, PluginBuild } from 'esbuild';
+import fs from 'fs';
+import ts from 'typescript';
+
+
+export default (options?: { root?: string }): Plugin => {
+    let root = options?.root ?? process.cwd();
+
+    return {
+        name: '@esportsplus/template/plugin-esbuild',
+
+        setup(build: PluginBuild) {
+            build.onLoad({ filter: TRANSFORM_PATTERN }, async (args: OnLoadArgs) => {
+                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/src/transformer/plugins/tsc.ts

@@ -0,0 +1,7 @@
+import { createTransformer } from '../index';
+import ts from 'typescript';
+
+
+export default (program: ts.Program): ts.TransformerFactory<ts.SourceFile> => {
+    return createTransformer(program);
+};

package/src/transformer/plugins/vite.ts

@@ -0,0 +1,49 @@
+import { mightNeedTransform, PATTERNS, transform } from '../index';
+import { program, TRANSFORM_PATTERN } from '@esportsplus/typescript/transformer';
+import type { Plugin, ResolvedConfig } from 'vite';
+import ts from 'typescript';
+
+
+export default (options?: { root?: string }): Plugin => {
+    let root: string;
+
+    return {
+        enforce: 'pre',
+        name: '@esportsplus/template/plugin-vite',
+
+        configResolved(config: ResolvedConfig) {
+            root = options?.root ?? config.root;
+        },
+
+        transform(code: string, id: string) {
+            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: string) {
+            if (TRANSFORM_PATTERN.test(id)) {
+                program.delete(root);
+            }
+        }
+    };
+};

package/src/transformer/ts-parser.ts

@@ -0,0 +1,123 @@
+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;
+};
+
+
+function extractTemplateInfo(node: ts.TaggedTemplateExpression, depth: number): TemplateInfo {
+    let expressions: ts.Expression[] = [],
+        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 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: ts.Node): boolean {
+    return (
+        ts.isArrowFunction(node) ||
+        ts.isFunctionDeclaration(node) ||
+        ts.isFunctionExpression(node) ||
+        ts.isMethodDeclaration(node)
+    );
+}
+
+function visitReactiveCalls(node: ts.Node, calls: ReactiveCallInfo[]): void {
+    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: ts.Node, depth: number, templates: TemplateInfo[]): void {
+    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: ts.SourceFile): TemplateInfo[] => {
+    let templates: TemplateInfo[] = [];
+
+    visitTemplates(sourceFile, 0, templates);
+
+    // Sort by depth descending (deepest first), then by position for stable ordering
+    templates.sort((a, b) => a.depth !== b.depth ? b.depth - a.depth : a.start - b.start);
+
+    return templates;
+};
+
+const findReactiveCalls = (sourceFile: ts.SourceFile): ReactiveCallInfo[] => {
+    let calls: ReactiveCallInfo[] = [];
+
+    visitReactiveCalls(sourceFile, calls);
+
+    return calls;
+};
+
+const getTemplateExpressions = (info: TemplateInfo, sourceFile: ts.SourceFile): string[] => {
+    let exprs: string[] = [];
+
+    for (let i = 0, n = info.expressions.length; i < n; i++) {
+        exprs.push(info.expressions[i].getText(sourceFile));
+    }
+
+    return exprs;
+};
+
+
+export { findHtmlTemplates, findReactiveCalls, getTemplateExpressions };
+export type { ReactiveCallInfo, TemplateInfo };