@esportsplus/template 0.26.6 → 0.28.0

package/src/slot/array.ts

@@ -1,29 +1,47 @@
-import { root, ReactiveArray } from '@esportsplus/reactivity';
-import { EMPTY_FRAGMENT } from '~/constants';
-import { RenderableReactive, SlotGroup } from '~/types';
+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 } from '~/utilities/node';
+import { cloneNode, firstChild, lastChild, nextSibling } from '~/utilities/node';
 import { ondisconnect, remove } from './cleanup';
+import marker from '~/utilities/marker';
+import raf from '~/utilities/raf';
+import html from '~/html';
+
+
+type ArraySlotOp<T> =
+    | { items: T[]; op: 'concat' }
+    | { deleteCount: number; items: T[]; op: 'splice'; start: number }
+    | { items: T[]; op: 'push' }
+    | { items: T[]; op: 'unshift' }
+    | { op: 'clear' }
+    | { op: 'pop' }
+    | { op: 'reverse' }
+    | { op: 'shift' }
+    | { op: 'sort'; order: number[] };
 
 
 class ArraySlot<T> {
-    array: ReactiveArray<T>;
-    fragment: Node;
-    marker: Element;
-    nodes: SlotGroup[] = [];
-    template: (...args: Parameters< RenderableReactive<T>['template'] >) => SlotGroup;
+    private queue: ArraySlotOp<T>[] = [];
+    private marker: Element;
+    private nodes: SlotGroup[] = [];
+    private scheduled: boolean = false;
+    private signal;
+    private template: (...args: Parameters<(value: T) => ReturnType<typeof html>>) => SlotGroup;
 
+    readonly fragment: Node;
 
-    constructor(anchor: Element, array: ReactiveArray<T>, template: RenderableReactive<T>['template']) {
+
+    constructor(private array: ReactiveArray<T>, template: ((value: T) => ReturnType<typeof html>)) {
         let fragment = this.fragment = cloneNode.call(EMPTY_FRAGMENT);
 
-        this.array = array;
-        this.marker = anchor;
-        this.template = function (data, i) {
+        this.marker = marker.cloneNode();
+        this.signal = signal(array.length);
+        this.template = function (data) {
             let dispose: VoidFunction,
                 frag = root((d) => {
                     dispose = d;
-                    return template(data, i);
+                    return template(data);
                 }),
                 group = {
                     head: firstChild.call(frag),
@@ -36,45 +54,46 @@ class ArraySlot<T> {
             return group;
         };
 
-        array.on('clear', () => this.clear());
-        array.on('reverse', () => {
-            root(() => this.render());
+        append.call(fragment, this.marker);
+
+        if (array.length) {
+            root(() => {
+                this.nodes = array.map(this.template);
+            });
+        }
+
+        array.on('clear', () => {
+            this.queue.length = 0;
+            this.schedule({ op: 'clear' });
+        });
+        array.on('concat', ({ items }) => {
+            this.schedule({ items, op: 'concat' });
+        });
+        array.on('pop', () => {
+            this.schedule({ op: 'pop' });
         });
-        array.on('pop', () => this.pop());
         array.on('push', ({ items }) => {
-            root(() => this.push(items));
+            this.schedule({ items, op: 'push' });
+        });
+        array.on('reverse', () => {
+            this.schedule({ op: 'reverse' });
         });
-        array.on('shift', () => this.shift());
-        array.on('sort', () => {
-            root(() => this.render());
+        array.on('shift', () => {
+            this.schedule({ op: 'shift' });
+        });
+        array.on('sort', ({ order }) => {
+            this.schedule({ op: 'sort', order });
         });
         array.on('splice', ({ deleteCount, items, start }) => {
-            root(() => this.splice(start, deleteCount, ...items));
+            this.schedule({ deleteCount, items, op: 'splice', start });
         });
         array.on('unshift', ({ items }) => {
-            root(() => this.unshift(items));
+            this.schedule({ items, op: 'unshift' });
         });
     }
 
 
-    get length() {
-        return this.nodes.length;
-    }
-
-    set length(n: number) {
-        if (n >= this.nodes.length) {
-            return;
-        }
-        else if (n === 0) {
-            this.clear();
-        }
-        else {
-            this.splice(n);
-        }
-    }
-
-
-    anchor(index: number = this.nodes.length - 1) {
+    private anchor(index: number = this.nodes.length - 1) {
         let node = this.nodes[index];
 
         if (node) {
@@ -84,12 +103,11 @@ class ArraySlot<T> {
         return this.marker;
     }
 
-    clear() {
+    private clear() {
         remove(...this.nodes.splice(0));
-
     }
 
-    pop() {
+    private pop() {
         let group = this.nodes.pop();
 
         if (group) {
@@ -97,7 +115,7 @@ class ArraySlot<T> {
         }
     }
 
-    push(items: T[]) {
+    private push(items: T[]) {
         let anchor = this.anchor();
 
         this.nodes.push( ...items.map(this.template) );
@@ -105,16 +123,63 @@ class ArraySlot<T> {
         anchor.after(this.fragment);
     }
 
-    render() {
-        if (this.nodes.length) {
-            remove(...this.nodes.splice(0));
+    private schedule(op: ArraySlotOp<T>) {
+        this.queue.push(op);
+
+        if (this.scheduled) {
+            return;
         }
 
-        this.nodes = this.array.map(this.template);
-        this.marker.after(this.fragment);
+        this.scheduled = true;
+
+        raf(() => {
+            let queue = this.queue;
+
+            this.queue.length = 0;
+
+            root(() => {
+                for (let i = 0, n = queue.length; i < n; i++) {
+                    let op = queue[i];
+
+                    switch (op.op) {
+                        case 'clear':
+                            this.clear();
+                            break;
+                        case 'concat':
+                            this.push(op.items);
+                            break;
+                        case 'pop':
+                            this.pop();
+                            break;
+                        case 'push':
+                            this.push(op.items);
+                            break;
+                        case 'reverse':
+                            this.nodes.reverse();
+                            this.sync();
+                            break;
+                        case 'shift':
+                            this.shift();
+                            break;
+                        case 'sort':
+                            this.sort(op.order);
+                            break;
+                        case 'splice':
+                            this.splice(op.start, op.deleteCount, op.items);
+                            break;
+                        case 'unshift':
+                            this.unshift(op.items);
+                            break;
+                    }
+                }
+            });
+
+            set(this.signal, this.nodes.length);
+            this.scheduled = false;
+        });
     }
 
-    shift() {
+    private shift() {
         let group = this.nodes.shift();
 
         if (group) {
@@ -122,7 +187,29 @@ class ArraySlot<T> {
         }
     }
 
-    splice(start: number, stop: number = this.nodes.length, ...items: T[]) {
+    private sort(order: number[]) {
+        let nodes = this.nodes,
+            n = nodes.length;
+
+        if (n !== order.length) {
+            remove(...nodes.splice(0));
+
+            this.nodes = this.array.map(this.template);
+            this.marker.after(this.fragment);
+            return;
+        }
+
+        let sorted = new Array(n) as SlotGroup[];
+
+        for (let i = 0; i < n; i++) {
+            sorted[i] = nodes[order[i]];
+        }
+
+        this.nodes = sorted;
+        this.sync();
+    }
+
+    private splice(start: number, stop: number = this.nodes.length, items: T[]) {
         if (!items.length) {
             remove(...this.nodes.splice(start, stop));
             return;
@@ -132,22 +219,42 @@ class ArraySlot<T> {
         this.anchor(start - 1).after(this.fragment);
     }
 
-    unshift(items: T[]) {
-        this.nodes.unshift(...items.map(this.template));
+    private sync() {
+        let nodes = this.nodes,
+            n = nodes.length;
+
+        if (!n) {
+            return;
+        }
+
+        for (let i = 0; i < n; i++) {
+            let group = nodes[i],
+                next: Node | null,
+                node: Node | null = group.head;
+
+            while (node) {
+                next = node === group.tail ? null : nextSibling.call(node);
+
+                append.call(this.fragment, node);
+                node = next;
+            }
+        }
+
         this.marker.after(this.fragment);
     }
-}
 
+    private unshift(items: T[]) {
+        this.nodes.unshift(...items.map(this.template));
+        this.marker.after(this.fragment);
+    }
 
-export default <T>(anchor: Element, renderable: RenderableReactive<T>) => {
-    let array = renderable.array,
-        slot = new ArraySlot(anchor, array, renderable.template);
 
-    if (array.length) {
-        root(() => {
-            slot.nodes = array.map(slot.template);
-        });
+    get length() {
+        return read(this.signal);
     }
+}
+
+Object.defineProperty(ArraySlot.prototype, ARRAY_SLOT, { value: true });
+
 
-    return slot.fragment;
-};
+export { ArraySlot };

package/src/slot/cleanup.ts

@@ -16,9 +16,9 @@ const remove = (...groups: SlotGroup[]) => {
             tail = group.tail || head;
 
         while (tail) {
-            if (CLEANUP in tail) {
-                fns = tail[CLEANUP] as VoidFunction[];
+            fns = tail[CLEANUP] as VoidFunction[] | undefined;
 
+            if (fns !== undefined) {
                 while (fn = fns.pop()) {
                     fn();
                 }

package/src/slot/effect.ts

@@ -1,8 +1,8 @@
 import { effect } from '@esportsplus/reactivity';
 import { Element, Renderable, SlotGroup } from '~/types';
 import { firstChild, lastChild, nodeValue } from '~/utilities/node'
-import { raf } from '~/utilities/queue'
 import { remove } from './cleanup';
+import raf from '~/utilities/raf'
 import text from '~/utilities/text';
 import render from './render';
 
@@ -24,22 +24,27 @@ class EffectSlot {
     anchor: Element;
     disposer: VoidFunction;
     group: SlotGroup | null = null;
+    scheduled = false;
     textnode: Node | null = null;
 
 
     constructor(anchor: Element, fn: (dispose?: VoidFunction) => Renderable<any>) {
-        let dispose = fn.length ? () => this.dispose() : undefined;
+        let dispose = fn.length ? () => this.dispose() : undefined,
+            slot = this;
 
         this.anchor = anchor;
-        this.disposer = effect(() => {
+        this.disposer = effect(function () {
             let value = read( fn(dispose) );
 
-            if (!this.disposer) {
-                this.update(value);
+            if (!slot.disposer) {
+                slot.update(value);
             }
-            else {
-                raf.add(() => {
-                    this.update(value);
+            else if (!slot.scheduled) {
+                slot.scheduled = true;
+
+                raf(() => {
+                    slot.scheduled = false;
+                    slot.update(this.value);
                 });
             }
         });
@@ -72,15 +77,19 @@ class EffectSlot {
         }
 
         if (typeof value !== 'object') {
+            if (typeof value !== 'string') {
+                value = String(value);
+            }
+
             if (textnode) {
-                nodeValue.call(textnode, String(value));
+                nodeValue.call(textnode, value);
 
                 if (!textnode.isConnected) {
                     anchor.after(textnode);
                 }
             }
             else {
-                anchor.after( this.textnode = text( String(value) ) );
+                anchor.after( this.textnode = text(value as string) );
             }
         }
         else {
@@ -104,6 +113,4 @@ class EffectSlot {
 }
 
 
-export default (anchor: Element, fn: (dispose?: VoidFunction) => Renderable<any>) => {
-    new EffectSlot(anchor, fn);
-};
+export { EffectSlot };

package/src/slot/index.ts

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

package/src/slot/render.ts

@@ -1,10 +1,10 @@
 import { isArray } from '@esportsplus/utilities';
-import { EMPTY_FRAGMENT, RENDERABLE } from '~/constants';
-import { Element, RenderableReactive } from '~/types';
+import { ARRAY_SLOT, EMPTY_FRAGMENT } from '~/constants';
+import { Element } from '~/types';
 import { cloneNode, lastChild } from '~/utilities/node';
 import { append } from '~/utilities/fragment';
+import { ArraySlot } from './array';
 import text from '~/utilities/text';
-import array from './array';
 
 
 export default function render(anchor: Element, value: unknown): Node {
@@ -16,19 +16,30 @@ export default function render(anchor: Element, value: unknown): Node {
         return text(value as any);
     }
 
-    if (RENDERABLE in value) {
-        return array(anchor, value as RenderableReactive<unknown>);
+    if ((value as any)[ARRAY_SLOT] === true) {
+        return (value as ArraySlot<unknown>).fragment;
     }
 
-    if ('nodeType' in value) {
+    if ((value as any).nodeType !== undefined) {
         return value as Node;
     }
 
+    let n = (value as any).length;
+
+    if (typeof n === 'number') {
+        if (n === 0) {
+            return EMPTY_FRAGMENT;
+        }
+        else if (n === 1) {
+            return render(anchor, (value as any)[0]);
+        }
+    }
+
     if (isArray(value)) {
         let fragment = cloneNode.call(EMPTY_FRAGMENT);
 
-        for (let i = 0, n = (value as unknown[]).length; i < n; i++) {
-            append.call(fragment, render(anchor, (value as unknown[])[i]));
+        for (let i = 0; i < n; i++) {
+            append.call(fragment, render(anchor, value[i]));
             anchor = lastChild.call(fragment);
         }
 
@@ -38,7 +49,7 @@ export default function render(anchor: Element, value: unknown): Node {
     if (value instanceof NodeList) {
         let fragment = cloneNode.call(EMPTY_FRAGMENT);
 
-        for (let i = 0, n = value.length; i < n; i++) {
+        for (let i = 0; i < n; i++) {
             append.call(fragment, value[i]);
         }
 

package/src/types.ts

@@ -1,9 +1,7 @@
-import { ReactiveArray } from '@esportsplus/reactivity';
-import { RENDERABLE, RENDERABLE_HTML_REACTIVE_ARRAY } from './constants';
 import { firstChild } from './utilities/node';
+import { ArraySlot } from './slot/array';
 import attributes from './attributes';
 import slot from './slot';
-import html from './html';
 
 
 type Attribute = Effect<Primitive | Primitive[]> | ((...args: any[]) => void) | Primitive;
@@ -29,13 +27,7 @@ type Element = HTMLElement & Attributes<any>;
 // - Importing from ^ causes 'cannot be named without a reference to...' error
 type Primitive = bigint | boolean | null | number | string | undefined;
 
-type Renderable<T> = DocumentFragment | Effect<T> | Node | NodeList | Primitive | RenderableReactive<T> | Renderable<T>[];
-
-type RenderableReactive<T> = Readonly<{
-    [RENDERABLE]: typeof RENDERABLE_HTML_REACTIVE_ARRAY;
-    array: ReactiveArray<T>;
-    template: (value: T, i: number) => ReturnType<typeof html>;
-}>;
+type Renderable<T> = DocumentFragment | ArraySlot<T> | Effect<T> | Node | NodeList | Primitive | Renderable<T>[];
 
 type SlotGroup = {
     head: Element;
@@ -57,7 +49,7 @@ type Template = {
 export type {
     Attribute, Attributes,
     Effect, Element,
-    Renderable, RenderableReactive,
+    Renderable,
     SlotGroup,
     Template
 };

package/src/utilities/marker.ts

@@ -0,0 +1,6 @@
+import { SLOT_HTML } from '~/constants';
+import { fragment } from './fragment';
+import { firstChild } from './node';
+
+
+export default firstChild.call( fragment(SLOT_HTML) );

package/src/utilities/raf.ts

@@ -0,0 +1 @@
+export default globalThis?.requestAnimationFrame;

package/build/utilities/queue.d.ts

@@ -1,2 +0,0 @@
-declare const raf: import("@esportsplus/tasks/build/factory").Scheduler;
-export { raf };

package/build/utilities/queue.js

@@ -1,3 +0,0 @@
-import { raf as r } from '@esportsplus/tasks';
-const raf = r();
-export { raf };

package/src/utilities/queue.ts

@@ -1,7 +0,0 @@
-import { raf as r } from '@esportsplus/tasks';
-
-
-const raf = r();
-
-
-export { raf };