@esportsplus/template 0.15.20 → 0.16.1

package/build/constants.d.ts

@@ -1,3 +1,4 @@
+declare const EMPTY_FRAGMENT: DocumentFragment;
 declare const NODE_CLOSING = 1;
 declare const NODE_ELEMENT = 3;
 declare const NODE_SLOT = 4;
@@ -11,4 +12,4 @@ declare const RENDERABLE_TEMPLATE: unique symbol;
 declare const SLOT_HTML = "<!--$-->";
 declare const SLOT_MARKER = "{{$}}";
 declare const SLOT_MARKER_LENGTH: number;
-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 };
+export { EMPTY_FRAGMENT, 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,3 +1,5 @@
+import { fragment } from './utilities.js';
+const EMPTY_FRAGMENT = fragment('');
 const NODE_CLOSING = 1;
 const NODE_COMMENT = 2;
 const NODE_ELEMENT = 3;
@@ -31,4 +33,4 @@ const RENDERABLE_TEMPLATE = Symbol();
 const SLOT_HTML = '<!--$-->';
 const SLOT_MARKER = '{{$}}';
 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_HTML, SLOT_MARKER, SLOT_MARKER_LENGTH };
+export { EMPTY_FRAGMENT, 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/cache.d.ts

@@ -1,5 +1,5 @@
-import { RenderableTemplate, Template } from '../types.js';
+import { Template } from '../types.js';
 declare const _default: {
-    get: <T>({ literals, values }: RenderableTemplate<T>) => Template;
+    get: (literals: TemplateStringsArray) => Template;
 };
 export default _default;

package/build/html/cache.js

@@ -3,8 +3,9 @@ import { firstChild, firstElementChild, fragment, nextElementSibling, nextSiblin
 import { spread } from '../attributes.js';
 import s from '../slot.js';
 let cache = new WeakMap();
-function build(literals, values) {
-    if (values.length === 0) {
+function build(literals) {
+    let n = literals.length - 1;
+    if (n === 0) {
         return set(literals, literals[0]);
     }
     let buffer = '', html = literals.join(SLOT_MARKER)
@@ -13,21 +14,26 @@ function build(literals, values) {
             children: 0,
             elements: 0,
             path: []
-        }], parsed = html.split(SLOT_MARKER), slot = 0, slots = [], total = values.length;
+        }], parsed = html.split(SLOT_MARKER), slot = 0, slots = [];
     for (let match of html.matchAll(REGEX_SLOT_NODES)) {
         let parent = levels[level], type = match[1] === undefined ? NODE_SLOT : (NODE_WHITELIST[match[1].toLowerCase()] || NODE_ELEMENT);
         if ((match.index || 1) - 1 > index) {
             parent.children++;
         }
         if (type === NODE_ELEMENT || type === NODE_VOID) {
-            let attr = match[2];
+            let attr = match[2], path = parent.path.length
+                ? methods(parent.elements, parent.path, firstElementChild, nextElementSibling)
+                : methods(parent.children, [], firstChild, nextSibling);
             if (attr) {
-                let i = attr.indexOf(SLOT_MARKER), path = methods(parent.children, parent.path, firstChild, nextSibling);
+                let i = attr.indexOf(SLOT_MARKER), p = {
+                    absolute: path,
+                    parent: parent.path,
+                    relative: path.slice(parent.path.length)
+                };
                 while (i !== -1) {
                     slots.push({
                         fn: spread,
-                        parent: parent.path,
-                        path,
+                        path: p,
                         slot
                     });
                     buffer += parsed[slot++];
@@ -38,23 +44,25 @@ function build(literals, values) {
                 levels[++level] = {
                     children: 0,
                     elements: 0,
-                    path: parent.path.length
-                        ? methods(parent.elements, parent.path, firstElementChild, nextElementSibling)
-                        : methods(parent.children, [], firstChild, nextSibling)
+                    path
                 };
             }
             parent.elements++;
         }
         else if (type === NODE_SLOT) {
+            let relative = methods(parent.children, [], firstChild, nextSibling);
             buffer += parsed[slot] + SLOT_HTML;
             slots.push({
                 fn: s,
-                parent: parent.path,
-                path: methods(parent.children, [], firstChild, nextSibling),
+                path: {
+                    absolute: [...parent.path, ...relative],
+                    parent: parent.path,
+                    relative
+                },
                 slot: slot++
             });
         }
-        if (slot === total) {
+        if (slot === n) {
             buffer += parsed[slot];
             break;
         }
@@ -86,7 +94,7 @@ function set(literals, html, slots = null) {
     cache.set(literals, template);
     return template;
 }
-const get = ({ literals, values }) => {
-    return cache.get(literals) || build(literals, values);
+const get = (literals) => {
+    return cache.get(literals) || build(literals);
 };
 export default { get };

package/build/html/hydrate.d.ts

@@ -1,7 +1,9 @@
-import { HydrateResult, RenderableReactive, RenderableTemplate } from '../types.js';
+import { Elements, Fragment, RenderableReactive, RenderableTemplate } from '../types.js';
 import { Slot } from '../slot.js';
+declare function reactive<T>(elements: Elements[], fragment: Fragment, renderable: RenderableReactive<T>, slot: Slot): void;
+declare function hydrate<T>(elements: Elements[] | null, fragment: Fragment, renderable: RenderableTemplate<T>): void;
 declare const _default: {
-    reactive: <T>(renderable: RenderableReactive<T>, slot: Slot) => HydrateResult[];
-    static: <T>(renderable: RenderableTemplate<T>) => HydrateResult;
+    reactive: typeof reactive;
+    static: typeof hydrate;
 };
 export default _default;

package/build/html/hydrate.js

@@ -1,58 +1,85 @@
 import { root } from '@esportsplus/reactivity';
-import { cloneNode, firstChild, nextSibling } from '../utilities.js';
+import { EMPTY_FRAGMENT } from '../constants.js';
+import { cloneNode } from '../utilities.js';
 import cache from './cache.js';
-function reactive(renderable, slot) {
+function reactive(elements, fragment, renderable, slot) {
     let array = renderable.values, factory = renderable.template, refresh = () => {
-        slot.render(root(() => array.map(template)));
+        root(() => array.map(template));
+        slot.clear();
+        slot.anchor().after(fragment);
+        slot.nodes = elements;
+        reset();
+    }, reset = () => {
+        elements = [];
+        fragment = cloneNode.call(EMPTY_FRAGMENT);
     }, template = function (data, i) {
-        let renderable = factory.call(this, data, i);
-        return hydrate(renderable, cache.get(renderable));
+        hydrate(elements, fragment, factory.call(this, data, i));
     };
-    array.on('pop', () => {
-        slot.pop();
-    });
-    array.on('push', ({ items }) => {
-        slot.push(...root(() => array.map(template, array.length - items.length)));
-    });
+    array.on('clear', () => slot.clear());
+    array.on('pop', () => slot.pop());
     array.on('reverse', refresh);
-    array.on('shift', () => {
-        slot.shift();
-    });
+    array.on('shift', () => slot.shift());
     array.on('sort', refresh);
+    array.on('push', ({ items }) => {
+        let anchor = slot.anchor();
+        elements = slot.nodes;
+        root(() => array.map(template, array.length - items.length));
+        anchor.after(fragment);
+        reset();
+    });
     array.on('splice', ({ deleteCount: d, items: i, start: s }) => {
-        slot.splice(s, d, ...root(() => array.map(template, s, i.length)));
+        if (array.length === 0) {
+            slot.clear();
+            return;
+        }
+        root(() => array.map(template, s, i.length));
+        slot.splice(s, d, fragment, ...elements);
+        reset();
     });
     array.on('unshift', ({ items }) => {
-        slot.unshift(...root(() => array.map(template, 0, items.length)));
+        root(() => array.map(template, 0, items.length));
+        slot.unshift(fragment, ...elements);
+        reset();
     });
-    return array.map(template);
+    root(() => array.map(template));
+    reset();
 }
-function hydrate(renderable, template) {
-    let elements = [], fragment = cloneNode.call(template.fragment, true), slots = template.slots;
+function hydrate(elements, fragment, renderable) {
+    let { fragment: frag, slots } = cache.get(renderable.literals), clone = cloneNode.call(frag, true);
     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) {
-                node = fragment;
-                previous = path;
-                for (let o = 0, j = path.length; o < j; o++) {
-                    node = path[o].call(node);
+        let node, nodePath, parent, parentPath, values = renderable.values;
+        for (let i = 0, n = slots.length; i < n; i++) {
+            let { fn, path, slot } = slots[i], pp = path.parent, pr = path.relative;
+            if (pp !== parentPath) {
+                if (pp === nodePath) {
+                    parent = node;
+                    parentPath = nodePath;
+                    nodePath = undefined;
+                }
+                else {
+                    parent = clone;
+                    parentPath = pp;
+                    for (let o = 0, j = pp.length; o < j; o++) {
+                        parent = pp[o].call(parent);
+                    }
+                }
+            }
+            if (pr !== nodePath) {
+                node = parent;
+                nodePath = path.absolute;
+                for (let o = 0, j = pr.length; o < j; o++) {
+                    node = pr[o].call(node);
                 }
             }
             fn(node, values[slot]);
         }
     }
-    for (let element = firstChild.call(fragment); element; element = nextSibling.call(element)) {
-        elements.push(element);
+    if (elements) {
+        elements.push([...clone.childNodes]);
     }
-    return { elements, fragment };
+    fragment.appendChild(clone);
 }
 export default {
-    reactive: (renderable, slot) => {
-        return reactive(renderable, slot);
-    },
-    static: (renderable) => {
-        return hydrate(renderable, renderable.template || (renderable.template = cache.get(renderable)));
-    }
+    reactive,
+    static: hydrate
 };

package/build/render.d.ts

@@ -1,4 +1,4 @@
 import { Slot } from './slot.js';
 import { Renderable } from './types.js';
-declare const _default: (renderable: Renderable, parent: HTMLElement | Slot) => Slot;
+declare const _default: (renderable: Renderable, parent: HTMLElement | Slot) => void | Slot;
 export default _default;

package/build/slot.d.ts

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

package/build/slot.js

@@ -1,34 +1,20 @@
-import { effect, root } from '@esportsplus/reactivity';
-import { isArray, isFunction, isInstanceOf, isObject } from '@esportsplus/utilities';
-import { RENDERABLE, RENDERABLE_REACTIVE } from './constants.js';
+import { effect } from '@esportsplus/reactivity';
+import { isArray, isInstanceOf } from '@esportsplus/utilities';
+import { EMPTY_FRAGMENT, RENDERABLE, RENDERABLE_REACTIVE } from './constants.js';
 import { hydrate } from './html/index.js';
-import { append, cloneNode, firstChild, fragment, microtask, nextSibling, nodeValue, raf, text } from './utilities.js';
+import { append, cloneNode, microtask, 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 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;
-}
+let cleanup = queue(64), scheduled = false;
 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++) {
-            let item = group[j];
+    let group, item;
+    while (group = groups.pop()) {
+        while (item = group.pop()) {
             if (CLEANUP_KEY in item) {
                 cleanup.add(item[CLEANUP_KEY]);
+                item[CLEANUP_KEY] = null;
             }
             item.remove();
         }
@@ -36,52 +22,47 @@ function remove(groups) {
     if (!scheduled && cleanup.length) {
         schedule();
     }
-    return groups;
 }
-function render(elements, fragment, input, slot) {
+function render(anchor, elements, fragment, input, slot) {
     if (input === false || input == null || input === '') {
         return;
     }
     let type = typeof input;
-    if (type === 'string' || type === 'number') {
+    if (type === 'object' && RENDERABLE in input) {
+        if (input[RENDERABLE] === RENDERABLE_REACTIVE) {
+            slot ??= new Slot(anchor);
+            hydrate.reactive(slot.nodes, fragment, input, slot);
+        }
+        else {
+            hydrate.static(elements, fragment, input);
+        }
+    }
+    else 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]);
+        if (elements) {
+            elements.push([element]);
+        }
     }
     else 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, 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 {
-            let { elements: e, fragment: f } = hydrate.static(input);
-            append.call(fragment, f);
-            elements.push(e);
+            render(anchor, elements, fragment, input[i], slot);
         }
     }
     else if (isInstanceOf(input, NodeList)) {
-        let e = new Array(input.length), i = 0;
-        for (let node = firstChild.call(input); node; node = nextSibling.call(node)) {
-            e[i++] = node;
+        append.call(fragment, ...input);
+        if (elements) {
+            elements.push([...input]);
         }
-        append.call(fragment, ...e);
-        elements.push(e);
     }
     else if (isInstanceOf(input, Node)) {
         append.call(fragment, input);
-        elements.push([input]);
+        if (elements) {
+            elements.push([input]);
+        }
     }
 }
 function schedule() {
@@ -119,36 +100,46 @@ class Slot {
         return this.nodes.length;
     }
     set length(n) {
-        this.splice(n);
+        if (n >= this.nodes.length) {
+            return;
+        }
+        else if (n === 0) {
+            this.clear();
+        }
+        else {
+            this.splice(n);
+        }
     }
     anchor(index = this.nodes.length - 1) {
         let nodes = this.nodes[index];
         return nodes ? nodes[nodes.length - 1] : this.marker;
     }
     clear() {
+        if (this.text) {
+            this.nodes.push([this.text]);
+            this.text = null;
+        }
         remove(this.nodes);
-        this.nodes.length = 0;
-        this.text = null;
+        return this;
     }
     pop() {
         let group = this.nodes.pop();
-        if (!group) {
-            return undefined;
+        if (group) {
+            remove([group]);
         }
-        return remove([group]);
+        return this;
     }
-    push(...groups) {
-        return this.nodes.push(...after(this.anchor(), groups));
+    push(fragment, ...nodes) {
+        this.anchor().after(fragment);
+        this.nodes.push(...nodes);
+        return this;
     }
     render(input, state = HYDRATING) {
-        if (isFunction(input)) {
+        let type = typeof input;
+        if (type === 'function') {
             ondisconnect(this.marker, effect(() => {
                 let v = input();
-                if (isFunction(v)) {
-                    root(() => this.render(v(), state));
-                    state = CONNECTED;
-                }
-                else if (state === HYDRATING) {
+                if (state === HYDRATING) {
                     this.render(v, state);
                     state = CONNECTED;
                 }
@@ -160,41 +151,54 @@ class Slot {
             }));
             return this;
         }
-        if (this.text && this.text.isConnected) {
-            let type = typeof input;
-            if (input == null || type !== 'object') {
-                nodeValue.call(this.text, (type === 'number' || type === 'string') ? input : '');
-                return this;
-            }
+        let text = this.text;
+        if (text && text.isConnected && (input == null || type !== 'object')) {
+            nodeValue.call(text, (type === 'number' || type === 'string') ? input : '');
+        }
+        else {
+            this.clear();
+            let fragment = cloneNode.call(EMPTY_FRAGMENT);
+            render(this.marker, this.nodes, fragment, input, this);
+            this.marker.after(fragment);
         }
-        this.clear();
-        let fragment = cloneNode.call(template), nodes = [];
-        render(nodes, fragment, input, this);
-        this.marker.after(fragment);
-        this.nodes = nodes;
         return this;
     }
     shift() {
         let group = this.nodes.shift();
-        if (!group) {
-            return undefined;
+        if (group) {
+            remove([group]);
         }
-        return remove([group]);
+        return this;
     }
-    splice(start, stop = this.nodes.length, ...groups) {
-        if (!groups.length) {
-            return remove(this.nodes.splice(start, stop));
+    splice(start, stop = this.nodes.length, fragment, ...nodes) {
+        if (!fragment) {
+            remove(this.nodes.splice(start, stop));
         }
-        return remove(this.nodes.splice(start, stop, ...after(this.anchor(start), groups)));
+        else {
+            this.anchor(start).after(fragment);
+            remove(this.nodes.splice(start, stop, ...nodes));
+        }
+        return this;
     }
-    unshift(...groups) {
-        return this.nodes.unshift(...after(this.marker, groups));
+    unshift(fragment, ...nodes) {
+        this.marker.after(fragment);
+        this.nodes.unshift(...nodes);
+        return this;
     }
 }
 const ondisconnect = (element, fn) => {
     (element[CLEANUP_KEY] ??= []).push(fn);
 };
 export default (marker, value) => {
-    return new Slot(marker).render(value);
+    let type = typeof value;
+    if (type === 'function') {
+        new Slot(marker).render(value);
+    }
+    else {
+        let fragment = cloneNode.call(EMPTY_FRAGMENT);
+        render(marker, null, fragment, value);
+        marker.after(fragment);
+    }
+    ;
 };
 export { ondisconnect, Slot };

package/build/types.d.ts

@@ -20,10 +20,7 @@ type Effect<T> = () => EffectResponse<T>;
 type EffectResponse<T> = T extends [] ? EffectResponse<T[number]>[] : Primitive | Renderable<T>;
 type Element = HTMLElement & Attributes & Record<PropertyKey, unknown>;
 type Elements = Element[];
-type HydrateResult = {
-    elements: Elements;
-    fragment: DocumentFragment | Node;
-};
+type Fragment = DocumentFragment | Node;
 type Primitive = bigint | boolean | null | number | string | undefined;
 type Renderable<T = unknown> = RenderableReactive<T> | RenderableTemplate<T>;
 type RenderableReactive<T = unknown> = Readonly<{
@@ -32,7 +29,7 @@ type RenderableReactive<T = unknown> = Readonly<{
     template: (this: ThisParameterType<Parameters<ReactiveArray<T>['map']>[0]>, ...args: Parameters<Parameters<ReactiveArray<T>['map']>[0]>) => RenderableTemplate<T>;
     values: ReactiveArray<T>;
 }>;
-type RenderableTemplate<T> = {
+type RenderableTemplate<T = unknown> = {
     [RENDERABLE]: typeof RENDERABLE_TEMPLATE;
     literals: TemplateStringsArray;
     template: Template | null;
@@ -45,9 +42,12 @@ type Template = {
     literals: TemplateStringsArray;
     slots: {
         fn: typeof attributes.spread | typeof slot;
-        parent: typeof firstChild[];
-        path: typeof firstChild[];
+        path: {
+            absolute: typeof firstChild[];
+            parent: typeof firstChild[];
+            relative: typeof firstChild[];
+        };
         slot: number;
     }[] | null;
 };
-export type { Attributes, Effect, Element, Elements, HydrateResult, Renderable, RenderableReactive, RenderableTemplate, RenderableValue, Template };
+export type { Attributes, Effect, Element, Elements, Fragment, Renderable, RenderableReactive, RenderableTemplate, RenderableValue, Template };

package/package.json

@@ -2,7 +2,7 @@
   "author": "ICJR",
   "dependencies": {
     "@esportsplus/queue": "^0.1.0",
-    "@esportsplus/reactivity": "^0.12.4",
+    "@esportsplus/reactivity": "^0.13.2",
     "@esportsplus/tasks": "^0.2.1",
     "@esportsplus/utilities": "^0.22.1"
   },
@@ -14,7 +14,7 @@
   "private": false,
   "type": "module",
   "types": "./build/index.d.ts",
-  "version": "0.15.20",
+  "version": "0.16.1",
   "scripts": {
     "build": "tsc && tsc-alias",
     "-": "-"

package/src/constants.ts

@@ -1,3 +1,9 @@
+import { fragment } from './utilities';
+
+
+const EMPTY_FRAGMENT = fragment('');
+
+
 const NODE_CLOSING = 1;
 
 const NODE_COMMENT = 2;
@@ -51,6 +57,7 @@ const SLOT_MARKER_LENGTH = SLOT_MARKER.length;
 
 
 export {
+    EMPTY_FRAGMENT,
     NODE_CLOSING, NODE_ELEMENT, NODE_SLOT, NODE_VOID, NODE_WHITELIST,
     REGEX_EMPTY_TEXT_NODES, REGEX_SLOT_NODES,
     RENDERABLE, RENDERABLE_REACTIVE, RENDERABLE_TEMPLATE,

package/src/html/cache.ts

@@ -2,7 +2,7 @@ import {
     NODE_CLOSING, NODE_ELEMENT, NODE_SLOT, NODE_VOID, NODE_WHITELIST, REGEX_EMPTY_TEXT_NODES,
     REGEX_SLOT_NODES, SLOT_HTML, SLOT_MARKER, SLOT_MARKER_LENGTH
 } from '~/constants';
-import { RenderableTemplate, Template } from '~/types';
+import { Template } from '~/types';
 import { firstChild, firstElementChild, fragment, nextElementSibling, nextSibling } from '~/utilities';
 import { spread } from '~/attributes';
 import s from '~/slot';
@@ -11,8 +11,10 @@ import s from '~/slot';
 let cache = new WeakMap<TemplateStringsArray, Template>();
 
 
-function build(literals: TemplateStringsArray, values: unknown[]) {
-    if (values.length === 0) {
+function build(literals: TemplateStringsArray) {
+    let n = literals.length - 1;
+
+    if (n === 0) {
         return set(literals, literals[0]);
     }
 
@@ -25,12 +27,11 @@ function build(literals: TemplateStringsArray, values: unknown[]) {
         levels = [{
             children: 0,
             elements: 0,
-            path: [] as NonNullable<Template['slots']>[0]['path']
+            path: [] as NonNullable<Template['slots']>[number]['path']['parent']
         }],
         parsed = html.split(SLOT_MARKER),
         slot = 0,
-        slots: Template['slots'] = [],
-        total = values.length;
+        slots: Template['slots'] = [];
 
     for (let match of html.matchAll(REGEX_SLOT_NODES)) {
         let parent = levels[level],
@@ -42,17 +43,23 @@ function build(literals: TemplateStringsArray, values: unknown[]) {
         }
 
         if (type === NODE_ELEMENT || type === NODE_VOID) {
-            let attr = match[2];
+            let attr = match[2],
+                path = parent.path.length
+                    ? methods(parent.elements, parent.path, firstElementChild, nextElementSibling)
+                    : methods(parent.children, [], firstChild, nextSibling);
 
             if (attr) {
                 let i = attr.indexOf(SLOT_MARKER),
-                    path = methods(parent.children, parent.path, firstChild, nextSibling);
+                    p = {
+                        absolute: path,
+                        parent: parent.path,
+                        relative: path.slice(parent.path.length)
+                    };
 
                 while (i !== -1) {
                     slots.push({
                         fn: spread,
-                        parent: parent.path,
-                        path,
+                        path: p,
                         slot
                     });
 
@@ -65,25 +72,28 @@ function build(literals: TemplateStringsArray, values: unknown[]) {
                 levels[++level] = {
                     children: 0,
                     elements: 0,
-                    path: parent.path.length
-                        ? methods(parent.elements, parent.path, firstElementChild, nextElementSibling)
-                        : methods(parent.children, [], firstChild, nextSibling)
+                    path
                 };
             }
 
             parent.elements++;
         }
         else if (type === NODE_SLOT) {
+            let relative = methods(parent.children, [], firstChild, nextSibling);
+
             buffer += parsed[slot] + SLOT_HTML;
             slots.push({
                 fn: s,
-                parent: parent.path,
-                path: methods(parent.children, [], firstChild, nextSibling),
+                path: {
+                    absolute: [...parent.path, ...relative],
+                    parent: parent.path,
+                    relative
+                },
                 slot: slot++
             });
         }
 
-        if (slot === total) {
+        if (slot === n) {
             buffer += parsed[slot];
             break;
         }
@@ -127,8 +137,8 @@ function set(literals: TemplateStringsArray, html: string, slots: Template['slot
 }
 
 
-const get = <T>({ literals, values }: RenderableTemplate<T>) => {
-    return cache.get(literals) || build(literals, values);
+const get = (literals: TemplateStringsArray) => {
+    return cache.get(literals) || build(literals);
 };
 
 

package/src/html/hydrate.ts

@@ -1,62 +1,108 @@
 import { root } from '@esportsplus/reactivity';
-import { Element, Elements, HydrateResult, Renderable, RenderableReactive, RenderableTemplate, Template } from '~/types';
+import { EMPTY_FRAGMENT } from '~/constants';
+import { Elements, Fragment, RenderableReactive, RenderableTemplate } from '~/types';
 import { Slot } from '~/slot';
-import { cloneNode, firstChild, nextSibling } from '~/utilities';
+import { cloneNode } from '~/utilities';
 import cache from './cache';
 
 
-function reactive<T>(renderable: RenderableReactive<T>, slot: Slot) {
+function reactive<T>(elements: Elements[], fragment: Fragment, renderable: RenderableReactive<T>, slot: Slot) {
     let array = renderable.values,
         factory = renderable.template,
         refresh = () => {
-            slot.render( root(() => array.map(template)) );
+            root(() => array.map(template));
+
+            slot.clear();
+            slot.anchor().after(fragment);
+            slot.nodes = elements;
+
+            reset();
+        },
+        reset = () => {
+            elements = [];
+            fragment = cloneNode.call(EMPTY_FRAGMENT);
         },
         template = function(data, i) {
-            let renderable = factory.call(this, data, i);
+            hydrate(elements, fragment, factory.call(this, data, i));
+        } as (this: typeof array, ...args: Parameters<Parameters<typeof array['map']>[0]>) => void;
 
-            return hydrate<T>(renderable, cache.get(renderable));
-        } as (this: typeof array, ...args: Parameters<Parameters<typeof array['map']>[0]>) => HydrateResult;
+    array.on('clear', () => slot.clear());
+    array.on('pop', () => slot.pop());
+    array.on('reverse', refresh);
+    array.on('shift', () => slot.shift());
+    array.on('sort', refresh);
 
-    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();
+        let anchor = slot.anchor();
+
+        elements = slot.nodes;
+
+        root(() => array.map(template, array.length - items.length));
+
+        anchor.after(fragment);
+        reset();
     });
-    array.on('sort', refresh);
     array.on('splice', ({ deleteCount: d, items: i, start: s }) => {
-        slot.splice(s, d, ...root(() => array.map(template, s, i.length)));
+        if (array.length === 0) {
+            slot.clear();
+            return;
+        }
+
+        root(() => array.map(template, s, i.length))
+
+        slot.splice(s, d, fragment, ...elements);
+        reset();
     });
     array.on('unshift', ({ items }) => {
-        slot.unshift( ...root(() => array.map(template, 0, items.length)) );
+        root(() => array.map(template, 0, items.length))
+
+        slot.unshift(fragment, ...elements);
+        reset();
     });
 
-    return array.map(template);
+    root(() => array.map(template));
+    reset();
 }
 
-function hydrate<T>(renderable: Renderable<T>, template: Template): HydrateResult {
-    let elements: Elements = [],
-        fragment = cloneNode.call(template.fragment, true),
-        slots = template.slots;
+function hydrate<T>(elements: Elements[] | null, fragment: Fragment, renderable: RenderableTemplate<T>) {
+    let { fragment: frag, slots } = cache.get(renderable.literals),
+        clone = cloneNode.call(frag, true);
 
     if (slots !== null) {
         let node,
-            previous,
+            nodePath,
+            parent,
+            parentPath,
             values = renderable.values;
 
-        for (let i = slots.length - 1; i >= 0; i--) {
-            let { fn, path, slot } = slots[i];
+        for (let i = 0, n = slots.length; i < n; i++) {
+            let { fn, path, slot } = slots[i],
+                pp = path.parent,
+                pr = path.relative;
+
+            if (pp !== parentPath) {
+                if (pp === nodePath) {
+                    parent = node;
+                    parentPath = nodePath;
 
-            if (path !== previous) {
-                node = fragment;
-                previous = path;
+                    nodePath = undefined;
+                }
+                else {
+                    parent = clone;
+                    parentPath = pp;
 
-                for (let o = 0, j = path.length; o < j; o++) {
-                    node = path[o].call(node as Element);
+                    for (let o = 0, j = pp.length; o < j; o++) {
+                        parent = pp[o].call(parent);
+                    }
+                }
+            }
+
+            if (pr !== nodePath) {
+                node = parent;
+                nodePath = path.absolute;
+
+                for (let o = 0, j = pr.length; o < j; o++) {
+                    node = pr[o].call(node);
                 }
             }
 
@@ -65,19 +111,15 @@ function hydrate<T>(renderable: Renderable<T>, template: Template): HydrateResul
         }
     }
 
-    for (let element = firstChild.call(fragment as Element); element; element = nextSibling.call(element)) {
-        elements.push(element);
+    if (elements) {
+        elements.push([...clone.childNodes] as Elements);
     }
 
-    return { elements, fragment };
+    fragment.appendChild(clone)
 }
 
 
 export default {
-    reactive: <T>(renderable: RenderableReactive<T>, slot: Slot) => {
-        return reactive(renderable, slot);
-    },
-    static: <T>(renderable: RenderableTemplate<T>) => {
-        return hydrate(renderable, renderable.template || (renderable.template = cache.get(renderable)));
-    }
+    reactive,
+    static: hydrate
 };

package/src/slot.ts

@@ -1,9 +1,9 @@
-import { effect, root } from '@esportsplus/reactivity';
-import { isArray, isFunction, isInstanceOf, isObject  } from '@esportsplus/utilities';
-import { RENDERABLE, RENDERABLE_REACTIVE } from './constants';
+import { effect } from '@esportsplus/reactivity';
+import { isArray, isInstanceOf } from '@esportsplus/utilities';
+import { EMPTY_FRAGMENT, RENDERABLE, RENDERABLE_REACTIVE } from './constants';
 import { hydrate } from './html';
-import { Element, Elements, HydrateResult, RenderableReactive, RenderableTemplate } from './types';
-import { append, cloneNode, firstChild, fragment, microtask, nextSibling, nodeValue, raf, text } from './utilities'
+import { Element, Elements, Fragment, RenderableReactive, RenderableTemplate } from './types';
+import { append, cloneNode, microtask, nodeValue, raf, text } from './utilities'
 import queue from '@esportsplus/queue';
 
 
@@ -15,41 +15,18 @@ const HYDRATING = 1;
 
 
 let cleanup = queue<VoidFunction[]>(64),
-    scheduled = false,
-    template = fragment('');
-
-
-function after(anchor: Element, groups: HydrateResult[]) {
-    let n = groups.length;
-
-    if (n === 0) {
-        return [];
-    }
-
-    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);
+    scheduled = false;
 
-    return elements;
-}
 
 function remove(groups: Elements[]) {
-    for (let i = 0, n = groups.length; i < n; i++) {
-        let group = groups[i];
-
-        for (let j = 0, o = group.length; j < o; j++) {
-            let item = group[j];
+    let group,
+        item;
 
+    while (group = groups.pop()) {
+        while (item = group.pop()) {
             if (CLEANUP_KEY in item) {
                 cleanup.add(item[CLEANUP_KEY] as VoidFunction[]);
+                item[CLEANUP_KEY] = null;
             }
 
             item.remove();
@@ -59,64 +36,55 @@ function remove(groups: Elements[]) {
     if (!scheduled && cleanup.length) {
         schedule();
     }
-
-    return groups;
 }
 
-function render(elements: Elements[], fragment: DocumentFragment | Node, input: unknown, slot?: Slot) {
+function render(anchor: Element, elements: Elements[] | null, fragment: Fragment, input: unknown, slot?: Slot) {
     if (input === false || input == null || input === '') {
         return;
     }
 
     let type = typeof input;
 
-    if (type === 'string' || type === 'number') {
-        let element = text(type === 'string' ? input as string : String(input));
+    if (type === 'object' && RENDERABLE in (input as Record<PropertyKey, unknown>)) {
+        if ((input as Record<PropertyKey, unknown>)[RENDERABLE] === RENDERABLE_REACTIVE) {
+            slot ??= new Slot(anchor);
+            hydrate.reactive(slot.nodes, fragment, input as RenderableReactive, slot);
+        }
+        else {
+            hydrate.static(elements, fragment, input as RenderableTemplate);
+        }
+    }
+    else 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]);
+
+        if (elements) {
+            elements.push([element]);
+        }
     }
     else 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!);
-
-            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 {
-            let { elements: e, fragment: f } = hydrate.static(input as RenderableTemplate<unknown>);
-
-            append.call(fragment, f);
-            elements.push(e);
+            render(anchor, elements, fragment, input[i], slot);
         }
     }
     else if (isInstanceOf(input, NodeList)) {
-        let e: Elements = new Array(input.length),
-            i = 0;
+        append.call(fragment, ...input);
 
-        for (let node = firstChild.call(input); node; node = nextSibling.call(node)) {
-            e[i++] = node;
+        if (elements) {
+            elements.push([...input] as Elements);
         }
-
-        append.call(fragment, ...e);
-        elements.push(e);
     }
     else if (isInstanceOf(input, Node)) {
         append.call(fragment, input);
-        elements.push([ input as Element ]);
+
+        if (elements) {
+            elements.push([ input as Element ]);
+        }
     }
 }
 
@@ -168,7 +136,15 @@ class Slot {
     }
 
     set length(n: number) {
-        this.splice(n);
+        if (n >= this.nodes.length) {
+            return;
+        }
+        else if (n === 0) {
+            this.clear();
+        }
+        else {
+            this.splice(n);
+        }
     }
 
 
@@ -179,37 +155,43 @@ class Slot {
     }
 
     clear() {
+        if (this.text) {
+            this.nodes.push([this.text]);
+            this.text = null;
+        }
+
         remove(this.nodes);
-        this.nodes.length = 0;
-        this.text = null;
+
+        return this;
     }
 
     pop() {
         let group = this.nodes.pop();
 
-        if (!group) {
-            return undefined;
+        if (group) {
+            remove([group]);
         }
 
-        return remove([group]);
+        return this;
     }
 
-    push(...groups: HydrateResult[]) {
-        return this.nodes.push( ...after(this.anchor(), groups) );
+    push(fragment: Fragment, ...nodes: Elements[]) {
+        this.anchor().after(fragment);
+        this.nodes.push( ...nodes );
+
+        return this;
     }
 
     render(input: unknown, state = HYDRATING) {
-        if (isFunction(input)) {
+        let type = typeof input;
+
+        if (type === 'function') {
             ondisconnect(
                 this.marker,
                 effect(() => {
-                    let v = input();
+                    let v = (input as Function)();
 
-                    if (isFunction(v)) {
-                        root(() => this.render(v(), state));
-                        state = CONNECTED;
-                    }
-                    else if (state === HYDRATING) {
+                    if (state === HYDRATING) {
                         this.render(v, state);
                         state = CONNECTED;
                     }
@@ -224,24 +206,20 @@ class Slot {
             return this;
         }
 
-        if (this.text && this.text.isConnected) {
-            let type = typeof input;
+        let text = this.text;
 
-            if (input == null || type !== 'object') {
-                nodeValue.call(this.text, (type === 'number' || type === 'string') ? input : '');
-                return this;
-            }
+        if (text && text.isConnected && (input == null || type !== 'object')) {
+            nodeValue.call(text, (type === 'number' || type === 'string') ? input : '');
         }
+        else {
+            this.clear();
 
-        this.clear();
-
-        let fragment = cloneNode.call(template),
-            nodes: Elements[] = [];
+            let fragment = cloneNode.call(EMPTY_FRAGMENT);
 
-        render(nodes, fragment, input, this);
+            render(this.marker, this.nodes, fragment, input, this);
 
-        this.marker.after(fragment);
-        this.nodes = nodes;
+            this.marker.after(fragment);
+        }
 
         return this;
     }
@@ -249,29 +227,30 @@ class Slot {
     shift() {
         let group = this.nodes.shift();
 
-        if (!group) {
-            return undefined;
+        if (group) {
+            remove([group]);
         }
 
-        return remove([group]);
+        return this;
     }
 
-    splice(start: number, stop: number = this.nodes.length, ...groups: HydrateResult[]) {
-        if (!groups.length) {
-            return remove(this.nodes.splice(start, stop));
+    splice(start: number, stop: number = this.nodes.length, fragment?: Fragment, ...nodes: Elements[]) {
+        if (!fragment) {
+            remove( this.nodes.splice(start, stop) );
+        }
+        else {
+            this.anchor(start).after(fragment);
+            remove( this.nodes.splice(start, stop, ...nodes) )
         }
 
-        return remove(
-            this.nodes.splice(
-                start,
-                stop,
-                ...after(this.anchor(start), groups)
-            )
-        );
+        return this;
     }
 
-    unshift(...groups: HydrateResult[]) {
-        return this.nodes.unshift( ...after(this.marker, groups) );
+    unshift(fragment: Fragment, ...nodes: Elements[]) {
+        this.marker.after(fragment);
+        this.nodes.unshift( ...nodes );
+
+        return this;
     }
 }
 
@@ -282,6 +261,17 @@ const ondisconnect = (element: Element, fn: VoidFunction) => {
 
 
 export default (marker: Element, value: unknown) => {
-    return new Slot(marker).render(value);
+    let type = typeof value;
+
+    if (type === 'function') {
+        new Slot(marker).render(value);
+    }
+    else {
+        let fragment = cloneNode.call(EMPTY_FRAGMENT);
+
+        render(marker, null, fragment, value);
+
+        marker.after(fragment);
+    };
 };
 export { ondisconnect, Slot };

package/src/types.ts

@@ -30,7 +30,7 @@ type Element = HTMLElement & Attributes & Record<PropertyKey, unknown>;
 
 type Elements = Element[];
 
-type HydrateResult = { elements: Elements, fragment: DocumentFragment | Node };
+type Fragment = DocumentFragment | Node;
 
 // Copied from '@esportsplus/utilities'
 // - Importing from ^ causes 'cannot be named without a reference to...' error
@@ -48,7 +48,7 @@ type RenderableReactive<T = unknown> = Readonly<{
     values: ReactiveArray<T>;
 }>;
 
-type RenderableTemplate<T> = {
+type RenderableTemplate<T = unknown> = {
     [RENDERABLE]: typeof RENDERABLE_TEMPLATE;
     literals: TemplateStringsArray;
     template: Template | null;
@@ -63,8 +63,11 @@ type Template = {
     literals: TemplateStringsArray;
     slots: {
         fn: typeof attributes.spread | typeof slot;
-        parent: typeof firstChild[];
-        path: typeof firstChild[];
+        path: {
+            absolute: typeof firstChild[],
+            parent: typeof firstChild[],
+            relative: typeof firstChild[]
+        };
         slot: number;
     }[] | null;
 };
@@ -73,7 +76,7 @@ type Template = {
 export type {
     Attributes,
     Effect, Element, Elements,
-    HydrateResult,
+    Fragment,
     Renderable, RenderableReactive, RenderableTemplate, RenderableValue,
     Template
 };