@esportsplus/template 0.21.0 → 0.22.1

package/build/constants.d.ts

@@ -6,13 +6,14 @@ 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_SLOT_ATTRIBUTES: RegExp;
 declare const REGEX_SLOT_NODES: RegExp;
 declare const RENDERABLE: unique symbol;
 declare const RENDERABLE_HTML_REACTIVE_ARRAY = 1;
 declare const SLOT_HTML = "<!--$-->";
 declare const SLOT_MARKER = "{{$}}";
-declare const SLOT_MARKER_LENGTH: number;
 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_HTML_REACTIVE_ARRAY, SLOT_HTML, SLOT_MARKER, SLOT_MARKER_LENGTH, STATE_HYDRATING, STATE_NONE, STATE_WAITING };
+export { CLEANUP, EMPTY_FRAGMENT, NODE_CLOSING, NODE_ELEMENT, NODE_SLOT, NODE_VOID, NODE_WHITELIST, REGEX_EMPTY_TEXT_NODES, REGEX_EVENTS, REGEX_SLOT_ATTRIBUTES, REGEX_SLOT_NODES, RENDERABLE, RENDERABLE_HTML_REACTIVE_ARRAY, SLOT_HTML, SLOT_MARKER, STATE_HYDRATING, STATE_NONE, STATE_WAITING };

package/build/constants.js

@@ -27,13 +27,14 @@ const NODE_WHITELIST = {
     'wbr': NODE_VOID
 };
 const REGEX_EMPTY_TEXT_NODES = /(>|})\s+(<|{)/g;
+const REGEX_EVENTS = /(?:\s*on[\w-:]+\s*=(?:\s*["'][^"']*["'])*)/g;
+const REGEX_SLOT_ATTRIBUTES = /<[\w-]+([^><]*{{\$}}[^><]*)>/g;
 const REGEX_SLOT_NODES = /<([\w-]+|[\/!])(?:([^><]*{{\$}}[^><]*)|(?:[^><]*))?>|{{\$}}/g;
 const RENDERABLE = Symbol();
 const RENDERABLE_HTML_REACTIVE_ARRAY = 1;
 const SLOT_HTML = '<!--$-->';
 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_HTML_REACTIVE_ARRAY, SLOT_HTML, SLOT_MARKER, SLOT_MARKER_LENGTH, STATE_HYDRATING, STATE_NONE, STATE_WAITING };
+export { CLEANUP, EMPTY_FRAGMENT, NODE_CLOSING, NODE_ELEMENT, NODE_SLOT, NODE_VOID, NODE_WHITELIST, REGEX_EMPTY_TEXT_NODES, REGEX_EVENTS, REGEX_SLOT_ATTRIBUTES, REGEX_SLOT_NODES, RENDERABLE, RENDERABLE_HTML_REACTIVE_ARRAY, SLOT_HTML, SLOT_MARKER, STATE_HYDRATING, STATE_NONE, STATE_WAITING };

package/build/event/onresize.js

@@ -1,3 +1,4 @@
+import { onCleanup } from '@esportsplus/reactivity';
 let listeners = new Map(), registered = false;
 function onresize() {
     for (let [element, fn] of listeners) {
@@ -15,6 +16,9 @@ function onresize() {
 }
 export default (element, listener) => {
     listeners.set(element, listener);
+    onCleanup(() => {
+        listeners.delete(element);
+    });
     if (!registered) {
         window.addEventListener('resize', onresize);
         registered = true;

package/build/html/index.d.ts

@@ -1,6 +1,6 @@
 import { ReactiveArray } from '@esportsplus/reactivity';
-import { Attributes, Renderable, RenderableReactive } from '../types.js';
-type Values<T> = Attributes<any> | Renderable<T>;
+import { Attribute, Attributes, Renderable, RenderableReactive } from '../types.js';
+type Values<T> = Attribute | Attributes<any> | Renderable<T>;
 declare const html: {
     <T>(literals: TemplateStringsArray, ...values: (Values<T> | Values<T>[])[]): Node;
     reactive<T>(array: ReactiveArray<T>, template: RenderableReactive<T>["template"]): RenderableReactive<T>;

package/build/html/index.js

@@ -6,14 +6,14 @@ const html = (literals, ...values) => {
     if (slots !== null) {
         let node, nodePath;
         for (let i = slots.length - 1; i >= 0; i--) {
-            let { fn, path, slot } = slots[i];
+            let { fn, path } = slots[i];
             if (nodePath !== path) {
                 node = clone;
                 for (let i = 0, n = path.length; i < n; i++) {
                     node = path[i].call(node);
                 }
             }
-            fn(node, values[slot]);
+            fn(node, values[i]);
         }
     }
     return clone;

package/build/html/parser.js

@@ -1,8 +1,8 @@
-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 { NODE_CLOSING, NODE_ELEMENT, NODE_SLOT, NODE_VOID, NODE_WHITELIST, REGEX_EMPTY_TEXT_NODES, REGEX_EVENTS, REGEX_SLOT_ATTRIBUTES, REGEX_SLOT_NODES, SLOT_HTML, SLOT_MARKER } from '../constants.js';
 import { firstElementChild, nextElementSibling } from '../utilities/element.js';
 import { firstChild, nextSibling } from '../utilities/node.js';
-import { spread } from '../attributes.js';
 import { fragment } from '../utilities/fragment.js';
+import a from '../attributes.js';
 import s from '../slot/index.js';
 let cache = new WeakMap();
 function build(literals) {
@@ -10,13 +10,67 @@ function build(literals) {
     if (n === 0) {
         return set(literals, literals[0]);
     }
-    let buffer = '', html = literals.join(SLOT_MARKER)
+    let attributes = {}, buffer = '', events = false, html = literals.join(SLOT_MARKER)
         .replace(REGEX_EMPTY_TEXT_NODES, '$1$2')
         .trim(), index = 0, level = 0, levels = [{
             children: 0,
             elements: 0,
             path: []
         }], parsed = html.split(SLOT_MARKER), slot = 0, slots = [];
+    {
+        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) {
+                        continue;
+                    }
+                    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);
+                        }
+                    }
+                    else if (buffer === 'on') {
+                        events = true;
+                    }
+                }
+            }
+        }
+    }
     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) {
@@ -27,15 +81,18 @@ function build(literals) {
                 ? methods(parent.elements, parent.path, firstElementChild, nextElementSibling)
                 : methods(parent.children, [], firstChild, nextSibling);
             if (attr) {
-                let i = attr.indexOf(SLOT_MARKER);
-                while (i !== -1) {
+                let metadata = attributes[attr];
+                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];
                     slots.push({
-                        fn: spread,
-                        path,
-                        slot
+                        fn: name === null ? a.spread : a.set,
+                        name,
+                        path
                     });
                     buffer += parsed[slot++];
-                    i = attr.indexOf(SLOT_MARKER, i + SLOT_MARKER_LENGTH);
                 }
             }
             if (type === NODE_ELEMENT) {
@@ -48,14 +105,14 @@ function build(literals) {
             parent.elements++;
         }
         else if (type === NODE_SLOT) {
-            buffer += parsed[slot] + SLOT_HTML;
+            buffer += parsed[slot++] + SLOT_HTML;
             slots.push({
                 fn: s,
-                path: methods(parent.children, parent.path, firstChild, nextSibling),
-                slot: slot++
+                name: null,
+                path: methods(parent.children, parent.path, firstChild, nextSibling)
             });
         }
-        if (slot === n) {
+        if (n === slot) {
             buffer += parsed[slot];
             break;
         }
@@ -67,6 +124,9 @@ function build(literals) {
         }
         index = (match.index || 0) + match[0].length;
     }
+    if (events) {
+        buffer = buffer.replace(REGEX_EVENTS, '');
+    }
     return set(literals, buffer, slots);
 }
 function methods(children, copy, first, next) {

package/build/types.d.ts

@@ -4,7 +4,7 @@ import { firstChild } from './utilities/node.js';
 import attributes from './attributes.js';
 import slot from './slot/index.js';
 import html from './html/index.js';
-type Attribute = Effect<Primitive | Primitive[]> | Primitive;
+type Attribute = Effect<Primitive | Primitive[]> | ((...args: any[]) => void) | Primitive;
 type Attributes<T extends HTMLElement = Element> = {
     [key: `aria-${string}`]: string | number | boolean | undefined;
     [key: `data-${string}`]: string | undefined;
@@ -12,10 +12,10 @@ type Attributes<T extends HTMLElement = Element> = {
     onconnect?: (element: T) => void;
     ondisconnect?: (element: T) => void;
     onrender?: (element: T) => void;
-    ontick?: (element: T) => void;
+    ontick?: (dispose: VoidFunction, element: T) => void;
     style?: Attribute | Attribute[];
 } & {
-    [K in keyof GlobalEventHandlersEventMap as `on${string & K}`]?: (this: HTMLElement, event: GlobalEventHandlersEventMap[K]) => void;
+    [K in keyof GlobalEventHandlersEventMap as `on${string & K}`]?: (this: T, event: GlobalEventHandlersEventMap[K]) => void;
 } & Record<PropertyKey, unknown>;
 type Effect<T> = () => T extends [] ? Renderable<T>[] : Renderable<T>;
 type Element = HTMLElement & Attributes<any>;
@@ -35,9 +35,9 @@ type Template = {
     html: string;
     literals: TemplateStringsArray;
     slots: {
-        fn: typeof attributes.spread | typeof slot;
+        fn: typeof attributes.set | typeof attributes.spread | typeof slot;
+        name: string | null;
         path: typeof firstChild[];
-        slot: number;
     }[] | null;
 };
-export type { Attributes, Effect, Element, Renderable, RenderableReactive, SlotGroup, Template };
+export type { Attribute, Attributes, Effect, Element, Renderable, RenderableReactive, SlotGroup, Template };

package/package.json

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

package/src/constants.ts

@@ -42,6 +42,10 @@ const NODE_WHITELIST: Record<string, number> = {
 
 const REGEX_EMPTY_TEXT_NODES = /(>|})\s+(<|{)/g;
 
+const REGEX_EVENTS = /(?:\s*on[\w-:]+\s*=(?:\s*["'][^"']*["'])*)/g;
+
+const REGEX_SLOT_ATTRIBUTES = /<[\w-]+([^><]*{{\$}}[^><]*)>/g;
+
 const REGEX_SLOT_NODES = /<([\w-]+|[\/!])(?:([^><]*{{\$}}[^><]*)|(?:[^><]*))?>|{{\$}}/g;
 
 
@@ -54,8 +58,6 @@ const SLOT_HTML = '<!--$-->';
 
 const SLOT_MARKER = '{{$}}';
 
-const SLOT_MARKER_LENGTH = SLOT_MARKER.length;
-
 
 const STATE_HYDRATING = 0;
 
@@ -68,8 +70,7 @@ export {
     CLEANUP,
     EMPTY_FRAGMENT,
     NODE_CLOSING, NODE_ELEMENT, NODE_SLOT, NODE_VOID, NODE_WHITELIST,
-    REGEX_EMPTY_TEXT_NODES, REGEX_SLOT_NODES,
+    REGEX_EMPTY_TEXT_NODES, REGEX_EVENTS, REGEX_SLOT_ATTRIBUTES, REGEX_SLOT_NODES,
     RENDERABLE, RENDERABLE_HTML_REACTIVE_ARRAY,
-    SLOT_HTML, SLOT_MARKER, SLOT_MARKER_LENGTH,
-    STATE_HYDRATING, STATE_NONE, STATE_WAITING
+    SLOT_HTML, SLOT_MARKER, STATE_HYDRATING, STATE_NONE, STATE_WAITING
 };

package/src/event/onresize.ts

@@ -1,3 +1,4 @@
+import { onCleanup } from '@esportsplus/reactivity';
 import { Element } from '~/types';
 
 
@@ -25,6 +26,10 @@ function onresize() {
 export default (element: Element, listener: Function) => {
     listeners.set(element, listener);
 
+    onCleanup(() => {
+        listeners.delete(element);
+    });
+
     if (!registered) {
         window.addEventListener('resize', onresize);
         registered = true;

package/src/html/index.ts

@@ -1,11 +1,11 @@
 import { ReactiveArray } from '@esportsplus/reactivity';
 import { RENDERABLE, RENDERABLE_HTML_REACTIVE_ARRAY } from '~/constants';
-import { Attributes, Renderable, RenderableReactive } from '~/types';
+import { Attribute, Attributes, Renderable, RenderableReactive } from '~/types';
 import { cloneNode } from '~/utilities/node';
 import parser from './parser';
 
 
-type Values<T> = Attributes<any> | Renderable<T>;
+type Values<T> = Attribute | Attributes<any> | Renderable<T>;
 
 
 const html = <T>(literals: TemplateStringsArray, ...values: (Values<T> | Values<T>[])[]) => {
@@ -16,7 +16,7 @@ const html = <T>(literals: TemplateStringsArray, ...values: (Values<T> | Values<
         let node, nodePath;
 
         for (let i = slots.length - 1; i >= 0; i--) {
-            let { fn, path, slot } = slots[i];
+            let { fn, path } = slots[i];
 
             if (nodePath !== path) {
                 node = clone;
@@ -27,7 +27,7 @@ const html = <T>(literals: TemplateStringsArray, ...values: (Values<T> | Values<
             }
 
             // @ts-ignore
-            fn(node, values[slot]);
+            fn(node, values[i]);
         }
     }
 

package/src/html/parser.ts

@@ -1,12 +1,13 @@
 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
+    NODE_CLOSING, NODE_ELEMENT, NODE_SLOT, NODE_VOID, NODE_WHITELIST,
+    REGEX_EMPTY_TEXT_NODES, REGEX_EVENTS, REGEX_SLOT_ATTRIBUTES, REGEX_SLOT_NODES,
+    SLOT_HTML, SLOT_MARKER
 } from '~/constants';
 import { Template } from '~/types';
 import { firstElementChild, nextElementSibling } from '~/utilities/element';
 import { firstChild, nextSibling } from '~/utilities/node';
-import { spread } from '~/attributes';
 import { fragment } from '~/utilities/fragment';
+import a from '~/attributes';
 import s from '~/slot';
 
 
@@ -20,7 +21,9 @@ function build(literals: TemplateStringsArray) {
         return set(literals, literals[0]);
     }
 
-    let buffer = '',
+    let attributes: Record<string, (null | string)[]> = {},
+        buffer = '',
+        events = false,
         html = literals.join(SLOT_MARKER)
             .replace(REGEX_EMPTY_TEXT_NODES, '$1$2')
             .trim(),
@@ -35,6 +38,73 @@ function build(literals: TemplateStringsArray) {
         slot = 0,
         slots: Template['slots'] = [];
 
+    {
+        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) {
+                        continue;
+                    }
+                    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);
+                        }
+                    }
+                    else if (buffer === 'on') {
+                        events = true;
+                    }
+                }
+            }
+        }
+    }
+
     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);
@@ -51,17 +121,22 @@ function build(literals: TemplateStringsArray) {
                     : methods(parent.children, [], firstChild, nextSibling);
 
             if (attr) {
-                let i = attr.indexOf(SLOT_MARKER);
+                let metadata = attributes[attr];
+
+                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: spread,
-                        path,
-                        slot
+                        fn: name === null ? a.spread : a.set,
+                        name,
+                        path
                     });
 
                     buffer += parsed[slot++];
-                    i = attr.indexOf(SLOT_MARKER, i + SLOT_MARKER_LENGTH);
                 }
             }
 
@@ -76,15 +151,15 @@ function build(literals: TemplateStringsArray) {
             parent.elements++;
         }
         else if (type === NODE_SLOT) {
-            buffer += parsed[slot] + SLOT_HTML;
+            buffer += parsed[slot++] + SLOT_HTML;
             slots.push({
                 fn: s,
-                path: methods(parent.children, parent.path, firstChild, nextSibling),
-                slot: slot++
+                name: null,
+                path: methods(parent.children, parent.path, firstChild, nextSibling)
             });
         }
 
-        if (slot === n) {
+        if (n === slot) {
             buffer += parsed[slot];
             break;
         }
@@ -99,6 +174,10 @@ function build(literals: TemplateStringsArray) {
         index = (match.index || 0) + match[0].length;
     }
 
+    if (events) {
+        buffer = buffer.replace(REGEX_EVENTS, '');
+    }
+
     return set(literals, buffer, slots);
 }
 

package/src/types.ts

@@ -6,7 +6,7 @@ import slot from './slot';
 import html from './html';
 
 
-type Attribute = Effect<Primitive | Primitive[]> | Primitive;
+type Attribute = Effect<Primitive | Primitive[]> | ((...args: any[]) => void) | Primitive;
 
 type Attributes<T extends HTMLElement = Element> = {
     [key: `aria-${string}`]: string | number | boolean | undefined;
@@ -15,10 +15,10 @@ type Attributes<T extends HTMLElement = Element> = {
     onconnect?: (element: T) => void;
     ondisconnect?: (element: T) => void;
     onrender?: (element: T) => void;
-    ontick?: (element: T) => void;
+    ontick?: (dispose: VoidFunction, element: T) => void;
     style?: Attribute | Attribute[];
 } & {
-    [K in keyof GlobalEventHandlersEventMap as `on${string & K}`]?: (this: HTMLElement, event: GlobalEventHandlersEventMap[K]) => void;
+    [K in keyof GlobalEventHandlersEventMap as `on${string & K}`]?: (this: T, event: GlobalEventHandlersEventMap[K]) => void;
 } & Record<PropertyKey, unknown>;
 
 type Effect<T> = () => T extends [] ? Renderable<T>[] : Renderable<T>;
@@ -51,15 +51,15 @@ type Template = {
     html: string;
     literals: TemplateStringsArray;
     slots: {
-        fn: typeof attributes.spread | typeof slot;
+        fn: typeof attributes.set | typeof attributes.spread | typeof slot;
+        name: string | null;
         path: typeof firstChild[];
-        slot: number;
     }[] | null;
 };
 
 
 export type {
-    Attributes,
+    Attribute, Attributes,
     Effect, Element,
     Renderable, RenderableReactive,
     SlotGroup,