@esportsplus/template 0.15.18 → 0.15.20

package/build/attributes.d.ts

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

package/build/attributes.js

@@ -5,7 +5,6 @@ import { className, raf, removeAttribute, setAttribute } from './utilities.js';
 import q from '@esportsplus/queue';
 import event from './event.js';
 const EFFECT_KEY = Symbol();
-const HYDRATE_KEY = Symbol();
 const STORE_KEY = Symbol();
 const UPDATES_KEY = Symbol();
 const STATE_HYDRATING = 0;
@@ -140,7 +139,7 @@ function update(context, id, name, value, state) {
         store[name] = value;
     }
     if (state === STATE_HYDRATING) {
-        (context.element[HYDRATE_KEY] ??= {})[name] = value;
+        attribute(context.element, name, value);
     }
     else {
         context.updates[name] = value;
@@ -153,16 +152,6 @@ function update(context, id, name, value, state) {
         }
     }
 }
-const apply = (element) => {
-    let attributes = element[HYDRATE_KEY];
-    if (!attributes) {
-        return;
-    }
-    for (let key in attributes) {
-        attribute(element, key, attributes[key]);
-    }
-    delete element[HYDRATE_KEY];
-};
 const spread = function (element, value) {
     let cache = (element[STORE_KEY] ??= { [UPDATES_KEY]: {} }), context = {
         element,
@@ -184,5 +173,5 @@ const spread = function (element, value) {
         }
     }
 };
-export default { apply, spread };
-export { apply, spread };
+export default { spread };
+export { spread };

package/build/html/cache.js

@@ -26,6 +26,7 @@ function build(literals, values) {
                 while (i !== -1) {
                     slots.push({
                         fn: spread,
+                        parent: parent.path,
                         path,
                         slot
                     });
@@ -48,7 +49,8 @@ function build(literals, values) {
             buffer += parsed[slot] + SLOT_HTML;
             slots.push({
                 fn: s,
-                path: methods(parent.children, parent.path, firstChild, nextSibling),
+                parent: parent.path,
+                path: methods(parent.children, [], firstChild, nextSibling),
                 slot: slot++
             });
         }

package/build/html/hydrate.js

@@ -1,6 +1,5 @@
 import { root } from '@esportsplus/reactivity';
 import { cloneNode, firstChild, nextSibling } from '../utilities.js';
-import { apply } from '../attributes.js';
 import cache from './cache.js';
 function reactive(renderable, slot) {
     let array = renderable.values, factory = renderable.template, refresh = () => {
@@ -35,7 +34,6 @@ function hydrate(renderable, template) {
         for (let i = slots.length - 1; i >= 0; i--) {
             let { fn, path, slot } = slots[i];
             if (path !== previous) {
-                apply(node);
                 node = fragment;
                 previous = path;
                 for (let o = 0, j = path.length; o < j; o++) {
@@ -44,7 +42,6 @@ function hydrate(renderable, template) {
             }
             fn(node, values[slot]);
         }
-        apply(node);
     }
     for (let element = firstChild.call(fragment); element; element = nextSibling.call(element)) {
         elements.push(element);

package/build/slot.d.ts

@@ -10,7 +10,7 @@ declare class Slot {
     clear(): void;
     pop(): Elements[] | undefined;
     push(...groups: HydrateResult[]): number;
-    render(input: unknown): this;
+    render(input: unknown, state?: number): this;
     shift(): Elements[] | undefined;
     splice(start: number, stop?: number, ...groups: HydrateResult[]): Elements[];
     unshift(...groups: HydrateResult[]): number;

package/build/slot.js

@@ -5,27 +5,24 @@ import { hydrate } from './html/index.js';
 import { append, cloneNode, firstChild, fragment, microtask, nextSibling, nodeValue, raf, text } from './utilities.js';
 import queue from '@esportsplus/queue';
 const CLEANUP_KEY = Symbol();
+const CONNECTED = 0;
+const HYDRATING = 1;
 let cleanup = queue(64), scheduled = false, template = fragment('');
 function after(anchor, groups) {
     let n = groups.length;
     if (n === 0) {
         return [];
     }
-    let elements = [], fragment = groups[0].fragment || cloneNode.call(template);
-    if (n === 1) {
-        elements.push(groups[0].elements);
-    }
-    else {
-        for (let i = 1; i < n; i++) {
-            let { elements: e, fragment: f } = groups[i];
-            append.call(fragment, f);
-            elements.push(e);
-        }
+    let fragment = cloneNode.call(template), elements = new Array(n);
+    for (let i = 0; i < n; i++) {
+        let { elements: e, fragment: f } = groups[i];
+        append.call(fragment, f);
+        elements[i] = e;
     }
     anchor.after(fragment);
     return elements;
 }
-function remove(...groups) {
+function remove(groups) {
     for (let i = 0, n = groups.length; i < n; i++) {
         let group = groups[i];
         for (let j = 0, o = group.length; j < o; j++) {
@@ -45,7 +42,16 @@ function render(elements, fragment, input, slot) {
     if (input === false || input == null || input === '') {
         return;
     }
-    if (isArray(input)) {
+    let type = typeof input;
+    if (type === 'string' || type === 'number') {
+        let element = text(type === 'string' ? input : String(input));
+        if (slot) {
+            slot.text = element;
+        }
+        append.call(fragment, element);
+        elements.push([element]);
+    }
+    else if (isArray(input)) {
         for (let i = 0, n = input.length; i < n; i++) {
             render(elements, fragment, input[i]);
         }
@@ -66,9 +72,9 @@ function render(elements, fragment, input, slot) {
         }
     }
     else if (isInstanceOf(input, NodeList)) {
-        let e = [];
+        let e = new Array(input.length), i = 0;
         for (let node = firstChild.call(input); node; node = nextSibling.call(node)) {
-            e.push(node);
+            e[i++] = node;
         }
         append.call(fragment, ...e);
         elements.push(e);
@@ -77,14 +83,6 @@ function render(elements, fragment, input, slot) {
         append.call(fragment, input);
         elements.push([input]);
     }
-    else {
-        let element = text(typeof input === 'string' ? input : String(input));
-        if (slot) {
-            slot.text = element;
-        }
-        append.call(fragment, element);
-        elements.push([element]);
-    }
 }
 function schedule() {
     if (scheduled) {
@@ -124,14 +122,11 @@ class Slot {
         this.splice(n);
     }
     anchor(index = this.nodes.length - 1) {
-        let node, nodes = this.nodes[index];
-        if (nodes) {
-            node = nodes[nodes.length - 1];
-        }
-        return node || this.marker;
+        let nodes = this.nodes[index];
+        return nodes ? nodes[nodes.length - 1] : this.marker;
     }
     clear() {
-        remove(...this.nodes);
+        remove(this.nodes);
         this.nodes.length = 0;
         this.text = null;
     }
@@ -140,32 +135,35 @@ class Slot {
         if (!group) {
             return undefined;
         }
-        return remove(group);
+        return remove([group]);
     }
     push(...groups) {
         return this.nodes.push(...after(this.anchor(), groups));
     }
-    render(input) {
+    render(input, state = HYDRATING) {
         if (isFunction(input)) {
             ondisconnect(this.marker, effect(() => {
                 let v = input();
                 if (isFunction(v)) {
-                    root(() => this.render(v()));
+                    root(() => this.render(v(), state));
+                    state = CONNECTED;
+                }
+                else if (state === HYDRATING) {
+                    this.render(v, state);
+                    state = CONNECTED;
                 }
-                else {
+                else if (state === CONNECTED) {
                     raf.add(() => {
-                        this.render(v);
+                        this.render(v, state);
                     });
                 }
             }));
             return this;
         }
-        if (this.text) {
+        if (this.text && this.text.isConnected) {
             let type = typeof input;
-            if (type === 'object' && input !== null) {
-            }
-            else if (this.text.isConnected) {
-                nodeValue.call(this.text, (type === 'string' || type === 'number') ? input : '');
+            if (input == null || type !== 'object') {
+                nodeValue.call(this.text, (type === 'number' || type === 'string') ? input : '');
                 return this;
             }
         }
@@ -181,10 +179,13 @@ class Slot {
         if (!group) {
             return undefined;
         }
-        return remove(group);
+        return remove([group]);
     }
     splice(start, stop = this.nodes.length, ...groups) {
-        return remove(...this.nodes.splice(start, stop, ...after(this.anchor(start), groups)));
+        if (!groups.length) {
+            return remove(this.nodes.splice(start, stop));
+        }
+        return remove(this.nodes.splice(start, stop, ...after(this.anchor(start), groups)));
     }
     unshift(...groups) {
         return this.nodes.unshift(...after(this.marker, groups));

package/build/types.d.ts

@@ -45,6 +45,7 @@ type Template = {
     literals: TemplateStringsArray;
     slots: {
         fn: typeof attributes.spread | typeof slot;
+        parent: typeof firstChild[];
         path: typeof firstChild[];
         slot: number;
     }[] | null;

package/build/utilities.d.ts

@@ -1,9 +1,9 @@
 import { Element as E } from './types.js';
+declare const append: (...nodes: (Node | string)[]) => void;
 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;

package/build/utilities.js

@@ -1,8 +1,9 @@
 import { micro as m, raf as r } from '@esportsplus/tasks';
 let prototype, template = document.createElement('template'), t = document.createTextNode('');
+prototype = DocumentFragment.prototype;
+const append = prototype.append;
 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;

package/package.json

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

package/src/attributes.ts

@@ -9,8 +9,6 @@ import event from './event';
 
 const EFFECT_KEY = Symbol();
 
-const HYDRATE_KEY = Symbol();
-
 const STORE_KEY = Symbol();
 
 const UPDATES_KEY = Symbol();
@@ -216,7 +214,7 @@ function update(
     }
 
     if (state === STATE_HYDRATING) {
-        ((context.element[HYDRATE_KEY] ??= {}) as Record<PropertyKey, unknown>)[name] = value;
+        attribute(context.element, name, value);
     }
     else {
         context.updates[name] = value;
@@ -233,20 +231,6 @@ function update(
 }
 
 
-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]);
-    }
-
-    delete element[HYDRATE_KEY];
-};
-
 const spread = function (element: Element, value: Attributes | Attributes[]) {
     let cache = (element[STORE_KEY] ??= { [UPDATES_KEY]: {} }) as Record<PropertyKey, unknown>,
         context = {
@@ -273,5 +257,5 @@ const spread = function (element: Element, value: Attributes | Attributes[]) {
 };
 
 
-export default { apply, spread };
-export { apply, spread };
+export default { spread };
+export { spread };

package/src/html/cache.ts

@@ -51,6 +51,7 @@ function build(literals: TemplateStringsArray, values: unknown[]) {
                 while (i !== -1) {
                     slots.push({
                         fn: spread,
+                        parent: parent.path,
                         path,
                         slot
                     });
@@ -76,7 +77,8 @@ function build(literals: TemplateStringsArray, values: unknown[]) {
             buffer += parsed[slot] + SLOT_HTML;
             slots.push({
                 fn: s,
-                path: methods(parent.children, parent.path, firstChild, nextSibling),
+                parent: parent.path,
+                path: methods(parent.children, [], firstChild, nextSibling),
                 slot: slot++
             });
         }

package/src/html/hydrate.ts

@@ -2,7 +2,6 @@ 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';
 import cache from './cache';
 
 
@@ -53,8 +52,6 @@ function hydrate<T>(renderable: Renderable<T>, template: Template): HydrateResul
             let { fn, path, slot } = slots[i];
 
             if (path !== previous) {
-                apply(node);
-
                 node = fragment;
                 previous = path;
 
@@ -66,8 +63,6 @@ function hydrate<T>(renderable: Renderable<T>, template: Template): HydrateResul
             // @ts-ignore
             fn(node, values[slot]);
         }
-
-        apply(node);
     }
 
     for (let element = firstChild.call(fragment as Element); element; element = nextSibling.call(element)) {

package/src/slot.ts

@@ -9,6 +9,10 @@ import queue from '@esportsplus/queue';
 
 const CLEANUP_KEY = Symbol();
 
+const CONNECTED = 0;
+
+const HYDRATING = 1;
+
 
 let cleanup = queue<VoidFunction[]>(64),
     scheduled = false,
@@ -22,19 +26,14 @@ function after(anchor: Element, groups: HydrateResult[]) {
         return [];
     }
 
-    let elements: Elements[] = [],
-        fragment = groups[0].fragment || cloneNode.call(template);
+    let fragment = cloneNode.call(template),
+        elements = new Array(n);
 
-    if (n === 1) {
-        elements.push( groups[0].elements );
-    }
-    else {
-        for (let i = 1; i < n; i++) {
-            let { elements: e, fragment: f } = groups[i];
+    for (let i = 0; i < n; i++) {
+        let { elements: e, fragment: f } = groups[i];
 
-            append.call(fragment, f);
-            elements.push(e);
-        }
+        append.call(fragment, f);
+        elements[i] = e;
     }
 
     anchor.after(fragment);
@@ -42,7 +41,7 @@ function after(anchor: Element, groups: HydrateResult[]) {
     return elements;
 }
 
-function remove(...groups: Elements[]) {
+function remove(groups: Elements[]) {
     for (let i = 0, n = groups.length; i < n; i++) {
         let group = groups[i];
 
@@ -69,7 +68,19 @@ function render(elements: Elements[], fragment: DocumentFragment | Node, input:
         return;
     }
 
-    if (isArray(input)) {
+    let type = typeof input;
+
+    if (type === 'string' || type === 'number') {
+        let element = text(type === 'string' ? input as string : String(input));
+
+        if (slot) {
+            slot.text = element;
+        }
+
+        append.call(fragment, element);
+        elements.push([element]);
+    }
+    else if (isArray(input)) {
         for (let i = 0, n = input.length; i < n; i++) {
             render(elements, fragment, input[i]);
         }
@@ -93,10 +104,11 @@ function render(elements: Elements[], fragment: DocumentFragment | Node, input:
         }
     }
     else if (isInstanceOf(input, NodeList)) {
-        let e: Elements = [];
+        let e: Elements = new Array(input.length),
+            i = 0;
 
         for (let node = firstChild.call(input); node; node = nextSibling.call(node)) {
-            e.push(node);
+            e[i++] = node;
         }
 
         append.call(fragment, ...e);
@@ -106,16 +118,6 @@ function render(elements: Elements[], fragment: DocumentFragment | Node, input:
         append.call(fragment, input);
         elements.push([ input as Element ]);
     }
-    else {
-        let element = text( typeof input === 'string' ? input : String(input) );
-
-        if (slot) {
-            slot.text = element;
-        }
-
-        append.call(fragment, element);
-        elements.push([ element ]);
-    }
 }
 
 function schedule() {
@@ -171,18 +173,13 @@ class Slot {
 
 
     anchor(index: number = this.nodes.length - 1) {
-        let node,
-            nodes = this.nodes[index];
+        let nodes = this.nodes[index];
 
-        if (nodes) {
-            node = nodes[nodes.length - 1];
-        }
-
-        return node || this.marker;
+        return nodes ? nodes[nodes.length - 1] : this.marker;
     }
 
     clear() {
-        remove(...this.nodes);
+        remove(this.nodes);
         this.nodes.length = 0;
         this.text = null;
     }
@@ -194,14 +191,14 @@ class Slot {
             return undefined;
         }
 
-        return remove(group);
+        return remove([group]);
     }
 
     push(...groups: HydrateResult[]) {
         return this.nodes.push( ...after(this.anchor(), groups) );
     }
 
-    render(input: unknown) {
+    render(input: unknown, state = HYDRATING) {
         if (isFunction(input)) {
             ondisconnect(
                 this.marker,
@@ -209,11 +206,16 @@ class Slot {
                     let v = input();
 
                     if (isFunction(v)) {
-                        root(() => this.render(v()));
+                        root(() => this.render(v(), state));
+                        state = CONNECTED;
+                    }
+                    else if (state === HYDRATING) {
+                        this.render(v, state);
+                        state = CONNECTED;
                     }
-                    else {
+                    else if (state === CONNECTED) {
                         raf.add(() => {
-                            this.render(v);
+                            this.render(v, state);
                         });
                     }
                 })
@@ -222,16 +224,11 @@ class Slot {
             return this;
         }
 
-        if (this.text) {
+        if (this.text && this.text.isConnected) {
             let type = typeof input;
 
-            if (type === 'object' && input !== null) {
-            }
-            else if (this.text.isConnected) {
-                nodeValue.call(
-                    this.text,
-                    (type === 'string' || type === 'number') ? input : ''
-                );
+            if (input == null || type !== 'object') {
+                nodeValue.call(this.text, (type === 'number' || type === 'string') ? input : '');
                 return this;
             }
         }
@@ -256,12 +253,16 @@ class Slot {
             return undefined;
         }
 
-        return remove(group);
+        return remove([group]);
     }
 
     splice(start: number, stop: number = this.nodes.length, ...groups: HydrateResult[]) {
+        if (!groups.length) {
+            return remove(this.nodes.splice(start, stop));
+        }
+
         return remove(
-            ...this.nodes.splice(
+            this.nodes.splice(
                 start,
                 stop,
                 ...after(this.anchor(start), groups)

package/src/types.ts

@@ -63,6 +63,7 @@ type Template = {
     literals: TemplateStringsArray;
     slots: {
         fn: typeof attributes.spread | typeof slot;
+        parent: typeof firstChild[];
         path: typeof firstChild[];
         slot: number;
     }[] | null;

package/src/utilities.ts

@@ -7,13 +7,15 @@ let prototype,
     t = document.createTextNode('');
 
 
+prototype = DocumentFragment.prototype;
+
+const append = prototype.append
+
 // https://github.com/localvoid/ivi/blob/master/packages/ivi/src/client/core.ts#L38
 prototype = Element.prototype;
 
 const addEventListener = prototype.addEventListener;
 
-const append = prototype.append;
-
 const removeEventListener = prototype.removeEventListener;
 
 const className = Object.getOwnPropertyDescriptor(prototype, 'className')!.set!;