@esportsplus/template 0.28.1 → 0.29.1

package/package.json

@@ -2,11 +2,17 @@
   "author": "ICJR",
   "dependencies": {
     "@esportsplus/queue": "^0.2.0",
-    "@esportsplus/reactivity": "^0.22.0",
-    "@esportsplus/utilities": "^0.25.0"
+    "@esportsplus/reactivity": "^0.23.2",
+    "@esportsplus/utilities": "^0.27.2",
+    "serve": "^14.2.5"
   },
   "devDependencies": {
-    "@esportsplus/typescript": "^0.9.2"
+    "@esportsplus/typescript": "^0.13.0",
+    "@types/node": "^25.0.3",
+    "esbuild": "^0.27.2",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0",
+    "vite-tsconfig-paths": "^6.0.3"
   },
   "main": "./build/index.js",
   "name": "@esportsplus/template",
@@ -17,9 +23,10 @@
   },
   "type": "module",
   "types": "./build/index.d.ts",
-  "version": "0.28.1",
+  "version": "0.29.1",
   "scripts": {
     "build": "tsc && tsc-alias",
+    "compile:test": "vite build --config test/vite.config.ts",
     "-": "-"
   }
 }

package/src/attributes.ts

@@ -1,10 +1,9 @@
 import { effect } from '@esportsplus/reactivity';
 import { isArray, isObject } from '@esportsplus/utilities';
-import { STATE_HYDRATING, STATE_NONE, STATE_WAITING } from './constants';
+import { DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS, STATE_HYDRATING, STATE_NONE, STATE_WAITING } from './constants';
 import { Attributes, Element } from './types';
-import { className, removeAttribute, setAttribute } from './utilities/element';
+import { raf } from './utilities';
 import q from '@esportsplus/queue';
-import raf from './utilities/raf';
 import event from './event';
 
 
@@ -32,13 +31,13 @@ let delimiters: Record<string, string> = {
 
 function apply(element: Element, name: string, value: unknown) {
     if (value == null || value === false || value === '') {
-        removeAttribute.call(element, name);
+        element.removeAttribute(name);
     }
     else if (name === 'class') {
-        className.call(element, value as string);
+        element.className = value as string;
     }
     else if (name === 'style' || (name[0] === 'd' && name.startsWith('data-')) || element['ownerSVGElement']) {
-        setAttribute.call(element, name, value as string);
+        element.setAttribute(name, value as string);
     }
     else {
         element[name] = value;
@@ -62,6 +61,7 @@ function list(
     }
 
     let base = name + '.static',
+        changed = false,
         delimiter = delimiters[name],
         store = (ctx ??= context(element)).store ??= {},
         dynamic = store[name] as Set<string> | undefined;
@@ -75,10 +75,17 @@ function list(
 
     if (id === null) {
         if (value && typeof value === 'string') {
+            changed = true;
             store[base] += (store[base] ? delimiter : '') + value;
         }
     }
     else {
+        if (store[id + '.raw'] === value) {
+            return;
+        }
+
+        store[id + '.raw'] = value;
+
         let hot: Record<PropertyKey, true> = {};
 
         if (value && typeof value === 'string') {
@@ -92,7 +99,11 @@ function list(
                     continue;
                 }
 
-                dynamic.add(part);
+                if (!dynamic.has(part)) {
+                    changed = true;
+                    dynamic.add(part);
+                }
+
                 hot[part] = true;
             }
         }
@@ -105,6 +116,7 @@ function list(
                     continue;
                 }
 
+                changed = true;
                 dynamic.delete(part);
             }
         }
@@ -112,6 +124,10 @@ function list(
         store[id] = hot;
     }
 
+    if (!changed) {
+        return;
+    }
+
     value = store[base];
 
     for (let key of dynamic) {
@@ -156,6 +172,41 @@ function property(
     }
 }
 
+function reactive(element: Element, name: string, state: State, value: unknown) {
+    let ctx = context(element),
+        fn = name === 'class' || name === 'style' ? list : property;
+
+    ctx.effect ??= 0;
+
+    let id = (ctx.effect as number)++;
+
+    effect(() => {
+        let v = (value as Function)(element);
+
+        if (v == null || typeof v !== 'object') {
+            fn(ctx, element, id, name, state, v);
+        }
+        else if (isArray(v)) {
+            let last = v.length - 1;
+
+            for (let i = 0, n = v.length; i < n; i++) {
+                fn(
+                    ctx,
+                    element,
+                    id,
+                    name,
+                    state === STATE_HYDRATING
+                        ? state
+                        : i !== last ? STATE_WAITING : state,
+                    v[i],
+                );
+            }
+        }
+    });
+
+    state = STATE_NONE;
+}
+
 function schedule(ctx: Context | null, element: Element, name: string, state: State, value: unknown) {
     ctx ??= context(element);
     (ctx.updates ??= {})[name] = value;
@@ -198,50 +249,27 @@ function task() {
 
 
 const set = (element: Element, name: string, value: unknown) => {
-    let fn = name === 'class' || name === 'style' ? list : property,
-        state: State = STATE_HYDRATING;
-
     if (typeof value === 'function') {
         if (name[0] === 'o' && name[1] === 'n') {
-            return event(element, name as `on${string}`, value as Function);
-        }
+            let e = name.slice(2).toLowerCase(),
+                key = name.toLowerCase();
 
-        let ctx = context(element);
-
-        ctx.effect ??= 0;
-
-        let id = (ctx.effect as number)++;
-
-        effect(() => {
-            let v = (value as Function)(element);
-
-            if (v == null || typeof v !== 'object') {
-                fn(ctx, element, id, name, state, v);
+            if (LIFECYCLE_EVENTS.has(key)) {
+                (event as any)[key](element, value as Function);
             }
-            else if (isArray(v)) {
-                let last = v.length - 1;
-
-                for (let i = 0, n = v.length; i < n; i++) {
-                    fn(
-                        ctx,
-                        element,
-                        id,
-                        name,
-                        state === STATE_HYDRATING
-                            ? state
-                            : i !== last ? STATE_WAITING : state,
-                        v[i],
-                    );
-                }
+            else if (DIRECT_ATTACH_EVENTS.has(key)) {
+                event.direct(element, e, value as Function);
             }
-        });
-
-        state = STATE_NONE;
-
+            else {
+                event.delegate(element, e, value as Function);
+            }
+        }
+        else {
+            reactive(element, name, STATE_HYDRATING, value);
+        }
         return;
     }
-
-    if (typeof value !== 'object') {
+    else if (typeof value !== 'object') {
         // Skip isArray when possible
     }
     else if (isArray(value)) {
@@ -257,15 +285,51 @@ const set = (element: Element, name: string, value: unknown) => {
         return;
     }
 
-    fn(null, element, null, name, state, value);
+    (name === 'class' || name === 'style' ? list : property)(null, element, null, name, STATE_HYDRATING, value);
+};
+
+const setClass = (element: Element, classlist: false | string | undefined, value: unknown) => {
+    let ctx = context(element),
+        store = ctx.store ??= {};
+
+    store['class.static'] = classlist || '';
+    store['class'] ??= new Set<string>();
+
+    if (typeof value === 'function') {
+        reactive(element, 'class', STATE_HYDRATING, value);
+    }
+    else {
+        list(ctx, element, null, 'class', STATE_HYDRATING, value);
+    }
+};
+
+const setProperty = (element: Element, name: string, value: unknown) => {
+    if (typeof value === 'function') {
+        reactive(element, name, STATE_HYDRATING, value);
+    }
+    else {
+        property(null, element, null, name, STATE_HYDRATING, value);
+    }
+};
+
+const setStyle = (element: Element, styles: false | string | undefined, value: unknown) => {
+    let ctx = context(element),
+        store = ctx.store ??= {};
+
+    store['style.static'] = styles || '';
+    store['style'] ??= new Set<string>();
+
+    if (typeof value === 'function') {
+        reactive(element, 'style', STATE_HYDRATING, value);
+    }
+    else {
+        list(ctx, element, null, 'style', STATE_HYDRATING, value);
+    }
 };
 
 const spread = function (element: Element, value: Attributes | Attributes[]) {
     if (isObject(value)) {
-        let names = Object.keys(value),
-            name;
-
-        while (name = names.pop()) {
+        for (let name in value) {
             let v = value[name];
 
             if (v == null || v === false || v === '') {
@@ -283,5 +347,5 @@ const spread = function (element: Element, value: Attributes | Attributes[]) {
 };
 
 
-export default { set, spread };
-export { set, spread };
+export default { set, setClass, setProperty, setStyle, spread };
+export { set, setClass, setProperty, setStyle, spread };

package/src/constants.ts

@@ -1,74 +1,27 @@
-import { fragment } from './utilities/fragment';
+import { fragment } from './utilities';
 
 
 const ARRAY_SLOT = Symbol('template.array.slot');
 
-
 const CLEANUP = Symbol('template.cleanup');
 
-
 const EMPTY_FRAGMENT = fragment('');
 
-
-const NODE_CLOSING = 1;
-
-const NODE_COMMENT = 2;
-
-const NODE_ELEMENT = 3;
-
-const NODE_SLOT = 4;
-
-const NODE_VOID = 5;
-
-const NODE_WHITELIST: Record<string, number> = {
-    '/': NODE_CLOSING,
-    '!': NODE_COMMENT,
-
-    'area': NODE_VOID,
-    'base': NODE_VOID,
-    'br': NODE_VOID,
-    'col': NODE_VOID,
-    'embed': NODE_VOID,
-    'hr': NODE_VOID,
-    'img': NODE_VOID,
-    'input': NODE_VOID,
-    'keygen': NODE_VOID,
-    'link': NODE_VOID,
-    'menuitem': NODE_VOID,
-    'meta': NODE_VOID,
-    'param': NODE_VOID,
-    'source': NODE_VOID,
-    'track': NODE_VOID,
-    'wbr': NODE_VOID
-};
-
-
-const REGEX_EMPTY_TEXT_NODES = /(>|}|\s)\s+(<|{|\s)/g;
-
-const REGEX_EVENTS = /(?:\s*on[\w-:]+\s*=(?:\s*["'][^"']*["'])*)/g;
-
-const REGEX_SLOT_ATTRIBUTES = /<[\w-]+([^><]*{{\$}}[^><]*)>/g;
-
-const REGEX_SLOT_NODES = /<([\w-]+|[\/!])(?:([^><]*{{\$}}[^><]*)|(?:[^><]*))?>|{{\$}}/g;
-
-
 const SLOT_HTML = '<!--$-->';
 
-const SLOT_MARKER = '{{$}}';
-
-
 const STATE_HYDRATING = 0;
 
 const STATE_NONE = 1;
 
 const STATE_WAITING = 2;
 
+const STORE = Symbol('template.store');
+
 
 export {
     ARRAY_SLOT,
     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,
-    SLOT_HTML, STATE_HYDRATING, SLOT_MARKER, STATE_NONE, STATE_WAITING
-};
+    SLOT_HTML, STATE_HYDRATING, STATE_NONE, STATE_WAITING, STORE
+};
+export * from './event/constants';

package/src/event/constants.ts

@@ -0,0 +1,16 @@
+const DIRECT_ATTACH_EVENTS = new Set<string>([
+    'onblur',
+    'onerror',
+    'onfocus', 'onfocusin', 'onfocusout',
+    'onload',
+    'onplay', 'onpause', 'onended', 'ontimeupdate',
+    'onreset',
+    'onscroll', 'onsubmit'
+]);
+
+const LIFECYCLE_EVENTS = new Set<string>([
+    'onconnect', 'ondisconnect', 'onrender', 'onresize', 'ontick'
+]);
+
+
+export { DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS };

package/src/event/index.ts

@@ -1,36 +1,31 @@
 import { root } from '@esportsplus/reactivity';
 import { defineProperty } from '@esportsplus/utilities';
 import { Element } from '~/types';
-import { addEventListener } from '~/utilities/element';
-import { parentElement } from '~/utilities/node';
-import { ondisconnect } from '~/slot/cleanup';
+import { ondisconnect as disconnect } from '~/slot/cleanup';
 import onconnect from './onconnect';
 import onresize from './onresize';
 import ontick from './ontick';
 
 
-let capture = new Set<`on${string}`>(['onblur', 'onfocus', 'onscroll']),
-    controllers = new Map<
-        `on${string}`,
-        (AbortController & { listeners: number }) | null
-    >(),
+let controllers = new Map<string, (AbortController & { listeners: number }) | null>(),
+    host = window.document,
     keys: Record<string, symbol> = {},
-    passive = new Set<`on${string}`>([
-        'onanimationend', 'onanimationiteration', 'onanimationstart',
-        'onmousedown', 'onmouseenter', 'onmouseleave', 'onmousemove', 'onmouseout', 'onmouseover', 'onmouseup', 'onmousewheel',
-        'onpointerenter', 'onpointerleave', 'onpointermove', 'onpointerout', 'onpointerover',
-        'onscroll',
-        'ontouchcancel', 'ontouchend', 'ontouchleave', 'ontouchmove', 'ontouchstart', 'ontransitionend',
-        'onwheel'
+    passive = new Set<string>([
+        'animationend', 'animationiteration', 'animationstart',
+        'mousedown', 'mouseenter', 'mouseleave', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'mousewheel',
+        'pointerenter', 'pointerleave', 'pointermove', 'pointerout', 'pointerover',
+        'scroll',
+        'touchcancel', 'touchend', 'touchleave', 'touchmove', 'touchstart', 'transitionend',
+        'wheel'
     ]);
 
 
-(['onmousemove', 'onmousewheel', 'onscroll', 'ontouchend', 'ontouchmove', 'ontouchstart', 'onwheel'] as `on${string}`[]).map(event => {
+(['mousemove', 'mousewheel', 'scroll', 'touchend', 'touchmove', 'touchstart', 'wheel'] as string[]).map(event => {
     controllers.set(event, null);
 });
 
 
-function register(element: Element, event: `on${string}`) {
+function register(element: Element, event: string) {
     let controller = controllers.get(event),
         signal: AbortController['signal'] | undefined;
 
@@ -63,7 +58,7 @@ function register(element: Element, event: `on${string}`) {
 
     let key = keys[event] = Symbol();
 
-    addEventListener.call(window.document, event.slice(2), (e) => {
+    host.addEventListener(event.slice(2), (e) => {
         let fn,
             node = e.target as Element | null;
 
@@ -81,10 +76,9 @@ function register(element: Element, event: `on${string}`) {
                 return fn.call(node, e);
             }
 
-            node = parentElement.call(node);
+            node = node.parentElement as Element | null;
         }
     }, {
-        capture: capture.has(event),
         passive: passive.has(event),
         signal
     });
@@ -93,30 +87,30 @@ function register(element: Element, event: `on${string}`) {
 }
 
 
-export default (element: Element, event: `on${string}`, listener: Function): void => {
-    switch (event) {
-        case 'onconnect':
-            onconnect(element, listener);
-            return;
+const delegate = (element: Element, event: string, listener: Function): void => {
+    element[ keys[event] || register(element, event) ] = listener;
+};
 
-        case 'ondisconnect':
-            ondisconnect(element, () => listener(element));
-            return;
+// DIRECT_ATTACH_EVENTS in ./constants.ts tells compiler to use this function
+const direct = (element: Element, event: string, listener: Function): void => {
+    let handler = (e: Event) => listener.call(element, e);
 
-        case 'onrender':
-            root(() => listener(element));
-            return;
+    element.addEventListener(event, handler, {
+        passive: passive.has(event)
+    });
 
-        case 'onresize':
-            onresize(element, listener);
-            return;
+    ondisconnect(element, () => {
+        element.removeEventListener(event, handler);
+    });
+};
 
-        case 'ontick':
-            ontick(element, listener);
-            return;
+const ondisconnect = (element: Element, listener: Function) => {
+    disconnect(element, () => listener(element));
+};
 
-        default:
-            element[ keys[event] || register(element, event) ] = listener;
-            return;
-    }
-};
+const onrender = (element: Element, listener: Function) => {
+    root(() => listener(element));
+};
+
+
+export default { delegate, direct, onconnect, ondisconnect, onrender, onresize, ontick };

package/src/event/onconnect.ts

@@ -18,4 +18,4 @@ export default (element: Element, listener: Function) => {
         retry = 60;
 
     add(fn);
-};
+};

package/src/event/onresize.ts

@@ -34,4 +34,4 @@ export default (element: Element, listener: Function) => {
         window.addEventListener('resize', onresize);
         registered = true;
     }
-};
+};

package/src/event/ontick.ts

@@ -1,5 +1,4 @@
-import { STATE_HYDRATING, STATE_NONE } from '~/constants';
-import raf from '~/utilities/raf';
+import { raf } from '~/utilities';
 
 
 let tasks = Object.assign(new Set<VoidFunction>(), { running: false });
@@ -34,13 +33,11 @@ const remove = (task: VoidFunction) => {
 
 
 export default (element: Element, listener: Function) => {
-    let dispose = () => {
-            remove(fn);
-        },
+    let connected = false,
         fn = () => {
-            if (state === STATE_HYDRATING) {
+            if (connected === false) {
                 if (element.isConnected) {
-                    state = STATE_NONE;
+                    connected = true;
                 }
                 else if (retry--) {
                     return;
@@ -52,11 +49,10 @@ export default (element: Element, listener: Function) => {
                 return;
             }
 
-            listener(dispose, element);
+            listener(() => remove(fn), element);
         },
-        retry = 60,
-        state = STATE_HYDRATING;
+        retry = 60;
 
     add(fn);
 };
-export { add, remove };
+export { add, remove };

package/src/html.ts

@@ -0,0 +1,18 @@
+import { ReactiveArray } from '@esportsplus/reactivity';
+import { Attribute, Attributes, Renderable } from '~/types';
+import { ArraySlot } from '~/slot/array';
+
+
+type Values<T> = Attribute | Attributes<any> | ArraySlot<T> | Renderable<T>;
+
+
+const html = <T>(_literals: TemplateStringsArray, ..._values: (Values<T> | Values<T>[])[]): DocumentFragment => {
+    throw new Error('html`` templates must be compiled. Ensure vite-plugin is configured.');
+};
+
+html.reactive = <T>(_arr: ReactiveArray<T>, _template: (value: T) => DocumentFragment): ArraySlot<T> => {
+    throw new Error('html.reactive() must be compiled. Ensure vite-plugin is configured.');
+};
+
+
+export default html;

package/src/index.ts

@@ -1,5 +1,11 @@
+import './runtime';
+export { default as attributes } from './attributes';
+export { default as event } from './event';
 export { default as html } from './html';
 export { default as render } from './render';
+export { default as slot } from './slot';
 export { default as svg } from './svg';
-export type { ArraySlot } from './slot/array';
-export type { Attributes, Element, Renderable } from './types';
+export { ArraySlot } from './slot/array';
+export { EffectSlot } from './slot/effect';
+export type { Attributes, Element, Renderable } from './types';
+export * from './utilities';

package/src/render.ts

@@ -1,14 +1,13 @@
-import { Renderable } from './types';
-import { nodeValue } from './utilities/node';
-import marker from './utilities/marker';
+import { Effect, Element, Renderable } from './types';
+import { marker } from './utilities';
 import slot from './slot';
 
 
-export default <T>(parent: HTMLElement, renderable: Renderable<T>) => {
-    let anchor = marker.cloneNode();
+export default <T>(parent: HTMLElement, renderable: Exclude<Renderable<T>, Effect<T>>) => {
+    let anchor = marker.cloneNode() as unknown as Element;
 
-    nodeValue.call(parent, '');
+    parent.nodeValue = '';
     parent.append(anchor);
 
     slot(anchor, renderable);
-};
+};

package/src/runtime.ts

@@ -0,0 +1,8 @@
+import { CLEANUP, STORE } from './constants';
+
+
+// Pre-allocate on Node prototype to optimize property access
+if (typeof Node !== 'undefined') {
+    (Node.prototype as any)[CLEANUP] = null;
+    (Node.prototype as any)[STORE] = null;
+}