@esportsplus/template 0.26.6 → 0.28.1

package/build/slot/effect.js

@@ -1,7 +1,7 @@
 import { effect } from '@esportsplus/reactivity';
 import { firstChild, lastChild, nodeValue } from '../utilities/node.js';
-import { raf } from '../utilities/queue.js';
 import { remove } from './cleanup.js';
+import raf from '../utilities/raf.js';
 import text from '../utilities/text.js';
 import render from './render.js';
 function read(value) {
@@ -17,17 +17,20 @@ class EffectSlot {
     anchor;
     disposer;
     group = null;
+    scheduled = false;
     textnode = null;
     constructor(anchor, fn) {
-        let dispose = fn.length ? () => this.dispose() : undefined;
+        let dispose = fn.length ? () => this.dispose() : undefined, value;
         this.anchor = anchor;
         this.disposer = effect(() => {
-            let value = read(fn(dispose));
+            value = read(fn(dispose));
             if (!this.disposer) {
                 this.update(value);
             }
-            else {
-                raf.add(() => {
+            else if (!this.scheduled) {
+                this.scheduled = true;
+                raf(() => {
+                    this.scheduled = false;
                     this.update(value);
                 });
             }
@@ -53,14 +56,17 @@ class EffectSlot {
             this.group = null;
         }
         if (typeof value !== 'object') {
+            if (typeof value !== 'string') {
+                value = String(value);
+            }
             if (textnode) {
-                nodeValue.call(textnode, String(value));
+                nodeValue.call(textnode, value);
                 if (!textnode.isConnected) {
                     anchor.after(textnode);
                 }
             }
             else {
-                anchor.after(this.textnode = text(String(value)));
+                anchor.after(this.textnode = text(value));
             }
         }
         else {
@@ -78,6 +84,4 @@ class EffectSlot {
         }
     }
 }
-export default (anchor, fn) => {
-    new EffectSlot(anchor, fn);
-};
+export { EffectSlot };

package/build/slot/index.js

@@ -1,8 +1,8 @@
-import effect from './effect.js';
+import { EffectSlot } from './effect.js';
 import render from './render.js';
 export default (anchor, value) => {
     if (typeof value === 'function') {
-        effect(anchor, value);
+        new EffectSlot(anchor, value);
     }
     else {
         anchor.after(render(anchor, value));

package/build/slot/render.js

@@ -1,9 +1,8 @@
 import { isArray } from '@esportsplus/utilities';
-import { EMPTY_FRAGMENT, RENDERABLE } from '../constants.js';
+import { ARRAY_SLOT, EMPTY_FRAGMENT } from '../constants.js';
 import { cloneNode, lastChild } from '../utilities/node.js';
 import { append } from '../utilities/fragment.js';
 import text from '../utilities/text.js';
-import array from './array.js';
 export default function render(anchor, value) {
     if (value == null || value === false || value === '') {
         return EMPTY_FRAGMENT;
@@ -11,15 +10,24 @@ export default function render(anchor, value) {
     if (typeof value !== 'object') {
         return text(value);
     }
-    if (RENDERABLE in value) {
-        return array(anchor, value);
+    if (value[ARRAY_SLOT] === true) {
+        return value.fragment;
     }
-    if ('nodeType' in value) {
+    if (value.nodeType !== undefined) {
         return value;
     }
+    let n = value.length;
+    if (typeof n === 'number') {
+        if (n === 0) {
+            return EMPTY_FRAGMENT;
+        }
+        else if (n === 1) {
+            return render(anchor, value[0]);
+        }
+    }
     if (isArray(value)) {
         let fragment = cloneNode.call(EMPTY_FRAGMENT);
-        for (let i = 0, n = value.length; i < n; i++) {
+        for (let i = 0; i < n; i++) {
             append.call(fragment, render(anchor, value[i]));
             anchor = lastChild.call(fragment);
         }
@@ -27,7 +35,7 @@ export default function render(anchor, value) {
     }
     if (value instanceof NodeList) {
         let fragment = cloneNode.call(EMPTY_FRAGMENT);
-        for (let i = 0, n = value.length; i < n; i++) {
+        for (let i = 0; i < n; i++) {
             append.call(fragment, value[i]);
         }
         return fragment;

package/build/types.d.ts

@@ -1,9 +1,7 @@
-import { ReactiveArray } from '@esportsplus/reactivity';
-import { RENDERABLE, RENDERABLE_HTML_REACTIVE_ARRAY } from './constants.js';
 import { firstChild } from './utilities/node.js';
+import { ArraySlot } from './slot/array.js';
 import attributes from './attributes.js';
 import slot from './slot/index.js';
-import html from './html/index.js';
 type Attribute = Effect<Primitive | Primitive[]> | ((...args: any[]) => void) | Primitive;
 type Attributes<T extends HTMLElement = Element> = {
     class?: Attribute | Attribute[];
@@ -20,12 +18,7 @@ type Attributes<T extends HTMLElement = Element> = {
 type Effect<T> = () => T extends [] ? Renderable<T>[] : Renderable<T>;
 type Element = HTMLElement & Attributes<any>;
 type Primitive = bigint | boolean | null | number | string | undefined;
-type Renderable<T> = DocumentFragment | Effect<T> | Node | NodeList | Primitive | RenderableReactive<T> | Renderable<T>[];
-type RenderableReactive<T> = Readonly<{
-    [RENDERABLE]: typeof RENDERABLE_HTML_REACTIVE_ARRAY;
-    array: ReactiveArray<T>;
-    template: (value: T, i: number) => ReturnType<typeof html>;
-}>;
+type Renderable<T> = DocumentFragment | ArraySlot<T> | Effect<T> | Node | NodeList | Primitive | Renderable<T>[];
 type SlotGroup = {
     head: Element;
     tail: Element;
@@ -40,4 +33,4 @@ type Template = {
         path: typeof firstChild[];
     }[] | null;
 };
-export type { Attribute, Attributes, Effect, Element, Renderable, RenderableReactive, SlotGroup, Template };
+export type { Attribute, Attributes, Effect, Element, Renderable, SlotGroup, Template };

package/build/types.js

@@ -1 +1 @@
-import { RENDERABLE } from './constants.js';
+export {};

package/build/utilities/marker.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/build/utilities/marker.js

@@ -0,0 +1,4 @@
+import { SLOT_HTML } from '../constants.js';
+import { fragment } from './fragment.js';
+import { firstChild } from './node.js';
+export default firstChild.call(fragment(SLOT_HTML));

package/build/utilities/raf.d.ts

@@ -0,0 +1,2 @@
+declare const _default: typeof requestAnimationFrame;
+export default _default;

package/build/utilities/raf.js

@@ -0,0 +1 @@
+export default globalThis?.requestAnimationFrame;

package/package.json

@@ -1,9 +1,8 @@
 {
   "author": "ICJR",
   "dependencies": {
-    "@esportsplus/queue": "^0.1.0",
-    "@esportsplus/reactivity": "^0.18.1",
-    "@esportsplus/tasks": "^0.4.0",
+    "@esportsplus/queue": "^0.2.0",
+    "@esportsplus/reactivity": "^0.22.0",
     "@esportsplus/utilities": "^0.25.0"
   },
   "devDependencies": {
@@ -12,9 +11,13 @@
   "main": "./build/index.js",
   "name": "@esportsplus/template",
   "private": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/esportsplus/template"
+  },
   "type": "module",
   "types": "./build/index.d.ts",
-  "version": "0.26.6",
+  "version": "0.28.1",
   "scripts": {
     "build": "tsc && tsc-alias",
     "-": "-"

package/src/attributes.ts

@@ -3,8 +3,8 @@ import { isArray, isObject } from '@esportsplus/utilities';
 import { STATE_HYDRATING, STATE_NONE, STATE_WAITING } from './constants';
 import { Attributes, Element } from './types';
 import { className, removeAttribute, setAttribute } from './utilities/element';
-import { raf } from './utilities/queue';
 import q from '@esportsplus/queue';
+import raf from './utilities/raf';
 import event from './event';
 
 
@@ -37,7 +37,7 @@ function apply(element: Element, name: string, value: unknown) {
     else if (name === 'class') {
         className.call(element, value as string);
     }
-    else if (name === 'style' || name.startsWith('data-') || 'ownerSVGElement' in element) {
+    else if (name === 'style' || (name[0] === 'd' && name.startsWith('data-')) || element['ownerSVGElement']) {
         setAttribute.call(element, name, value as string);
     }
     else {
@@ -79,7 +79,7 @@ function list(
         }
     }
     else {
-        let hot: Attributes = {};
+        let hot: Record<PropertyKey, true> = {};
 
         if (value && typeof value === 'string') {
             let part: string,
@@ -93,15 +93,15 @@ function list(
                 }
 
                 dynamic.add(part);
-                hot[part] = null;
+                hot[part] = true;
             }
         }
 
-        let cold = store[id] as Attributes | undefined;
+        let cold = store[id] as Record<PropertyKey, true> | undefined;
 
         if (cold !== undefined) {
             for (let part in cold) {
-                if (part in hot) {
+                if (hot[part] === true) {
                     continue;
                 }
 
@@ -170,7 +170,7 @@ function schedule(ctx: Context | null, element: Element, name: string, state: St
     }
 
     scheduled = true;
-    raf.add(task);
+    raf(task);
 }
 
 function task() {
@@ -189,7 +189,7 @@ function task() {
     }
 
     if (queue.length) {
-        raf.add(task);
+        raf(task);
     }
     else {
         scheduled = false;
@@ -202,7 +202,7 @@ const set = (element: Element, name: string, value: unknown) => {
         state: State = STATE_HYDRATING;
 
     if (typeof value === 'function') {
-        if (name.startsWith('on')) {
+        if (name[0] === 'o' && name[1] === 'n') {
             return event(element, name as `on${string}`, value as Function);
         }
 

package/src/constants.ts

@@ -1,7 +1,10 @@
 import { fragment } from './utilities/fragment';
 
 
-const CLEANUP = Symbol();
+const ARRAY_SLOT = Symbol('template.array.slot');
+
+
+const CLEANUP = Symbol('template.cleanup');
 
 
 const EMPTY_FRAGMENT = fragment('');
@@ -49,11 +52,6 @@ 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 = '{{$}}';
@@ -67,10 +65,10 @@ const STATE_WAITING = 2;
 
 
 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,
-    RENDERABLE, RENDERABLE_HTML_REACTIVE_ARRAY,
-    SLOT_HTML, SLOT_MARKER, STATE_HYDRATING, STATE_NONE, STATE_WAITING
+    SLOT_HTML, STATE_HYDRATING, SLOT_MARKER, STATE_NONE, STATE_WAITING
 };

package/src/event/index.ts

@@ -16,9 +16,11 @@ let capture = new Set<`on${string}`>(['onblur', 'onfocus', 'onscroll']),
     >(),
     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',
+        'ontouchcancel', 'ontouchend', 'ontouchleave', 'ontouchmove', 'ontouchstart', 'ontransitionend',
         'onwheel'
     ]);
 
@@ -62,10 +64,13 @@ function register(element: Element, event: `on${string}`) {
     let key = keys[event] = Symbol();
 
     addEventListener.call(window.document, event.slice(2), (e) => {
-        let node = e.target as Element | null;
+        let fn,
+            node = e.target as Element | null;
 
         while (node) {
-            if (key in node) {
+            fn = node[key];
+
+            if (typeof fn === 'function') {
                 defineProperty(e, 'currentTarget', {
                     configurable: true,
                     get() {
@@ -73,7 +78,7 @@ function register(element: Element, event: `on${string}`) {
                     }
                 });
 
-                return (node[key] as Function).call(node, e);
+                return fn.call(node, e);
             }
 
             node = parentElement.call(node);

package/src/event/ontick.ts

@@ -1,5 +1,5 @@
 import { STATE_HYDRATING, STATE_NONE } from '~/constants';
-import { raf } from '~/utilities/queue';
+import raf from '~/utilities/raf';
 
 
 let tasks = Object.assign(new Set<VoidFunction>(), { running: false });
@@ -15,7 +15,7 @@ function tick() {
         task();
     }
 
-    raf.add(tick);
+    raf(tick);
 }
 
 
@@ -24,7 +24,7 @@ const add = (task: VoidFunction) => {
 
     if (!tasks.running) {
         tasks.running = true;
-        raf.add(tick);
+        raf(tick);
     }
 };
 

package/src/html/index.ts

@@ -1,13 +1,13 @@
 import { ReactiveArray } from '@esportsplus/reactivity';
-import { RENDERABLE, RENDERABLE_HTML_REACTIVE_ARRAY } from '~/constants';
-import { Attribute, Attributes, Renderable, RenderableReactive } from '~/types';
+import { Attribute, Attributes, Renderable } from '~/types';
 import { cloneNode } from '~/utilities/node';
+import { ArraySlot } from '~/slot/array';
 import parser from './parser';
 import attributes from '~/attributes';
 import slot from '~/slot';
 
 
-type Values<T> = Attribute | Attributes<any> | Renderable<T>;
+type Values<T> = Attribute | Attributes<any> | ArraySlot<T> | Renderable<T>;
 
 
 const html = <T>(literals: TemplateStringsArray, ...values: (Values<T> | Values<T>[])[]) => {
@@ -40,12 +40,8 @@ const html = <T>(literals: TemplateStringsArray, ...values: (Values<T> | Values<
     return clone;
 };
 
-html.reactive = <T>(array: ReactiveArray<T>, template: RenderableReactive<T>['template']): RenderableReactive<T> => {
-    return {
-        [RENDERABLE]: RENDERABLE_HTML_REACTIVE_ARRAY,
-        array,
-        template
-    };
+html.reactive = <T>(arr: ReactiveArray<T>, template: (value: T) => ReturnType<typeof html>) => {
+    return new ArraySlot(arr, template);
 };
 
 

package/src/html/parser.ts

@@ -42,9 +42,12 @@ function build(literals: TemplateStringsArray) {
         let attribute = '',
             buffer = '',
             char = '',
+            match: RegExpExecArray | null,
             quote = '';
 
-        for (let match of html.matchAll(REGEX_SLOT_ATTRIBUTES)) {
+        REGEX_SLOT_ATTRIBUTES.lastIndex = 0;
+
+        while (match = REGEX_SLOT_ATTRIBUTES.exec(html)) {
             let found = match[1],
                 metadata = attributes[found];
 
@@ -105,7 +108,12 @@ function build(literals: TemplateStringsArray) {
         }
     }
 
-    for (let match of html.matchAll(REGEX_SLOT_NODES)) {
+    REGEX_SLOT_NODES.lastIndex = 0;
+
+    {
+        let match: RegExpExecArray | null;
+
+        while (match = REGEX_SLOT_NODES.exec(html)) {
         let parent = levels[level],
             type = match[1] === undefined ? NODE_SLOT : (NODE_WHITELIST[match[1].toLowerCase()] || NODE_ELEMENT);
 
@@ -171,7 +179,8 @@ function build(literals: TemplateStringsArray) {
             parent.children++;
         }
 
-        index = (match.index || 0) + match[0].length;
+            index = (match.index || 0) + match[0].length;
+        }
     }
 
     if (events) {
@@ -182,12 +191,17 @@ function build(literals: TemplateStringsArray) {
 }
 
 function methods(children: number, copy: (typeof firstChild)[], first: (typeof firstChild), next: (typeof firstChild)) {
-    let methods = copy.slice();
+    let length = copy.length,
+        methods: (typeof firstChild)[] = new Array(length + 1 + children);
+
+    for (let i = 0, n = length; i < n; i++) {
+        methods[i] = copy[i];
+    }
 
-    methods.push(first);
+    methods[length] = first;
 
-    for (let start = 0; start < children; start++) {
-        methods.push(next);
+    for (let i = 0, n = children; i < n; i++) {
+        methods[length + 1 + i] = next;
     }
 
     return methods;

package/src/index.ts

@@ -1,4 +1,5 @@
 export { default as html } from './html';
 export { default as render } from './render';
 export { default as svg } from './svg';
+export type { ArraySlot } from './slot/array';
 export type { Attributes, Element, Renderable } from './types';

package/src/render.ts

@@ -1,17 +1,14 @@
-import { SLOT_HTML } from './constants';
 import { Renderable } from './types';
-import { fragment } from './utilities/fragment';
-import { firstChild, nodeValue } from './utilities/node';
+import { nodeValue } from './utilities/node';
+import marker from './utilities/marker';
 import slot from './slot';
 
 
-let anchor,
-    marker = firstChild.call( fragment(SLOT_HTML) );
-
-
 export default <T>(parent: HTMLElement, renderable: Renderable<T>) => {
+    let anchor = marker.cloneNode();
+
     nodeValue.call(parent, '');
-    parent.append(anchor = marker.cloneNode());
+    parent.append(anchor);
 
     slot(anchor, renderable);
 };