@esportsplus/template 0.16.1 → 0.17.0

package/src/constants.ts

@@ -1,6 +1,9 @@
 import { fragment } from './utilities';
 
 
+const CLEANUP = Symbol();
+
+
 const EMPTY_FRAGMENT = fragment('');
 
 
@@ -44,9 +47,21 @@ const REGEX_SLOT_NODES = /<([\w-]+|[\/!])(?:([^><]*{{\$}}[^><]*)|(?:[^><]*))?>|{
 
 const RENDERABLE = Symbol();
 
-const RENDERABLE_REACTIVE = Symbol();
+const RENDERABLE_ARRAY = 0;
+
+const RENDERABLE_FRAGMENT = 1;
+
+const RENDERABLE_HTML_FRAGMENT = 2;
+
+const RENDERABLE_HTML_REACTIVE_ARRAY = 3;
+
+const RENDERABLE_NODE = 4;
 
-const RENDERABLE_TEMPLATE = Symbol();
+const RENDERABLE_NODE_LIST = 5;
+
+const RENDERABLE_TEXT = 6;
+
+const RENDERABLE_VOID = 7;
 
 
 const SLOT_HTML = '<!--$-->';
@@ -56,10 +71,22 @@ const SLOT_MARKER = '{{$}}';
 const SLOT_MARKER_LENGTH = SLOT_MARKER.length;
 
 
+const STATE_HYDRATING = 0;
+
+const STATE_NONE = 1;
+
+const STATE_WAITING = 2;
+
+
 export {
+    CLEANUP,
     EMPTY_FRAGMENT,
     NODE_CLOSING, NODE_ELEMENT, NODE_SLOT, NODE_VOID, NODE_WHITELIST,
     REGEX_EMPTY_TEXT_NODES, REGEX_SLOT_NODES,
-    RENDERABLE, RENDERABLE_REACTIVE, RENDERABLE_TEMPLATE,
-    SLOT_HTML, SLOT_MARKER, SLOT_MARKER_LENGTH
+    RENDERABLE, RENDERABLE_ARRAY, RENDERABLE_FRAGMENT,
+    RENDERABLE_HTML_FRAGMENT, RENDERABLE_HTML_REACTIVE_ARRAY,
+    RENDERABLE_NODE, RENDERABLE_NODE_LIST, RENDERABLE_TEXT,
+    RENDERABLE_VOID,
+    SLOT_HTML, SLOT_MARKER, SLOT_MARKER_LENGTH,
+    STATE_HYDRATING, STATE_NONE, STATE_WAITING
 };

package/src/event.ts

@@ -1,8 +1,8 @@
 import { root } from '@esportsplus/reactivity';
 import { defineProperty } from '@esportsplus/utilities';
-import { ondisconnect } from './slot';
 import { Element } from './types';
 import { addEventListener, parentElement, raf } from './utilities';
+import { ondisconnect } from './slot/cleanup';
 
 
 let capture = new Set<`on${string}`>(['onblur', 'onfocus', 'onscroll']),
@@ -91,15 +91,15 @@ export default (element: Element, event: `on${string}`, listener: Function): voi
         addEventListener.call(window.document, event.slice(2), (e) => {
             let node = e.target as Element | null;
 
-            defineProperty(e, 'currentTarget', {
-                configurable: true,
-                get() {
-                    return node || window.document;
-                }
-            });
-
             while (node) {
                 if (key in node) {
+                    defineProperty(e, 'currentTarget', {
+                        configurable: true,
+                        get() {
+                            return node || window.document;
+                        }
+                    });
+
                     return (node[key] as Function).call(node, e);
                 }
 

package/src/html/hydrate.ts

@@ -1,125 +1,53 @@
-import { root } from '@esportsplus/reactivity';
-import { EMPTY_FRAGMENT } from '~/constants';
-import { Elements, Fragment, RenderableReactive, RenderableTemplate } from '~/types';
-import { Slot } from '~/slot';
+import { Fragment, RenderableValues, Template } from '~/types';
 import { cloneNode } from '~/utilities';
-import cache from './cache';
 
 
-function reactive<T>(elements: Elements[], fragment: Fragment, renderable: RenderableReactive<T>, slot: Slot) {
-    let array = renderable.values,
-        factory = renderable.template,
-        refresh = () => {
-            root(() => array.map(template));
+export default ({ fragment, slots }: Template, values: RenderableValues[]): Fragment => {
+    let clone = cloneNode.call(fragment, true);
 
-            slot.clear();
-            slot.anchor().after(fragment);
-            slot.nodes = elements;
-
-            reset();
-        },
-        reset = () => {
-            elements = [];
-            fragment = cloneNode.call(EMPTY_FRAGMENT);
-        },
-        template = function(data, i) {
-            hydrate(elements, fragment, factory.call(this, data, i));
-        } as (this: typeof array, ...args: Parameters<Parameters<typeof array['map']>[0]>) => void;
-
-    array.on('clear', () => slot.clear());
-    array.on('pop', () => slot.pop());
-    array.on('reverse', refresh);
-    array.on('shift', () => slot.shift());
-    array.on('sort', refresh);
-
-    array.on('push', ({ items }) => {
-        let anchor = slot.anchor();
-
-        elements = slot.nodes;
-
-        root(() => array.map(template, array.length - items.length));
-
-        anchor.after(fragment);
-        reset();
-    });
-    array.on('splice', ({ deleteCount: d, items: i, start: s }) => {
-        if (array.length === 0) {
-            slot.clear();
-            return;
-        }
-
-        root(() => array.map(template, s, i.length))
-
-        slot.splice(s, d, fragment, ...elements);
-        reset();
-    });
-    array.on('unshift', ({ items }) => {
-        root(() => array.map(template, 0, items.length))
-
-        slot.unshift(fragment, ...elements);
-        reset();
-    });
-
-    root(() => array.map(template));
-    reset();
-}
-
-function hydrate<T>(elements: Elements[] | null, fragment: Fragment, renderable: RenderableTemplate<T>) {
-    let { fragment: frag, slots } = cache.get(renderable.literals),
-        clone = cloneNode.call(frag, true);
+    if (slots === null) {
+        return clone as Fragment;
+    }
 
-    if (slots !== null) {
-        let node,
-            nodePath,
-            parent,
-            parentPath,
-            values = renderable.values;
+    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;
+    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;
+        if (pp !== parentPath) {
+            if (pp === nodePath) {
+                parent = node;
+                parentPath = nodePath;
 
-                    nodePath = undefined;
-                }
-                else {
-                    parent = clone;
-                    parentPath = pp;
+                nodePath = undefined;
+            }
+            else {
+                parent = clone;
+                parentPath = pp;
 
-                    for (let o = 0, j = pp.length; o < j; o++) {
-                        parent = pp[o].call(parent);
-                    }
+                for (let i = 0, n = pp.length; i < n; i++) {
+                    parent = pp[i].call(parent);
                 }
             }
+        }
 
-            if (pr !== nodePath) {
-                node = parent;
-                nodePath = path.absolute;
+        if (pr !== nodePath) {
+            node = parent;
+            nodePath = path.absolute;
 
-                for (let o = 0, j = pr.length; o < j; o++) {
-                    node = pr[o].call(node);
-                }
+            for (let i = 0, n = pr.length; i < n; i++) {
+                node = pr[i].call(node);
             }
-
-            // @ts-ignore
-            fn(node, values[slot]);
         }
-    }
 
-    if (elements) {
-        elements.push([...clone.childNodes] as Elements);
+        // @ts-ignore
+        fn(node, values[slot]);
     }
 
-    fragment.appendChild(clone)
-}
-
-
-export default {
-    reactive,
-    static: hydrate
-};
+    return clone as Fragment;
+}

package/src/html/index.ts

@@ -1,17 +1,25 @@
 import { ReactiveArray } from '@esportsplus/reactivity';
-import { RENDERABLE, RENDERABLE_REACTIVE, RENDERABLE_TEMPLATE } from '~/constants';
-import { RenderableReactive, RenderableTemplate } from '~/types';
+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';
 
 
-const html = <T>(literals: TemplateStringsArray, ...values: RenderableTemplate<T>['values']): RenderableTemplate<T> => {
-    return { [RENDERABLE]: RENDERABLE_TEMPLATE, literals, template: null, values };
+const html = (literals: TemplateStringsArray, ...values: RenderableValues[]): RenderableTemplate => {
+    return {
+        [RENDERABLE]: RENDERABLE_HTML_FRAGMENT,
+        fragment: hydrate(cache.get(literals), values),
+        literals
+    };
 };
 
-html.reactive = <T>(array: ReactiveArray<T>, template: RenderableReactive<T>['template']): RenderableReactive<T> => {
-    return { [RENDERABLE]: RENDERABLE_REACTIVE, literals: null, template, values: array };
+html.reactive = <T>(array: ReactiveArray<T[]>, template: RenderableReactive['template']) => {
+    return {
+        [RENDERABLE]: RENDERABLE_HTML_REACTIVE_ARRAY,
+        array,
+        template
+    };
 };
 
 
-export default html;
-export { hydrate };
+export default html;

package/src/render.ts

@@ -1,21 +1,17 @@
-import { isInstanceOf } from '@esportsplus/utilities';
 import { SLOT_HTML } from './constants';
-import slot, { Slot } from './slot';
 import { Renderable } from './types';
-import { firstChild, fragment, nodeValue, prepend } from './utilities';
+import { firstChild, fragment, nodeValue } from './utilities';
+import slot from './slot';
 
 
-let marker = firstChild.call( fragment(SLOT_HTML) ),
-    node;
+let anchor,
+    marker = firstChild.call( fragment(SLOT_HTML) );
 
 
-export default (renderable: Renderable, parent: HTMLElement | Slot) => {
-    if (isInstanceOf(parent, Slot)) {
-        return parent.render(renderable);
-    }
-
+export default (parent: HTMLElement, renderable: Renderable) => {
+    // parent.nodeValue = '';
     nodeValue.call(parent, '');
-    prepend.call(parent, node = marker.cloneNode());
+    parent.append(anchor = marker.cloneNode());
 
-    return slot(node, renderable);
+    return slot(anchor, renderable);
 };

package/src/slot/cleanup.ts

@@ -0,0 +1,74 @@
+import queue from '@esportsplus/queue';
+import { CLEANUP } from '~/constants';
+import { microtask, previousSibling } from '~/utilities';
+import { SlotGroup } from '~/types';
+
+
+let cleanup = queue<VoidFunction[]>(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: Element, fn: VoidFunction) => {
+    ((element as any)[CLEANUP] ??= []).push(fn);
+};
+
+const remove = (groups: SlotGroup[]) => {
+    let group, head, tail;
+
+    while (group = groups.pop()) {
+        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[] );
+            }
+
+            node.remove();
+
+            if (head === node) {
+                break;
+            }
+        }
+    }
+
+    if (!scheduled && cleanup.length) {
+        schedule();
+    }
+};
+
+
+export { ondisconnect, remove };

package/src/slot/effect.ts

@@ -0,0 +1,73 @@
+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 { remove } from './cleanup';
+import render from './render';
+
+
+function update(this: { group?: SlotGroup, textnode?: Element }, anchor: Element, fragment: Fragment, value: unknown) {
+    let type = typeof value;
+
+    if (this.group) {
+        remove([this.group]);
+        this.group = undefined;
+    }
+
+    if (value == null || type !== 'object') {
+        let textnode = this.textnode;
+
+        if (textnode) {
+            // textnode.nodeValue = String(value);
+            nodeValue.call(textnode, String(value));
+        }
+        else {
+            textnode = this.textnode = text( String(value) );
+        }
+
+        if (!textnode.isConnected) {
+            anchor.after(textnode);
+        }
+    }
+    else {
+        render(anchor, fragment, value);
+
+        this.group = {
+            // head: fragment.firstChild as Element,
+            // tail: fragment.lastChild as Element
+            head: firstChild.call(fragment),
+            tail: lastChild.call(fragment)
+        };
+
+        anchor.after(fragment);
+    }
+}
+
+
+export default (anchor: Element, fn: Function) => {
+    let context = {
+            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(
+        anchor,
+        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);
+                });
+            }
+        })
+    );
+};

package/src/slot/index.ts

@@ -0,0 +1,23 @@
+import { EMPTY_FRAGMENT } from '~/constants';
+import { Element, Fragment } from '~/types';
+import { cloneNode } from '~/utilities';
+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) => {
+    if (typeof value === 'function') {
+        return effect(anchor, value as Function);
+    }
+
+    return slot(anchor, value);
+};

package/src/slot/reactive.ts

@@ -0,0 +1,167 @@
+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';
+
+
+class ReactiveArraySlot<T> {
+    array: ReactiveArray<T[]>;
+    fragment = cloneNode.call(EMPTY_FRAGMENT) as Fragment;
+    marker: Element;
+    nodes: SlotGroup[] = [];
+    template: (
+        this: ReactiveArray<T[]>,
+        ...args: Parameters< Parameters<ReactiveArray<T[]>['map']>[0] >
+    ) => SlotGroup;
+
+
+    constructor(anchor: Element, array: ReactiveArray<T[]>, template: RenderableReactive['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: number) {
+        if (n >= this.nodes.length) {
+            return;
+        }
+        else if (n === 0) {
+            this.clear();
+        }
+        else {
+            this.splice(n);
+        }
+    }
+
+
+    anchor(index: number = 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: T[]) {
+        let anchor = this.anchor(),
+            array = this.array;
+
+        for (let i = 0, n = items.length; i < n; i++) {
+            this.nodes.push(
+                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: number, stop: number = this.nodes.length, ...items: T[]) {
+        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: T[]) {
+        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: Element, renderable: RenderableReactive) => {
+    new ReactiveArraySlot(anchor, renderable.array, renderable.template);
+};