@esportsplus/template 0.16.0

package/src/compiler/parser.ts

@@ -0,0 +1,242 @@
+import { ATTRIBUTE_DELIMITERS, SLOT_HTML } from '../constants';
+import { PACKAGE_NAME, TYPES } from './constants';
+
+
+type NodePath = ('firstChild' | 'firstElementChild' | 'nextElementSibling' | 'nextSibling')[];
+
+
+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
+};
+
+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 = '{{$}}';
+
+
+[
+    // html
+    'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
+    'keygen', 'link', 'menuitem', 'meta', 'param', 'source', 'track', 'wbr',
+
+    // svg
+    '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: 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')
+            .replace(REGEX_CLEANUP_WHITESPACE, ' ')
+            .trim(),
+        n = literals.length - 1;
+
+    if (n === 0) {
+        return { html, slots: null };
+    }
+
+    let attributes: Record<string, { names: string[], static: Record<string, string> }> = {},
+        buffer = '',
+        index = 0,
+        level = 0,
+        levels = [{ children: 0, elements: 0, path: [] as NodePath }],
+        parsed = html.split(SLOT_MARKER),
+        slot = 0,
+        slots: (
+            { path: NodePath; type: TYPES.Node } |
+            { attributes: typeof attributes[string]; path: NodePath; type: TYPES.Attribute }
+        )[] = [];
+
+    {
+        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: {} } as typeof attributes[string];
+
+            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/src/compiler/plugins/tsc.ts

@@ -0,0 +1,6 @@
+import { plugin } from '@esportsplus/typescript/compiler';
+import reactivity from '@esportsplus/reactivity/compiler';
+import template from '..';
+
+
+export default plugin.tsc([reactivity, template]) as ReturnType<typeof plugin.tsc>;

package/src/compiler/plugins/vite.ts

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

package/src/compiler/ts-analyzer.ts

@@ -0,0 +1,89 @@
+import { ts } from '@esportsplus/typescript';
+import { ENTRYPOINT, ENTRYPOINT_REACTIVITY, TYPES } from './constants';
+
+
+// Union types that mix functions with non-functions (e.g., Renderable)
+// should fall through to runtime slot dispatch
+function isTypeFunction(type: ts.Type, checker: ts.TypeChecker): boolean {
+    if (type.isUnion()) {
+        for (let i = 0, n = type.types.length; i < n; i++) {
+            if (!isTypeFunction(type.types[i], checker)) {
+                return false;
+            }
+        }
+
+        return type.types.length > 0;
+    }
+
+    return type.getCallSignatures().length > 0;
+}
+
+
+const analyze = (expr: ts.Expression, checker?: ts.TypeChecker): TYPES => {
+    while (ts.isParenthesizedExpression(expr)) {
+        expr = expr.expression;
+    }
+
+    if (ts.isArrowFunction(expr) || ts.isFunctionExpression(expr)) {
+        return TYPES.Effect;
+    }
+
+    // Only html.reactive() calls become ArraySlot - handled by generateReactiveInlining
+    if (
+        ts.isCallExpression(expr) &&
+        ts.isPropertyAccessExpression(expr.expression) &&
+        ts.isIdentifier(expr.expression.expression) &&
+        expr.expression.expression.text === ENTRYPOINT &&
+        expr.expression.name.text === ENTRYPOINT_REACTIVITY
+    ) {
+        return TYPES.ArraySlot;
+    }
+
+    if (ts.isTaggedTemplateExpression(expr) && ts.isIdentifier(expr.tag) && expr.tag.text === ENTRYPOINT) {
+        return TYPES.DocumentFragment;
+    }
+
+    if (
+        ts.isNumericLiteral(expr) ||
+        ts.isStringLiteral(expr) ||
+        ts.isNoSubstitutionTemplateLiteral(expr) ||
+        expr.kind === ts.SyntaxKind.TrueKeyword ||
+        expr.kind === ts.SyntaxKind.FalseKeyword ||
+        expr.kind === ts.SyntaxKind.NullKeyword ||
+        expr.kind === ts.SyntaxKind.UndefinedKeyword
+    ) {
+        return TYPES.Static;
+    }
+
+    if (ts.isTemplateExpression(expr)) {
+        return TYPES.Primitive;
+    }
+
+    if (ts.isConditionalExpression(expr)) {
+        let whenFalse = analyze(expr.whenFalse, checker),
+            whenTrue = analyze(expr.whenTrue, checker);
+
+        if (whenTrue === whenFalse) {
+            return whenTrue;
+        }
+
+        if (whenTrue === TYPES.Effect || whenFalse === TYPES.Effect) {
+            return TYPES.Effect;
+        }
+
+        return TYPES.Unknown;
+    }
+
+    if (checker && (ts.isIdentifier(expr) || ts.isPropertyAccessExpression(expr) || ts.isCallExpression(expr))) {
+        try {
+            if (isTypeFunction(checker.getTypeAtLocation(expr), checker)) {
+                return TYPES.Effect;
+            }
+        }
+        catch {}
+    }
+
+    return TYPES.Unknown;
+};
+
+export { analyze };

package/src/compiler/ts-parser.ts

@@ -0,0 +1,112 @@
+import { ts } from '@esportsplus/typescript';
+import { imports } from '@esportsplus/typescript/compiler';
+import { ENTRYPOINT, ENTRYPOINT_REACTIVITY, PACKAGE_NAME } from './constants';
+
+
+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 visitReactiveCalls(node: ts.Node, calls: ReactiveCallInfo[], checker: ts.TypeChecker | undefined): void {
+    if (
+        ts.isCallExpression(node) &&
+        ts.isPropertyAccessExpression(node.expression) &&
+        ts.isIdentifier(node.expression.expression) &&
+        node.expression.name.text === ENTRYPOINT_REACTIVITY &&
+        node.arguments.length === 2 &&
+        node.expression.expression.text === ENTRYPOINT &&
+        (!checker || imports.includes(checker, node.expression.expression, PACKAGE_NAME, ENTRYPOINT))
+    ) {
+        calls.push({
+            arrayArg: node.arguments[0],
+            callbackArg: node.arguments[1],
+            end: node.end,
+            node,
+            start: node.getStart()
+        });
+    }
+
+    ts.forEachChild(node, child => visitReactiveCalls(child, calls, checker));
+}
+
+function visitTemplates(node: ts.Node, depth: number, templates: TemplateInfo[], checker: ts.TypeChecker | undefined): void {
+    let nextDepth = (ts.isArrowFunction(node) || ts.isFunctionDeclaration(node) || ts.isFunctionExpression(node) || ts.isMethodDeclaration(node))
+            ? depth + 1
+            : depth;
+
+    if (
+        ts.isTaggedTemplateExpression(node) &&
+        ts.isIdentifier(node.tag) &&
+        node.tag.text === ENTRYPOINT &&
+        (!checker || imports.includes(checker, node.tag, PACKAGE_NAME, ENTRYPOINT))
+    ) {
+        let { expressions, literals } = extractTemplateParts(node.template);
+
+        templates.push({
+            depth,
+            end: node.end,
+            expressions,
+            literals,
+            node,
+            start: node.getStart()
+        });
+    }
+
+    ts.forEachChild(node, child => visitTemplates(child, nextDepth, templates, checker));
+}
+
+
+const extractTemplateParts = (template: ts.TemplateLiteral): { expressions: ts.Expression[]; literals: string[] } => {
+    let expressions: ts.Expression[] = [],
+        literals: string[] = [];
+
+    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 { expressions, literals };
+};
+
+const findHtmlTemplates = (sourceFile: ts.SourceFile, checker?: ts.TypeChecker): TemplateInfo[] => {
+    let templates: TemplateInfo[] = [];
+
+    visitTemplates(sourceFile, 0, templates, checker);
+
+    return templates.sort((a, b) => a.depth !== b.depth ? b.depth - a.depth : a.start - b.start);
+};
+
+const findReactiveCalls = (sourceFile: ts.SourceFile, checker?: ts.TypeChecker): ReactiveCallInfo[] => {
+    let calls: ReactiveCallInfo[] = [];
+
+    visitReactiveCalls(sourceFile, calls, checker);
+
+    return calls;
+};
+
+
+export { extractTemplateParts, findHtmlTemplates, findReactiveCalls };
+export type { ReactiveCallInfo, TemplateInfo };

package/src/constants.ts

@@ -0,0 +1,44 @@
+const ARRAY_SLOT = Symbol('template.array.slot');
+
+const ATTRIBUTE_DELIMITERS: Record<string, string> = {
+    class: ' ',
+    style: ';'
+};
+
+const CLEANUP = Symbol('template.cleanup');
+
+const DIRECT_ATTACH_EVENTS = new Set<string>([
+    'onblur',
+    'onerror',
+    'onfocus', 'onfocusin', 'onfocusout',
+    'onload',
+    'onplay', 'onpause', 'onended', 'ontimeupdate',
+    'onreset',
+    'onscroll', 'onsubmit'
+]);
+
+const LIFECYCLE_EVENTS = new Set<string>([
+    'onconnect', 'ondisconnect', 'onrender', 'onresize', 'ontick'
+]);
+
+const PACKAGE_NAME = '@esportsplus/template';
+
+const SLOT_HTML = '<!--$-->';
+
+const STATE_HYDRATING = 0;
+
+const STATE_NONE = 1;
+
+const STATE_WAITING = 2;
+
+const STORE = Symbol('template.store');
+
+
+export {
+    ARRAY_SLOT, ATTRIBUTE_DELIMITERS,
+    CLEANUP,
+    DIRECT_ATTACH_EVENTS,
+    LIFECYCLE_EVENTS,
+    PACKAGE_NAME,
+    SLOT_HTML, STATE_HYDRATING, STATE_NONE, STATE_WAITING, STORE,
+};

package/src/event/index.ts

@@ -0,0 +1,130 @@
+import { root } from '@esportsplus/reactivity';
+import { defineProperty } from '@esportsplus/utilities';
+import { DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS } from '../constants';
+import { ondisconnect as disconnect } from '../slot';
+import { Attributes, Element } from '../types';
+import onconnect from './onconnect';
+import onresize from './onresize';
+import ontick from './ontick';
+
+
+let controllers = new Map<string, (AbortController & { listeners: number }) | null>(),
+    host = window.document,
+    keys: Record<string, symbol> = {},
+    passive = new Set<string>([
+        'animationend', 'animationiteration', 'animationstart',
+        'mousedown', 'mouseenter', 'mouseleave', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'mousewheel',
+        'pointerenter', 'pointerleave', 'pointermove', 'pointerout', 'pointerover',
+        'scroll',
+        'touchcancel', 'touchend', 'touchleave', 'touchmove', 'touchstart', 'transitionend',
+        'wheel'
+    ]);
+
+
+(['mousemove', 'mousewheel', 'scroll', 'touchend', 'touchmove', 'touchstart', 'wheel'] as string[]).map(event => {
+    controllers.set(event, null);
+});
+
+
+function register(element: Element, event: string) {
+    let controller = controllers.get(event),
+        signal: AbortController['signal'] | undefined;
+
+    if (controller === null) {
+        let { abort, signal } = new AbortController();
+
+        controllers.set(
+            event,
+            controller = {
+                abort,
+                signal,
+                listeners: 0,
+            }
+        );
+    }
+
+    if (controller) {
+        controller.listeners++;
+
+        ondisconnect(element, () => {
+            if (--controller.listeners) {
+                return;
+            }
+
+            controller.abort();
+            controllers.set(event, null);
+        });
+        signal = controller.signal;
+    }
+
+    let key = keys[event] = Symbol();
+
+    host.addEventListener(event, (e) => {
+        let fn,
+            node = e.target as Element | null;
+
+        while (node) {
+            fn = node[key];
+
+            if (typeof fn === 'function') {
+                defineProperty(e, 'currentTarget', {
+                    configurable: true,
+                    get() {
+                        return node || window.document;
+                    }
+                });
+
+                return fn.call(node, e);
+            }
+
+            node = node.parentElement as Element | null;
+        }
+    }, {
+        passive: passive.has(event),
+        signal
+    });
+
+    return key;
+}
+
+
+const delegate = <E extends string>(element: Element, event: E, listener: Attributes[`on${E}`]): void => {
+    element[ keys[event] || register(element, event) ] = listener;
+};
+
+// DIRECT_ATTACH_EVENTS in ./constants.ts tells compiler to use this function
+const on = <E extends string>(element: Element, event: E, listener: Attributes[`on${E}`]): void => {
+    let handler = (e: Event) => (listener as Function).call(element, e);
+
+    element.addEventListener(event, handler, {
+        passive: passive.has(event)
+    });
+
+    ondisconnect(element, () => {
+        element.removeEventListener(event, handler);
+    });
+};
+
+const ondisconnect = (element: Element, listener: NonNullable<Attributes[`ondisconnect`]>) => {
+    disconnect(element, () => listener(element));
+};
+
+const onrender = (element: Element, listener: NonNullable<Attributes[`onrender`]>) => {
+    root(() => listener(element));
+};
+
+const lifecycle = { onconnect, ondisconnect, onrender, onresize, ontick };
+
+const runtime = <E extends `on${string}`>(element: Element, event: E, listener: Attributes[E]): void => {
+    let key = event.toLowerCase();
+
+    if (LIFECYCLE_EVENTS.has(key)) {
+        lifecycle[key as keyof typeof lifecycle](element, listener as any);
+    }
+    else {
+        (DIRECT_ATTACH_EVENTS.has(key) ? on : delegate)(element, key.slice(2), listener);
+    }
+};
+
+
+export { delegate, on, onconnect, ondisconnect, onrender, onresize, ontick, runtime };

package/src/event/onconnect.ts

@@ -0,0 +1,22 @@
+import { root } from '@esportsplus/reactivity';
+import { Attributes, Element } from '../types';
+import { add, remove } from './ontick';
+
+
+export default (element: Element, listener: NonNullable<Attributes['onconnect']>) => {
+    let fn = () => {
+            retry--;
+
+            if (element.isConnected) {
+                retry = 0;
+                root(() => listener(element));
+            }
+
+            if (!retry) {
+                remove(fn);
+            }
+        },
+        retry = 60;
+
+    add(fn);
+};

package/src/event/onresize.ts

@@ -0,0 +1,37 @@
+import { onCleanup } from '@esportsplus/reactivity';
+import { Attributes, Element } from '../types';
+
+
+let listeners = new Map<Element, Function>(),
+    registered = false;
+
+
+function onresize() {
+    for (let [element, fn] of listeners) {
+        if (element.isConnected) {
+            fn(element);
+        }
+        else {
+            listeners.delete(element);
+        }
+    }
+
+    if (listeners.size === 0) {
+        window.removeEventListener('resize', onresize);
+        registered = false;
+    }
+}
+
+
+export default (element: Element, listener: NonNullable<Attributes['onresize']>) => {
+    listeners.set(element, listener);
+
+    onCleanup(() => {
+        listeners.delete(element);
+    });
+
+    if (!registered) {
+        window.addEventListener('resize', onresize);
+        registered = true;
+    }
+};