@esportsplus/template 0.17.0 → 0.19.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/index.ts

@@ -1,19 +1,58 @@
 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 { RENDERABLE, RENDERABLE_HTML_REACTIVE_ARRAY } from '~/constants';
+import { RenderableReactive, RenderableValue } from '~/types';
+import { cloneNode } from '~/utilities/node';
+import parser from './parser';
 
 
-const html = (literals: TemplateStringsArray, ...values: RenderableValues[]): RenderableTemplate => {
-    return {
-        [RENDERABLE]: RENDERABLE_HTML_FRAGMENT,
-        fragment: hydrate(cache.get(literals), values),
-        literals
-    };
+const html = (literals: TemplateStringsArray, ...values: (RenderableValue | RenderableValue[])[]): DocumentFragment => {
+    let { fragment, slots } = parser.parse(literals);
+
+    fragment = cloneNode.call(fragment, true) as DocumentFragment;
+
+    if (slots !== null) {
+        let node, nodePath, parent, parentPath;
+
+        for (let i = 0, n = slots.length; i < n; i++) {
+            let { fn, path, slot } = slots[i],
+                pp = path.parent,
+                pr = path.relative;
+
+            if (pp !== parentPath) {
+                if (pp === nodePath) {
+                    parent = node;
+                    parentPath = nodePath;
+
+                    nodePath = undefined;
+                }
+                else {
+                    parent = fragment;
+                    parentPath = pp;
+
+                    for (let i = 0, n = pp.length; i < n; i++) {
+                        parent = pp[i].call(parent);
+                    }
+                }
+            }
+
+            if (pr !== nodePath) {
+                node = parent;
+                nodePath = path.absolute;
+
+                for (let i = 0, n = pr.length; i < n; i++) {
+                    node = pr[i].call(node);
+                }
+            }
+
+            // @ts-ignore
+            fn(node, values[slot]);
+        }
+    }
+
+    return fragment;
 };
 
-html.reactive = <T>(array: ReactiveArray<T[]>, template: RenderableReactive['template']) => {
+html.reactive = <T>(array: ReactiveArray<T[]>, template: RenderableReactive['template']): RenderableReactive => {
     return {
         [RENDERABLE]: RENDERABLE_HTML_REACTIVE_ARRAY,
         array,

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

@@ -3,8 +3,10 @@ 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 { firstChild, nextSibling } from '~/utilities/node';
 import { spread } from '~/attributes';
+import { fragment } from '~/utilities/fragment';
 import s from '~/slot';
 
 
@@ -124,22 +126,28 @@ function methods(children: number, copy: (typeof firstChild)[], first: (typeof f
 }
 
 function set(literals: TemplateStringsArray, html: string, slots: Template['slots'] = null) {
-    let template = {
+    let value = {
             fragment: fragment(html),
             html,
             literals,
             slots
         };
 
-    cache.set(literals, template);
+    cache.set(literals, value);
 
-    return template;
+    return value;
 }
 
 
-const get = (literals: TemplateStringsArray) => {
-    return cache.get(literals) || build(literals);
+const parse = (literals: TemplateStringsArray) => {
+    let result = cache.get(literals);
+
+    if (result === undefined) {
+        result = build(literals);
+    }
+
+    return result;
 };
 
 
-export default { get };
+export default { parse };

package/src/index.ts

@@ -1,4 +1,4 @@
 export { default as html } from './html';
 export { default as render } from './render';
 export { default as svg } from './svg';
-export type { Attributes, Element, Elements, Renderable, RenderableValue } from './types';
+export type { Attributes, Element, Renderable, RenderableValue } from './types';

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';
 
 
@@ -19,8 +20,7 @@ function schedule() {
 
 function task() {
     try {
-        let fns,
-            fn,
+        let fns, fn,
             n = cleanup.length;
 
         while ((fns = cleanup.next()) && n--) {
@@ -51,7 +51,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,25 +1,27 @@
 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 { ondisconnect } from '~/slot/cleanup';
+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 { 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) {
-    let type = typeof value;
-
+function update(this: { group?: SlotGroup, textnode?: Node }, anchor: Element, value: unknown) {
     if (this.group) {
         remove([this.group]);
         this.group = undefined;
     }
 
-    if (value == null || type !== 'object') {
+    if (value == null || value === false) {
+        value = '';
+    }
+
+    if (typeof value !== 'object') {
         let textnode = this.textnode;
 
         if (textnode) {
-            // textnode.nodeValue = String(value);
             nodeValue.call(textnode, String(value));
         }
         else {
@@ -31,16 +33,17 @@ function update(this: { group?: SlotGroup, textnode?: Element }, anchor: Element
         }
     }
     else {
-        render(anchor, fragment, value);
+        let fragment = render(anchor, value),
+            head = firstChild.call(fragment);
 
-        this.group = {
-            // head: fragment.firstChild as Element,
-            // tail: fragment.lastChild as Element
-            head: firstChild.call(fragment),
-            tail: lastChild.call(fragment)
-        };
+        if (head) {
+            this.group = {
+                head,
+                tail: lastChild.call(fragment)
+            };
 
-        anchor.after(fragment);
+            anchor.after(fragment);
+        }
     }
 }
 
@@ -48,26 +51,21 @@ function update(this: { group?: SlotGroup, textnode?: Element }, anchor: Element
 export default (anchor: Element, fn: Function) => {
     let context = {
             group: undefined as SlotGroup | undefined,
-            textnode: undefined as Element | undefined
+            textnode: undefined as Node | undefined
         },
-        // fragment = EMPTY_FRAGMENT.cloneNode() as Fragment,
-        fragment = cloneNode.call(EMPTY_FRAGMENT) as Fragment,
         state = STATE_HYDRATING;
 
-    ondisconnect(
-        anchor,
-        effect(() => {
-            let value = fn();
+    effect(() => {
+        let value = fn();
 
-            if (state === STATE_HYDRATING) {
-                update.call(context, anchor, fragment, value);
-                state = STATE_NONE;
-            }
-            else if (state === STATE_NONE) {
-                raf.add(() => {
-                    update.call(context, anchor, fragment, value);
-                });
-            }
-        })
-    );
+        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/src/slot/index.ts

@@ -1,23 +1,13 @@
-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);
+        effect(anchor, value as Function);
+    }
+    else {
+        anchor.after( render(anchor, value) );
     }
-
-    return slot(anchor, value);
 };

package/src/slot/reactive.ts

@@ -1,13 +1,14 @@
 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 { remove } from './cleanup';
+import { RenderableReactive, SlotGroup } from '~/types';
+import { append } from '~/utilities/fragment';
+import { cloneNode, firstChild, lastChild } from '~/utilities/node';
+import { ondisconnect, remove } from './cleanup';
 
 
 class ReactiveArraySlot<T> {
     array: ReactiveArray<T[]>;
-    fragment = cloneNode.call(EMPTY_FRAGMENT) as Fragment;
+    fragment: Node;
     marker: Element;
     nodes: SlotGroup[] = [];
     template: (
@@ -17,45 +18,45 @@ class ReactiveArraySlot<T> {
 
 
     constructor(anchor: Element, array: ReactiveArray<T[]>, template: RenderableReactive['template']) {
-        let fragment = this.fragment;
+        let fragment = this.fragment = cloneNode.call(EMPTY_FRAGMENT);
 
         this.array = array;
         this.marker = anchor;
         this.template = function (data, i) {
-            let frag = template.call(this, data, i).fragment,
+            let dispose: VoidFunction,
+                frag = root((d) => {
+                    dispose = d;
+                    return template.call(this, data, i);
+                }),
                 group = {
                     head: firstChild.call(frag),
                     tail: lastChild.call(frag)
                 };
 
             append.call(fragment, frag);
+            ondisconnect(group.head, dispose!);
 
             return group;
         };
 
-
-        let render = () => {
-                root(() => this.render());
-            };
-
         array.on('clear', () => this.clear());
-        array.on('reverse', render);
+        array.on('reverse', () => {
+            root(() => this.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('sort', () => {
+            root(() => this.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();
-        }
     }
 
 
@@ -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,81 +1,50 @@
 import { isArray } from '@esportsplus/utilities';
-import {
-    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 { EMPTY_FRAGMENT, RENDERABLE } from '~/constants';
+import { Element, RenderableReactive } from '~/types';
+import { cloneNode, lastChild } from '~/utilities/node';
+import { append } from '~/utilities/fragment';
+import text from '~/utilities/text';
 import reactive from './reactive';
 
 
-function type(input: unknown) {
-    if (input === false || input == null || input === '') {
-        return RENDERABLE_VOID;
+export default function render(anchor: Element, input: unknown): Node {
+    if (input == null || input === false || input === '') {
+        return EMPTY_FRAGMENT;
     }
 
     if (typeof input !== 'object') {
-        return RENDERABLE_TEXT;
+        return text(input as any);
     }
 
-    if (RENDERABLE in input) {
-        return input[RENDERABLE];
+    if ('nodeType' in input) {
+        return input as Node;
     }
 
-    if (isArray(input)) {
-        return RENDERABLE_ARRAY;
+    if (RENDERABLE in input) {
+        return reactive(anchor, input as RenderableReactive);
     }
 
-    let nodeType = (input as any).nodeType;
+    if (isArray(input)) {
+        let fragment = cloneNode.call(EMPTY_FRAGMENT);
 
-    if (nodeType === 11) {
-        return RENDERABLE_FRAGMENT;
-    }
+        for (let i = 0, n = (input as unknown[]).length; i < n; i++) {
+            append.call(fragment, render(anchor, (input as unknown[])[i]));
+            anchor = lastChild.call(fragment);
+        }
 
-    if (nodeType !== undefined) {
-        return RENDERABLE_NODE;
+        return fragment;
     }
 
     if (input instanceof NodeList) {
-        return RENDERABLE_NODE_LIST;
-    }
-}
-
-
-export default function render(anchor: Element, fragment: Fragment, input: unknown) {
-    let t = type(input);
+        let fragment = cloneNode.call(EMPTY_FRAGMENT),
+            nodes = Array.from(input as NodeList);
 
-    switch (t) {
-        case RENDERABLE_VOID:
-            return;
+        for (let i = 0, n = nodes.length; i < n; i++) {
+            append.call(fragment, nodes[i]);
+        }
 
-        case RENDERABLE_TEXT:
-            append.call(fragment, text(String(input)));
-            return;
-
-        case RENDERABLE_HTML_FRAGMENT:
-            append.call(fragment, (input as RenderableTemplate).fragment);
-            return;
-
-        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]);
-            }
-            return;
-
-        case RENDERABLE_FRAGMENT:
-            append.call(fragment, input as Fragment);
-            return;
-
-        case RENDERABLE_NODE:
-            append.call(fragment, input as Node);
-            return;
-
-        case RENDERABLE_NODE_LIST:
-            append.call(fragment, ...(input as NodeList));
-            return;
+        return fragment;
     }
+
+    return text(input as any);
 };