@esportsplus/template 0.12.12 → 0.13.0

package/build/attributes.d.ts

@@ -1,7 +1,9 @@
 import { Attributes, Element } from './types.js';
+declare const apply: (element: Element) => void;
+declare const spread: (element: Element, attributes: Attributes | Attributes[]) => void;
 declare const _default: {
     apply: (element: Element) => void;
-    set: (element: Element, value: unknown, name: string) => void;
     spread: (element: Element, attributes: Attributes | Attributes[]) => void;
 };
 export default _default;
+export { apply, spread };

package/build/attributes.js

@@ -1,11 +1,10 @@
 import { effect, root } from '@esportsplus/reactivity';
-import { ATTRIBUTES } from './constants.js';
 import { className, isArray, isObject, raf, removeAttribute, setAttribute } from './utilities.js';
 import event from './event.js';
 let attributes = {}, delimiters = {
     class: ' ',
     style: ';'
-};
+}, key = Symbol();
 function attribute(element, name, value) {
     if (value === false || value == null) {
         value = '';
@@ -45,12 +44,22 @@ function reactive(element, id, name, value, wait = false) {
     }
 }
 function set(element, value, name) {
-    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);
         }
         else {
-            reactive(element, ('e' + store(element)[ATTRIBUTES]++), name, value, true);
+            reactive(element, ('e' + store(element)[key]++), name, value, true);
         }
     }
     else {
@@ -58,7 +67,7 @@ function set(element, value, name) {
     }
 }
 function store(element) {
-    return (element[ATTRIBUTES] || (element[ATTRIBUTES] = { [ATTRIBUTES]: 0 }));
+    return (element[key] || (element[key] = { [key]: 0 }));
 }
 function update(element, id, name, value, wait = false) {
     if (value === false || value == null) {
@@ -119,44 +128,32 @@ function update(element, id, name, value, wait = false) {
         attribute(element, name, value);
     }
 }
-export default {
-    apply: (element) => {
-        for (let key in attributes) {
-            attribute(element, key, attributes[key]);
-        }
-        attributes = {};
-    },
-    set: (element, value, name) => {
-        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);
+const apply = (element) => {
+    for (let key in attributes) {
+        attribute(element, key, attributes[key]);
+    }
+    attributes = {};
+};
+const spread = function (element, attributes) {
+    if (isObject(attributes)) {
+        for (let name in attributes) {
+            set(element, attributes[name], name);
         }
-    },
-    spread: function (element, attributes) {
-        if (isObject(attributes)) {
-            for (let name in attributes) {
-                this.set(element, attributes[name], name);
+    }
+    else if (isArray(attributes)) {
+        for (let i = 0, n = attributes.length; i < n; i++) {
+            let attrs = attributes[i];
+            if (!isObject(attrs)) {
+                continue;
             }
-        }
-        else if (isArray(attributes)) {
-            for (let i = 0, n = attributes.length; i < n; i++) {
-                let attrs = attributes[i];
-                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/build/constants.d.ts

@@ -1,13 +1,9 @@
-declare const ATTRIBUTES: unique symbol;
 declare const NODE_CLOSING = 1;
 declare const NODE_ELEMENT = 3;
 declare const NODE_SLOT = 4;
 declare const NODE_VOID = 5;
 declare const NODE_WHITELIST: Record<string, number>;
 declare const REGEX_EMPTY_TEXT_NODES: RegExp;
-declare const REGEX_EVENTS: RegExp;
-declare const REGEX_EXTRA_WHITESPACE: RegExp;
-declare const REGEX_SLOT_ATTRIBUTES: RegExp;
 declare const REGEX_SLOT_NODES: RegExp;
 declare const RENDERABLE: unique symbol;
 declare const RENDERABLE_REACTIVE: unique symbol;
@@ -15,4 +11,5 @@ declare const RENDERABLE_TEMPLATE: unique symbol;
 declare const SLOT: unique symbol;
 declare const SLOT_HTML = "<!--$-->";
 declare const SLOT_MARKER = "{{$}}";
-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_HTML, SLOT_MARKER };
+declare const SLOT_MARKER_LENGTH: number;
+export { NODE_CLOSING, NODE_ELEMENT, NODE_SLOT, NODE_VOID, NODE_WHITELIST, REGEX_EMPTY_TEXT_NODES, REGEX_SLOT_NODES, RENDERABLE, RENDERABLE_REACTIVE, RENDERABLE_TEMPLATE, SLOT, SLOT_HTML, SLOT_MARKER, SLOT_MARKER_LENGTH };

package/build/constants.js

@@ -1,4 +1,3 @@
-const ATTRIBUTES = Symbol();
 const NODE_CLOSING = 1;
 const NODE_COMMENT = 2;
 const NODE_ELEMENT = 3;
@@ -25,9 +24,6 @@ const NODE_WHITELIST = {
     'wbr': NODE_VOID
 };
 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;
 const RENDERABLE = Symbol();
 const RENDERABLE_REACTIVE = Symbol();
@@ -35,4 +31,5 @@ const RENDERABLE_TEMPLATE = Symbol();
 const SLOT = Symbol();
 const SLOT_HTML = '<!--$-->';
 const SLOT_MARKER = '{{$}}';
-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_HTML, SLOT_MARKER };
+const SLOT_MARKER_LENGTH = SLOT_MARKER.length;
+export { NODE_CLOSING, NODE_ELEMENT, NODE_SLOT, NODE_VOID, NODE_WHITELIST, REGEX_EMPTY_TEXT_NODES, REGEX_SLOT_NODES, RENDERABLE, RENDERABLE_REACTIVE, RENDERABLE_TEMPLATE, SLOT, SLOT_HTML, SLOT_MARKER, SLOT_MARKER_LENGTH };

package/build/html/cache.js

@@ -1,67 +1,19 @@
-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 } from '../constants.js';
+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 a from '../attributes.js';
+import { spread } from '../attributes.js';
 import s from '../slot.js';
 let cache = new WeakMap();
 function build(literals, values) {
     if (values.length === 0) {
         return set(literals, literals[0]);
     }
-    let attributes = {}, buffer = '', html = minify(literals.join(SLOT_MARKER)), index = 0, level = 0, levels = [{
+    let buffer = '', html = literals.join(SLOT_MARKER)
+        .replace(REGEX_EMPTY_TEXT_NODES, '$1$2')
+        .trim(), index = 0, level = 0, levels = [{
             children: 0,
             elements: 0,
             path: []
-        }], slot = 0, 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);
-                        }
-                    }
-                }
-            }
-        }
-    }
+        }], parsed = html.split(SLOT_MARKER), slot = 0, slots = [], total = values.length;
     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);
         if ((match.index || 1) - 1 > index) {
@@ -70,19 +22,15 @@ function build(literals, values) {
         if (type === NODE_ELEMENT || type === NODE_VOID) {
             let attr = match[2];
             if (attr) {
-                let metadata = attributes[attr], 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];
+                let i = attr.indexOf(SLOT_MARKER), path = methods(parent.children, parent.path, firstChild, nextSibling);
+                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);
                 }
             }
             if (type === NODE_ELEMENT) {
@@ -97,16 +45,15 @@ function build(literals, values) {
             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;
         }
         if (type === NODE_CLOSING) {
@@ -117,7 +64,7 @@ function build(literals, values) {
         }
         index = (match.index || 0) + match[0].length;
     }
-    return set(literals, minify(buffer.replace(REGEX_EVENTS, '')), slots);
+    return set(literals, buffer, slots);
 }
 function methods(children, copy, first, next) {
     let methods = copy.slice();
@@ -127,9 +74,6 @@ function methods(children, copy, first, next) {
     }
     return methods;
 }
-function minify(html) {
-    return html.replace(REGEX_EMPTY_TEXT_NODES, '$1$2').replace(REGEX_EXTRA_WHITESPACE, ' ').trim();
-}
 function set(literals, html, slots = null) {
     let template = {
         fragment: fragment(html),

package/build/html/hydrate.js

@@ -1,6 +1,6 @@
 import { root } from '@esportsplus/reactivity';
 import { cloneNode, firstChild, nextSibling } from '../utilities.js';
-import a from '../attributes.js';
+import { apply } from '../attributes.js';
 import cache from './cache.js';
 function reactive(renderable, slot) {
     let array = renderable.values, factory = renderable.template, refresh = () => {
@@ -23,10 +23,10 @@ function render(renderable, template) {
     if (slots !== null) {
         let node, previous, 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;
                 for (let o = 0, j = path.length; o < j; o++) {
@@ -35,7 +35,9 @@ function render(renderable, template) {
             }
             fn(node, values[slot], name);
         }
-        a.apply(node);
+        if (node) {
+            apply(node);
+        }
     }
     for (let element = firstChild.call(fragment); element; element = nextSibling.call(element)) {
         elements.push(element);

package/build/types.d.ts

@@ -12,6 +12,8 @@ type Attributes = {
 } & {
     [key: `aria-${string}`]: string | number | boolean | undefined;
     [key: `data-${string}`]: string | undefined;
+    onmount?: (element: Element) => void;
+    onrender?: (element: Element) => void;
 } & Record<PropertyKey, unknown>;
 type Effect<T> = () => EffectResponse<T>;
 type EffectResponse<T> = T extends [] ? EffectResponse<T[number]>[] : Primitive | Renderable<T>;
@@ -37,8 +39,7 @@ type Template = {
     html: string;
     literals: TemplateStringsArray;
     slots: {
-        fn: typeof attributes.set | typeof attributes.spread | typeof event | typeof slot;
-        name: PropertyKey | null;
+        fn: typeof attributes.spread | typeof event | typeof slot;
         path: typeof firstChild[];
         slot: number;
     }[] | null;

package/package.json

@@ -3,7 +3,7 @@
   "dependencies": {
     "@esportsplus/reactivity": "^0.4.6",
     "@esportsplus/tasks": "^0.1.9",
-    "@esportsplus/utilities": "^0.18.2"
+    "@esportsplus/utilities": "^0.19.0"
   },
   "devDependencies": {
     "@esportsplus/typescript": "^0.9.1"
@@ -13,7 +13,7 @@
   "private": false,
   "type": "module",
   "types": "./build/index.d.ts",
-  "version": "0.12.12",
+  "version": "0.13.0",
   "scripts": {
     "build": "tsc && tsc-alias",
     "-": "-"

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);
         }
         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,37 @@ 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;
 
 
@@ -58,23 +49,22 @@ 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_HTML,
-    SLOT_MARKER
+    SLOT_MARKER,
+    SLOT_MARKER_LENGTH
 };

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

@@ -5,8 +5,8 @@ import { Element, Elements, RenderableReactive, RenderableTemplate } from './typ
 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[] = [],
+    // Using a private symbol since 'SLOT' is used as a different flag in 'render.ts'
     key = Symbol(),
     scheduled = false;
 

package/src/types.ts

@@ -14,6 +14,12 @@ type Attributes = {
 } & {
     [key: `aria-${string}`]: string | number | boolean | undefined;
     [key: `data-${string}`]: string | undefined;
+    // Element is mounted to DOM
+    // - Trigger animations, etc.
+    onmount?: (element: Element) => void;
+    // Element is rendered in fragment
+    // - Used to retrieve reference to the element
+    onrender?: (element: Element) => void;
 } & Record<PropertyKey, unknown>;
 
 type Effect<T> = () => EffectResponse<T>;
@@ -51,8 +57,7 @@ type Template = {
     html: string;
     literals: TemplateStringsArray;
     slots: {
-        fn: typeof attributes.set | typeof attributes.spread | typeof event | typeof slot;
-        name: PropertyKey | null;
+        fn: typeof attributes.spread | typeof event | typeof slot;
         path: typeof firstChild[];
         slot: number;
     }[] | null;