@esportsplus/template 0.16.1 → 0.18.0

package/src/attributes.ts

@@ -1,24 +1,19 @@
 import { effect } from '@esportsplus/reactivity';
-import { isArray, isFunction, isObject, isString } from '@esportsplus/utilities';
-import { ondisconnect } from './slot';
+import { isArray, isObject, isString } from '@esportsplus/utilities';
+import { ondisconnect } from './slot/cleanup';
+import { STATE_HYDRATING, STATE_NONE, STATE_WAITING } from './constants';
 import { Attributes, Element } from './types';
-import { className, raf, removeAttribute, setAttribute } from './utilities';
+import { className, removeAttribute, setAttribute } from './utilities/element';
+import { raf } from './utilities/queue';
 import q from '@esportsplus/queue';
 import event from './event';
 
 
-const EFFECT_KEY = Symbol();
+const EFFECT = Symbol();
 
-const STORE_KEY = Symbol();
+const STORE = Symbol();
 
-const UPDATES_KEY = Symbol();
-
-
-const STATE_HYDRATING = 0;
-
-const STATE_NONE = 1;
-
-const STATE_WAITING = 2;
+const UPDATES = Symbol();
 
 
 type Context = {
@@ -64,19 +59,20 @@ function schedule() {
 }
 
 function set(context: Context, name: string, value: unknown, state: State) {
-    if (isArray(value)) {
-        for (let i = 0, n = value.length; i < n; i++) {
-            set(context, name, value[i], state);
-        }
+    if (value === false || value == null) {
+        value = '';
     }
-    else if (isFunction(value)) {
+
+    let type = typeof value;
+
+    if (type === 'function') {
         if (name.startsWith('on')) {
-            event(context.element, name as `on${string}`, value);
+            event(context.element, name as `on${string}`, value as Function);
         }
         else {
-            context.store[EFFECT_KEY] ??= 0;
+            context.store[EFFECT] ??= 0;
 
-            let id = (context.store[EFFECT_KEY] as number)++;
+            let id = (context.store[EFFECT] as number)++;
 
             ondisconnect(
                 context.element,
@@ -107,6 +103,13 @@ function set(context: Context, name: string, value: unknown, state: State) {
             state = STATE_NONE;
         }
     }
+    else if (type === 'object') {
+        if (isArray(value)) {
+            for (let i = 0, n = value.length; i < n; i++) {
+                set(context, name, value[i], state);
+            }
+        }
+    }
     else {
         update(context, null, name, value, state);
     }
@@ -232,15 +235,20 @@ function update(
 
 
 const spread = function (element: Element, value: Attributes | Attributes[]) {
-    let cache = (element[STORE_KEY] ??= { [UPDATES_KEY]: {} }) as Record<PropertyKey, unknown>,
+    let cache = (element[STORE] ??= { [UPDATES]: {} }) as Record<PropertyKey, unknown>,
         context = {
             element,
             store: cache,
-            updates: cache[UPDATES_KEY] as Record<PropertyKey, unknown>,
+            updates: cache[UPDATES] as Record<PropertyKey, unknown>,
             updating: false
         };
 
-    if (isArray(value)) {
+    if (isObject(value)) {
+        for (let name in value) {
+            set(context, name, value[name], STATE_HYDRATING);
+        }
+    }
+    else if (isArray(value)) {
         for (let i = 0, n = value.length; i < n; i++) {
             let v = value[i];
 
@@ -249,11 +257,6 @@ const spread = function (element: Element, value: Attributes | Attributes[]) {
             }
         }
     }
-    else if (isObject(value)) {
-        for (let name in value) {
-            set(context, name, value[name], STATE_HYDRATING);
-        }
-    }
 };
 
 

package/src/constants.ts

@@ -1,4 +1,7 @@
-import { fragment } from './utilities';
+import { fragment } from './utilities/fragment';
+
+
+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,10 @@
 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 { addEventListener } from './utilities/element';
+import { parentElement } from './utilities/node';
+import { raf } from './utilities/queue';
+import { ondisconnect } from './slot/cleanup';
 
 
 let capture = new Set<`on${string}`>(['onblur', 'onfocus', 'onscroll']),
@@ -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();
 
-    if (!key) {
-        key = keys[event] = Symbol();
+    addEventListener.call(window.document, event.slice(2), (e) => {
+        let node = e.target as Element | null;
 
-        addEventListener.call(window.document, event.slice(2), (e) => {
-            let node = e.target as Element | null;
+        while (node) {
+            if (key in node) {
+                defineProperty(e, 'currentTarget', {
+                    configurable: true,
+                    get() {
+                        return node || window.document;
+                    }
+                });
 
-            defineProperty(e, 'currentTarget', {
-                configurable: true,
-                get() {
-                    return node || window.document;
+                return (node[key] as Function).call(node, e);
+            }
+
+            node = parentElement.call(node);
+        }
+    }, {
+        capture: capture.has(event),
+        passive: passive.has(event),
+        signal
+    });
+
+    return key;
+}
+
+
+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));
                 }
-            });
 
-            while (node) {
-                if (key in node) {
-                    return (node[key] as Function).call(node, e);
+                if (retry) {
+                    raf.add(task);
                 }
+            };
 
-                node = parentElement.call(node);
-            }
-        }, {
-            capture: capture.has(event),
-            passive: passive.has(event),
-            signal
-        });
+        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,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 { cloneNode } from '~/utilities';
-import cache from './cache';
+import { Fragment, RenderableValues, Template } from '~/types';
+import { cloneNode } from '~/utilities/node';
 
 
-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 parser from './parser';
 
 
-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(parser.parse(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/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,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 { fragment } from './utilities/fragment';
+import { firstChild, nodeValue } from './utilities/node';
+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) => {
     nodeValue.call(parent, '');
-    prepend.call(parent, node = marker.cloneNode());
+    parent.append(anchor = marker.cloneNode());
 
-    return slot(node, renderable);
+    slot(anchor, renderable);
 };

package/src/slot/cleanup.ts

@@ -0,0 +1,74 @@
+import queue from '@esportsplus/queue';
+import { CLEANUP } from '~/constants';
+import { microtask } from '~/utilities/queue';
+import { previousSibling } from '~/utilities/node';
+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 = 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 };