@esportsplus/template 0.17.0 → 0.18.0

package/build/attributes.js

@@ -2,7 +2,8 @@ import { effect } from '@esportsplus/reactivity';
 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, raf, removeAttribute, setAttribute } from './utilities.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 = Symbol();

package/build/constants.js

@@ -1,4 +1,4 @@
-import { fragment } from './utilities.js';
+import { fragment } from './utilities/fragment.js';
 const CLEANUP = Symbol();
 const EMPTY_FRAGMENT = fragment('');
 const NODE_CLOSING = 1;

package/build/event.js

@@ -1,6 +1,8 @@
 import { root } from '@esportsplus/reactivity';
 import { defineProperty } from '@esportsplus/utilities';
-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',
@@ -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;
-            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
-        });
-    }
-    element[key] = listener;
+    element[keys[event] || register(element, event)] = listener;
 };

package/build/html/hydrate.js

@@ -1,4 +1,4 @@
-import { cloneNode } from '../utilities.js';
+import { cloneNode } from '../utilities/node.js';
 export default ({ fragment, slots }, values) => {
     let clone = cloneNode.call(fragment, true);
     if (slots === null) {

package/build/html/index.js

@@ -1,10 +1,10 @@
 import { RENDERABLE, RENDERABLE_HTML_FRAGMENT, RENDERABLE_HTML_REACTIVE_ARRAY } from '../constants.js';
 import hydrate from './hydrate.js';
-import cache from './cache.js';
+import parser from './parser.js';
 const html = (literals, ...values) => {
     return {
         [RENDERABLE]: RENDERABLE_HTML_FRAGMENT,
-        fragment: hydrate(cache.get(literals), values),
+        fragment: hydrate(parser.parse(literals), values),
         literals
     };
 };

package/build/html/{cache.d.ts → parser.d.ts}

@@ -1,5 +1,5 @@
 import { Template } from '../types.js';
 declare const _default: {
-    get: (literals: TemplateStringsArray) => Template;
+    parse: (literals: TemplateStringsArray) => Template;
 };
 export default _default;

package/build/html/{cache.js → parser.js}

@@ -1,5 +1,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.js';
-import { firstChild, firstElementChild, fragment, nextElementSibling, nextSibling } from '../utilities.js';
+import { firstElementChild, nextElementSibling } from '../utilities/element.js';
+import { fragment } from '../utilities/fragment.js';
+import { firstChild, nextSibling } from '../utilities/node.js';
 import { spread } from '../attributes.js';
 import s from '../slot/index.js';
 let cache = new WeakMap();
@@ -94,7 +96,7 @@ function set(literals, html, slots = null) {
     cache.set(literals, template);
     return template;
 }
-const get = (literals) => {
+const parse = (literals) => {
     return cache.get(literals) || build(literals);
 };
-export default { get };
+export default { parse };

package/build/render.js

@@ -1,9 +1,10 @@
 import { SLOT_HTML } from './constants.js';
-import { firstChild, fragment, nodeValue } from './utilities.js';
+import { fragment } from './utilities/fragment.js';
+import { firstChild, nodeValue } from './utilities/node.js';
 import slot from './slot/index.js';
 let anchor, marker = firstChild.call(fragment(SLOT_HTML));
 export default (parent, renderable) => {
     nodeValue.call(parent, '');
     parent.append(anchor = marker.cloneNode());
-    return slot(anchor, renderable);
+    slot(anchor, renderable);
 };

package/build/slot/cleanup.js

@@ -1,6 +1,7 @@
 import queue from '@esportsplus/queue';
 import { CLEANUP } from '../constants.js';
-import { microtask, previousSibling } from '../utilities.js';
+import { microtask } from '../utilities/queue.js';
+import { previousSibling } from '../utilities/node.js';
 let cleanup = queue(64), scheduled = false;
 function schedule() {
     if (!cleanup.length || scheduled) {

package/build/slot/effect.js

@@ -1,10 +1,12 @@
 import { effect } from '@esportsplus/reactivity';
-import { EMPTY_FRAGMENT, STATE_HYDRATING, STATE_NONE } from '../constants.js';
-import { cloneNode, firstChild, lastChild, nodeValue, raf, text } from '../utilities.js';
+import { STATE_HYDRATING, STATE_NONE } from '../constants.js';
+import { firstChild, lastChild, nodeValue } from '../utilities/node.js';
+import { raf } from '../utilities/queue.js';
 import { ondisconnect } from '../slot/cleanup.js';
 import { remove } from './cleanup.js';
+import text from '../utilities/text.js';
 import render from './render.js';
-function update(anchor, fragment, value) {
+function update(anchor, value) {
     let type = typeof value;
     if (this.group) {
         remove([this.group]);
@@ -23,7 +25,10 @@ function update(anchor, fragment, value) {
         }
     }
     else {
-        render(anchor, fragment, value);
+        let fragment = render(anchor, value);
+        if (!fragment) {
+            return;
+        }
         this.group = {
             head: firstChild.call(fragment),
             tail: lastChild.call(fragment)
@@ -35,16 +40,16 @@ export default (anchor, fn) => {
     let context = {
         group: undefined,
         textnode: undefined
-    }, fragment = cloneNode.call(EMPTY_FRAGMENT), state = STATE_HYDRATING;
+    }, state = STATE_HYDRATING;
     ondisconnect(anchor, effect(() => {
         let value = fn();
         if (state === STATE_HYDRATING) {
-            update.call(context, anchor, fragment, value);
+            update.call(context, anchor, value);
             state = STATE_NONE;
         }
         else if (state === STATE_NONE) {
             raf.add(() => {
-                update.call(context, anchor, fragment, value);
+                update.call(context, anchor, value);
             });
         }
     }));

package/build/slot/index.js

@@ -1,15 +1,8 @@
-import { EMPTY_FRAGMENT } from '../constants.js';
-import { cloneNode } from '../utilities.js';
 import effect from './effect.js';
 import render from './render.js';
-function slot(anchor, input) {
-    let fragment = cloneNode.call(EMPTY_FRAGMENT);
-    render(anchor, fragment, input);
-    anchor.after(fragment);
-}
 export default (anchor, value) => {
     if (typeof value === 'function') {
         return effect(anchor, value);
     }
-    return slot(anchor, value);
+    anchor.after(render(anchor, value));
 };

package/build/slot/reactive.d.ts

@@ -1,3 +1,3 @@
-import { RenderableReactive } from '../types.js';
-declare const _default: (anchor: Element, renderable: RenderableReactive) => void;
+import { Fragment, RenderableReactive } from '../types.js';
+declare const _default: (anchor: Element, renderable: RenderableReactive) => Fragment;
 export default _default;

package/build/slot/reactive.js

@@ -1,6 +1,7 @@
 import { root } from '@esportsplus/reactivity';
 import { EMPTY_FRAGMENT } from '../constants.js';
-import { append, cloneNode, firstChild, lastChild } from '../utilities.js';
+import { append } from '../utilities/fragment.js';
+import { cloneNode, firstChild, lastChild } from '../utilities/node.js';
 import { remove } from './cleanup.js';
 class ReactiveArraySlot {
     array;
@@ -72,9 +73,10 @@ class ReactiveArraySlot {
         }
     }
     push(items) {
-        let anchor = this.anchor(), array = this.array;
+        let anchor = this.anchor(), 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);
     }
@@ -113,5 +115,11 @@ class ReactiveArraySlot {
     }
 }
 export default (anchor, renderable) => {
-    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/build/slot/render.d.ts

@@ -1,2 +1,2 @@
-import { Element, Fragment } from '../types.js';
-export default function render(anchor: Element, fragment: Fragment, input: unknown): void;
+import { Element } from '../types.js';
+export default function render(anchor: Element, input: unknown): Node;

package/build/slot/render.js

@@ -1,6 +1,8 @@
 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.js';
-import { append, text } from '../utilities.js';
+import { EMPTY_FRAGMENT, RENDERABLE, RENDERABLE_ARRAY, RENDERABLE_FRAGMENT, RENDERABLE_HTML_FRAGMENT, RENDERABLE_HTML_REACTIVE_ARRAY, RENDERABLE_NODE, RENDERABLE_NODE_LIST, RENDERABLE_TEXT, RENDERABLE_VOID } from '../constants.js';
+import { cloneNode } from '../utilities/node.js';
+import { append } from '../utilities/fragment.js';
+import text from '../utilities/text.js';
 import reactive from './reactive.js';
 function type(input) {
     if (input === false || input == null || input === '') {
@@ -25,34 +27,55 @@ function type(input) {
     if (input instanceof NodeList) {
         return RENDERABLE_NODE_LIST;
     }
+    return RENDERABLE_TEXT;
 }
-export default function render(anchor, fragment, input) {
+function loop(fragment, input) {
     let t = type(input);
     switch (t) {
+        case RENDERABLE_HTML_REACTIVE_ARRAY:
+            throw new Error('@esportsplus/template: reactive arrays cannot be defined within an slot array value');
         case RENDERABLE_VOID:
             return;
-        case RENDERABLE_TEXT:
-            append.call(fragment, text(String(input)));
+        case RENDERABLE_ARRAY:
+            for (let i = 0, n = input.length; i < n; i++) {
+                loop(fragment, input[i]);
+            }
             return;
-        case RENDERABLE_HTML_FRAGMENT:
-            append.call(fragment, input.fragment);
+        case RENDERABLE_NODE_LIST:
+            append.call(fragment, ...input);
             return;
+        default:
+            append.call(fragment, input);
+            return;
+    }
+}
+let scratchpad = cloneNode.call(EMPTY_FRAGMENT);
+export default function render(anchor, input) {
+    let fragment = scratchpad, t = type(input);
+    switch (t) {
+        case RENDERABLE_VOID:
+            break;
+        case RENDERABLE_TEXT:
+            append.call(fragment, text(input));
+            break;
+        case RENDERABLE_HTML_FRAGMENT:
+            return input.fragment;
         case RENDERABLE_HTML_REACTIVE_ARRAY:
             return reactive(anchor, input);
         case RENDERABLE_ARRAY:
             for (let i = 0, n = input.length; i < n; i++) {
-                render(anchor, fragment, input[i]);
+                loop(fragment, input[i]);
             }
-            return;
+            break;
         case RENDERABLE_FRAGMENT:
-            append.call(fragment, input);
-            return;
+            return input;
         case RENDERABLE_NODE:
             append.call(fragment, input);
-            return;
+            break;
         case RENDERABLE_NODE_LIST:
             append.call(fragment, ...input);
-            return;
+            break;
     }
+    return fragment;
 }
 ;

package/build/types.d.ts

@@ -1,6 +1,6 @@
 import { ReactiveArray } from '@esportsplus/reactivity';
 import { RENDERABLE, RENDERABLE_HTML_FRAGMENT, RENDERABLE_HTML_REACTIVE_ARRAY } from './constants.js';
-import { firstChild } from './utilities.js';
+import { firstChild } from './utilities/node.js';
 import attributes from './attributes.js';
 import slot from './slot/index.js';
 import html from './html/index.js';
@@ -23,7 +23,7 @@ type Element = HTMLElement & Attributes & Record<PropertyKey, unknown>;
 type Elements = Element[];
 type Fragment = (DocumentFragment | Node) & Record<PropertyKey, unknown>;
 type Primitive = bigint | boolean | null | number | string | undefined;
-type Renderable = Fragment | RenderableReactive;
+type Renderable = Fragment | Primitive | RenderableReactive | RenderableTemplate;
 type RenderableReactive = Readonly<{
     [RENDERABLE]: typeof RENDERABLE_HTML_REACTIVE_ARRAY;
     array: ReactiveArray<unknown[]>;

package/build/utilities/element.d.ts

@@ -0,0 +1,11 @@
+declare const addEventListener: {
+    <K extends keyof ElementEventMap>(type: K, listener: (this: Element, ev: ElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+    (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+};
+declare const className: (v: any) => void;
+declare const innerHTML: (v: any) => void;
+declare const firstElementChild: () => any;
+declare const nextElementSibling: () => any;
+declare const removeAttribute: (qualifiedName: string) => void;
+declare const setAttribute: (qualifiedName: string, value: string) => void;
+export { addEventListener, className, innerHTML, firstElementChild, nextElementSibling, removeAttribute, setAttribute };

package/build/utilities/element.js

@@ -0,0 +1,9 @@
+let getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor, prototype = Element.prototype;
+const addEventListener = prototype.addEventListener;
+const className = getOwnPropertyDescriptor(prototype, 'className').set;
+const innerHTML = getOwnPropertyDescriptor(prototype, 'innerHTML').set;
+const firstElementChild = getOwnPropertyDescriptor(prototype, 'firstElementChild').get;
+const nextElementSibling = getOwnPropertyDescriptor(prototype, 'nextElementSibling').get;
+const removeAttribute = prototype.removeAttribute;
+const setAttribute = prototype.setAttribute;
+export { addEventListener, className, innerHTML, firstElementChild, nextElementSibling, removeAttribute, setAttribute };

package/build/utilities/fragment.d.ts

@@ -0,0 +1,3 @@
+declare const append: (...nodes: (Node | string)[]) => void;
+declare const fragment: (html: string) => DocumentFragment;
+export { append, fragment };

package/build/utilities/fragment.js

@@ -0,0 +1,11 @@
+import { innerHTML } from './element.js';
+import { cloneNode } from './node.js';
+let prototype = DocumentFragment.prototype, template = document.createElement('template');
+const append = prototype.append;
+const fragment = (html) => {
+    innerHTML.call(template, html);
+    let content = template.content;
+    template = cloneNode.call(template);
+    return content;
+};
+export { append, fragment };

package/build/utilities/node.d.ts

@@ -0,0 +1,8 @@
+declare const cloneNode: (subtree?: boolean) => Node;
+declare const firstChild: () => any;
+declare const lastChild: () => any;
+declare const nextSibling: () => any;
+declare const nodeValue: (v: any) => void;
+declare const parentElement: () => any;
+declare const previousSibling: () => any;
+export { cloneNode, firstChild, lastChild, nextSibling, nodeValue, parentElement, previousSibling };

package/build/utilities/node.js

@@ -0,0 +1,9 @@
+let getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor, prototype = Node.prototype;
+const cloneNode = prototype.cloneNode;
+const firstChild = getOwnPropertyDescriptor(prototype, 'firstChild').get;
+const lastChild = getOwnPropertyDescriptor(prototype, 'lastChild').get;
+const nextSibling = getOwnPropertyDescriptor(prototype, 'nextSibling').get;
+const nodeValue = getOwnPropertyDescriptor(prototype, 'nodeValue').set;
+const parentElement = getOwnPropertyDescriptor(prototype, 'parentElement').get;
+const previousSibling = getOwnPropertyDescriptor(prototype, 'previousSibling').get;
+export { cloneNode, firstChild, lastChild, nextSibling, nodeValue, parentElement, previousSibling };

package/build/utilities/queue.d.ts

@@ -0,0 +1,3 @@
+declare const microtask: import("@esportsplus/tasks/build/factory").Scheduler;
+declare const raf: import("@esportsplus/tasks/build/factory").Scheduler;
+export { microtask, raf };

package/build/utilities/queue.js

@@ -0,0 +1,4 @@
+import { micro as m, raf as r } from '@esportsplus/tasks';
+const microtask = m();
+const raf = r();
+export { microtask, raf };

package/build/utilities/text.d.ts

@@ -0,0 +1,3 @@
+import { Element } from '../types.js';
+declare const _default: (value: string) => Element;
+export default _default;

package/build/utilities/text.js

@@ -0,0 +1,9 @@
+import { cloneNode, nodeValue } from './node.js';
+let text = document.createTextNode('');
+export default (value) => {
+    let element = cloneNode.call(text);
+    if (value !== '') {
+        nodeValue.call(element, value);
+    }
+    return element;
+};

package/package.json

@@ -14,7 +14,7 @@
   "private": false,
   "type": "module",
   "types": "./build/index.d.ts",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "scripts": {
     "build": "tsc && tsc-alias",
     "-": "-"

package/src/attributes.ts

@@ -3,7 +3,8 @@ 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';
 

package/src/constants.ts

@@ -1,4 +1,4 @@
-import { fragment } from './utilities';
+import { fragment } from './utilities/fragment';
 
 
 const CLEANUP = Symbol();