@esportsplus/template 0.16.1 → 0.18.0

package/build/attributes.js

@@ -1,15 +1,14 @@
 import { effect } from '@esportsplus/reactivity';
-import { isArray, isFunction, isObject, isString } from '@esportsplus/utilities';
-import { ondisconnect } from './slot.js';
-import { className, raf, removeAttribute, setAttribute } from './utilities.js';
+import { isArray, isObject, isString } from '@esportsplus/utilities';
+import { ondisconnect } from './slot/cleanup.js';
+import { STATE_HYDRATING, STATE_NONE, STATE_WAITING } from './constants.js';
+import { className, removeAttribute, setAttribute } from './utilities/element.js';
+import { raf } from './utilities/queue.js';
 import q from '@esportsplus/queue';
 import event from './event.js';
-const EFFECT_KEY = Symbol();
-const STORE_KEY = Symbol();
-const UPDATES_KEY = Symbol();
-const STATE_HYDRATING = 0;
-const STATE_NONE = 1;
-const STATE_WAITING = 2;
+const EFFECT = Symbol();
+const STORE = Symbol();
+const UPDATES = Symbol();
 let delimiters = {
     class: ' ',
     style: ';'
@@ -36,18 +35,17 @@ function schedule() {
     raf.add(task);
 }
 function set(context, name, value, 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, value);
         }
         else {
-            context.store[EFFECT_KEY] ??= 0;
-            let id = context.store[EFFECT_KEY]++;
+            context.store[EFFECT] ??= 0;
+            let id = context.store[EFFECT]++;
             ondisconnect(context.element, effect(() => {
                 let v = value(context.element);
                 if (isArray(v)) {
@@ -65,6 +63,13 @@ function set(context, name, value, 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);
     }
@@ -153,13 +158,18 @@ function update(context, id, name, value, state) {
     }
 }
 const spread = function (element, value) {
-    let cache = (element[STORE_KEY] ??= { [UPDATES_KEY]: {} }), context = {
+    let cache = (element[STORE] ??= { [UPDATES]: {} }), context = {
         element,
         store: cache,
-        updates: cache[UPDATES_KEY],
+        updates: cache[UPDATES],
         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];
             for (let name in v) {
@@ -167,11 +177,6 @@ const spread = function (element, value) {
             }
         }
     }
-    else if (isObject(value)) {
-        for (let name in value) {
-            set(context, name, value[name], STATE_HYDRATING);
-        }
-    }
 };
 export default { spread };
 export { spread };

package/build/constants.d.ts

@@ -1,3 +1,4 @@
+declare const CLEANUP: unique symbol;
 declare const EMPTY_FRAGMENT: DocumentFragment;
 declare const NODE_CLOSING = 1;
 declare const NODE_ELEMENT = 3;
@@ -7,9 +8,18 @@ declare const NODE_WHITELIST: Record<string, number>;
 declare const REGEX_EMPTY_TEXT_NODES: RegExp;
 declare const REGEX_SLOT_NODES: RegExp;
 declare const RENDERABLE: unique symbol;
-declare const RENDERABLE_REACTIVE: unique symbol;
-declare const RENDERABLE_TEMPLATE: unique symbol;
+declare const RENDERABLE_ARRAY = 0;
+declare const RENDERABLE_FRAGMENT = 1;
+declare const RENDERABLE_HTML_FRAGMENT = 2;
+declare const RENDERABLE_HTML_REACTIVE_ARRAY = 3;
+declare const RENDERABLE_NODE = 4;
+declare const RENDERABLE_NODE_LIST = 5;
+declare const RENDERABLE_TEXT = 6;
+declare const RENDERABLE_VOID = 7;
 declare const SLOT_HTML = "<!--$-->";
 declare const SLOT_MARKER = "{{$}}";
 declare const SLOT_MARKER_LENGTH: number;
-export { 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 };
+declare const STATE_HYDRATING = 0;
+declare const STATE_NONE = 1;
+declare 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_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/build/constants.js

@@ -1,4 +1,5 @@
-import { fragment } from './utilities.js';
+import { fragment } from './utilities/fragment.js';
+const CLEANUP = Symbol();
 const EMPTY_FRAGMENT = fragment('');
 const NODE_CLOSING = 1;
 const NODE_COMMENT = 2;
@@ -28,9 +29,18 @@ const NODE_WHITELIST = {
 const REGEX_EMPTY_TEXT_NODES = /(>|})\s+(<|{)/g;
 const REGEX_SLOT_NODES = /<([\w-]+|[\/!])(?:([^><]*{{\$}}[^><]*)|(?:[^><]*))?>|{{\$}}/g;
 const RENDERABLE = Symbol();
-const RENDERABLE_REACTIVE = Symbol();
-const RENDERABLE_TEMPLATE = 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_NODE_LIST = 5;
+const RENDERABLE_TEXT = 6;
+const RENDERABLE_VOID = 7;
 const SLOT_HTML = '<!--$-->';
 const SLOT_MARKER = '{{$}}';
 const SLOT_MARKER_LENGTH = SLOT_MARKER.length;
-export { 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 };
+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_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/build/event.js

@@ -1,7 +1,9 @@
 import { root } from '@esportsplus/reactivity';
 import { defineProperty } from '@esportsplus/utilities';
-import { ondisconnect } from './slot.js';
-import { addEventListener, parentElement, raf } from './utilities.js';
+import { addEventListener } from './utilities/element.js';
+import { parentElement } from './utilities/node.js';
+import { raf } from './utilities/queue.js';
+import { ondisconnect } from './slot/cleanup.js';
 let capture = new Set(['onblur', 'onfocus', 'onscroll']), controllers = new Map(), keys = {}, passive = new Set([
     'onmousedown', 'onmouseenter', 'onmouseleave', 'onmousemove', 'onmouseout', 'onmouseover', 'onmouseup', 'onmousewheel',
     'onscroll',
@@ -11,6 +13,49 @@ let capture = new Set(['onblur', 'onfocus', 'onscroll']), controllers = new Map(
 ['onmousemove', 'onmousewheel', 'onscroll', 'ontouchend', 'ontouchmove', 'ontouchstart', 'onwheel'].map(event => {
     controllers.set(event, null);
 });
+function register(element, event) {
+    let controller = controllers.get(event), signal;
+    if (controller === null) {
+        let { abort, signal } = new AbortController();
+        controllers.set(event, controller = {
+            abort,
+            signal,
+            listeners: 0,
+        });
+    }
+    if (controller) {
+        controller.listeners++;
+        ondisconnect(element, () => {
+            if (--controller.listeners) {
+                return;
+            }
+            controller.abort();
+            controllers.set(event, null);
+        });
+        signal = controller.signal;
+    }
+    let key = keys[event] = Symbol();
+    addEventListener.call(window.document, event.slice(2), (e) => {
+        let node = e.target;
+        while (node) {
+            if (key in node) {
+                defineProperty(e, 'currentTarget', {
+                    configurable: true,
+                    get() {
+                        return node || window.document;
+                    }
+                });
+                return node[key].call(node, e);
+            }
+            node = parentElement.call(node);
+        }
+    }, {
+        capture: capture.has(event),
+        passive: passive.has(event),
+        signal
+    });
+    return key;
+}
 export default (element, event, listener) => {
     if (event === 'onconnect') {
         let retry = 60, task = () => {
@@ -34,48 +79,5 @@ export default (element, event, listener) => {
         root(() => listener(element));
         return;
     }
-    let controller = controllers.get(event), signal;
-    if (controller === null) {
-        let { abort, signal } = new AbortController();
-        controllers.set(event, controller = {
-            abort,
-            signal,
-            listeners: 0,
-        });
-    }
-    if (controller) {
-        controller.listeners++;
-        ondisconnect(element, () => {
-            if (--controller.listeners) {
-                return;
-            }
-            controller.abort();
-            controllers.set(event, null);
-        });
-        signal = controller.signal;
-    }
-    let key = keys[event];
-    if (!key) {
-        key = keys[event] = Symbol();
-        addEventListener.call(window.document, event.slice(2), (e) => {
-            let node = e.target;
-            defineProperty(e, 'currentTarget', {
-                configurable: true,
-                get() {
-                    return node || window.document;
-                }
-            });
-            while (node) {
-                if (key in node) {
-                    return node[key].call(node, e);
-                }
-                node = parentElement.call(node);
-            }
-        }, {
-            capture: capture.has(event),
-            passive: passive.has(event),
-            signal
-        });
-    }
-    element[key] = listener;
+    element[keys[event] || register(element, event)] = listener;
 };

package/build/html/hydrate.d.ts

@@ -1,9 +1,3 @@
-import { Elements, Fragment, RenderableReactive, RenderableTemplate } from '../types.js';
-import { Slot } from '../slot.js';
-declare function reactive<T>(elements: Elements[], fragment: Fragment, renderable: RenderableReactive<T>, slot: Slot): void;
-declare function hydrate<T>(elements: Elements[] | null, fragment: Fragment, renderable: RenderableTemplate<T>): void;
-declare const _default: {
-    reactive: typeof reactive;
-    static: typeof hydrate;
-};
+import { Fragment, RenderableValues, Template } from '../types.js';
+declare const _default: ({ fragment, slots }: Template, values: RenderableValues[]) => Fragment;
 export default _default;

package/build/html/hydrate.js

@@ -1,85 +1,34 @@
-import { root } from '@esportsplus/reactivity';
-import { EMPTY_FRAGMENT } from '../constants.js';
-import { cloneNode } from '../utilities.js';
-import cache from './cache.js';
-function reactive(elements, fragment, renderable, slot) {
-    let array = renderable.values, factory = renderable.template, refresh = () => {
-        root(() => array.map(template));
-        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));
-    };
-    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(elements, fragment, renderable) {
-    let { fragment: frag, slots } = cache.get(renderable.literals), clone = cloneNode.call(frag, true);
-    if (slots !== null) {
-        let node, nodePath, parent, parentPath, 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;
-            if (pp !== parentPath) {
-                if (pp === nodePath) {
-                    parent = node;
-                    parentPath = nodePath;
-                    nodePath = undefined;
-                }
-                else {
-                    parent = clone;
-                    parentPath = pp;
-                    for (let o = 0, j = pp.length; o < j; o++) {
-                        parent = pp[o].call(parent);
-                    }
-                }
+import { cloneNode } from '../utilities/node.js';
+export default ({ fragment, slots }, values) => {
+    let clone = cloneNode.call(fragment, true);
+    if (slots === null) {
+        return clone;
+    }
+    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;
             }
-            if (pr !== nodePath) {
-                node = parent;
-                nodePath = path.absolute;
-                for (let o = 0, j = pr.length; o < j; o++) {
-                    node = pr[o].call(node);
+            else {
+                parent = clone;
+                parentPath = pp;
+                for (let i = 0, n = pp.length; i < n; i++) {
+                    parent = pp[i].call(parent);
                 }
             }
-            fn(node, values[slot]);
         }
+        if (pr !== nodePath) {
+            node = parent;
+            nodePath = path.absolute;
+            for (let i = 0, n = pr.length; i < n; i++) {
+                node = pr[i].call(node);
+            }
+        }
+        fn(node, values[slot]);
     }
-    if (elements) {
-        elements.push([...clone.childNodes]);
-    }
-    fragment.appendChild(clone);
-}
-export default {
-    reactive,
-    static: hydrate
+    return clone;
 };