@esportsplus/template 0.28.3 → 0.29.2

package/src/slot/array.ts

@@ -1,11 +1,8 @@
 import { read, root, set, signal, ReactiveArray } from '@esportsplus/reactivity';
 import { ARRAY_SLOT, EMPTY_FRAGMENT } from '~/constants';
-import { SlotGroup } from '~/types';
-import { append } from '~/utilities/fragment';
-import { cloneNode, firstChild, lastChild, nextSibling } from '~/utilities/node';
+import { Element, SlotGroup } from '~/types';
+import { clone, marker, raf } from '~/utilities';
 import { ondisconnect, remove } from './cleanup';
-import marker from '~/utilities/marker';
-import raf from '~/utilities/raf';
 import html from '~/html';
 
 
@@ -22,20 +19,20 @@ type ArraySlotOp<T> =
 
 
 class ArraySlot<T> {
-    private queue: ArraySlotOp<T>[] = [];
     private marker: Element;
     private nodes: SlotGroup[] = [];
-    private scheduled: boolean = false;
+    private queue: ArraySlotOp<T>[] = [];
+    private scheduled = false;
     private signal;
     private template: (...args: Parameters<(value: T) => ReturnType<typeof html>>) => SlotGroup;
 
-    readonly fragment: Node;
+    readonly fragment: DocumentFragment;
 
 
     constructor(private array: ReactiveArray<T>, template: ((value: T) => ReturnType<typeof html>)) {
-        let fragment = this.fragment = cloneNode.call(EMPTY_FRAGMENT);
+        let fragment = this.fragment = clone(EMPTY_FRAGMENT);
 
-        this.marker = marker.cloneNode();
+        this.marker = marker.cloneNode() as unknown as Element;
         this.signal = signal(array.length);
         this.template = function (data) {
             let dispose: VoidFunction,
@@ -44,17 +41,17 @@ class ArraySlot<T> {
                     return template(data);
                 }),
                 group = {
-                    head: firstChild.call(frag),
-                    tail: lastChild.call(frag)
+                    head: frag.firstChild as unknown as Element,
+                    tail: frag.lastChild as unknown as Element
                 };
 
-            append.call(fragment, frag);
+            fragment.append(frag);
             ondisconnect(group.head, dispose!);
 
             return group;
         };
 
-        append.call(fragment, this.marker);
+        fragment.append(this.marker);
 
         if (array.length) {
             root(() => {
@@ -118,8 +115,7 @@ class ArraySlot<T> {
     private push(items: T[]) {
         let anchor = this.anchor();
 
-        this.nodes.push( ...items.map(this.template) );
-
+        this.nodes.push(...items.map(this.template));
         anchor.after(this.fragment);
     }
 
@@ -135,7 +131,8 @@ class ArraySlot<T> {
         raf(() => {
             let queue = this.queue;
 
-            this.queue.length = 0;
+            this.queue = [];
+            this.scheduled = false;
 
             root(() => {
                 for (let i = 0, n = queue.length; i < n; i++) {
@@ -175,7 +172,6 @@ class ArraySlot<T> {
             });
 
             set(this.signal, this.nodes.length);
-            this.scheduled = false;
         });
     }
 
@@ -193,7 +189,6 @@ class ArraySlot<T> {
 
         if (n !== order.length) {
             remove(...nodes.splice(0));
-
             this.nodes = this.array.map(this.template);
             this.marker.after(this.fragment);
             return;
@@ -215,7 +210,7 @@ class ArraySlot<T> {
             return;
         }
 
-        remove( ...this.nodes.splice(start, stop, ...items.map(this.template)) );
+        remove(...this.nodes.splice(start, stop, ...items.map(this.template)));
         this.anchor(start - 1).after(this.fragment);
     }
 
@@ -233,9 +228,8 @@ class ArraySlot<T> {
                 node: Node | null = group.head;
 
             while (node) {
-                next = node === group.tail ? null : nextSibling.call(node);
-
-                append.call(this.fragment, node);
+                next = node === group.tail ? null : node.nextSibling;
+                this.fragment.append(node);
                 node = next;
             }
         }
@@ -257,4 +251,4 @@ class ArraySlot<T> {
 Object.defineProperty(ArraySlot.prototype, ARRAY_SLOT, { value: true });
 
 
-export { ArraySlot };
+export { ArraySlot };

package/src/slot/cleanup.ts

@@ -1,6 +1,5 @@
 import { CLEANUP } from '~/constants';
-import { previousSibling } from '~/utilities/node';
-import { SlotGroup } from '~/types';
+import { Element, SlotGroup } from '~/types';
 
 
 const ondisconnect = (element: Element, fn: VoidFunction) => {
@@ -24,7 +23,7 @@ const remove = (...groups: SlotGroup[]) => {
                 }
             }
 
-            next = previousSibling.call(tail);
+            next = tail.previousSibling as unknown as Element;
             tail.remove();
 
             if (head === tail) {
@@ -37,4 +36,4 @@ const remove = (...groups: SlotGroup[]) => {
 };
 
 
-export { ondisconnect, remove };
+export { ondisconnect, remove };

package/src/slot/effect.ts

@@ -1,9 +1,7 @@
 import { effect } from '@esportsplus/reactivity';
 import { Element, Renderable, SlotGroup } from '~/types';
-import { firstChild, lastChild, nodeValue } from '~/utilities/node'
 import { remove } from './cleanup';
-import raf from '~/utilities/raf'
-import text from '~/utilities/text';
+import { raf, text } from '~/utilities'
 import render from './render';
 
 
@@ -82,7 +80,7 @@ class EffectSlot {
             }
 
             if (textnode) {
-                nodeValue.call(textnode, value);
+                textnode.nodeValue = value as string;
 
                 if (!textnode.isConnected) {
                     anchor.after(textnode);
@@ -94,7 +92,7 @@ class EffectSlot {
         }
         else {
             let fragment = render(anchor, value),
-                head = firstChild.call(fragment);
+                head = fragment.firstChild;
 
             if (textnode?.isConnected) {
                 remove({ head: textnode as Element, tail: textnode as Element });
@@ -102,8 +100,8 @@ class EffectSlot {
 
             if (head) {
                 this.group = {
-                    head,
-                    tail: lastChild.call(fragment)
+                    head: head as Element,
+                    tail: fragment.lastChild as Element
                 };
 
                 anchor.after(fragment);
@@ -113,4 +111,4 @@ class EffectSlot {
 }
 
 
-export { EffectSlot };
+export { EffectSlot };

package/src/slot/index.ts

@@ -1,13 +1,7 @@
 import { Element } from '~/types';
-import { EffectSlot } from './effect';
 import render from './render';
 
 
 export default (anchor: Element, value: unknown): void => {
-    if (typeof value === 'function') {
-        new EffectSlot(anchor, value as ConstructorParameters<typeof EffectSlot>[1]);
-    }
-    else {
-        anchor.after( render(anchor, value) );
-    }
-};
+    anchor.after( render(anchor, value) );
+};

package/src/slot/render.ts

@@ -1,10 +1,8 @@
 import { isArray } from '@esportsplus/utilities';
 import { ARRAY_SLOT, EMPTY_FRAGMENT } from '~/constants';
 import { Element } from '~/types';
-import { cloneNode, lastChild } from '~/utilities/node';
-import { append } from '~/utilities/fragment';
+import { clone, text } from '~/utilities';
 import { ArraySlot } from './array';
-import text from '~/utilities/text';
 
 
 export default function render(anchor: Element, value: unknown): Node {
@@ -36,25 +34,25 @@ export default function render(anchor: Element, value: unknown): Node {
     }
 
     if (isArray(value)) {
-        let fragment = cloneNode.call(EMPTY_FRAGMENT);
+        let fragment = clone(EMPTY_FRAGMENT) as DocumentFragment;
 
         for (let i = 0; i < n; i++) {
-            append.call(fragment, render(anchor, value[i]));
-            anchor = lastChild.call(fragment);
+            fragment.append(render(anchor, value[i]));
+            anchor = fragment.lastChild as Element;
         }
 
         return fragment;
     }
 
     if (value instanceof NodeList) {
-        let fragment = cloneNode.call(EMPTY_FRAGMENT);
+        let fragment = clone(EMPTY_FRAGMENT) as DocumentFragment;
 
         for (let i = 0; i < n; i++) {
-            append.call(fragment, value[i]);
+            fragment.append(value[i]);
         }
 
         return fragment;
     }
 
     return text(value as any);
-};
+};

package/src/svg.ts

@@ -14,4 +14,4 @@ svg.sprite = (href: string) => {
 };
 
 
-export default svg;
+export default svg;