@esportsplus/template 0.15.16 → 0.15.18

package/src/slot.ts

@@ -1,27 +1,45 @@
 import { effect, root } from '@esportsplus/reactivity';
 import { isArray, isFunction, isInstanceOf, isObject  } from '@esportsplus/utilities';
-import { RENDERABLE, RENDERABLE_REACTIVE, SLOT_CLEANUP } from './constants';
+import { RENDERABLE, RENDERABLE_REACTIVE } from './constants';
 import { hydrate } from './html';
-import { Element, Elements, RenderableReactive, RenderableTemplate } from './types';
-import { firstChild, microtask, nextSibling, nodeValue, raf, text } from './utilities'
+import { Element, Elements, HydrateResult, RenderableReactive, RenderableTemplate } from './types';
+import { append, cloneNode, firstChild, fragment, microtask, nextSibling, nodeValue, raf, text } from './utilities'
 import queue from '@esportsplus/queue';
 
 
-let cleanup = queue<VoidFunction[]>(1024),
-    scheduled = false;
+const CLEANUP_KEY = Symbol();
 
 
-function after(anchor: Element, groups: Elements[]) {
-    for (let i = 0, n = groups.length; i < n; i++) {
-        let group = groups[i];
+let cleanup = queue<VoidFunction[]>(64),
+    scheduled = false,
+    template = fragment('');
+
+
+function after(anchor: Element, groups: HydrateResult[]) {
+    let n = groups.length;
+
+    if (n === 0) {
+        return [];
+    }
+
+    let elements: 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];
 
-        if (group.length) {
-            anchor.after(anchor, ...group);
-            anchor = group.at(-1)!;
+            append.call(fragment, f);
+            elements.push(e);
         }
     }
 
-    return groups;
+    anchor.after(fragment);
+
+    return elements;
 }
 
 function remove(...groups: Elements[]) {
@@ -31,8 +49,8 @@ function remove(...groups: Elements[]) {
         for (let j = 0, o = group.length; j < o; j++) {
             let item = group[j];
 
-            if (item[SLOT_CLEANUP]) {
-                cleanup.add( item[SLOT_CLEANUP] );
+            if (CLEANUP_KEY in item) {
+                cleanup.add(item[CLEANUP_KEY] as VoidFunction[]);
             }
 
             item.remove();
@@ -46,62 +64,58 @@ function remove(...groups: Elements[]) {
     return groups;
 }
 
-function render(anchor: Element | null, input: unknown, slot?: Slot): Elements | Elements[] {
-    if (input === false || input == null) {
-        input = '';
+function render(elements: Elements[], fragment: DocumentFragment | Node, input: unknown, slot?: Slot) {
+    if (input === false || input == null || input === '') {
+        return;
     }
-    else if (isObject(input)) {
-        if (isArray(input)) {
-            let groups: Elements[] = [];
-
-            for (let i = 0, n = input.length; i < n; i++) {
-                groups.push( render(null, input[i]) as Elements );
-            }
 
-            return anchor ? after(anchor, groups) : groups;
+    if (isArray(input)) {
+        for (let i = 0, n = input.length; i < n; i++) {
+            render(elements, fragment, input[i]);
         }
+    }
+    else if (isObject(input) && RENDERABLE in input) {
+        if (input[RENDERABLE] === RENDERABLE_REACTIVE) {
+            let response = hydrate.reactive(input as RenderableReactive, slot!);
 
-        let nodes: Elements = [];
+            for (let i = 0, n = response.length; i < n; i++) {
+                let { elements: e, fragment: f } = response[i];
 
-        if (RENDERABLE in input) {
-            if (input[RENDERABLE] === RENDERABLE_REACTIVE) {
-                return after(anchor!, hydrate.reactive(input as RenderableReactive, slot!));
-            }
-            else {
-                nodes = hydrate.static(input as RenderableTemplate<unknown>);
-            }
-        }
-        else if (isInstanceOf(input, NodeList)) {
-            for (let node = firstChild.call(input); node; node = nextSibling.call(node)) {
-                nodes.push(node);
+                append.call(fragment, f);
+                elements.push(e);
             }
         }
-        else if (isInstanceOf(input, Node)) {
-            nodes = [input] as Elements;
+        else {
+            let { elements: e, fragment: f } = hydrate.static(input as RenderableTemplate<unknown>);
+
+            append.call(fragment, f);
+            elements.push(e);
         }
+    }
+    else if (isInstanceOf(input, NodeList)) {
+        let e: Elements = [];
 
-        if (anchor) {
-            anchor.after(...nodes);
+        for (let node = firstChild.call(input); node; node = nextSibling.call(node)) {
+            e.push(node);
         }
 
-        return nodes;
+        append.call(fragment, ...e);
+        elements.push(e);
     }
-
-    if (input === '') {
-        return [];
+    else if (isInstanceOf(input, Node)) {
+        append.call(fragment, input);
+        elements.push([ input as Element ]);
     }
-
-    let node = text(input as string);
-
-    if (anchor) {
-        anchor.after(node);
+    else {
+        let element = text( typeof input === 'string' ? input : String(input) );
 
         if (slot) {
-            slot.text = node;
+            slot.text = element;
         }
-    }
 
-    return [ node ];
+        append.call(fragment, element);
+        elements.push([ element ]);
+    }
 }
 
 function schedule() {
@@ -110,20 +124,19 @@ function schedule() {
     }
 
     scheduled = true;
-
     microtask.add(task);
 }
 
 function task() {
-    let fns;
+    let fn, fns;
 
     while (fns = cleanup.next()) {
-        for (let i = 0, n = fns.length; i < n; i++) {
-            try {
-                fns[i]();
+        try {
+            while (fn = fns.pop()) {
+                fn();
             }
-            catch { }
         }
+        catch { }
     }
 
     scheduled = false;
@@ -162,7 +175,7 @@ class Slot {
             nodes = this.nodes[index];
 
         if (nodes) {
-            node = nodes.at(-1);
+            node = nodes[nodes.length - 1];
         }
 
         return node || this.marker;
@@ -170,6 +183,7 @@ class Slot {
 
     clear() {
         remove(...this.nodes);
+        this.nodes.length = 0;
         this.text = null;
     }
 
@@ -183,14 +197,8 @@ class Slot {
         return remove(group);
     }
 
-    push(...groups: Elements[]) {
-        after(this.anchor(), groups);
-
-        for (let i = 0, n = groups.length; i < n; i++) {
-            this.nodes.push(groups[i]);
-        }
-
-        return this.nodes.length;
+    push(...groups: HydrateResult[]) {
+        return this.nodes.push( ...after(this.anchor(), groups) );
     }
 
     render(input: unknown) {
@@ -198,7 +206,7 @@ class Slot {
             ondisconnect(
                 this.marker,
                 effect(() => {
-                    let v = (input as Function)();
+                    let v = input();
 
                     if (isFunction(v)) {
                         root(() => this.render(v()));
@@ -217,7 +225,8 @@ class Slot {
         if (this.text) {
             let type = typeof input;
 
-            if (type === 'object' && input !== null) {}
+            if (type === 'object' && input !== null) {
+            }
             else if (this.text.isConnected) {
                 nodeValue.call(
                     this.text,
@@ -229,12 +238,13 @@ class Slot {
 
         this.clear();
 
-        if (isArray(input) || (isObject(input) && input[RENDERABLE] === RENDERABLE_REACTIVE)) {
-            this.nodes = render(this.marker, input, this) as Elements[];
-        }
-        else {
-            this.nodes = [ render(this.marker, input, this) as Elements ];
-        }
+        let fragment = cloneNode.call(template),
+            nodes: Elements[] = [];
+
+        render(nodes, fragment, input, this);
+
+        this.marker.after(fragment);
+        this.nodes = nodes;
 
         return this;
     }
@@ -249,20 +259,24 @@ class Slot {
         return remove(group);
     }
 
-    splice(start: number, stop: number = this.nodes.length, ...groups: Elements[]) {
+    splice(start: number, stop: number = this.nodes.length, ...groups: HydrateResult[]) {
         return remove(
-            ...this.nodes.splice(start, stop, ...after(this.anchor(start), groups))
+            ...this.nodes.splice(
+                start,
+                stop,
+                ...after(this.anchor(start), groups)
+            )
         );
     }
 
-    unshift(...groups: Elements[]) {
-        return this.nodes.unshift(...after(this.marker, groups));
+    unshift(...groups: HydrateResult[]) {
+        return this.nodes.unshift( ...after(this.marker, groups) );
     }
 }
 
 
 const ondisconnect = (element: Element, fn: VoidFunction) => {
-    ( element[SLOT_CLEANUP] ??= [] ).push(fn);
+    ((element[CLEANUP_KEY] ??= []) as VoidFunction[]).push(fn);
 };
 
 

package/src/types.ts

@@ -1,8 +1,7 @@
 import { ReactiveArray } from '@esportsplus/reactivity';
-import { RENDERABLE, RENDERABLE_REACTIVE, RENDERABLE_TEMPLATE, SLOT_CLEANUP } from './constants';
+import { RENDERABLE, RENDERABLE_REACTIVE, RENDERABLE_TEMPLATE } from './constants';
 import { firstChild } from './utilities';
 import attributes from './attributes';
-import event from './event';
 import slot from './slot';
 
 
@@ -27,10 +26,12 @@ type Effect<T> = () => EffectResponse<T>;
 
 type EffectResponse<T> = T extends [] ? EffectResponse<T[number]>[] : Primitive | Renderable<T>;
 
-type Element = HTMLElement & Attributes & { [SLOT_CLEANUP]?: VoidFunction[] } & Record<PropertyKey, unknown>;
+type Element = HTMLElement & Attributes & Record<PropertyKey, unknown>;
 
 type Elements = Element[];
 
+type HydrateResult = { elements: Elements, fragment: DocumentFragment | Node };
+
 // Copied from '@esportsplus/utilities'
 // - Importing from ^ causes 'cannot be named without a reference to...' error
 type Primitive = bigint | boolean | null | number | string | undefined;
@@ -61,7 +62,7 @@ type Template = {
     html: string;
     literals: TemplateStringsArray;
     slots: {
-        fn: typeof attributes.spread | typeof event | typeof slot;
+        fn: typeof attributes.spread | typeof slot;
         path: typeof firstChild[];
         slot: number;
     }[] | null;
@@ -71,6 +72,7 @@ type Template = {
 export type {
     Attributes,
     Effect, Element, Elements,
+    HydrateResult,
     Renderable, RenderableReactive, RenderableTemplate, RenderableValue,
     Template
 };

package/src/utilities.ts

@@ -12,6 +12,8 @@ prototype = Element.prototype;
 
 const addEventListener = prototype.addEventListener;
 
+const append = prototype.append;
+
 const removeEventListener = prototype.removeEventListener;
 
 const className = Object.getOwnPropertyDescriptor(prototype, 'className')!.set!;
@@ -70,7 +72,7 @@ const text = (value: string) => {
 
 
 export {
-    addEventListener,
+    addEventListener, append,
     className, cloneNode,
     firstChild, firstElementChild, fragment,
     innerHTML,