@esportsplus/template 0.15.16 → 0.15.18

package/build/utilities.d.ts

@@ -3,6 +3,7 @@ declare const addEventListener: {
     <K extends keyof ElementEventMap>(type: K, listener: (this: Element, ev: ElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
     (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
 };
+declare const append: (...nodes: (Node | string)[]) => void;
 declare const removeEventListener: {
     <K extends keyof ElementEventMap>(type: K, listener: (this: Element, ev: ElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
     (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
@@ -24,4 +25,4 @@ declare const fragment: (html: string) => DocumentFragment;
 declare const microtask: import("@esportsplus/tasks/build/factory").Scheduler;
 declare const raf: import("@esportsplus/tasks/build/factory").Scheduler;
 declare const text: (value: string) => E;
-export { addEventListener, className, cloneNode, firstChild, firstElementChild, fragment, innerHTML, microtask, nextElementSibling, nextSibling, nodeValue, parentElement, parentNode, prepend, raf, removeAttribute, removeEventListener, setAttribute, text };
+export { addEventListener, append, className, cloneNode, firstChild, firstElementChild, fragment, innerHTML, microtask, nextElementSibling, nextSibling, nodeValue, parentElement, parentNode, prepend, raf, removeAttribute, removeEventListener, setAttribute, text };

package/build/utilities.js

@@ -2,6 +2,7 @@ import { micro as m, raf as r } from '@esportsplus/tasks';
 let prototype, template = document.createElement('template'), t = document.createTextNode('');
 prototype = Element.prototype;
 const addEventListener = prototype.addEventListener;
+const append = prototype.append;
 const removeEventListener = prototype.removeEventListener;
 const className = Object.getOwnPropertyDescriptor(prototype, 'className').set;
 const innerHTML = Object.getOwnPropertyDescriptor(prototype, 'innerHTML').set;
@@ -32,4 +33,4 @@ const text = (value) => {
     }
     return element;
 };
-export { addEventListener, className, cloneNode, firstChild, firstElementChild, fragment, innerHTML, microtask, nextElementSibling, nextSibling, nodeValue, parentElement, parentNode, prepend, raf, removeAttribute, removeEventListener, setAttribute, text };
+export { addEventListener, append, className, cloneNode, firstChild, firstElementChild, fragment, innerHTML, microtask, nextElementSibling, nextSibling, nodeValue, parentElement, parentNode, prepend, raf, removeAttribute, removeEventListener, setAttribute, text };

package/package.json

@@ -2,9 +2,9 @@
   "author": "ICJR",
   "dependencies": {
     "@esportsplus/queue": "^0.1.0",
-    "@esportsplus/reactivity": "^0.12.3",
+    "@esportsplus/reactivity": "^0.12.4",
     "@esportsplus/tasks": "^0.2.1",
-    "@esportsplus/utilities": "^0.21.1"
+    "@esportsplus/utilities": "^0.22.1"
   },
   "devDependencies": {
     "@esportsplus/typescript": "^0.9.2"
@@ -14,7 +14,7 @@
   "private": false,
   "type": "module",
   "types": "./build/index.d.ts",
-  "version": "0.15.16",
+  "version": "0.15.18",
   "scripts": {
     "build": "tsc && tsc-alias",
     "-": "-"

package/src/attributes.ts

@@ -3,15 +3,42 @@ import { isArray, isFunction, isObject, isString } from '@esportsplus/utilities'
 import { ondisconnect } from './slot';
 import { Attributes, Element } from './types';
 import { className, raf, removeAttribute, setAttribute } from './utilities';
+import q from '@esportsplus/queue';
 import event from './event';
 
 
-let attributes: Record<string, unknown> = {},
-    delimiters: Record<string, string> = {
+const EFFECT_KEY = Symbol();
+
+const HYDRATE_KEY = Symbol();
+
+const STORE_KEY = Symbol();
+
+const UPDATES_KEY = Symbol();
+
+
+const STATE_HYDRATING = 0;
+
+const STATE_NONE = 1;
+
+const STATE_WAITING = 2;
+
+
+type Context = {
+    element: Element;
+    store: Record<PropertyKey, unknown>
+    updates: Record<PropertyKey, unknown>;
+    updating: boolean;
+};
+
+type State = typeof STATE_HYDRATING | typeof STATE_NONE | typeof STATE_WAITING;
+
+
+let delimiters: Record<string, string> = {
         class: ' ',
         style: ';'
     },
-    key = Symbol();
+    queue = q<Context>(64),
+    scheduled = false;
 
 
 function attribute(element: Element, name: string, value: unknown) {
@@ -29,73 +56,115 @@ function attribute(element: Element, name: string, value: unknown) {
     }
 }
 
-function set(element: Element, value: unknown, name: string, wait = false) {
+function schedule() {
+    if (scheduled) {
+        return;
+    }
+
+    scheduled = true;
+    raf.add(task);
+}
+
+function set(context: Context, name: string, value: unknown, state: State) {
     if (isArray(value)) {
         for (let i = 0, n = value.length; i < n; i++) {
-            set(element, value[i], name, wait);
+            set(context, name, value[i], state);
         }
     }
     else if (isFunction(value)) {
         if (name.startsWith('on')) {
-            event(element, name as `on${string}`, value);
+            event(context.element, name as `on${string}`, value);
         }
         else {
-            let id = ('e' + store(element)[key]++);
+            context.store[EFFECT_KEY] ??= 0;
+
+            let id = (context.store[EFFECT_KEY] as number)++;
 
             ondisconnect(
-                element,
+                context.element,
                 effect(() => {
-                    let v = (value as Function)(element);
+                    let v = (value as Function)(context.element);
 
                     if (isArray(v)) {
                         let last = v.length - 1;
 
                         for (let i = 0, n = v.length; i < n; i++) {
-                            update(element, id, name, v[i], wait || i !== last);
+                            update(
+                                context,
+                                id,
+                                name,
+                                v[i],
+                                state === STATE_HYDRATING
+                                    ? state
+                                    : i !== last ? STATE_WAITING : state
+                            );
                         }
                     }
                     else {
-                        update(element, id, name, v, wait);
+                        update(context, id, name, v, state);
                     }
                 })
             );
 
-            wait = false;
+            state = STATE_NONE;
         }
     }
     else {
-        update(element, null, name, value, wait);
+        update(context, null, name, value, state);
     }
 }
 
-function store(element: Element) {
-    return (
-        element[key] || (element[key] = { [key]: 0 })
-    ) as Attributes & { [key]: number };
+function task() {
+    let context,
+        n = queue.length;
+
+    while ((context = queue.next()) && n--) {
+        let { element, updates } = context;
+
+        for (let name in updates) {
+            attribute(element, name, updates[name]);
+            delete updates[name];
+        }
+
+        context.updating = false;
+    }
+
+    if (queue.length) {
+        raf.add(task);
+    }
+    else {
+        scheduled = false;
+    }
 }
 
-function update(element: Element, id: null | string, name: string, value: unknown, wait = false) {
+function update(
+    context: Context,
+    id: null | number,
+    name: string,
+    value: unknown,
+    state: State
+) {
     if (value === false || value == null) {
         value = '';
     }
 
-    let data = store(element);
+    let store = context.store;
 
     if (name in delimiters) {
         let cache = name + '.static',
             delimiter = delimiters[name],
-            dynamic = data[name] as Attributes | undefined;
+            dynamic = store[name] as Attributes | undefined;
 
         if (dynamic === undefined) {
-            let value = (element.getAttribute(name) || '').trim();
+            let value = (context.element.getAttribute(name) || '').trim();
 
-            data[cache] = value.endsWith(delimiter) ? value.slice(0, -1) : value;
-            data[name] = dynamic = {};
+            store[cache] = value;
+            store[name] = dynamic = {};
         }
 
         if (id === null) {
             if (value && isString(value)) {
-                data[cache] += (data[cache] ? delimiter : '') + value;
+                store[cache] += (store[cache] ? delimiter : '') + value;
             }
         }
         else {
@@ -117,7 +186,7 @@ function update(element: Element, id: null | string, name: string, value: unknow
                 }
             }
 
-            let cold = data[id] as Attributes | undefined;
+            let cold = store[id] as Attributes | undefined;
 
             if (cold !== undefined) {
                 for (let part in cold) {
@@ -129,61 +198,80 @@ function update(element: Element, id: null | string, name: string, value: unknow
                 }
             }
 
-            data[id] = hot;
+            store[id] = hot;
         }
 
-        value = data[cache];
+        value = store[cache];
 
         for (let key in dynamic) {
             value += (value ? delimiter : '') + key;
         }
     }
-    else if (isString(id)) {
-        if (data[name] === value) {
+    else if (id !== null) {
+        if (store[name] === value) {
             return;
         }
 
-        data[name] = value as string;
+        store[name] = value as string;
     }
 
-    if (wait) {
-        if (id === null) {
-            attributes[name] = value;
-        }
+    if (state === STATE_HYDRATING) {
+        ((context.element[HYDRATE_KEY] ??= {}) as Record<PropertyKey, unknown>)[name] = value;
     }
     else {
-        raf.add(() => {
-            attribute(element, name, value);
-        });
+        context.updates[name] = value;
+
+        if (state === STATE_NONE && !context.updating) {
+            context.updating = true;
+            queue.add(context);
+        }
+
+        if (!scheduled) {
+            schedule();
+        }
     }
 }
 
 
 const apply = (element: Element) => {
+    let attributes = element[HYDRATE_KEY] as Record<PropertyKey, unknown> | undefined;
+
+    if (!attributes) {
+        return;
+    }
+
     for (let key in attributes) {
         attribute(element, key, attributes[key]);
     }
 
-    attributes = {};
+    delete element[HYDRATE_KEY];
 };
 
-const spread = function (element: Element, attributes: Attributes | Attributes[]) {
-    if (isObject(attributes)) {
-        for (let name in attributes) {
-            set(element, attributes[name], name, true);
-        }
-    }
-    else if (isArray(attributes)) {
-        for (let i = 0, n = attributes.length; i < n; i++) {
-            let attrs = attributes[i];
+const spread = function (element: Element, value: Attributes | Attributes[]) {
+    let cache = (element[STORE_KEY] ??= { [UPDATES_KEY]: {} }) as Record<PropertyKey, unknown>,
+        context = {
+            element,
+            store: cache,
+            updates: cache[UPDATES_KEY] as Record<PropertyKey, unknown>,
+            updating: false
+        };
 
-            for (let name in attrs) {
-                set(element, attrs[name], name, true);
+    if (isArray(value)) {
+        for (let i = 0, n = value.length; i < n; i++) {
+            let v = value[i];
+
+            for (let name in v) {
+                set(context, name, v[name], STATE_HYDRATING);
             }
         }
     }
+    else if (isObject(value)) {
+        for (let name in value) {
+            set(context, name, value[name], STATE_HYDRATING);
+        }
+    }
 };
 
 
 export default { apply, spread };
-export { apply, spread }
+export { apply, spread };

package/src/constants.ts

@@ -43,8 +43,6 @@ const RENDERABLE_REACTIVE = Symbol();
 const RENDERABLE_TEMPLATE = Symbol();
 
 
-const SLOT_CLEANUP = Symbol();
-
 const SLOT_HTML = '<!--$-->';
 
 const SLOT_MARKER = '{{$}}';
@@ -53,18 +51,8 @@ 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_CLEANUP,
-    SLOT_HTML,
-    SLOT_MARKER,
-    SLOT_MARKER_LENGTH
+    NODE_CLOSING, NODE_ELEMENT, NODE_SLOT, NODE_VOID, NODE_WHITELIST,
+    REGEX_EMPTY_TEXT_NODES, REGEX_SLOT_NODES,
+    RENDERABLE, RENDERABLE_REACTIVE, RENDERABLE_TEMPLATE,
+    SLOT_HTML, SLOT_MARKER, SLOT_MARKER_LENGTH
 };

package/src/event.ts

@@ -2,7 +2,7 @@ import { root } from '@esportsplus/reactivity';
 import { defineProperty } from '@esportsplus/utilities';
 import { ondisconnect } from './slot';
 import { Element } from './types';
-import { addEventListener, parentElement } from './utilities';
+import { addEventListener, parentElement, raf } from './utilities';
 
 
 let capture = new Set<`on${string}`>(['onblur', 'onfocus', 'onscroll']),
@@ -26,7 +26,8 @@ let capture = new Set<`on${string}`>(['onblur', 'onfocus', 'onscroll']),
 
 export default (element: Element, event: `on${string}`, listener: Function): void => {
     if (event === 'onconnect') {
-        let interval = setInterval(() => {
+        let retry = 60,
+            task = () => {
                 retry--;
 
                 if (element.isConnected) {
@@ -34,11 +35,12 @@ export default (element: Element, event: `on${string}`, listener: Function): voi
                     root(() => listener(element));
                 }
 
-                if (!retry) {
-                    clearInterval(interval);
+                if (retry) {
+                    raf.add(task);
                 }
-            }, 1000 / 60),
-            retry = 60;
+            };
+
+        raf.add(task);
 
         return;
     }

package/src/html/hydrate.ts

@@ -1,5 +1,5 @@
-import { root, ReactiveArray } from '@esportsplus/reactivity';
-import { Element, Elements, Renderable, RenderableReactive, RenderableTemplate, Template } from '~/types';
+import { root } from '@esportsplus/reactivity';
+import { Element, Elements, HydrateResult, Renderable, RenderableReactive, RenderableTemplate, Template } from '~/types';
 import { Slot } from '~/slot';
 import { cloneNode, firstChild, nextSibling } from '~/utilities';
 import { apply } from '~/attributes';
@@ -10,26 +10,36 @@ function reactive<T>(renderable: RenderableReactive<T>, slot: Slot) {
     let array = renderable.values,
         factory = renderable.template,
         refresh = () => {
-            slot.length = 0;
-            reactive(renderable, slot);
+            slot.render( root(() => array.map(template)) );
         },
-        render = (i: number, n?: number) => {
-            return root(() => template(array, factory, i, n));
-        },
-        renderables = array.map(factory);
-
-    array.on('pop', () => slot.pop());
-    array.on('push', ({ items }) => slot.push(...render(array.length - items.length)));
+        template = function(data, i) {
+            let renderable = factory.call(this, data, i);
+
+            return hydrate<T>(renderable, cache.get(renderable));
+        } as (this: typeof array, ...args: Parameters<Parameters<typeof array['map']>[0]>) => HydrateResult;
+
+    array.on('pop', () => {
+        slot.pop();
+    });
+    array.on('push', ({ items }) => {
+        slot.push( ...root(() => array.map(template, array.length - items.length)) );
+    });
     array.on('reverse', refresh);
-    array.on('shift', () => slot.shift());
+    array.on('shift', () => {
+        slot.shift();
+    });
     array.on('sort', refresh);
-    array.on('splice', ({ deleteCount: d, items: i, start: s }) => slot.splice(s, d, ...render(s, i.length)));
-    array.on('unshift', ({ items }) => slot.unshift(...render(0, items.length)));
-
-    return template(array, factory, 0, renderables.length);
+    array.on('splice', ({ deleteCount: d, items: i, start: s }) => {
+        slot.splice(s, d, ...root(() => array.map(template, s, i.length)));
+    });
+    array.on('unshift', ({ items }) => {
+        slot.unshift( ...root(() => array.map(template, 0, items.length)) );
+    });
+
+    return array.map(template);
 }
 
-function render<T>(renderable: Renderable<T>, template: Template) {
+function hydrate<T>(renderable: Renderable<T>, template: Template): HydrateResult {
     let elements: Elements = [],
         fragment = cloneNode.call(template.fragment, true),
         slots = template.slots;
@@ -42,8 +52,7 @@ function render<T>(renderable: Renderable<T>, template: Template) {
         for (let i = slots.length - 1; i >= 0; i--) {
             let { fn, path, slot } = slots[i];
 
-            if (path === previous) {}
-            else {
+            if (path !== previous) {
                 apply(node);
 
                 node = fragment;
@@ -55,7 +64,7 @@ function render<T>(renderable: Renderable<T>, template: Template) {
             }
 
             // @ts-ignore
-            fn(node, values[slot], name);
+            fn(node, values[slot]);
         }
 
         apply(node);
@@ -65,22 +74,7 @@ function render<T>(renderable: Renderable<T>, template: Template) {
         elements.push(element);
     }
 
-    return elements;
-}
-
-function template<T>(array: ReactiveArray<T>, template: RenderableReactive<T>['template'], i: number, n?: number) {
-    let groups: Elements[] = [],
-        renderables = array.map< RenderableTemplate<T> >(template, i, n);
-
-    for (let i = 0, n = renderables.length; i < n; i++) {
-        let renderable = renderables[i];
-
-        groups.push(
-            render(renderable, cache.get(renderable))
-        );
-    }
-
-    return groups;
+    return { elements, fragment };
 }
 
 
@@ -89,6 +83,6 @@ export default {
         return reactive(renderable, slot);
     },
     static: <T>(renderable: RenderableTemplate<T>) => {
-        return render(renderable, renderable.template || (renderable.template = cache.get(renderable)));
+        return hydrate(renderable, renderable.template || (renderable.template = cache.get(renderable)));
     }
 };