@esportsplus/template 0.16.1 → 0.18.0

package/build/html/index.js

@@ -1,10 +1,18 @@
-import { RENDERABLE, RENDERABLE_REACTIVE, RENDERABLE_TEMPLATE } from '../constants.js';
+import { RENDERABLE, RENDERABLE_HTML_FRAGMENT, RENDERABLE_HTML_REACTIVE_ARRAY } from '../constants.js';
 import hydrate from './hydrate.js';
+import parser from './parser.js';
 const html = (literals, ...values) => {
-    return { [RENDERABLE]: RENDERABLE_TEMPLATE, literals, template: null, values };
+    return {
+        [RENDERABLE]: RENDERABLE_HTML_FRAGMENT,
+        fragment: hydrate(parser.parse(literals), values),
+        literals
+    };
 };
 html.reactive = (array, template) => {
-    return { [RENDERABLE]: RENDERABLE_REACTIVE, literals: null, template, values: array };
+    return {
+        [RENDERABLE]: RENDERABLE_HTML_REACTIVE_ARRAY,
+        array,
+        template
+    };
 };
 export default html;
-export { hydrate };

package/build/html/{cache.d.ts → parser.d.ts}

@@ -1,5 +1,5 @@
 import { Template } from '../types.js';
 declare const _default: {
-    get: (literals: TemplateStringsArray) => Template;
+    parse: (literals: TemplateStringsArray) => Template;
 };
 export default _default;

package/build/html/{cache.js → parser.js}

@@ -1,7 +1,9 @@
 import { NODE_CLOSING, NODE_ELEMENT, NODE_SLOT, NODE_VOID, NODE_WHITELIST, REGEX_EMPTY_TEXT_NODES, REGEX_SLOT_NODES, SLOT_HTML, SLOT_MARKER, SLOT_MARKER_LENGTH } from '../constants.js';
-import { firstChild, firstElementChild, fragment, nextElementSibling, nextSibling } from '../utilities.js';
+import { firstElementChild, nextElementSibling } from '../utilities/element.js';
+import { fragment } from '../utilities/fragment.js';
+import { firstChild, nextSibling } from '../utilities/node.js';
 import { spread } from '../attributes.js';
-import s from '../slot.js';
+import s from '../slot/index.js';
 let cache = new WeakMap();
 function build(literals) {
     let n = literals.length - 1;
@@ -94,7 +96,7 @@ function set(literals, html, slots = null) {
     cache.set(literals, template);
     return template;
 }
-const get = (literals) => {
+const parse = (literals) => {
     return cache.get(literals) || build(literals);
 };
-export default { get };
+export default { parse };

package/build/render.d.ts

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

package/build/render.js

@@ -1,13 +1,10 @@
-import { isInstanceOf } from '@esportsplus/utilities';
 import { SLOT_HTML } from './constants.js';
-import slot, { Slot } from './slot.js';
-import { firstChild, fragment, nodeValue, prepend } from './utilities.js';
-let marker = firstChild.call(fragment(SLOT_HTML)), node;
-export default (renderable, parent) => {
-    if (isInstanceOf(parent, Slot)) {
-        return parent.render(renderable);
-    }
+import { fragment } from './utilities/fragment.js';
+import { firstChild, nodeValue } from './utilities/node.js';
+import slot from './slot/index.js';
+let anchor, marker = firstChild.call(fragment(SLOT_HTML));
+export default (parent, renderable) => {
     nodeValue.call(parent, '');
-    prepend.call(parent, node = marker.cloneNode());
-    return slot(node, renderable);
+    parent.append(anchor = marker.cloneNode());
+    slot(anchor, renderable);
 };

package/build/slot/cleanup.d.ts

@@ -0,0 +1,4 @@
+import { SlotGroup } from '../types.js';
+declare const ondisconnect: (element: Element, fn: VoidFunction) => void;
+declare const remove: (groups: SlotGroup[]) => void;
+export { ondisconnect, remove };

package/build/slot/cleanup.js

@@ -0,0 +1,52 @@
+import queue from '@esportsplus/queue';
+import { CLEANUP } from '../constants.js';
+import { microtask } from '../utilities/queue.js';
+import { previousSibling } from '../utilities/node.js';
+let cleanup = queue(64), scheduled = false;
+function schedule() {
+    if (!cleanup.length || scheduled) {
+        return;
+    }
+    scheduled = true;
+    microtask.add(task);
+}
+function task() {
+    try {
+        let fns, fn, n = cleanup.length;
+        while ((fns = cleanup.next()) && n--) {
+            while (fn = fns.pop()) {
+                fn();
+            }
+        }
+    }
+    catch { }
+    if (cleanup.length) {
+        microtask.add(task);
+    }
+    else {
+        scheduled = false;
+    }
+}
+const ondisconnect = (element, fn) => {
+    (element[CLEANUP] ??= []).push(fn);
+};
+const remove = (groups) => {
+    let group, head, tail;
+    while (group = groups.pop()) {
+        head = group.head;
+        tail = group.tail || head;
+        for (let node = tail; node; node = previousSibling.call(node)) {
+            if (CLEANUP in node) {
+                cleanup.add(node[CLEANUP]);
+            }
+            node.remove();
+            if (head === node) {
+                break;
+            }
+        }
+    }
+    if (!scheduled && cleanup.length) {
+        schedule();
+    }
+};
+export { ondisconnect, remove };

package/build/slot/effect.d.ts

@@ -0,0 +1,3 @@
+import { Element } from '../types.js';
+declare const _default: (anchor: Element, fn: Function) => void;
+export default _default;

package/build/slot/effect.js

@@ -0,0 +1,56 @@
+import { effect } from '@esportsplus/reactivity';
+import { STATE_HYDRATING, STATE_NONE } from '../constants.js';
+import { firstChild, lastChild, nodeValue } from '../utilities/node.js';
+import { raf } from '../utilities/queue.js';
+import { ondisconnect } from '../slot/cleanup.js';
+import { remove } from './cleanup.js';
+import text from '../utilities/text.js';
+import render from './render.js';
+function update(anchor, value) {
+    let type = typeof value;
+    if (this.group) {
+        remove([this.group]);
+        this.group = undefined;
+    }
+    if (value == null || type !== 'object') {
+        let textnode = this.textnode;
+        if (textnode) {
+            nodeValue.call(textnode, String(value));
+        }
+        else {
+            textnode = this.textnode = text(String(value));
+        }
+        if (!textnode.isConnected) {
+            anchor.after(textnode);
+        }
+    }
+    else {
+        let fragment = render(anchor, value);
+        if (!fragment) {
+            return;
+        }
+        this.group = {
+            head: firstChild.call(fragment),
+            tail: lastChild.call(fragment)
+        };
+        anchor.after(fragment);
+    }
+}
+export default (anchor, fn) => {
+    let context = {
+        group: undefined,
+        textnode: undefined
+    }, state = STATE_HYDRATING;
+    ondisconnect(anchor, effect(() => {
+        let value = fn();
+        if (state === STATE_HYDRATING) {
+            update.call(context, anchor, value);
+            state = STATE_NONE;
+        }
+        else if (state === STATE_NONE) {
+            raf.add(() => {
+                update.call(context, anchor, value);
+            });
+        }
+    }));
+};

package/build/slot/index.d.ts

@@ -0,0 +1,3 @@
+import { Element } from '../types.js';
+declare const _default: (anchor: Element, value: unknown) => void;
+export default _default;

package/build/slot/index.js

@@ -0,0 +1,8 @@
+import effect from './effect.js';
+import render from './render.js';
+export default (anchor, value) => {
+    if (typeof value === 'function') {
+        return effect(anchor, value);
+    }
+    anchor.after(render(anchor, value));
+};

package/build/slot/reactive.d.ts

@@ -0,0 +1,3 @@
+import { Fragment, RenderableReactive } from '../types.js';
+declare const _default: (anchor: Element, renderable: RenderableReactive) => Fragment;
+export default _default;

package/build/slot/reactive.js

@@ -0,0 +1,125 @@
+import { root } from '@esportsplus/reactivity';
+import { EMPTY_FRAGMENT } from '../constants.js';
+import { append } from '../utilities/fragment.js';
+import { cloneNode, firstChild, lastChild } from '../utilities/node.js';
+import { remove } from './cleanup.js';
+class ReactiveArraySlot {
+    array;
+    fragment = cloneNode.call(EMPTY_FRAGMENT);
+    marker;
+    nodes = [];
+    template;
+    constructor(anchor, array, template) {
+        let fragment = this.fragment;
+        this.array = array;
+        this.marker = anchor;
+        this.template = function (data, i) {
+            let frag = template.call(this, data, i).fragment, group = {
+                head: firstChild.call(frag),
+                tail: lastChild.call(frag)
+            };
+            append.call(fragment, frag);
+            return group;
+        };
+        let render = () => {
+            root(() => this.render());
+        };
+        array.on('clear', () => this.clear());
+        array.on('reverse', render);
+        array.on('pop', () => this.pop());
+        array.on('push', ({ items }) => {
+            root(() => this.push(items));
+        });
+        array.on('shift', () => this.shift());
+        array.on('sort', render);
+        array.on('splice', ({ deleteCount, items, start }) => {
+            root(() => this.splice(start, deleteCount, ...items));
+        });
+        array.on('unshift', ({ items }) => {
+            root(() => this.unshift(items));
+        });
+        if (array.length) {
+            render();
+        }
+    }
+    get length() {
+        return this.nodes.length;
+    }
+    set length(n) {
+        if (n >= this.nodes.length) {
+            return;
+        }
+        else if (n === 0) {
+            this.clear();
+        }
+        else {
+            this.splice(n);
+        }
+    }
+    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);
+    }
+    pop() {
+        let group = this.nodes.pop();
+        if (group) {
+            remove([group]);
+        }
+    }
+    push(items) {
+        let anchor = this.anchor(), array = this.array, length = this.nodes.length;
+        this.nodes.length = length + items.length;
+        for (let i = 0, n = items.length; i < n; i++) {
+            this.nodes[i + length] = this.template.call(array, items[i], i);
+        }
+        anchor.after(this.fragment);
+    }
+    render() {
+        let nodes = this.nodes;
+        if (nodes.length) {
+            remove(nodes);
+        }
+        nodes = this.array.map(this.template);
+        this.marker.after(this.fragment);
+    }
+    shift() {
+        let group = this.nodes.shift();
+        if (group) {
+            remove([group]);
+        }
+    }
+    splice(start, stop = this.nodes.length, ...items) {
+        if (!items.length) {
+            return remove(this.nodes.splice(start, stop));
+        }
+        let array = this.array, n = items.length, nodes = new Array(n);
+        for (let i = 0; i < n; i++) {
+            nodes[i] = this.template.call(array, items[i], i);
+        }
+        remove(this.nodes.splice(start, stop, ...nodes));
+        this.anchor(start - 1).after(this.fragment);
+    }
+    unshift(items) {
+        let array = this.array, n = items.length, nodes = new Array(n);
+        for (let i = 0; i < n; i++) {
+            nodes[i] = this.template.call(array, items[i], i);
+        }
+        this.nodes.unshift(...nodes);
+        this.marker.after(this.fragment);
+    }
+}
+export default (anchor, renderable) => {
+    let { array, template } = renderable, slot = new ReactiveArraySlot(anchor, array, template);
+    if (array.length) {
+        root(() => {
+            slot.nodes = array.map(slot.template);
+        });
+    }
+    return slot.fragment;
+};

package/build/slot/render.d.ts

@@ -0,0 +1,2 @@
+import { Element } from '../types.js';
+export default function render(anchor: Element, input: unknown): Node;

package/build/slot/render.js

@@ -0,0 +1,81 @@
+import { isArray } from '@esportsplus/utilities';
+import { EMPTY_FRAGMENT, RENDERABLE, RENDERABLE_ARRAY, RENDERABLE_FRAGMENT, RENDERABLE_HTML_FRAGMENT, RENDERABLE_HTML_REACTIVE_ARRAY, RENDERABLE_NODE, RENDERABLE_NODE_LIST, RENDERABLE_TEXT, RENDERABLE_VOID } from '../constants.js';
+import { cloneNode } from '../utilities/node.js';
+import { append } from '../utilities/fragment.js';
+import text from '../utilities/text.js';
+import reactive from './reactive.js';
+function type(input) {
+    if (input === false || input == null || input === '') {
+        return RENDERABLE_VOID;
+    }
+    if (typeof input !== 'object') {
+        return RENDERABLE_TEXT;
+    }
+    if (RENDERABLE in input) {
+        return input[RENDERABLE];
+    }
+    if (isArray(input)) {
+        return RENDERABLE_ARRAY;
+    }
+    let nodeType = input.nodeType;
+    if (nodeType === 11) {
+        return RENDERABLE_FRAGMENT;
+    }
+    if (nodeType !== undefined) {
+        return RENDERABLE_NODE;
+    }
+    if (input instanceof NodeList) {
+        return RENDERABLE_NODE_LIST;
+    }
+    return RENDERABLE_TEXT;
+}
+function loop(fragment, input) {
+    let t = type(input);
+    switch (t) {
+        case RENDERABLE_HTML_REACTIVE_ARRAY:
+            throw new Error('@esportsplus/template: reactive arrays cannot be defined within an slot array value');
+        case RENDERABLE_VOID:
+            return;
+        case RENDERABLE_ARRAY:
+            for (let i = 0, n = input.length; i < n; i++) {
+                loop(fragment, input[i]);
+            }
+            return;
+        case RENDERABLE_NODE_LIST:
+            append.call(fragment, ...input);
+            return;
+        default:
+            append.call(fragment, input);
+            return;
+    }
+}
+let scratchpad = cloneNode.call(EMPTY_FRAGMENT);
+export default function render(anchor, input) {
+    let fragment = scratchpad, t = type(input);
+    switch (t) {
+        case RENDERABLE_VOID:
+            break;
+        case RENDERABLE_TEXT:
+            append.call(fragment, text(input));
+            break;
+        case RENDERABLE_HTML_FRAGMENT:
+            return input.fragment;
+        case RENDERABLE_HTML_REACTIVE_ARRAY:
+            return reactive(anchor, input);
+        case RENDERABLE_ARRAY:
+            for (let i = 0, n = input.length; i < n; i++) {
+                loop(fragment, input[i]);
+            }
+            break;
+        case RENDERABLE_FRAGMENT:
+            return input;
+        case RENDERABLE_NODE:
+            append.call(fragment, input);
+            break;
+        case RENDERABLE_NODE_LIST:
+            append.call(fragment, ...input);
+            break;
+    }
+    return fragment;
+}
+;

package/build/svg.d.ts

@@ -1,6 +1,5 @@
 import html from './html/index.js';
-import { RenderableTemplate } from './types.js';
 declare const svg: typeof html & {
-    sprite: <T>(symbol: string) => RenderableTemplate<T>;
+    sprite: (symbol: string) => ReturnType<typeof html>;
 };
 export default svg;

package/build/types.d.ts

@@ -1,8 +1,9 @@
 import { ReactiveArray } from '@esportsplus/reactivity';
-import { RENDERABLE, RENDERABLE_REACTIVE, RENDERABLE_TEMPLATE } from './constants.js';
-import { firstChild } from './utilities.js';
+import { RENDERABLE, RENDERABLE_HTML_FRAGMENT, RENDERABLE_HTML_REACTIVE_ARRAY } from './constants.js';
+import { firstChild } from './utilities/node.js';
 import attributes from './attributes.js';
-import slot from './slot.js';
+import slot from './slot/index.js';
+import html from './html/index.js';
 type Attribute = Primitive | Effect<Primitive | Primitive[]>;
 type Attributes = {
     class?: Attribute | Attribute[];
@@ -17,25 +18,28 @@ type Attributes = {
     onrender?: (element: Element) => void;
 } & Record<PropertyKey, unknown>;
 type Effect<T> = () => EffectResponse<T>;
-type EffectResponse<T> = T extends [] ? EffectResponse<T[number]>[] : Primitive | Renderable<T>;
+type EffectResponse<T> = T extends [] ? (Primitive | Renderable)[] : Primitive | Renderable;
 type Element = HTMLElement & Attributes & Record<PropertyKey, unknown>;
 type Elements = Element[];
-type Fragment = DocumentFragment | Node;
+type Fragment = (DocumentFragment | Node) & Record<PropertyKey, unknown>;
 type Primitive = bigint | boolean | null | number | string | undefined;
-type Renderable<T = unknown> = RenderableReactive<T> | RenderableTemplate<T>;
-type RenderableReactive<T = unknown> = Readonly<{
-    [RENDERABLE]: typeof RENDERABLE_REACTIVE;
-    literals: null;
-    template: (this: ThisParameterType<Parameters<ReactiveArray<T>['map']>[0]>, ...args: Parameters<Parameters<ReactiveArray<T>['map']>[0]>) => RenderableTemplate<T>;
-    values: ReactiveArray<T>;
+type Renderable = Fragment | Primitive | RenderableReactive | RenderableTemplate;
+type RenderableReactive = Readonly<{
+    [RENDERABLE]: typeof RENDERABLE_HTML_REACTIVE_ARRAY;
+    array: ReactiveArray<unknown[]>;
+    template: (this: ReactiveArray<unknown[]>, ...args: Parameters<Parameters<ReactiveArray<unknown[]>['map']>[0]>) => ReturnType<typeof html>;
 }>;
-type RenderableTemplate<T = unknown> = {
-    [RENDERABLE]: typeof RENDERABLE_TEMPLATE;
+type RenderableTemplate = {
+    [RENDERABLE]: typeof RENDERABLE_HTML_FRAGMENT;
+    fragment: Fragment;
     literals: TemplateStringsArray;
-    template: Template | null;
-    values: (RenderableValue<T> | RenderableValue<T>[])[];
 };
-type RenderableValue<T = unknown> = Attributes | Readonly<Attributes> | Readonly<Attributes[]> | Effect<T> | Primitive | Renderable;
+type RenderableValue<T = unknown> = Attributes | Readonly<Attributes> | Readonly<Attributes[]> | Effect<T> | Fragment | Primitive | RenderableReactive;
+type RenderableValues = RenderableValue | RenderableValue[];
+type SlotGroup = {
+    head: Element;
+    tail: Element;
+};
 type Template = {
     fragment: DocumentFragment;
     html: string;
@@ -50,4 +54,4 @@ type Template = {
         slot: number;
     }[] | null;
 };
-export type { Attributes, Effect, Element, Elements, Fragment, Renderable, RenderableReactive, RenderableTemplate, RenderableValue, Template };
+export type { Attributes, Effect, Element, Elements, Fragment, Renderable, RenderableReactive, RenderableTemplate, RenderableValue, RenderableValues, SlotGroup, Template };

package/build/utilities/element.d.ts

@@ -0,0 +1,11 @@
+declare const addEventListener: {
+    <K extends keyof ElementEventMap>(type: K, listener: (this: Element, ev: ElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+    (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+};
+declare const className: (v: any) => void;
+declare const innerHTML: (v: any) => void;
+declare const firstElementChild: () => any;
+declare const nextElementSibling: () => any;
+declare const removeAttribute: (qualifiedName: string) => void;
+declare const setAttribute: (qualifiedName: string, value: string) => void;
+export { addEventListener, className, innerHTML, firstElementChild, nextElementSibling, removeAttribute, setAttribute };

package/build/utilities/element.js

@@ -0,0 +1,9 @@
+let getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor, prototype = Element.prototype;
+const addEventListener = prototype.addEventListener;
+const className = getOwnPropertyDescriptor(prototype, 'className').set;
+const innerHTML = getOwnPropertyDescriptor(prototype, 'innerHTML').set;
+const firstElementChild = getOwnPropertyDescriptor(prototype, 'firstElementChild').get;
+const nextElementSibling = getOwnPropertyDescriptor(prototype, 'nextElementSibling').get;
+const removeAttribute = prototype.removeAttribute;
+const setAttribute = prototype.setAttribute;
+export { addEventListener, className, innerHTML, firstElementChild, nextElementSibling, removeAttribute, setAttribute };

package/build/utilities/fragment.d.ts

@@ -0,0 +1,3 @@
+declare const append: (...nodes: (Node | string)[]) => void;
+declare const fragment: (html: string) => DocumentFragment;
+export { append, fragment };

package/build/utilities/fragment.js

@@ -0,0 +1,11 @@
+import { innerHTML } from './element.js';
+import { cloneNode } from './node.js';
+let prototype = DocumentFragment.prototype, template = document.createElement('template');
+const append = prototype.append;
+const fragment = (html) => {
+    innerHTML.call(template, html);
+    let content = template.content;
+    template = cloneNode.call(template);
+    return content;
+};
+export { append, fragment };

package/build/utilities/node.d.ts

@@ -0,0 +1,8 @@
+declare const cloneNode: (subtree?: boolean) => Node;
+declare const firstChild: () => any;
+declare const lastChild: () => any;
+declare const nextSibling: () => any;
+declare const nodeValue: (v: any) => void;
+declare const parentElement: () => any;
+declare const previousSibling: () => any;
+export { cloneNode, firstChild, lastChild, nextSibling, nodeValue, parentElement, previousSibling };

package/build/utilities/node.js

@@ -0,0 +1,9 @@
+let getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor, prototype = Node.prototype;
+const cloneNode = prototype.cloneNode;
+const firstChild = getOwnPropertyDescriptor(prototype, 'firstChild').get;
+const lastChild = getOwnPropertyDescriptor(prototype, 'lastChild').get;
+const nextSibling = getOwnPropertyDescriptor(prototype, 'nextSibling').get;
+const nodeValue = getOwnPropertyDescriptor(prototype, 'nodeValue').set;
+const parentElement = getOwnPropertyDescriptor(prototype, 'parentElement').get;
+const previousSibling = getOwnPropertyDescriptor(prototype, 'previousSibling').get;
+export { cloneNode, firstChild, lastChild, nextSibling, nodeValue, parentElement, previousSibling };

package/build/utilities/queue.d.ts

@@ -0,0 +1,3 @@
+declare const microtask: import("@esportsplus/tasks/build/factory").Scheduler;
+declare const raf: import("@esportsplus/tasks/build/factory").Scheduler;
+export { microtask, raf };

package/build/utilities/queue.js

@@ -0,0 +1,4 @@
+import { micro as m, raf as r } from '@esportsplus/tasks';
+const microtask = m();
+const raf = r();
+export { microtask, raf };

package/build/utilities/text.d.ts

@@ -0,0 +1,3 @@
+import { Element } from '../types.js';
+declare const _default: (value: string) => Element;
+export default _default;

package/build/utilities/text.js

@@ -0,0 +1,9 @@
+import { cloneNode, nodeValue } from './node.js';
+let text = document.createTextNode('');
+export default (value) => {
+    let element = cloneNode.call(text);
+    if (value !== '') {
+        nodeValue.call(element, value);
+    }
+    return element;
+};

package/package.json

@@ -2,7 +2,7 @@
   "author": "ICJR",
   "dependencies": {
     "@esportsplus/queue": "^0.1.0",
-    "@esportsplus/reactivity": "^0.13.2",
+    "@esportsplus/reactivity": "^0.15.0",
     "@esportsplus/tasks": "^0.2.1",
     "@esportsplus/utilities": "^0.22.1"
   },
@@ -14,7 +14,7 @@
   "private": false,
   "type": "module",
   "types": "./build/index.d.ts",
-  "version": "0.16.1",
+  "version": "0.18.0",
   "scripts": {
     "build": "tsc && tsc-alias",
     "-": "-"