@esportsplus/template 0.16.0

package/src/slot/array.ts

@@ -0,0 +1,257 @@
+import { read, root, signal, write, Reactive } from '@esportsplus/reactivity';
+import { ARRAY_SLOT } from '../constants';
+import { Element, SlotGroup } from '../types';
+import { clone, fragment, marker, raf } from '../utilities';
+import { ondisconnect, remove } from './cleanup';
+import html from '../html';
+
+
+type ArraySlotOp<T> =
+    | { items: T[]; op: 'concat' }
+    | { deleteCount: number; items: T[]; op: 'splice'; start: number }
+    | { items: T[]; op: 'push' }
+    | { items: T[]; op: 'unshift' }
+    | { op: 'clear' }
+    | { op: 'pop' }
+    | { op: 'reverse' }
+    | { op: 'shift' }
+    | { op: 'sort'; order: number[] };
+
+
+const EMPTY_FRAGMENT = fragment('');
+
+
+class ArraySlot<T> {
+    private marker: Element;
+    private nodes: SlotGroup[] = [];
+    private queue: ArraySlotOp<T>[] = [];
+    private scheduled = false;
+    private signal;
+    private template: (...args: Parameters<(value: Reactive<T[]>[number]) => ReturnType<typeof html>>) => SlotGroup;
+
+    readonly fragment: DocumentFragment;
+
+
+    constructor(private array: Reactive<T[]>, template: ((value: Reactive<T[]>[number]) => ReturnType<typeof html>)) {
+        let fragment = this.fragment = clone(EMPTY_FRAGMENT);
+
+        this.marker = marker.cloneNode() as unknown as Element;
+        this.signal = signal(array.length);
+        this.template = function (data) {
+            let dispose: VoidFunction,
+                frag = root((d) => {
+                    dispose = d;
+                    return template(data);
+                }),
+                group = {
+                    head: frag.firstChild as unknown as Element,
+                    tail: frag.lastChild as unknown as Element
+                };
+
+            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' });
+        });
+    }
+
+
+    private anchor(index: number = this.nodes.length - 1) {
+        let node = this.nodes[index];
+
+        if (node) {
+            return node.tail || node.head;
+        }
+
+        return this.marker;
+    }
+
+    private clear() {
+        remove(...this.nodes.splice(0));
+    }
+
+    private pop() {
+        let group = this.nodes.pop();
+
+        if (group) {
+            remove(group);
+        }
+    }
+
+    private push(items: T[]) {
+        let anchor = this.anchor();
+
+        this.nodes.push(...items.map(this.template));
+        anchor.after(this.fragment);
+    }
+
+    private schedule(op: ArraySlotOp<T>) {
+        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);
+        });
+    }
+
+    private shift() {
+        let group = this.nodes.shift();
+
+        if (group) {
+            remove(group);
+        }
+    }
+
+    private sort(order: number[]) {
+        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) as SlotGroup[];
+
+        for (let i = 0; i < n; i++) {
+            sorted[i] = nodes[order[i]];
+        }
+
+        this.nodes = sorted;
+        this.sync();
+    }
+
+    private splice(start: number, stop: number = this.nodes.length, items: T[]) {
+        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);
+    }
+
+    private sync() {
+        let nodes = this.nodes,
+            n = nodes.length;
+
+        if (!n) {
+            return;
+        }
+
+        for (let i = 0; i < n; i++) {
+            let group = nodes[i],
+                next: Node | null,
+                node: Node | null = group.head;
+
+            while (node) {
+                next = node === group.tail ? null : node.nextSibling;
+                this.fragment.append(node);
+                node = next;
+            }
+        }
+
+        this.marker.after(this.fragment);
+    }
+
+    private unshift(items: T[]) {
+        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 };

package/src/slot/cleanup.ts

@@ -0,0 +1,37 @@
+import { CLEANUP } from '../constants';
+import { Element, SlotGroup } from '../types';
+
+
+const ondisconnect = (element: Element, fn: VoidFunction) => {
+    ((element as any)[CLEANUP] ??= []).push(fn);
+};
+
+const remove = (...groups: SlotGroup[]) => {
+    for (let i = 0, n = groups.length; i < n; i++) {
+        let fns, fn,
+            group = groups[i],
+            head = group.head,
+            next,
+            tail = group.tail || head;
+
+        while (tail) {
+            if (fns = tail[CLEANUP] as VoidFunction[] | undefined) {
+                while (fn = fns.pop()) {
+                    fn();
+                }
+            }
+
+            next = tail.previousSibling as unknown as Element;
+            tail.remove();
+
+            if (head === tail) {
+                break;
+            }
+
+            tail = next;
+        }
+    }
+};
+
+
+export { ondisconnect, remove };

package/src/slot/effect.ts

@@ -0,0 +1,114 @@
+import { effect } from '@esportsplus/reactivity';
+import { Element, Renderable, SlotGroup } from '../types';
+import { raf, text } from '../utilities'
+import { remove } from './cleanup';
+import render from './render';
+
+
+function read(value: unknown): unknown {
+    if (typeof value === 'function') {
+        return read( value() );
+    }
+
+    if (value == null || value === false) {
+        return '';
+    }
+
+    return value;
+}
+
+
+class EffectSlot {
+    anchor: Element;
+    disposer: VoidFunction;
+    group: SlotGroup | null = null;
+    scheduled = false;
+    textnode: Node | null = null;
+
+
+    constructor(anchor: Element, fn: (dispose?: VoidFunction) => Renderable<any>) {
+        let dispose = fn.length ? () => this.dispose() : undefined,
+            value: unknown;
+
+        this.anchor = anchor;
+        this.disposer = effect(() => {
+            value = read( fn(dispose) );
+
+            if (!this.disposer) {
+                this.update(value);
+            }
+            else if (!this.scheduled) {
+                this.scheduled = true;
+
+                raf(() => {
+                    this.scheduled = false;
+                    this.update(value);
+                });
+            }
+        });
+    }
+
+
+    dispose() {
+        let { anchor, group, textnode } = this;
+
+        if (textnode) {
+            group = { head: anchor, tail: textnode as Element };
+        }
+        else if (group) {
+            group.head = anchor;
+        }
+
+        this.disposer();
+
+        if (group) {
+            remove(group);
+        }
+    }
+
+    update(value: unknown): void {
+        let { anchor, group, textnode } = this;
+
+        if (group) {
+            remove(group);
+            this.group = null;
+        }
+
+        if (typeof value !== 'object') {
+            if (typeof value !== 'string') {
+                value = String(value);
+            }
+
+            if (textnode) {
+                textnode.nodeValue = value as string;
+
+                if (!textnode.isConnected) {
+                    anchor.after(textnode);
+                }
+            }
+            else {
+                anchor.after( this.textnode = text(value as string) );
+            }
+        }
+        else {
+            let fragment = render(anchor, value),
+                head = fragment.firstChild;
+
+            if (textnode?.isConnected) {
+                remove({ head: textnode as Element, tail: textnode as Element });
+            }
+
+            if (head) {
+                this.group = {
+                    head: head as Element,
+                    tail: fragment.lastChild as Element
+                };
+
+                anchor.after(fragment);
+            }
+        }
+    }
+}
+
+
+export { EffectSlot };

package/src/slot/index.ts

@@ -0,0 +1,17 @@
+import { Element, Renderable } from '../types';
+import { EffectSlot } from './effect';
+import render from './render';
+
+
+export default <T>(anchor: Element, renderable: Renderable<T>) => {
+    if (typeof renderable === 'function') {
+        new EffectSlot(anchor, renderable);
+    }
+    else {
+        anchor.after( render(anchor, renderable) );
+    }
+};
+export * from './array';
+export * from './cleanup';
+export * from './effect';
+export { default as render } from './render';

package/src/slot/render.ts

@@ -0,0 +1,61 @@
+import { isArray } from '@esportsplus/utilities';
+import { ARRAY_SLOT } from '../constants';
+import { Element } from '../types';
+import { clone, fragment, text } from '../utilities';
+import { ArraySlot } from './array';
+
+
+const EMPTY_FRAGMENT = fragment('');
+
+
+export default function render(anchor: Element, value: unknown): Node {
+    if (value == null || value === false || value === '') {
+        return EMPTY_FRAGMENT;
+    }
+
+    if (typeof value !== 'object') {
+        return text(value as any);
+    }
+
+    if ((value as any)[ARRAY_SLOT] === true) {
+        return (value as ArraySlot<unknown>).fragment;
+    }
+
+    if ((value as any).nodeType !== undefined) {
+        return value as Node;
+    }
+
+    let n = (value as any).length;
+
+    if (typeof n === 'number') {
+        if (n === 0) {
+            return EMPTY_FRAGMENT;
+        }
+        else if (n === 1) {
+            return render(anchor, (value as any)[0]);
+        }
+    }
+
+    if (isArray(value)) {
+        let fragment = clone(EMPTY_FRAGMENT) as DocumentFragment;
+
+        for (let i = 0; i < n; i++) {
+            fragment.append(render(anchor, value[i]));
+            anchor = fragment.lastChild as Element;
+        }
+
+        return fragment;
+    }
+
+    if (value instanceof NodeList) {
+        let fragment = clone(EMPTY_FRAGMENT) as DocumentFragment;
+
+        for (let i = 0; i < n; i++) {
+            fragment.append(value[i]);
+        }
+
+        return fragment;
+    }
+
+    return text(value as any);
+};

package/src/svg.ts

@@ -0,0 +1,27 @@
+import { setProperty } from './attributes';
+import { template } from './utilities';
+import { Element } from './types';
+import html from './html';
+
+
+let factory = template('<svg><use /></svg>');
+
+
+const svg = html.bind(null) as typeof html & {
+    sprite: (href: string) => DocumentFragment
+};
+
+svg.sprite = (href: string) => {
+    if (href[0] !== '#') {
+        href = '#' + href;
+    }
+
+    let root = factory();
+
+    setProperty(root.firstChild!.firstChild as Element, 'href', href);
+
+    return root;
+};
+
+
+export default svg;

package/src/types.ts

@@ -0,0 +1,40 @@
+import { ArraySlot } from './slot';
+
+
+type Attribute = Effect<Primitive | Primitive[]> | ((...args: any[]) => void) | Primitive;
+
+type Attributes<T extends HTMLElement = Element> = {
+    class?: Attribute | Attribute[];
+    onconnect?: (element: T) => void;
+    ondisconnect?: (element: T) => void;
+    onrender?: (element: T) => void;
+    ontick?: (dispose: VoidFunction, element: T) => void;
+    style?: Attribute | Attribute[];
+    [key: `aria-${string}`]: string | number | boolean | undefined;
+    [key: `data-${string}`]: string | undefined;
+} & {
+    [K in keyof GlobalEventHandlersEventMap as `on${string & K}`]?: (this: T, event: GlobalEventHandlersEventMap[K]) => void;
+} & Record<PropertyKey, unknown>;
+
+type Effect<T> = () => T extends [] ? Renderable<T>[] : Renderable<T>;
+
+type Element = HTMLElement & Attributes<any>;
+
+// Copied from '@esportsplus/utilities'
+// - Importing from ^ causes 'cannot be named without a reference to...' error
+type Primitive = bigint | boolean | null | number | string | undefined;
+
+type Renderable<T> = ArraySlot<T> | DocumentFragment | Effect<T> | Node | NodeList | Primitive | Renderable<T>[];
+
+type SlotGroup = {
+    head: Element;
+    tail: Element;
+};
+
+
+export type {
+    Attribute, Attributes,
+    Effect, Element,
+    Renderable,
+    SlotGroup
+};

package/src/utilities.ts

@@ -0,0 +1,53 @@
+import { SLOT_HTML } from './constants';
+
+
+let tmpl = document.createElement('template'),
+    txt = document.createTextNode('');
+
+
+// Firefox's importNode outperforms cloneNode in certain scenarios
+const clone = typeof navigator !== 'undefined' && navigator.userAgent.includes('Firefox')
+    ? document.importNode.bind(document)
+    : <T extends DocumentFragment | Node>(node: T, deep: boolean = true) => node.cloneNode(deep) as T;
+
+// Create a fragment from HTML string
+const fragment = (html: string): DocumentFragment => {
+    let element = tmpl.cloneNode() as HTMLTemplateElement;
+
+    element.innerHTML = html;
+
+    return element.content;
+};
+
+const marker = fragment(SLOT_HTML).firstChild!;
+
+const raf = globalThis?.requestAnimationFrame;
+
+// Factory that caches the fragment for repeated cloning
+const template = (html: string) => {
+    let cached: DocumentFragment | undefined;
+
+    return () => {
+        if (!cached) {
+            let element = tmpl.cloneNode() as HTMLTemplateElement;
+
+            element.innerHTML = html;
+            cached = element.content;
+        }
+
+        return clone(cached, true) as DocumentFragment;
+    };
+};
+
+const text = (value: string) => {
+    let element = txt.cloneNode();
+
+    if (value !== '') {
+        element.nodeValue = value;
+    }
+
+    return element;
+};
+
+
+export { clone, fragment, template, marker, raf, text };