@esportsplus/template 0.15.17 → 0.15.19

package/build/attributes.js

@@ -1,11 +1,12 @@
 import { effect } from '@esportsplus/reactivity';
 import { isArray, isFunction, isObject, isString } from '@esportsplus/utilities';
-import { ATTRIBUTE_STORE } from './constants.js';
 import { ondisconnect } from './slot.js';
 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;
 const STATE_NONE = 1;
@@ -13,7 +14,7 @@ const STATE_WAITING = 2;
 let delimiters = {
     class: ' ',
     style: ';'
-}, hydrating = {}, queue = q(64), scheduled = false;
+}, queue = q(64), scheduled = false;
 function attribute(element, name, value) {
     if (value === '' || value === false || value == null) {
         removeAttribute.call(element, name);
@@ -139,7 +140,7 @@ function update(context, id, name, value, state) {
         store[name] = value;
     }
     if (state === STATE_HYDRATING) {
-        hydrating[name] = value;
+        (context.element[HYDRATE_KEY] ??= {})[name] = value;
     }
     else {
         context.updates[name] = value;
@@ -153,13 +154,17 @@ function update(context, id, name, value, state) {
     }
 }
 const apply = (element) => {
-    for (let key in hydrating) {
-        attribute(element, key, hydrating[key]);
+    let attributes = element[HYDRATE_KEY];
+    if (!attributes) {
+        return;
+    }
+    for (let key in attributes) {
+        attribute(element, key, attributes[key]);
     }
-    hydrating = {};
+    delete element[HYDRATE_KEY];
 };
 const spread = function (element, value) {
-    let cache = element[ATTRIBUTE_STORE] ??= { [UPDATES_KEY]: {} }, context = {
+    let cache = (element[STORE_KEY] ??= { [UPDATES_KEY]: {} }), context = {
         element,
         store: cache,
         updates: cache[UPDATES_KEY],

package/build/constants.d.ts

@@ -1,4 +1,3 @@
-declare const ATTRIBUTE_STORE: unique symbol;
 declare const NODE_CLOSING = 1;
 declare const NODE_ELEMENT = 3;
 declare const NODE_SLOT = 4;
@@ -9,8 +8,7 @@ declare const REGEX_SLOT_NODES: RegExp;
 declare const RENDERABLE: unique symbol;
 declare const RENDERABLE_REACTIVE: unique symbol;
 declare const RENDERABLE_TEMPLATE: unique symbol;
-declare const SLOT_CLEANUP: unique symbol;
 declare const SLOT_HTML = "<!--$-->";
 declare const SLOT_MARKER = "{{$}}";
 declare const SLOT_MARKER_LENGTH: number;
-export { ATTRIBUTE_STORE, 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 };
+export { 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/build/constants.js

@@ -1,4 +1,3 @@
-const ATTRIBUTE_STORE = Symbol();
 const NODE_CLOSING = 1;
 const NODE_COMMENT = 2;
 const NODE_ELEMENT = 3;
@@ -29,8 +28,7 @@ const REGEX_SLOT_NODES = /<([\w-]+|[\/!])(?:([^><]*{{\$}}[^><]*)|(?:[^><]*))?>|{
 const RENDERABLE = Symbol();
 const RENDERABLE_REACTIVE = Symbol();
 const RENDERABLE_TEMPLATE = Symbol();
-const SLOT_CLEANUP = Symbol();
 const SLOT_HTML = '<!--$-->';
 const SLOT_MARKER = '{{$}}';
 const SLOT_MARKER_LENGTH = SLOT_MARKER.length;
-export { ATTRIBUTE_STORE, 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 };
+export { 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/build/html/hydrate.d.ts

@@ -1,10 +1,7 @@
-import { Elements, RenderableReactive, RenderableTemplate, RenderedGroup } from '../types.js';
+import { HydrateResult, RenderableReactive, RenderableTemplate } from '../types.js';
 import { Slot } from '../slot.js';
 declare const _default: {
-    reactive: <T>(renderable: RenderableReactive<T>, slot: Slot) => RenderedGroup[];
-    static: <T>(renderable: RenderableTemplate<T>) => {
-        elements: Elements;
-        fragment: Node;
-    };
+    reactive: <T>(renderable: RenderableReactive<T>, slot: Slot) => HydrateResult[];
+    static: <T>(renderable: RenderableTemplate<T>) => HydrateResult;
 };
 export default _default;

package/build/html/hydrate.js

@@ -5,17 +5,15 @@ import cache from './cache.js';
 function reactive(renderable, slot) {
     let array = renderable.values, factory = renderable.template, refresh = () => {
         slot.render(root(() => array.map(template)));
-    }, renderer = (i, n) => {
-        return root(() => array.map(template, i, n));
     }, template = function (data, i) {
         let renderable = factory.call(this, data, i);
-        return render(renderable, cache.get(renderable));
+        return hydrate(renderable, cache.get(renderable));
     };
     array.on('pop', () => {
         slot.pop();
     });
     array.on('push', ({ items }) => {
-        slot.push(...renderer(array.length - items.length));
+        slot.push(...root(() => array.map(template, array.length - items.length)));
     });
     array.on('reverse', refresh);
     array.on('shift', () => {
@@ -23,21 +21,23 @@ function reactive(renderable, slot) {
     });
     array.on('sort', refresh);
     array.on('splice', ({ deleteCount: d, items: i, start: s }) => {
-        slot.splice(s, d, ...renderer(s, i.length));
+        slot.splice(s, d, ...root(() => array.map(template, s, i.length)));
     });
     array.on('unshift', ({ items }) => {
-        slot.unshift(...renderer(0, items.length));
+        slot.unshift(...root(() => array.map(template, 0, items.length)));
     });
     return array.map(template);
 }
-function render(renderable, template) {
+function hydrate(renderable, template) {
     let elements = [], fragment = cloneNode.call(template.fragment, true), slots = template.slots;
     if (slots !== null) {
         let node, previous, values = renderable.values;
         for (let i = slots.length - 1; i >= 0; i--) {
             let { fn, path, slot } = slots[i];
             if (path !== previous) {
-                apply(node);
+                if (node) {
+                    apply(node);
+                }
                 node = fragment;
                 previous = path;
                 for (let o = 0, j = path.length; o < j; o++) {
@@ -58,6 +58,6 @@ export default {
         return reactive(renderable, slot);
     },
     static: (renderable) => {
-        return render(renderable, renderable.template || (renderable.template = cache.get(renderable)));
+        return hydrate(renderable, renderable.template || (renderable.template = cache.get(renderable)));
     }
 };

package/build/slot.d.ts

@@ -1,4 +1,4 @@
-import { Element, Elements, RenderedGroup } from './types.js';
+import { Element, Elements, HydrateResult } from './types.js';
 declare class Slot {
     marker: Element;
     nodes: Elements[];
@@ -9,11 +9,11 @@ declare class Slot {
     anchor(index?: number): Element;
     clear(): void;
     pop(): Elements[] | undefined;
-    push(...groups: RenderedGroup[]): number;
+    push(...groups: HydrateResult[]): number;
     render(input: unknown): this;
     shift(): Elements[] | undefined;
-    splice(start: number, stop?: number, ...groups: RenderedGroup[]): Elements[];
-    unshift(...groups: RenderedGroup[]): number;
+    splice(start: number, stop?: number, ...groups: HydrateResult[]): Elements[];
+    unshift(...groups: HydrateResult[]): number;
 }
 declare const ondisconnect: (element: Element, fn: VoidFunction) => void;
 declare const _default: (marker: Element, value: unknown) => Slot;

package/build/slot.js

@@ -1,30 +1,28 @@
 import { effect, root } from '@esportsplus/reactivity';
 import { isArray, isFunction, isInstanceOf, isObject } from '@esportsplus/utilities';
-import { RENDERABLE, RENDERABLE_REACTIVE, SLOT_CLEANUP } from './constants.js';
+import { RENDERABLE, RENDERABLE_REACTIVE } from './constants.js';
 import { hydrate } from './html/index.js';
-import { append, firstChild, fragment, microtask, nextSibling, nodeValue, raf, text } from './utilities.js';
+import { append, cloneNode, firstChild, fragment, microtask, nextSibling, nodeValue, raf, text } from './utilities.js';
 import queue from '@esportsplus/queue';
-let cleanup = queue(64), fallback = fragment(''), scheduled = false;
+const CLEANUP_KEY = Symbol();
+let cleanup = queue(64), scheduled = false, template = fragment('');
 function after(anchor, groups) {
-    let elements = [], n = groups.length;
-    if (n) {
-        let fragment = groups[0].fragment || fallback;
-        if (n === 1) {
-            elements.push(groups[0].elements);
-        }
-        else {
-            for (let i = 1; i < n; i++) {
-                let group = groups[i];
-                if (group.fragment) {
-                    append.call(fragment, group.fragment);
-                    group.fragment = null;
-                }
-                elements.push(group.elements);
-            }
+    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);
         }
-        anchor.after(fragment);
-        groups[0].fragment = null;
     }
+    anchor.after(fragment);
     return elements;
 }
 function remove(...groups) {
@@ -32,8 +30,8 @@ function remove(...groups) {
         let group = groups[i];
         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]);
             }
             item.remove();
         }
@@ -43,47 +41,50 @@ function remove(...groups) {
     }
     return groups;
 }
-function render(groups, input, slot) {
+function render(elements, fragment, input, slot) {
     if (input === false || input == null || input === '') {
-        return groups;
+        return;
     }
     if (isArray(input)) {
         for (let i = 0, n = input.length; i < n; i++) {
-            render(groups, input[i]);
+            render(elements, fragment, input[i]);
         }
     }
     else if (isObject(input) && RENDERABLE in input) {
         if (input[RENDERABLE] === RENDERABLE_REACTIVE) {
-            groups.push(...hydrate.reactive(input, slot));
+            let response = hydrate.reactive(input, slot);
+            for (let i = 0, n = response.length; i < n; i++) {
+                let { elements: e, fragment: f } = response[i];
+                append.call(fragment, f);
+                elements.push(e);
+            }
         }
         else {
-            groups.push(hydrate.static(input));
+            let { elements: e, fragment: f } = hydrate.static(input);
+            append.call(fragment, f);
+            elements.push(e);
         }
     }
     else if (isInstanceOf(input, NodeList)) {
-        let elements = [];
+        let e = [];
         for (let node = firstChild.call(input); node; node = nextSibling.call(node)) {
-            elements.push(node);
+            e.push(node);
         }
-        groups.push({ elements, fragment: null });
+        append.call(fragment, ...e);
+        elements.push(e);
     }
     else if (isInstanceOf(input, Node)) {
-        groups.push({
-            elements: [input],
-            fragment: input
-        });
+        append.call(fragment, input);
+        elements.push([input]);
     }
     else {
         let element = text(typeof input === 'string' ? input : String(input));
         if (slot) {
             slot.text = element;
         }
-        groups.push({
-            elements: [element],
-            fragment: element
-        });
+        append.call(fragment, element);
+        elements.push([element]);
     }
-    return groups;
 }
 function schedule() {
     if (scheduled) {
@@ -125,7 +126,7 @@ class Slot {
     anchor(index = this.nodes.length - 1) {
         let node, nodes = this.nodes[index];
         if (nodes) {
-            node = nodes.at(-1);
+            node = nodes[nodes.length - 1];
         }
         return node || this.marker;
     }
@@ -169,7 +170,10 @@ class Slot {
             }
         }
         this.clear();
-        this.nodes = after(this.marker, render([], input, this));
+        let fragment = cloneNode.call(template), nodes = [];
+        render(nodes, fragment, input, this);
+        this.marker.after(fragment);
+        this.nodes = nodes;
         return this;
     }
     shift() {
@@ -187,7 +191,7 @@ class Slot {
     }
 }
 const ondisconnect = (element, fn) => {
-    (element[SLOT_CLEANUP] ??= []).push(fn);
+    (element[CLEANUP_KEY] ??= []).push(fn);
 };
 export default (marker, value) => {
     return new Slot(marker).render(value);

package/build/types.d.ts

@@ -1,5 +1,5 @@
 import { ReactiveArray } from '@esportsplus/reactivity';
-import { ATTRIBUTE_STORE, RENDERABLE, RENDERABLE_REACTIVE, RENDERABLE_TEMPLATE, SLOT_CLEANUP } from './constants.js';
+import { RENDERABLE, RENDERABLE_REACTIVE, RENDERABLE_TEMPLATE } from './constants.js';
 import { firstChild } from './utilities.js';
 import attributes from './attributes.js';
 import slot from './slot.js';
@@ -18,11 +18,12 @@ type Attributes = {
 } & Record<PropertyKey, unknown>;
 type Effect<T> = () => EffectResponse<T>;
 type EffectResponse<T> = T extends [] ? EffectResponse<T[number]>[] : Primitive | Renderable<T>;
-type Element = HTMLElement & Attributes & {
-    [ATTRIBUTE_STORE]?: Record<PropertyKey, unknown>;
-    [SLOT_CLEANUP]?: VoidFunction[];
-} & Record<PropertyKey, unknown>;
+type Element = HTMLElement & Attributes & Record<PropertyKey, unknown>;
 type Elements = Element[];
+type HydrateResult = {
+    elements: Elements;
+    fragment: DocumentFragment | Node;
+};
 type Primitive = bigint | boolean | null | number | string | undefined;
 type Renderable<T = unknown> = RenderableReactive<T> | RenderableTemplate<T>;
 type RenderableReactive<T = unknown> = Readonly<{
@@ -38,10 +39,6 @@ type RenderableTemplate<T> = {
     values: (RenderableValue<T> | RenderableValue<T>[])[];
 };
 type RenderableValue<T = unknown> = Attributes | Readonly<Attributes> | Readonly<Attributes[]> | Effect<T> | Primitive | Renderable;
-type RenderedGroup = {
-    elements: Elements;
-    fragment: DocumentFragment | Node | null;
-};
 type Template = {
     fragment: DocumentFragment;
     html: string;
@@ -52,4 +49,4 @@ type Template = {
         slot: number;
     }[] | null;
 };
-export type { Attributes, Effect, Element, Elements, Renderable, RenderableReactive, RenderableTemplate, RenderableValue, RenderedGroup, Template };
+export type { Attributes, Effect, Element, Elements, HydrateResult, Renderable, RenderableReactive, RenderableTemplate, RenderableValue, Template };

package/build/types.js

@@ -1 +1 @@
-import { ATTRIBUTE_STORE, RENDERABLE, SLOT_CLEANUP } from './constants.js';
+import { RENDERABLE } from './constants.js';

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.17",
+  "version": "0.15.19",
   "scripts": {
     "build": "tsc && tsc-alias",
     "-": "-"

package/src/attributes.ts

@@ -1,6 +1,5 @@
 import { effect } from '@esportsplus/reactivity';
 import { isArray, isFunction, isObject, isString } from '@esportsplus/utilities';
-import { ATTRIBUTE_STORE } from '~/constants';
 import { ondisconnect } from './slot';
 import { Attributes, Element } from './types';
 import { className, raf, removeAttribute, setAttribute } from './utilities';
@@ -10,8 +9,13 @@ import event from './event';
 
 const EFFECT_KEY = Symbol();
 
+const HYDRATE_KEY = Symbol();
+
+const STORE_KEY = Symbol();
+
 const UPDATES_KEY = Symbol();
 
+
 const STATE_HYDRATING = 0;
 
 const STATE_NONE = 1;
@@ -33,7 +37,6 @@ let delimiters: Record<string, string> = {
         class: ' ',
         style: ';'
     },
-    hydrating: Record<string, unknown> = {},
     queue = q<Context>(64),
     scheduled = false;
 
@@ -213,7 +216,7 @@ function update(
     }
 
     if (state === STATE_HYDRATING) {
-        hydrating[name] = value;
+        ((context.element[HYDRATE_KEY] ??= {}) as Record<PropertyKey, unknown>)[name] = value;
     }
     else {
         context.updates[name] = value;
@@ -231,15 +234,21 @@ function update(
 
 
 const apply = (element: Element) => {
-    for (let key in hydrating) {
-        attribute(element, key, hydrating[key]);
+    let attributes = element[HYDRATE_KEY] as Record<PropertyKey, unknown> | undefined;
+
+    if (!attributes) {
+        return;
+    }
+
+    for (let key in attributes) {
+        attribute(element, key, attributes[key]);
     }
 
-    hydrating = {};
+    delete element[HYDRATE_KEY];
 };
 
 const spread = function (element: Element, value: Attributes | Attributes[]) {
-    let cache = element[ATTRIBUTE_STORE] ??= { [UPDATES_KEY]: {} },
+    let cache = (element[STORE_KEY] ??= { [UPDATES_KEY]: {} }) as Record<PropertyKey, unknown>,
         context = {
             element,
             store: cache,

package/src/constants.ts

@@ -1,6 +1,3 @@
-const ATTRIBUTE_STORE = Symbol();
-
-
 const NODE_CLOSING = 1;
 
 const NODE_COMMENT = 2;
@@ -46,8 +43,6 @@ const RENDERABLE_REACTIVE = Symbol();
 const RENDERABLE_TEMPLATE = Symbol();
 
 
-const SLOT_CLEANUP = Symbol();
-
 const SLOT_HTML = '<!--$-->';
 
 const SLOT_MARKER = '{{$}}';
@@ -56,9 +51,8 @@ const SLOT_MARKER_LENGTH = SLOT_MARKER.length;
 
 
 export {
-    ATTRIBUTE_STORE,
     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
+    SLOT_HTML, SLOT_MARKER, SLOT_MARKER_LENGTH
 };

package/src/html/hydrate.ts

@@ -1,5 +1,5 @@
 import { root } from '@esportsplus/reactivity';
-import { Element, Elements, Renderable, RenderableReactive, RenderableTemplate, RenderedGroup, Template } from '~/types';
+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,24 +10,19 @@ function reactive<T>(renderable: RenderableReactive<T>, slot: Slot) {
     let array = renderable.values,
         factory = renderable.template,
         refresh = () => {
-            slot.render(
-                root(() => array.map(template))
-            );
-        },
-        renderer = (i: number, n?: number) => {
-            return root(() => array.map(template, i, n)) as RenderedGroup[];
+            slot.render( root(() => array.map(template)) );
         },
         template = function(data, i) {
             let renderable = factory.call(this, data, i);
 
-            return render(renderable, cache.get(renderable));
-        } as Parameters<typeof array['map']>[0];
+            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(...renderer(array.length - items.length));
+        slot.push( ...root(() => array.map(template, array.length - items.length)) );
     });
     array.on('reverse', refresh);
     array.on('shift', () => {
@@ -35,16 +30,16 @@ function reactive<T>(renderable: RenderableReactive<T>, slot: Slot) {
     });
     array.on('sort', refresh);
     array.on('splice', ({ deleteCount: d, items: i, start: s }) => {
-        slot.splice(s, d, ...renderer(s, i.length));
+        slot.splice(s, d, ...root(() => array.map(template, s, i.length)));
     });
     array.on('unshift', ({ items }) => {
-        slot.unshift(...renderer(0, items.length));
+        slot.unshift( ...root(() => array.map(template, 0, items.length)) );
     });
 
-    return array.map(template) as RenderedGroup[];
+    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;
@@ -58,7 +53,9 @@ function render<T>(renderable: Renderable<T>, template: Template) {
             let { fn, path, slot } = slots[i];
 
             if (path !== previous) {
-                apply(node);
+                if (node) {
+                    apply(node);
+                }
 
                 node = fragment;
                 previous = path;
@@ -88,6 +85,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)));
     }
 };

package/src/slot.ts

@@ -1,44 +1,44 @@
 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, RenderedGroup } from './types';
-import { append, firstChild, fragment, 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';
 
 
+const CLEANUP_KEY = Symbol();
+
+
 let cleanup = queue<VoidFunction[]>(64),
-    fallback = fragment(''),
-    scheduled = false;
+    scheduled = false,
+    template = fragment('');
 
 
-function after(anchor: Element, groups: RenderedGroup[]) {
-    let elements: Elements[] = [],
-        n = groups.length;
+function after(anchor: Element, groups: HydrateResult[]) {
+    let n = groups.length;
 
-    if (n) {
-        let fragment = groups[0].fragment || fallback;
+    if (n === 0) {
+        return [];
+    }
 
-        if (n === 1) {
-            elements.push( groups[0].elements );
-        }
-        else {
-            for (let i = 1; i < n; i++) {
-                let group = groups[i];
+    let elements: Elements[] = [],
+        fragment = groups[0].fragment || cloneNode.call(template);
 
-                if (group.fragment) {
-                    append.call(fragment, group.fragment);
-                    group.fragment = null;
-                }
+    if (n === 1) {
+        elements.push( groups[0].elements );
+    }
+    else {
+        for (let i = 1; i < n; i++) {
+            let { elements: e, fragment: f } = groups[i];
 
-                elements.push(group.elements);
-            }
+            append.call(fragment, f);
+            elements.push(e);
         }
-
-        anchor.after(fragment);
-        groups[0].fragment = null;
     }
 
+    anchor.after(fragment);
+
     return elements;
 }
 
@@ -49,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();
@@ -64,42 +64,47 @@ function remove(...groups: Elements[]) {
     return groups;
 }
 
-function render(groups: RenderedGroup[], input: unknown, slot?: Slot) {
+function render(elements: Elements[], fragment: DocumentFragment | Node, input: unknown, slot?: Slot) {
     if (input === false || input == null || input === '') {
-        return groups;
+        return;
     }
 
     if (isArray(input)) {
         for (let i = 0, n = input.length; i < n; i++) {
-            render(groups, input[i]);
+            render(elements, fragment, input[i]);
         }
     }
     else if (isObject(input) && RENDERABLE in input) {
         if (input[RENDERABLE] === RENDERABLE_REACTIVE) {
-            groups.push(
-                ...hydrate.reactive(input as RenderableReactive, slot!)
-            );
+            let response = hydrate.reactive(input as RenderableReactive, slot!);
+
+            for (let i = 0, n = response.length; i < n; i++) {
+                let { elements: e, fragment: f } = response[i];
+
+                append.call(fragment, f);
+                elements.push(e);
+            }
         }
         else {
-            groups.push(
-                hydrate.static(input as RenderableTemplate<unknown>)
-            );
+            let { elements: e, fragment: f } = hydrate.static(input as RenderableTemplate<unknown>);
+
+            append.call(fragment, f);
+            elements.push(e);
         }
     }
     else if (isInstanceOf(input, NodeList)) {
-        let elements: Elements = [];
+        let e: Elements = [];
 
         for (let node = firstChild.call(input); node; node = nextSibling.call(node)) {
-            elements.push(node);
+            e.push(node);
         }
 
-        groups.push({ elements, fragment: null });
+        append.call(fragment, ...e);
+        elements.push(e);
     }
     else if (isInstanceOf(input, Node)) {
-        groups.push({
-            elements: [ input as Element ],
-            fragment: input as RenderedGroup['fragment']
-        });
+        append.call(fragment, input);
+        elements.push([ input as Element ]);
     }
     else {
         let element = text( typeof input === 'string' ? input : String(input) );
@@ -108,13 +113,9 @@ function render(groups: RenderedGroup[], input: unknown, slot?: Slot) {
             slot.text = element;
         }
 
-        groups.push({
-            elements: [ element ],
-            fragment: element
-        });
+        append.call(fragment, element);
+        elements.push([ element ]);
     }
-
-    return groups;
 }
 
 function schedule() {
@@ -174,7 +175,7 @@ class Slot {
             nodes = this.nodes[index];
 
         if (nodes) {
-            node = nodes.at(-1);
+            node = nodes[nodes.length - 1];
         }
 
         return node || this.marker;
@@ -196,7 +197,7 @@ class Slot {
         return remove(group);
     }
 
-    push(...groups: RenderedGroup[]) {
+    push(...groups: HydrateResult[]) {
         return this.nodes.push( ...after(this.anchor(), groups) );
     }
 
@@ -236,7 +237,14 @@ class Slot {
         }
 
         this.clear();
-        this.nodes = after(this.marker, render([], input, this));
+
+        let fragment = cloneNode.call(template),
+            nodes: Elements[] = [];
+
+        render(nodes, fragment, input, this);
+
+        this.marker.after(fragment);
+        this.nodes = nodes;
 
         return this;
     }
@@ -251,7 +259,7 @@ class Slot {
         return remove(group);
     }
 
-    splice(start: number, stop: number = this.nodes.length, ...groups: RenderedGroup[]) {
+    splice(start: number, stop: number = this.nodes.length, ...groups: HydrateResult[]) {
         return remove(
             ...this.nodes.splice(
                 start,
@@ -261,14 +269,14 @@ class Slot {
         );
     }
 
-    unshift(...groups: RenderedGroup[]) {
+    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,9 +1,5 @@
 import { ReactiveArray } from '@esportsplus/reactivity';
-import {
-    ATTRIBUTE_STORE,
-    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 slot from './slot';
@@ -30,13 +26,12 @@ type Effect<T> = () => EffectResponse<T>;
 
 type EffectResponse<T> = T extends [] ? EffectResponse<T[number]>[] : Primitive | Renderable<T>;
 
-type Element = HTMLElement & Attributes & {
-    [ATTRIBUTE_STORE]?: Record<PropertyKey, unknown>;
-    [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;
@@ -62,8 +57,6 @@ type RenderableTemplate<T> = {
 
 type RenderableValue<T = unknown> = Attributes | Readonly<Attributes> | Readonly<Attributes[]> | Effect<T> | Primitive | Renderable;
 
-type RenderedGroup = { elements: Elements, fragment: DocumentFragment | Node | null };
-
 type Template = {
     fragment: DocumentFragment;
     html: string;
@@ -79,6 +72,7 @@ type Template = {
 export type {
     Attributes,
     Effect, Element, Elements,
-    Renderable, RenderableReactive, RenderableTemplate, RenderableValue, RenderedGroup,
+    HydrateResult,
+    Renderable, RenderableReactive, RenderableTemplate, RenderableValue,
     Template
 };

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!;