@esportsplus/template 0.15.19 → 0.16.1

package/src/slot.ts

@@ -1,56 +1,32 @@
-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';
 
 
 const CLEANUP_KEY = Symbol();
 
+const CONNECTED = 0;
 
-let cleanup = queue<VoidFunction[]>(64),
-    scheduled = false,
-    template = fragment('');
-
-
-function after(anchor: Element, groups: HydrateResult[]) {
-    let n = groups.length;
-
-    if (n === 0) {
-        return [];
-    }
+const HYDRATING = 1;
 
-    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];
-
-            append.call(fragment, f);
-            elements.push(e);
-        }
-    }
-
-    anchor.after(fragment);
-
-    return elements;
-}
+let cleanup = queue<VoidFunction[]>(64),
+    scheduled = false;
 
-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];
+function remove(groups: Elements[]) {
+    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();
@@ -60,61 +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;
     }
 
-    if (isArray(input)) {
-        for (let i = 0, n = input.length; i < n; i++) {
-            render(elements, fragment, input[i]);
+    let type = typeof 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 (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];
+    else if (type === 'string' || type === 'number') {
+        let element = text( type === 'string' ? input as string : String(input) );
 
-                append.call(fragment, f);
-                elements.push(e);
-            }
+        if (slot) {
+            slot.text = element;
         }
-        else {
-            let { elements: e, fragment: f } = hydrate.static(input as RenderableTemplate<unknown>);
 
-            append.call(fragment, f);
-            elements.push(e);
+        append.call(fragment, element);
+
+        if (elements) {
+            elements.push([element]);
+        }
+    }
+    else if (isArray(input)) {
+        for (let i = 0, n = input.length; i < n; i++) {
+            render(anchor, elements, fragment, input[i], slot);
         }
     }
     else if (isInstanceOf(input, NodeList)) {
-        let e: Elements = [];
+        append.call(fragment, ...input);
 
-        for (let node = firstChild.call(input); node; node = nextSibling.call(node)) {
-            e.push(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 ]);
-    }
-    else {
-        let element = text( typeof input === 'string' ? input : String(input) );
 
-        if (slot) {
-            slot.text = element;
+        if (elements) {
+            elements.push([ input as Element ]);
         }
-
-        append.call(fragment, element);
-        elements.push([ element ]);
     }
 }
 
@@ -166,54 +136,68 @@ 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);
+        }
     }
 
 
     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);
-        this.nodes.length = 0;
-        this.text = null;
+        if (this.text) {
+            this.nodes.push([this.text]);
+            this.text = null;
+        }
+
+        remove(this.nodes);
+
+        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) {
-        if (isFunction(input)) {
+    render(input: unknown, state = HYDRATING) {
+        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()));
+                    if (state === HYDRATING) {
+                        this.render(v, state);
+                        state = CONNECTED;
                     }
-                    else {
+                    else if (state === CONNECTED) {
                         raf.add(() => {
-                            this.render(v);
+                            this.render(v, state);
                         });
                     }
                 })
@@ -222,29 +206,20 @@ class Slot {
             return this;
         }
 
-        if (this.text) {
-            let type = typeof input;
+        let text = this.text;
 
-            if (type === 'object' && input !== null) {
-            }
-            else if (this.text.isConnected) {
-                nodeValue.call(
-                    this.text,
-                    (type === 'string' || type === 'number') ? 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;
     }
@@ -252,25 +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[]) {
-        return remove(
-            ...this.nodes.splice(
-                start,
-                stop,
-                ...after(this.anchor(start), groups)
-            )
-        );
+    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 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;
     }
 }
 
@@ -281,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,7 +63,11 @@ type Template = {
     literals: TemplateStringsArray;
     slots: {
         fn: typeof attributes.spread | typeof slot;
-        path: typeof firstChild[];
+        path: {
+            absolute: typeof firstChild[],
+            parent: typeof firstChild[],
+            relative: typeof firstChild[]
+        };
         slot: number;
     }[] | null;
 };
@@ -72,7 +76,7 @@ type Template = {
 export type {
     Attributes,
     Effect, Element, Elements,
-    HydrateResult,
+    Fragment,
     Renderable, RenderableReactive, RenderableTemplate, RenderableValue,
     Template
 };