@esportsplus/template 0.16.0

package/build/compiler/ts-analyzer.js

@@ -0,0 +1,63 @@
+import { ts } from '@esportsplus/typescript';
+import { ENTRYPOINT, ENTRYPOINT_REACTIVITY, TYPES } from './constants.js';
+function isTypeFunction(type, checker) {
+    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, checker) => {
+    while (ts.isParenthesizedExpression(expr)) {
+        expr = expr.expression;
+    }
+    if (ts.isArrowFunction(expr) || ts.isFunctionExpression(expr)) {
+        return TYPES.Effect;
+    }
+    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/build/compiler/ts-parser.d.ts

@@ -0,0 +1,24 @@
+import { ts } from '@esportsplus/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 extractTemplateParts: (template: ts.TemplateLiteral) => {
+    expressions: ts.Expression[];
+    literals: string[];
+};
+declare const findHtmlTemplates: (sourceFile: ts.SourceFile, checker?: ts.TypeChecker) => TemplateInfo[];
+declare const findReactiveCalls: (sourceFile: ts.SourceFile, checker?: ts.TypeChecker) => ReactiveCallInfo[];
+export { extractTemplateParts, findHtmlTemplates, findReactiveCalls };
+export type { ReactiveCallInfo, TemplateInfo };

package/build/compiler/ts-parser.js

@@ -0,0 +1,67 @@
+import { ts } from '@esportsplus/typescript';
+import { imports } from '@esportsplus/typescript/compiler';
+import { ENTRYPOINT, ENTRYPOINT_REACTIVITY, PACKAGE_NAME } from './constants.js';
+function visitReactiveCalls(node, calls, checker) {
+    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, depth, templates, checker) {
+    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) => {
+    let expressions = [], literals = [];
+    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, checker) => {
+    let templates = [];
+    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, checker) => {
+    let calls = [];
+    visitReactiveCalls(sourceFile, calls, checker);
+    return calls;
+};
+export { extractTemplateParts, findHtmlTemplates, findReactiveCalls };

package/build/constants.d.ts

@@ -0,0 +1,12 @@
+declare const ARRAY_SLOT: unique symbol;
+declare const ATTRIBUTE_DELIMITERS: Record<string, string>;
+declare const CLEANUP: unique symbol;
+declare const DIRECT_ATTACH_EVENTS: Set<string>;
+declare const LIFECYCLE_EVENTS: Set<string>;
+declare const PACKAGE_NAME = "@esportsplus/template";
+declare const SLOT_HTML = "<!--$-->";
+declare const STATE_HYDRATING = 0;
+declare const STATE_NONE = 1;
+declare const STATE_WAITING = 2;
+declare const STORE: unique symbol;
+export { ARRAY_SLOT, ATTRIBUTE_DELIMITERS, CLEANUP, DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS, PACKAGE_NAME, SLOT_HTML, STATE_HYDRATING, STATE_NONE, STATE_WAITING, STORE, };

package/build/constants.js

@@ -0,0 +1,25 @@
+const ARRAY_SLOT = Symbol('template.array.slot');
+const ATTRIBUTE_DELIMITERS = {
+    class: ' ',
+    style: ';'
+};
+const CLEANUP = Symbol('template.cleanup');
+const DIRECT_ATTACH_EVENTS = new Set([
+    'onblur',
+    'onerror',
+    'onfocus', 'onfocusin', 'onfocusout',
+    'onload',
+    'onplay', 'onpause', 'onended', 'ontimeupdate',
+    'onreset',
+    'onscroll', 'onsubmit'
+]);
+const LIFECYCLE_EVENTS = new Set([
+    '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/build/event/index.d.ts

@@ -0,0 +1,10 @@
+import { Attributes, Element } from '../types.js';
+import onconnect from './onconnect.js';
+import onresize from './onresize.js';
+import ontick from './ontick.js';
+declare const delegate: <E extends string>(element: Element, event: E, listener: Attributes[`on${E}`]) => void;
+declare const on: <E extends string>(element: Element, event: E, listener: Attributes[`on${E}`]) => void;
+declare const ondisconnect: (element: Element, listener: NonNullable<Attributes[`ondisconnect`]>) => void;
+declare const onrender: (element: Element, listener: NonNullable<Attributes[`onrender`]>) => void;
+declare const runtime: <E extends `on${string}`>(element: Element, event: E, listener: Attributes[E]) => void;
+export { delegate, on, onconnect, ondisconnect, onrender, onresize, ontick, runtime };

package/build/event/index.js

@@ -0,0 +1,90 @@
+import { root } from '@esportsplus/reactivity';
+import { defineProperty } from '@esportsplus/utilities';
+import { DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS } from '../constants.js';
+import { ondisconnect as disconnect } from '../slot/index.js';
+import onconnect from './onconnect.js';
+import onresize from './onresize.js';
+import ontick from './ontick.js';
+let controllers = new Map(), host = window.document, keys = {}, passive = new Set([
+    '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'].map(event => {
+    controllers.set(event, null);
+});
+function register(element, event) {
+    let controller = controllers.get(event), signal;
+    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;
+        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;
+        }
+    }, {
+        passive: passive.has(event),
+        signal
+    });
+    return key;
+}
+const delegate = (element, event, listener) => {
+    element[keys[event] || register(element, event)] = listener;
+};
+const on = (element, event, listener) => {
+    let handler = (e) => listener.call(element, e);
+    element.addEventListener(event, handler, {
+        passive: passive.has(event)
+    });
+    ondisconnect(element, () => {
+        element.removeEventListener(event, handler);
+    });
+};
+const ondisconnect = (element, listener) => {
+    disconnect(element, () => listener(element));
+};
+const onrender = (element, listener) => {
+    root(() => listener(element));
+};
+const lifecycle = { onconnect, ondisconnect, onrender, onresize, ontick };
+const runtime = (element, event, listener) => {
+    let key = event.toLowerCase();
+    if (LIFECYCLE_EVENTS.has(key)) {
+        lifecycle[key](element, listener);
+    }
+    else {
+        (DIRECT_ATTACH_EVENTS.has(key) ? on : delegate)(element, key.slice(2), listener);
+    }
+};
+export { delegate, on, onconnect, ondisconnect, onrender, onresize, ontick, runtime };

package/build/event/onconnect.d.ts

@@ -0,0 +1,3 @@
+import { Attributes, Element } from '../types.js';
+declare const _default: (element: Element, listener: NonNullable<Attributes["onconnect"]>) => void;
+export default _default;

package/build/event/onconnect.js

@@ -0,0 +1,15 @@
+import { root } from '@esportsplus/reactivity';
+import { add, remove } from './ontick.js';
+export default (element, listener) => {
+    let fn = () => {
+        retry--;
+        if (element.isConnected) {
+            retry = 0;
+            root(() => listener(element));
+        }
+        if (!retry) {
+            remove(fn);
+        }
+    }, retry = 60;
+    add(fn);
+};

package/build/event/onresize.d.ts

@@ -0,0 +1,3 @@
+import { Attributes, Element } from '../types.js';
+declare const _default: (element: Element, listener: NonNullable<Attributes["onresize"]>) => void;
+export default _default;

package/build/event/onresize.js

@@ -0,0 +1,26 @@
+import { onCleanup } from '@esportsplus/reactivity';
+let listeners = new Map(), 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, listener) => {
+    listeners.set(element, listener);
+    onCleanup(() => {
+        listeners.delete(element);
+    });
+    if (!registered) {
+        window.addEventListener('resize', onresize);
+        registered = true;
+    }
+};

package/build/event/ontick.d.ts

@@ -0,0 +1,6 @@
+import { Attributes, Element } from '../types.js';
+declare const add: (task: VoidFunction) => void;
+declare const remove: (task: VoidFunction) => void;
+declare const _default: (element: Element, listener: NonNullable<Attributes["ontick"]>) => void;
+export default _default;
+export { add, remove };

package/build/event/ontick.js

@@ -0,0 +1,41 @@
+import { raf } from '../utilities.js';
+let tasks = Object.assign(new Set(), { running: false });
+function tick() {
+    if (tasks.size === 0) {
+        tasks.running = false;
+        return;
+    }
+    for (let task of tasks) {
+        task();
+    }
+    raf(tick);
+}
+const add = (task) => {
+    tasks.add(task);
+    if (!tasks.running) {
+        tasks.running = true;
+        raf(tick);
+    }
+};
+const remove = (task) => {
+    tasks.delete(task);
+};
+export default (element, listener) => {
+    let connected = false, fn = () => {
+        if (connected === false) {
+            if (element.isConnected) {
+                connected = true;
+            }
+            else if (retry--) {
+                return;
+            }
+        }
+        if (!element.isConnected) {
+            remove(fn);
+            return;
+        }
+        listener(() => remove(fn), element);
+    }, retry = 60;
+    add(fn);
+};
+export { add, remove };

package/build/html.d.ts

@@ -0,0 +1,9 @@
+import { Reactive } from '@esportsplus/reactivity';
+import { Attribute, Attributes, Renderable } from './types.js';
+import { ArraySlot } from './slot/index.js';
+type Values<T> = ArraySlot<T extends unknown[] ? T : never> | Attribute | Attributes<any> | Renderable<T>;
+declare const html: {
+    <T>(_literals: TemplateStringsArray, ..._values: (Values<T> | Values<T>[])[]): DocumentFragment;
+    reactive<T>(_arr: Reactive<T[]>, _template: (value: T) => DocumentFragment): ArraySlot<T[]>;
+};
+export default html;

package/build/html.js

@@ -0,0 +1,7 @@
+const html = (_literals, ..._values) => {
+    throw new Error('html`` templates must be compiled. Ensure vite-plugin is configured.');
+};
+html.reactive = (_arr, _template) => {
+    throw new Error('html.reactive() must be compiled. Ensure vite-plugin is configured.');
+};
+export default html;

package/build/index.d.ts

@@ -0,0 +1,8 @@
+export * from './attributes.js';
+export * from './event/index.js';
+export * from './utilities.js';
+export { default as html } from './html.js';
+export { default as render } from './render.js';
+export { default as slot, ArraySlot, EffectSlot } from './slot/index.js';
+export { default as svg } from './svg.js';
+export type { Attributes, Element, Renderable } from './types.js';

package/build/index.js

@@ -0,0 +1,12 @@
+import { CLEANUP, STORE } from './constants.js';
+if (typeof Node !== 'undefined') {
+    Node.prototype[CLEANUP] = null;
+    Node.prototype[STORE] = null;
+}
+export * from './attributes.js';
+export * from './event/index.js';
+export * from './utilities.js';
+export { default as html } from './html.js';
+export { default as render } from './render.js';
+export { default as slot, ArraySlot, EffectSlot } from './slot/index.js';
+export { default as svg } from './svg.js';

package/build/render.d.ts

@@ -0,0 +1,3 @@
+import { Renderable } from './types.js';
+declare const _default: <T>(parent: HTMLElement, renderable: Renderable<T>) => void;
+export default _default;

package/build/render.js

@@ -0,0 +1,8 @@
+import { marker } from './utilities.js';
+import slot from './slot/index.js';
+export default (parent, renderable) => {
+    let anchor = marker.cloneNode();
+    parent.nodeValue = '';
+    parent.append(anchor);
+    slot(anchor, renderable);
+};

package/build/slot/array.d.ts

@@ -0,0 +1,25 @@
+import { Reactive } from '@esportsplus/reactivity';
+import html from '../html.js';
+declare class ArraySlot<T> {
+    private array;
+    private marker;
+    private nodes;
+    private queue;
+    private scheduled;
+    private signal;
+    private template;
+    readonly fragment: DocumentFragment;
+    constructor(array: Reactive<T[]>, template: ((value: Reactive<T[]>[number]) => ReturnType<typeof html>));
+    private anchor;
+    private clear;
+    private pop;
+    private push;
+    private schedule;
+    private shift;
+    private sort;
+    private splice;
+    private sync;
+    private unshift;
+    get length(): number;
+}
+export { ArraySlot };

package/build/slot/array.js

@@ -0,0 +1,189 @@
+import { read, root, signal, write } from '@esportsplus/reactivity';
+import { ARRAY_SLOT } from '../constants.js';
+import { clone, fragment, marker, raf } from '../utilities.js';
+import { ondisconnect, remove } from './cleanup.js';
+const EMPTY_FRAGMENT = fragment('');
+class ArraySlot {
+    array;
+    marker;
+    nodes = [];
+    queue = [];
+    scheduled = false;
+    signal;
+    template;
+    fragment;
+    constructor(array, template) {
+        this.array = array;
+        let fragment = this.fragment = clone(EMPTY_FRAGMENT);
+        this.marker = marker.cloneNode();
+        this.signal = signal(array.length);
+        this.template = function (data) {
+            let dispose, frag = root((d) => {
+                dispose = d;
+                return template(data);
+            }), group = {
+                head: frag.firstChild,
+                tail: frag.lastChild
+            };
+            fragment.append(frag);
+            ondisconnect(group.head, dispose);
+            return group;
+        };
+        fragment.append(this.marker);
+        if (array.length) {
+            root(() => {
+                this.nodes = array.map(this.template);
+            });
+        }
+        array.on('clear', () => {
+            this.queue.length = 0;
+            this.schedule({ op: 'clear' });
+        });
+        array.on('concat', ({ items }) => {
+            this.schedule({ items, op: 'concat' });
+        });
+        array.on('pop', () => {
+            this.schedule({ op: 'pop' });
+        });
+        array.on('push', ({ items }) => {
+            this.schedule({ items, op: 'push' });
+        });
+        array.on('reverse', () => {
+            this.schedule({ op: 'reverse' });
+        });
+        array.on('shift', () => {
+            this.schedule({ op: 'shift' });
+        });
+        array.on('sort', ({ order }) => {
+            this.schedule({ op: 'sort', order });
+        });
+        array.on('splice', ({ deleteCount, items, start }) => {
+            this.schedule({ deleteCount, items, op: 'splice', start });
+        });
+        array.on('unshift', ({ items }) => {
+            this.schedule({ items, op: 'unshift' });
+        });
+    }
+    anchor(index = this.nodes.length - 1) {
+        let node = this.nodes[index];
+        if (node) {
+            return node.tail || node.head;
+        }
+        return this.marker;
+    }
+    clear() {
+        remove(...this.nodes.splice(0));
+    }
+    pop() {
+        let group = this.nodes.pop();
+        if (group) {
+            remove(group);
+        }
+    }
+    push(items) {
+        let anchor = this.anchor();
+        this.nodes.push(...items.map(this.template));
+        anchor.after(this.fragment);
+    }
+    schedule(op) {
+        this.queue.push(op);
+        if (this.scheduled) {
+            return;
+        }
+        this.scheduled = true;
+        raf(() => {
+            let queue = this.queue;
+            this.queue = [];
+            this.scheduled = false;
+            root(() => {
+                for (let i = 0, n = queue.length; i < n; i++) {
+                    let op = queue[i];
+                    switch (op.op) {
+                        case 'clear':
+                            this.clear();
+                            break;
+                        case 'concat':
+                            this.push(op.items);
+                            break;
+                        case 'pop':
+                            this.pop();
+                            break;
+                        case 'push':
+                            this.push(op.items);
+                            break;
+                        case 'reverse':
+                            this.nodes.reverse();
+                            this.sync();
+                            break;
+                        case 'shift':
+                            this.shift();
+                            break;
+                        case 'sort':
+                            this.sort(op.order);
+                            break;
+                        case 'splice':
+                            this.splice(op.start, op.deleteCount, op.items);
+                            break;
+                        case 'unshift':
+                            this.unshift(op.items);
+                            break;
+                    }
+                }
+            });
+            write(this.signal, this.nodes.length);
+        });
+    }
+    shift() {
+        let group = this.nodes.shift();
+        if (group) {
+            remove(group);
+        }
+    }
+    sort(order) {
+        let nodes = this.nodes, n = nodes.length;
+        if (n !== order.length) {
+            remove(...nodes.splice(0));
+            this.nodes = this.array.map(this.template);
+            this.marker.after(this.fragment);
+            return;
+        }
+        let sorted = new Array(n);
+        for (let i = 0; i < n; i++) {
+            sorted[i] = nodes[order[i]];
+        }
+        this.nodes = sorted;
+        this.sync();
+    }
+    splice(start, stop = this.nodes.length, items) {
+        if (!items.length) {
+            remove(...this.nodes.splice(start, stop));
+            return;
+        }
+        remove(...this.nodes.splice(start, stop, ...items.map(this.template)));
+        this.anchor(start - 1).after(this.fragment);
+    }
+    sync() {
+        let nodes = this.nodes, n = nodes.length;
+        if (!n) {
+            return;
+        }
+        for (let i = 0; i < n; i++) {
+            let group = nodes[i], next, node = group.head;
+            while (node) {
+                next = node === group.tail ? null : node.nextSibling;
+                this.fragment.append(node);
+                node = next;
+            }
+        }
+        this.marker.after(this.fragment);
+    }
+    unshift(items) {
+        this.nodes.unshift(...items.map(this.template));
+        this.marker.after(this.fragment);
+    }
+    get length() {
+        return read(this.signal);
+    }
+}
+Object.defineProperty(ArraySlot.prototype, ARRAY_SLOT, { value: true });
+export { ArraySlot };