@esportsplus/template 0.15.20 → 0.17.0

package/src/constants.ts

@@ -1,3 +1,12 @@
+import { fragment } from './utilities';
+
+
+const CLEANUP = Symbol();
+
+
+const EMPTY_FRAGMENT = fragment('');
+
+
 const NODE_CLOSING = 1;
 
 const NODE_COMMENT = 2;
@@ -38,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_TEMPLATE = Symbol();
+const RENDERABLE_HTML_REACTIVE_ARRAY = 3;
+
+const RENDERABLE_NODE = 4;
+
+const RENDERABLE_NODE_LIST = 5;
+
+const RENDERABLE_TEXT = 6;
+
+const RENDERABLE_VOID = 7;
 
 
 const SLOT_HTML = '<!--$-->';
@@ -50,9 +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/cache.ts

@@ -2,7 +2,7 @@ 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';
-import { RenderableTemplate, Template } from '~/types';
+import { Template } from '~/types';
 import { firstChild, firstElementChild, fragment, nextElementSibling, nextSibling } from '~/utilities';
 import { spread } from '~/attributes';
 import s from '~/slot';
@@ -11,8 +11,10 @@ import s from '~/slot';
 let cache = new WeakMap<TemplateStringsArray, Template>();
 
 
-function build(literals: TemplateStringsArray, values: unknown[]) {
-    if (values.length === 0) {
+function build(literals: TemplateStringsArray) {
+    let n = literals.length - 1;
+
+    if (n === 0) {
         return set(literals, literals[0]);
     }
 
@@ -25,12 +27,11 @@ function build(literals: TemplateStringsArray, values: unknown[]) {
         levels = [{
             children: 0,
             elements: 0,
-            path: [] as NonNullable<Template['slots']>[0]['path']
+            path: [] as NonNullable<Template['slots']>[number]['path']['parent']
         }],
         parsed = html.split(SLOT_MARKER),
         slot = 0,
-        slots: Template['slots'] = [],
-        total = values.length;
+        slots: Template['slots'] = [];
 
     for (let match of html.matchAll(REGEX_SLOT_NODES)) {
         let parent = levels[level],
@@ -42,17 +43,23 @@ function build(literals: TemplateStringsArray, values: unknown[]) {
         }
 
         if (type === NODE_ELEMENT || type === NODE_VOID) {
-            let attr = match[2];
+            let attr = match[2],
+                path = parent.path.length
+                    ? methods(parent.elements, parent.path, firstElementChild, nextElementSibling)
+                    : methods(parent.children, [], firstChild, nextSibling);
 
             if (attr) {
                 let i = attr.indexOf(SLOT_MARKER),
-                    path = methods(parent.children, parent.path, firstChild, nextSibling);
+                    p = {
+                        absolute: path,
+                        parent: parent.path,
+                        relative: path.slice(parent.path.length)
+                    };
 
                 while (i !== -1) {
                     slots.push({
                         fn: spread,
-                        parent: parent.path,
-                        path,
+                        path: p,
                         slot
                     });
 
@@ -65,25 +72,28 @@ function build(literals: TemplateStringsArray, values: unknown[]) {
                 levels[++level] = {
                     children: 0,
                     elements: 0,
-                    path: parent.path.length
-                        ? methods(parent.elements, parent.path, firstElementChild, nextElementSibling)
-                        : methods(parent.children, [], firstChild, nextSibling)
+                    path
                 };
             }
 
             parent.elements++;
         }
         else if (type === NODE_SLOT) {
+            let relative = methods(parent.children, [], firstChild, nextSibling);
+
             buffer += parsed[slot] + SLOT_HTML;
             slots.push({
                 fn: s,
-                parent: parent.path,
-                path: methods(parent.children, [], firstChild, nextSibling),
+                path: {
+                    absolute: [...parent.path, ...relative],
+                    parent: parent.path,
+                    relative
+                },
                 slot: slot++
             });
         }
 
-        if (slot === total) {
+        if (slot === n) {
             buffer += parsed[slot];
             break;
         }
@@ -127,8 +137,8 @@ function set(literals: TemplateStringsArray, html: string, slots: Template['slot
 }
 
 
-const get = <T>({ literals, values }: RenderableTemplate<T>) => {
-    return cache.get(literals) || build(literals, values);
+const get = (literals: TemplateStringsArray) => {
+    return cache.get(literals) || build(literals);
 };
 
 

package/src/html/hydrate.ts

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