@esportsplus/template 0.12.12 → 0.14.0

package/src/attributes.ts

@@ -1,5 +1,4 @@
 import { effect, root } from '@esportsplus/reactivity';
-import { ATTRIBUTES } from './constants';
 import { Attributes, Element } from './types';
 import { className, isArray, isObject, raf, removeAttribute, setAttribute } from './utilities';
 import event from './event';
@@ -9,7 +8,8 @@ let attributes: Record<string, unknown> = {},
     delimiters: Record<string, string> = {
         class: ' ',
         style: ';'
-    };
+    },
+    key = Symbol();
 
 
 function attribute(element: Element, name: string, value: unknown) {
@@ -55,12 +55,22 @@ function reactive(element: Element, id: string, name: string, value: unknown, wa
 }
 
 function set(element: Element, value: unknown, name: string) {
-    if (typeof value === 'function') {
+    if (name === 'style' && isObject(value)) {
+        for (let key in value) {
+            set(element, value[key], name);
+        }
+    }
+    else if (isArray(value)) {
+        for (let i = 0, n = value.length; i < n; i++) {
+            set(element, value[i], name);
+        }
+    }
+    else if (typeof value === 'function') {
         if (name.startsWith('on')) {
-            event(element, name, value);
+            event(element, name as `on${string}`, value);
         }
         else {
-            reactive(element, ('e' + store(element)[ATTRIBUTES]++), name, value, true);
+            reactive(element, ('e' + store(element)[key]++), name, value, true);
         }
     }
     else {
@@ -70,8 +80,8 @@ function set(element: Element, value: unknown, name: string) {
 
 function store(element: Element) {
     return (
-        element[ATTRIBUTES] || (element[ATTRIBUTES] = { [ATTRIBUTES]: 0 })
-    ) as Attributes & { [ATTRIBUTES]: number };
+        element[key] || (element[key] = { [key]: 0 })
+    ) as Attributes & { [key]: number };
 }
 
 function update(element: Element, id: null | string, name: string, value: unknown, wait = false) {
@@ -155,47 +165,38 @@ function update(element: Element, id: null | string, name: string, value: unknow
 }
 
 
-export default {
-    apply: (element: Element) => {
-        for (let key in attributes) {
-            attribute(element, key, attributes[key]);
-        }
+const apply = (element: Element) => {
+    for (let key in attributes) {
+        attribute(element, key, attributes[key]);
+    }
 
-        attributes = {};
-    },
-    set: (element: Element, value: unknown, name: string) => {
-        if (name === 'style' && isObject(value)) {
-            for (let key in value) {
-                set(element, value[key], name);
-            }
-        }
-        else if (isArray(value)) {
-            for (let i = 0, n = value.length; i < n; i++) {
-                set(element, value[i], name);
-            }
-        }
-        else {
-            set(element, value, name);
-        }
-    },
-    spread: function (element: Element, attributes: Attributes | Attributes[]) {
-        if (isObject(attributes)) {
-            for (let name in attributes) {
-                this.set(element, attributes[name], name);
-            }
+    attributes = {};
+};
+
+const spread = function (element: Element, attributes: Attributes | Attributes[]) {
+    if (isObject(attributes)) {
+        for (let name in attributes) {
+            set(element, attributes[name], name);
         }
-        else if (isArray(attributes)) {
-            for (let i = 0, n = attributes.length; i < n; i++) {
-                let attrs = attributes[i];
+    }
+    else if (isArray(attributes)) {
+        for (let i = 0, n = attributes.length; i < n; i++) {
+            let attrs = attributes[i];
 
-                if (!isObject(attrs)) {
-                    continue;
-                }
+            if (!isObject(attrs)) {
+                continue;
+            }
 
-                for (let name in attrs) {
-                    this.set(element, attrs[name], name);
-                }
+            for (let name in attrs) {
+                set(element, attrs[name], name);
             }
         }
     }
-};
+    else {
+        throw new Error('@esportsplus/template: attributes must be of type `Attributes` or `Attributes[]`; Received ' + JSON.stringify(attributes));
+    }
+};
+
+
+export default { apply, spread };
+export { apply, spread }

package/src/constants.ts

@@ -1,6 +1,3 @@
-const ATTRIBUTES = Symbol();
-
-
 const NODE_CLOSING = 1;
 
 const NODE_COMMENT = 2;
@@ -36,12 +33,6 @@ const NODE_WHITELIST: Record<string, number> = {
 
 const REGEX_EMPTY_TEXT_NODES = /(>|})\s+(<|{)/g;
 
-const REGEX_EVENTS = /(?:\s*on[\w-:]+\s*=\s*["'][^"']*["'])/g;
-
-const REGEX_EXTRA_WHITESPACE = /\s\s+/g;
-
-const REGEX_SLOT_ATTRIBUTES = /<[\w-]+([^><]*{{\$}}[^><]*)>/g;
-
 const REGEX_SLOT_NODES = /<([\w-]+|[\/!])(?:([^><]*{{\$}}[^><]*)|(?:[^><]*))?>|{{\$}}/g;
 
 
@@ -54,27 +45,29 @@ const RENDERABLE_TEMPLATE = Symbol();
 
 const SLOT = Symbol();
 
+const SLOT_CLEANUP = Symbol();
+
 const SLOT_HTML = '<!--$-->';
 
 const SLOT_MARKER = '{{$}}';
 
+const SLOT_MARKER_LENGTH = SLOT_MARKER.length;
+
 
 export {
-    ATTRIBUTES,
     NODE_CLOSING,
     NODE_ELEMENT,
     NODE_SLOT,
     NODE_VOID,
     NODE_WHITELIST,
     REGEX_EMPTY_TEXT_NODES,
-    REGEX_EVENTS,
-    REGEX_EXTRA_WHITESPACE,
-    REGEX_SLOT_ATTRIBUTES,
     REGEX_SLOT_NODES,
     RENDERABLE,
     RENDERABLE_REACTIVE,
     RENDERABLE_TEMPLATE,
     SLOT,
+    SLOT_CLEANUP,
     SLOT_HTML,
-    SLOT_MARKER
+    SLOT_MARKER,
+    SLOT_MARKER_LENGTH
 };

package/src/event.ts

@@ -1,51 +1,31 @@
 import { root } from '@esportsplus/reactivity';
+import { SLOT_CLEANUP } from './constants';
 import { Element } from './types';
 import { addEventListener, defineProperty, parentElement } from './utilities';
 
 
-let capture = new Set(['blur', 'focus', 'scroll']),
+let capture = new Set<`on${string}`>(['onblur', 'onfocus', 'onscroll']),
+    controllers = new Map<
+        `on${string}`,
+        (AbortController & { listeners: number }) | null
+    >(),
     keys: Record<string, symbol> = {},
-    passive = new Set([
-        'mousedown', 'mouseenter', 'mouseleave', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'mousewheel',
-        'scroll',
-        'touchcancel', 'touchend', 'touchleave', 'touchmove', 'touchstart',
-        'wheel'
+    passive = new Set<`on${string}`>([
+        'onmousedown', 'onmouseenter', 'onmouseleave', 'onmousemove', 'onmouseout', 'onmouseover', 'onmouseup', 'onmousewheel',
+        'onscroll',
+        'ontouchcancel', 'ontouchend', 'ontouchleave', 'ontouchmove', 'ontouchstart',
+        'onwheel'
     ]);
 
 
-function register(event: string) {
-    let key = keys[event] = Symbol(),
-        type = event.slice(2);
+(['onmousemove', 'onmousewheel', 'onscroll', 'ontouchend', 'ontouchmove', 'ontouchstart', 'onwheel'] as `on${string}`[]).map(event => {
+    controllers.set(event, null);
+});
 
-    addEventListener.call(window.document, type, (e) => {
-        let node = e.target as Element | null;
 
-        defineProperty(e, 'currentTarget', {
-            configurable: true,
-            get() {
-                return node || window.document;
-            }
-        });
-
-        while (node) {
-            if (key in node) {
-                return (node[key] as Function).call(node, e);
-            }
-
-            node = parentElement.call(node);
-        }
-    }, {
-        capture: capture.has(type),
-        passive: passive.has(type)
-    });
-
-    return key;
-}
-
-
-export default (element: Element, event: string, listener: Function): void => {
+export default (element: Element, event: `on${string}`, listener: Function) => {
     if (event === 'onmount') {
-        let interval: ReturnType<typeof setInterval> = setInterval(() => {
+        let interval = setInterval(() => {
                 retry--;
 
                 if (element.isConnected) {
@@ -66,5 +46,64 @@ export default (element: Element, event: string, listener: Function): void => {
         return root(() => listener(element));
     }
 
-    element[keys[event] || register(event)] = listener;
+    let controller = controllers.get(event),
+        signal: AbortController['signal'] | undefined;
+
+    if (controller === null) {
+        let { abort, signal } = new AbortController();
+
+        controllers.set(
+            event,
+            controller = {
+                abort,
+                signal,
+                listeners: 0,
+            }
+        );
+    }
+
+    if (controller) {
+        controller.listeners++;
+
+        ( element[SLOT_CLEANUP] ??= [] ).push(() => {
+            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 as Element | null;
+
+            defineProperty(e, 'currentTarget', {
+                configurable: true,
+                get() {
+                    return node || window.document;
+                }
+            });
+
+            while (node) {
+                if (key in node) {
+                    return (node[key] as Function).call(node, e);
+                }
+
+                node = parentElement.call(node);
+            }
+        }, {
+            capture: capture.has(event),
+            passive: passive.has(event),
+            signal
+        });
+    }
+
+    element[key] = listener;
 };

package/src/html/cache.ts

@@ -1,10 +1,10 @@
 import {
-    NODE_CLOSING, NODE_ELEMENT, NODE_SLOT, NODE_VOID, NODE_WHITELIST, REGEX_EMPTY_TEXT_NODES, REGEX_EVENTS, REGEX_EXTRA_WHITESPACE,
-    REGEX_SLOT_ATTRIBUTES, REGEX_SLOT_NODES, SLOT_HTML, SLOT_MARKER
+    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 { firstChild, firstElementChild, fragment, nextElementSibling, nextSibling } from '~/utilities';
-import a from '~/attributes';
+import { spread } from '~/attributes';
 import s from '~/slot';
 
 
@@ -16,9 +16,10 @@ function build(literals: TemplateStringsArray, values: unknown[]) {
         return set(literals, literals[0]);
     }
 
-    let attributes: Record<string, (null | string)[]> = {},
-        buffer = '',
-        html = minify(literals.join(SLOT_MARKER)),
+    let buffer = '',
+        html = literals.join(SLOT_MARKER)
+            .replace(REGEX_EMPTY_TEXT_NODES, '$1$2')
+            .trim(),
         index = 0,
         level = 0,
         levels = [{
@@ -26,73 +27,11 @@ function build(literals: TemplateStringsArray, values: unknown[]) {
             elements: 0,
             path: [] as NonNullable<Template['slots']>[0]['path']
         }],
+        parsed = html.split(SLOT_MARKER),
         slot = 0,
         slots: Template['slots'] = [],
         total = values.length;
 
-    {
-        let attribute = '',
-            buffer = '',
-            char = '',
-            quote = '';
-
-        for (let match of html.matchAll(REGEX_SLOT_ATTRIBUTES)) {
-            let found = match[1],
-                metadata = attributes[found];
-
-            if (metadata) {
-                continue;
-            }
-
-            metadata = attributes[found] = [];
-
-            for (let i = 0, n = found.length; i < n; i++) {
-                char = found[i];
-
-                if (char === ' ') {
-                    buffer = '';
-                }
-                else if (char === '=') {
-                    attribute = buffer;
-                    buffer = '';
-                }
-                else if (char === '"' || char === "'") {
-                    if (!attribute) {
-                    }
-                    else if (!quote) {
-                        quote = char;
-                    }
-                    else if (quote === char) {
-                        attribute = '';
-                        buffer = '';
-                        quote = '';
-                    }
-                }
-                else if (char === '{' && char !== buffer) {
-                    buffer = char;
-                }
-                else {
-                    buffer += char;
-
-                    if (buffer === SLOT_MARKER) {
-                        buffer = '';
-
-                        if (attribute) {
-                            metadata.push(attribute);
-
-                            if (!quote) {
-                                attribute = '';
-                            }
-                        }
-                        else {
-                            metadata.push(null);
-                        }
-                    }
-                }
-            }
-        }
-    }
-
     for (let match of html.matchAll(REGEX_SLOT_NODES)) {
         let parent = levels[level],
             type = match[1] === undefined ? NODE_SLOT : (NODE_WHITELIST[match[1].toLowerCase()] || NODE_ELEMENT);
@@ -106,24 +45,18 @@ function build(literals: TemplateStringsArray, values: unknown[]) {
             let attr = match[2];
 
             if (attr) {
-                let metadata = attributes[attr],
+                let i = attr.indexOf(SLOT_MARKER),
                     path = methods(parent.children, parent.path, firstChild, nextSibling);
 
-                if (!metadata) {
-                    throw new Error(`Template: attribute metadata could not be found for '${attr}'`);
-                }
-
-                for (let i = 0, n = metadata.length; i < n; i++) {
-                    let name = metadata[i];
-
+                while (i !== -1) {
                     slots.push({
-                        fn: name === null ? a.spread : a.set,
-                        name,
+                        fn: spread,
                         path,
                         slot
                     });
 
-                    buffer += literals[slot++];
+                    buffer += parsed[slot++];
+                    i = attr.indexOf(SLOT_MARKER, i + SLOT_MARKER_LENGTH);
                 }
             }
 
@@ -140,17 +73,16 @@ function build(literals: TemplateStringsArray, values: unknown[]) {
             parent.elements++;
         }
         else if (type === NODE_SLOT) {
-            buffer += literals[slot] + SLOT_HTML;
+            buffer += parsed[slot] + SLOT_HTML;
             slots.push({
                 fn: s,
-                name: null,
                 path: methods(parent.children, parent.path, firstChild, nextSibling),
                 slot: slot++
             });
         }
 
         if (slot === total) {
-            buffer += literals[slot];
+            buffer += parsed[slot];
             break;
         }
 
@@ -164,7 +96,7 @@ function build(literals: TemplateStringsArray, values: unknown[]) {
         index = (match.index || 0) + match[0].length;
     }
 
-    return set(literals, minify(buffer.replace(REGEX_EVENTS, '')), slots);
+    return set(literals, buffer, slots);
 }
 
 function methods(children: number, copy: (typeof firstChild)[], first: (typeof firstChild), next: (typeof firstChild)) {
@@ -179,10 +111,6 @@ function methods(children: number, copy: (typeof firstChild)[], first: (typeof f
     return methods;
 }
 
-function minify(html: string) {
-    return html.replace(REGEX_EMPTY_TEXT_NODES, '$1$2').replace(REGEX_EXTRA_WHITESPACE, ' ').trim();
-}
-
 function set(literals: TemplateStringsArray, html: string, slots: Template['slots'] = null) {
     let template = {
             fragment: fragment(html),

package/src/html/hydrate.ts

@@ -2,7 +2,7 @@ import { root, ReactiveArray } from '@esportsplus/reactivity';
 import { Element, Elements, Renderable, RenderableReactive, RenderableTemplate, Template } from '~/types';
 import { Slot } from '~/slot';
 import { cloneNode, firstChild, nextSibling } from '~/utilities';
-import a from '~/attributes';
+import { apply } from '~/attributes';
 import cache from './cache';
 
 
@@ -41,11 +41,11 @@ function render<T>(renderable: Renderable<T>, template: Template) {
             values = renderable.values;
 
         for (let i = slots.length - 1; i >= 0; i--) {
-            let { fn, name, path, slot } = slots[i];
+            let { fn, path, slot } = slots[i];
 
             if (path === previous) {}
             else {
-                a.apply(node);
+                apply(node);
 
                 node = fragment;
                 previous = path;
@@ -59,7 +59,9 @@ function render<T>(renderable: Renderable<T>, template: Template) {
             fn(node, values[slot], name);
         }
 
-        a.apply(node);
+        if (node) {
+            apply(node);
+        }
     }
 
     for (let element = firstChild.call(fragment as Element); element; element = nextSibling.call(element)) {

package/src/slot.ts

@@ -1,17 +1,15 @@
 import { effect, root, DIRTY } from '@esportsplus/reactivity';
-import { RENDERABLE, RENDERABLE_REACTIVE, SLOT } from './constants';
+import { RENDERABLE, RENDERABLE_REACTIVE, SLOT, SLOT_CLEANUP } from './constants';
 import { hydrate } from './html';
 import { Element, Elements, RenderableReactive, RenderableTemplate } from './types';
 import { firstChild, isArray, isObject, nextSibling, nodeValue, raf, text } from './utilities'
 
 
-// Using a private symbol since 'SLOT' is used as a different flag in 'render.ts'
-let cleanup: Slot[] = [],
-    key = Symbol(),
+let cleanup: VoidFunction[] = [],
     scheduled = false;
 
 
-function afterGroups(anchor: Element, groups: Elements[]) {
+function after(anchor: Element, groups: Elements[]) {
     for (let i = 0, n = groups.length; i < n; i++) {
         let group = groups[i];
 
@@ -24,37 +22,15 @@ function afterGroups(anchor: Element, groups: Elements[]) {
     return groups;
 }
 
-function removeGroup(group?: Elements) {
-    if (group === undefined) {
-        return group;
-    }
-
-    for (let i = 0, n = group.length; i < n; i++) {
-        let item = group[i];
-
-        if (key in item) {
-            cleanup.push(item[key] as Slot);
-        }
-
-        item.remove();
-    }
-
-    if (!scheduled && cleanup.length) {
-        schedule();
-    }
-
-    return group;
-}
-
-function removeGroups(groups: Elements[]) {
+function remove(...groups: Elements[]) {
     for (let i = 0, n = groups.length; i < n; i++) {
         let group = groups[i];
 
         for (let j = 0, o = group.length; j < o; j++) {
             let item = group[j];
 
-            if (key in item) {
-                cleanup.push(item[key] as Slot);
+            if (item[SLOT_CLEANUP]) {
+                cleanup.push(...item[SLOT_CLEANUP]);
             }
 
             item.remove();
@@ -80,14 +56,14 @@ function render(anchor: Element | null, input: unknown, slot?: Slot): Elements |
                 groups.push( render(null, input[i]) as Elements );
             }
 
-            return anchor ? afterGroups(anchor, groups) : groups;
+            return anchor ? after(anchor, groups) : groups;
         }
 
         let nodes: Elements = [];
 
         if (RENDERABLE in input) {
             if (input[RENDERABLE] === RENDERABLE_REACTIVE) {
-                return afterGroups(anchor!, hydrate.reactive(input as RenderableReactive, slot!));
+                return after(anchor!, hydrate.reactive(input as RenderableReactive, slot!));
             }
             else {
                 nodes = hydrate.static(input as RenderableTemplate<unknown>);
@@ -135,15 +111,19 @@ function schedule() {
 
     raf.add(() => {
         try {
-            let slot;
+            let fn;
 
-            while (slot = cleanup.pop()) {
-                slot.clear();
+            while (fn = cleanup.pop()) {
+                fn();
             }
         }
-        catch(e) {}
+        catch(e) { }
 
         scheduled = false;
+
+        if (cleanup.length) {
+            schedule();
+        }
     });
 }
 
@@ -157,7 +137,9 @@ class Slot {
 
 
     constructor(marker: Element) {
-        marker[key] = this;
+        ( marker[SLOT_CLEANUP] ??= [] ).push(() => {
+            this.clear();
+        });
 
         this.marker = marker;
         this.nodes = [];
@@ -185,16 +167,22 @@ class Slot {
     }
 
     clear() {
-        removeGroups(this.nodes);
+        remove(...this.nodes);
         this.text = null;
     }
 
     pop() {
-        return removeGroup(this.nodes.pop());
+        let group = this.nodes.pop();
+
+        if (!group) {
+            return undefined;
+        }
+
+        return remove(group);
     }
 
     push(...groups: Elements[]) {
-        afterGroups(this.anchor(), groups);
+        after(this.anchor(), groups);
 
         for (let i = 0, n = groups.length; i < n; i++) {
             this.nodes.push(groups[i]);
@@ -252,17 +240,23 @@ class Slot {
     }
 
     shift() {
-        return removeGroup(this.nodes.shift());
+        let group = this.nodes.shift();
+
+        if (!group) {
+            return undefined;
+        }
+
+        return remove(group);
     }
 
     splice(start: number, stop: number = this.nodes.length, ...groups: Elements[]) {
-        return removeGroups(
-            this.nodes.splice(start, stop, ...afterGroups(this.anchor(start), groups))
+        return remove(
+            ...this.nodes.splice(start, stop, ...after(this.anchor(start), groups))
         );
     }
 
     unshift(...groups: Elements[]) {
-        return this.nodes.unshift(...afterGroups(this.marker, groups));
+        return this.nodes.unshift(...after(this.marker, groups));
     }
 }