@esportsplus/template 0.17.0 → 0.18.0

package/src/event.ts

@@ -1,7 +1,9 @@
 import { root } from '@esportsplus/reactivity';
 import { defineProperty } from '@esportsplus/utilities';
 import { Element } from './types';
-import { addEventListener, parentElement, raf } from './utilities';
+import { addEventListener } from './utilities/element';
+import { parentElement } from './utilities/node';
+import { raf } from './utilities/queue';
 import { ondisconnect } from './slot/cleanup';
 
 
@@ -24,35 +26,7 @@ let capture = new Set<`on${string}`>(['onblur', 'onfocus', 'onscroll']),
 });
 
 
-export default (element: Element, event: `on${string}`, listener: Function): void => {
-    if (event === 'onconnect') {
-        let retry = 60,
-            task = () => {
-                retry--;
-
-                if (element.isConnected) {
-                    retry = 0;
-                    root(() => listener(element));
-                }
-
-                if (retry) {
-                    raf.add(task);
-                }
-            };
-
-        raf.add(task);
-
-        return;
-    }
-    else if (event === 'ondisconnect') {
-        ondisconnect(element, () => listener(element));
-        return;
-    }
-    else if (event === 'onrender') {
-        root(() => listener(element));
-        return;
-    }
-
+function register(element: Element, event: `on${string}`) {
     let controller = controllers.get(event),
         signal: AbortController['signal'] | undefined;
 
@@ -83,34 +57,63 @@ export default (element: Element, event: `on${string}`, listener: Function): voi
         signal = controller.signal;
     }
 
-    let key = keys[event];
+    let key = keys[event] = Symbol();
+
+    addEventListener.call(window.document, event.slice(2), (e) => {
+        let node = e.target as Element | null;
 
-    if (!key) {
-        key = keys[event] = Symbol();
+        while (node) {
+            if (key in node) {
+                defineProperty(e, 'currentTarget', {
+                    configurable: true,
+                    get() {
+                        return node || window.document;
+                    }
+                });
 
-        addEventListener.call(window.document, event.slice(2), (e) => {
-            let node = e.target as Element | null;
+                return (node[key] as Function).call(node, e);
+            }
+
+            node = parentElement.call(node);
+        }
+    }, {
+        capture: capture.has(event),
+        passive: passive.has(event),
+        signal
+    });
 
-            while (node) {
-                if (key in node) {
-                    defineProperty(e, 'currentTarget', {
-                        configurable: true,
-                        get() {
-                            return node || window.document;
-                        }
-                    });
+    return key;
+}
 
-                    return (node[key] as Function).call(node, e);
+
+export default (element: Element, event: `on${string}`, listener: Function): void => {
+    if (event === 'onconnect') {
+        let retry = 60,
+            task = () => {
+                retry--;
+
+                if (element.isConnected) {
+                    retry = 0;
+                    root(() => listener(element));
                 }
 
-                node = parentElement.call(node);
-            }
-        }, {
-            capture: capture.has(event),
-            passive: passive.has(event),
-            signal
-        });
+                if (retry) {
+                    raf.add(task);
+                }
+            };
+
+        raf.add(task);
+
+        return;
+    }
+    else if (event === 'ondisconnect') {
+        ondisconnect(element, () => listener(element));
+        return;
+    }
+    else if (event === 'onrender') {
+        root(() => listener(element));
+        return;
     }
 
-    element[key] = listener;
+    element[ keys[event] || register(element, event) ] = listener;
 };

package/src/html/hydrate.ts

@@ -1,5 +1,5 @@
 import { Fragment, RenderableValues, Template } from '~/types';
-import { cloneNode } from '~/utilities';
+import { cloneNode } from '~/utilities/node';
 
 
 export default ({ fragment, slots }: Template, values: RenderableValues[]): Fragment => {

package/src/html/index.ts

@@ -2,13 +2,13 @@ import { ReactiveArray } from '@esportsplus/reactivity';
 import { RENDERABLE, RENDERABLE_HTML_FRAGMENT, RENDERABLE_HTML_REACTIVE_ARRAY } from '~/constants';
 import { RenderableReactive, RenderableTemplate, RenderableValues } from '~/types';
 import hydrate from './hydrate';
-import cache from './cache';
+import parser from './parser';
 
 
 const html = (literals: TemplateStringsArray, ...values: RenderableValues[]): RenderableTemplate => {
     return {
         [RENDERABLE]: RENDERABLE_HTML_FRAGMENT,
-        fragment: hydrate(cache.get(literals), values),
+        fragment: hydrate(parser.parse(literals), values),
         literals
     };
 };

package/src/html/{cache.ts → parser.ts}

@@ -3,7 +3,9 @@ import {
     REGEX_SLOT_NODES, SLOT_HTML, SLOT_MARKER, SLOT_MARKER_LENGTH
 } from '~/constants';
 import { Template } from '~/types';
-import { firstChild, firstElementChild, fragment, nextElementSibling, nextSibling } from '~/utilities';
+import { firstElementChild, nextElementSibling } from '~/utilities/element';
+import { fragment } from '~/utilities/fragment';
+import { firstChild, nextSibling } from '~/utilities/node';
 import { spread } from '~/attributes';
 import s from '~/slot';
 
@@ -137,9 +139,9 @@ function set(literals: TemplateStringsArray, html: string, slots: Template['slot
 }
 
 
-const get = (literals: TemplateStringsArray) => {
+const parse = (literals: TemplateStringsArray) => {
     return cache.get(literals) || build(literals);
 };
 
 
-export default { get };
+export default { parse };

package/src/render.ts

@@ -1,6 +1,7 @@
 import { SLOT_HTML } from './constants';
 import { Renderable } from './types';
-import { firstChild, fragment, nodeValue } from './utilities';
+import { fragment } from './utilities/fragment';
+import { firstChild, nodeValue } from './utilities/node';
 import slot from './slot';
 
 
@@ -9,9 +10,8 @@ let anchor,
 
 
 export default (parent: HTMLElement, renderable: Renderable) => {
-    // parent.nodeValue = '';
     nodeValue.call(parent, '');
     parent.append(anchor = marker.cloneNode());
 
-    return slot(anchor, renderable);
+    slot(anchor, renderable);
 };

package/src/slot/cleanup.ts

@@ -1,6 +1,7 @@
 import queue from '@esportsplus/queue';
 import { CLEANUP } from '~/constants';
-import { microtask, previousSibling } from '~/utilities';
+import { microtask } from '~/utilities/queue';
+import { previousSibling } from '~/utilities/node';
 import { SlotGroup } from '~/types';
 
 
@@ -51,7 +52,6 @@ const remove = (groups: SlotGroup[]) => {
         head = group.head;
         tail = group.tail || head;
 
-        // for (let node: Element | null = tail; node; node = node.previousSibling as Element | null) {
         for (let node = tail; node; node = previousSibling.call(node)) {
             if (CLEANUP in node) {
                 cleanup.add( node[CLEANUP] as VoidFunction[] );

package/src/slot/effect.ts

@@ -1,13 +1,15 @@
 import { effect } from '@esportsplus/reactivity';
-import { EMPTY_FRAGMENT, STATE_HYDRATING, STATE_NONE } from '~/constants';
-import { Element, Fragment, SlotGroup } from '~/types';
-import { cloneNode, firstChild, lastChild, nodeValue, raf, text } from '~/utilities'
+import { STATE_HYDRATING, STATE_NONE } from '~/constants';
+import { Element, SlotGroup } from '~/types';
+import { firstChild, lastChild, nodeValue } from '~/utilities/node'
+import { raf } from '~/utilities/queue'
 import { ondisconnect } from '~/slot/cleanup';
 import { remove } from './cleanup';
+import text from '~/utilities/text';
 import render from './render';
 
 
-function update(this: { group?: SlotGroup, textnode?: Element }, anchor: Element, fragment: Fragment, value: unknown) {
+function update(this: { group?: SlotGroup, textnode?: Element }, anchor: Element, value: unknown) {
     let type = typeof value;
 
     if (this.group) {
@@ -19,7 +21,6 @@ function update(this: { group?: SlotGroup, textnode?: Element }, anchor: Element
         let textnode = this.textnode;
 
         if (textnode) {
-            // textnode.nodeValue = String(value);
             nodeValue.call(textnode, String(value));
         }
         else {
@@ -31,11 +32,13 @@ function update(this: { group?: SlotGroup, textnode?: Element }, anchor: Element
         }
     }
     else {
-        render(anchor, fragment, value);
+        let fragment = render(anchor, value);
+
+        if (!fragment) {
+            return;
+        }
 
         this.group = {
-            // head: fragment.firstChild as Element,
-            // tail: fragment.lastChild as Element
             head: firstChild.call(fragment),
             tail: lastChild.call(fragment)
         };
@@ -50,8 +53,6 @@ export default (anchor: Element, fn: Function) => {
             group: undefined as SlotGroup | undefined,
             textnode: undefined as Element | undefined
         },
-        // fragment = EMPTY_FRAGMENT.cloneNode() as Fragment,
-        fragment = cloneNode.call(EMPTY_FRAGMENT) as Fragment,
         state = STATE_HYDRATING;
 
     ondisconnect(
@@ -60,12 +61,12 @@ export default (anchor: Element, fn: Function) => {
             let value = fn();
 
             if (state === STATE_HYDRATING) {
-                update.call(context, anchor, fragment, value);
+                update.call(context, anchor, value);
                 state = STATE_NONE;
             }
             else if (state === STATE_NONE) {
                 raf.add(() => {
-                    update.call(context, anchor, fragment, value);
+                    update.call(context, anchor, value);
                 });
             }
         })

package/src/slot/index.ts

@@ -1,23 +1,12 @@
-import { EMPTY_FRAGMENT } from '~/constants';
-import { Element, Fragment } from '~/types';
-import { cloneNode } from '~/utilities';
+import { Element } from '~/types';
 import effect from './effect';
 import render from './render';
 
 
-function slot(anchor: Element, input: unknown) {
-    let fragment = cloneNode.call(EMPTY_FRAGMENT) as Fragment;
-
-    render(anchor, fragment, input);
-
-    anchor.after(fragment);
-}
-
-
-export default (anchor: Element, value: unknown) => {
+export default (anchor: Element, value: unknown): void => {
     if (typeof value === 'function') {
         return effect(anchor, value as Function);
     }
 
-    return slot(anchor, value);
+    anchor.after(render(anchor, value));
 };

package/src/slot/reactive.ts

@@ -1,7 +1,8 @@
 import { root, ReactiveArray } from '@esportsplus/reactivity';
 import { EMPTY_FRAGMENT } from '~/constants';
 import { Fragment, RenderableReactive, SlotGroup } from '~/types';
-import { append, cloneNode, firstChild, lastChild } from '~/utilities';
+import { append } from '~/utilities/fragment';
+import { cloneNode, firstChild, lastChild } from '~/utilities/node';
 import { remove } from './cleanup';
 
 
@@ -100,14 +101,14 @@ class ReactiveArraySlot<T> {
 
     push(items: T[]) {
         let anchor = this.anchor(),
-            array = this.array;
+            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.push(
-                this.template.call(array, items[i], i)
-            );
+            this.nodes[i + length] = this.template.call(array, items[i], i);
         }
-
         anchor.after(this.fragment);
     }
 
@@ -163,5 +164,14 @@ class ReactiveArraySlot<T> {
 
 
 export default (anchor: Element, renderable: RenderableReactive) => {
-    new ReactiveArraySlot(anchor, renderable.array, renderable.template);
+    let { array, template } = renderable,
+        slot = new ReactiveArraySlot(anchor, array, template);
+
+    if (array.length) {
+        root(() => {
+            slot.nodes = array.map(slot.template);
+        });
+    }
+
+    return slot.fragment;
 };

package/src/slot/render.ts

@@ -1,11 +1,14 @@
 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';
 import { Element, Fragment, RenderableReactive, RenderableTemplate } from '~/types';
-import { append, text } from '~/utilities';
+import { cloneNode } from '~/utilities/node';
+import { append } from '~/utilities/fragment';
+import text from '~/utilities/text';
 import reactive from './reactive';
 
 
@@ -28,6 +31,7 @@ function type(input: unknown) {
 
     let nodeType = (input as any).nodeType;
 
+    // Document Fragment
     if (nodeType === 11) {
         return RENDERABLE_FRAGMENT;
     }
@@ -39,43 +43,75 @@ function type(input: unknown) {
     if (input instanceof NodeList) {
         return RENDERABLE_NODE_LIST;
     }
-}
 
+    return RENDERABLE_TEXT;
+}
 
-export default function render(anchor: Element, fragment: Fragment, input: unknown) {
+function loop(fragment: Node, input: unknown) {
     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_TEXT:
-            append.call(fragment, text(String(input)));
+        case RENDERABLE_ARRAY:
+            for (let i = 0, n = (input as unknown[]).length; i < n; i++) {
+                loop(fragment, (input as unknown[])[i])
+            }
             return;
 
-        case RENDERABLE_HTML_FRAGMENT:
-            append.call(fragment, (input as RenderableTemplate).fragment);
+        case RENDERABLE_NODE_LIST:
+            append.call(fragment, ...input as Element[]);
+            return;
+
+        default:
+            append.call(fragment, input as Element)
             return;
+    }
+}
+
+let scratchpad = cloneNode.call(EMPTY_FRAGMENT);
+
+
+export default function render(anchor: Element, input: unknown): Node {
+    let fragment = scratchpad,
+        t = type(input);
+
+    switch (t) {
+        case RENDERABLE_VOID:
+            break;
+
+        case RENDERABLE_TEXT:
+            append.call(fragment, text(input as string));
+            break;
+
+        case RENDERABLE_HTML_FRAGMENT:
+            return (input as RenderableTemplate).fragment;
 
         case RENDERABLE_HTML_REACTIVE_ARRAY:
             return reactive(anchor, input as RenderableReactive);
 
         case RENDERABLE_ARRAY:
             for (let i = 0, n = (input as unknown[]).length; i < n; i++) {
-                render(anchor, fragment, (input as unknown[])[i]);
+                loop(fragment, (input as unknown[])[i]);
             }
-            return;
+
+            break;
 
         case RENDERABLE_FRAGMENT:
-            append.call(fragment, input as Fragment);
-            return;
+            return input as Fragment;
 
         case RENDERABLE_NODE:
-            append.call(fragment, input as Node);
-            return;
+            append.call(fragment, input as Element);
+            break;
 
         case RENDERABLE_NODE_LIST:
-            append.call(fragment, ...(input as NodeList));
-            return;
+            append.call(fragment, ...input as Element[]);
+            break;
     }
+
+    return fragment;
 };

package/src/types.ts

@@ -1,6 +1,6 @@
 import { ReactiveArray } from '@esportsplus/reactivity';
 import { RENDERABLE, RENDERABLE_HTML_FRAGMENT, RENDERABLE_HTML_REACTIVE_ARRAY } from './constants';
-import { firstChild } from './utilities';
+import { firstChild } from './utilities/node';
 import attributes from './attributes';
 import slot from './slot';
 import html from './html';
@@ -37,7 +37,7 @@ type Fragment = (DocumentFragment | Node) & Record<PropertyKey, unknown>;
 // - Importing from ^ causes 'cannot be named without a reference to...' error
 type Primitive = bigint | boolean | null | number | string | undefined;
 
-type Renderable = Fragment | RenderableReactive;
+type Renderable = Fragment | Primitive | RenderableReactive | RenderableTemplate;
 
 type RenderableReactive = Readonly<{
     [RENDERABLE]: typeof RENDERABLE_HTML_REACTIVE_ARRAY;

package/src/utilities/element.ts

@@ -0,0 +1,28 @@
+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/src/utilities/fragment.ts

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

package/src/utilities/node.ts

@@ -0,0 +1,26 @@
+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/src/utilities/queue.ts

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

package/src/utilities/text.ts

@@ -0,0 +1,16 @@
+import { cloneNode, nodeValue } from './node';
+import { Element } from '~/types';
+
+
+let text = document.createTextNode('');
+
+
+export default (value: string) => {
+    let element = cloneNode.call(text);
+
+    if (value !== '') {
+        nodeValue.call(element, value);
+    }
+
+    return element as Element;
+};

package/build/utilities.d.ts

@@ -1,28 +0,0 @@
-import { Element as E } from './types.js';
-declare const append: (...nodes: (Node | string)[]) => void;
-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 removeEventListener: {
-    <K extends keyof ElementEventMap>(type: K, listener: (this: Element, ev: ElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-    (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): 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;
-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;
-declare const fragment: (html: string) => DocumentFragment;
-declare const microtask: import("@esportsplus/tasks/build/factory").Scheduler;
-declare const raf: import("@esportsplus/tasks/build/factory").Scheduler;
-declare const text: (value: string) => E;
-export { addEventListener, append, className, cloneNode, firstChild, firstElementChild, fragment, innerHTML, lastChild, microtask, nextElementSibling, nextSibling, nodeValue, parentElement, previousSibling, raf, removeAttribute, removeEventListener, setAttribute, text };

package/build/utilities.js

@@ -1,37 +0,0 @@
-import { micro as m, raf as r } from '@esportsplus/tasks';
-let getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor, prototype, template = document.createElement('template'), t = document.createTextNode('');
-prototype = DocumentFragment.prototype;
-const append = prototype.append;
-prototype = Element.prototype;
-const addEventListener = prototype.addEventListener;
-const removeEventListener = prototype.removeEventListener;
-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;
-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;
-const fragment = (html) => {
-    innerHTML.call(template, html);
-    let { content } = template;
-    template = cloneNode.call(template);
-    return content;
-};
-const microtask = m();
-const raf = r();
-const text = (value) => {
-    let element = cloneNode.call(t);
-    if (value !== '') {
-        nodeValue.call(element, value);
-    }
-    return element;
-};
-export { addEventListener, append, className, cloneNode, firstChild, firstElementChild, fragment, innerHTML, lastChild, microtask, nextElementSibling, nextSibling, nodeValue, parentElement, previousSibling, raf, removeAttribute, removeEventListener, setAttribute, text };