@esportsplus/template 0.18.0 → 0.19.0

package/src/slot/cleanup.ts

@@ -20,8 +20,7 @@ function schedule() {
 
 function task() {
     try {
-        let fns,
-            fn,
+        let fns, fn,
             n = cleanup.length;
 
         while ((fns = cleanup.next()) && n--) {

package/src/slot/effect.ts

@@ -3,21 +3,22 @@ import { STATE_HYDRATING, STATE_NONE } from '~/constants';
 import { Element, SlotGroup } from '~/types';
 import { firstChild, lastChild, nodeValue } from '~/utilities/node'
 import { raf } from '~/utilities/queue'
-import { ondisconnect } from '~/slot/cleanup';
 import { remove } from './cleanup';
 import text from '~/utilities/text';
 import render from './render';
 
 
-function update(this: { group?: SlotGroup, textnode?: Element }, anchor: Element, value: unknown) {
-    let type = typeof value;
-
+function update(this: { group?: SlotGroup, textnode?: Node }, anchor: Element, value: unknown) {
     if (this.group) {
         remove([this.group]);
         this.group = undefined;
     }
 
-    if (value == null || type !== 'object') {
+    if (value == null || value === false) {
+        value = '';
+    }
+
+    if (typeof value !== 'object') {
         let textnode = this.textnode;
 
         if (textnode) {
@@ -32,18 +33,17 @@ function update(this: { group?: SlotGroup, textnode?: Element }, anchor: Element
         }
     }
     else {
-        let fragment = render(anchor, value);
-
-        if (!fragment) {
-            return;
-        }
+        let fragment = render(anchor, value),
+            head = firstChild.call(fragment);
 
-        this.group = {
-            head: firstChild.call(fragment),
-            tail: lastChild.call(fragment)
-        };
+        if (head) {
+            this.group = {
+                head,
+                tail: lastChild.call(fragment)
+            };
 
-        anchor.after(fragment);
+            anchor.after(fragment);
+        }
     }
 }
 
@@ -51,24 +51,21 @@ function update(this: { group?: SlotGroup, textnode?: Element }, anchor: Element
 export default (anchor: Element, fn: Function) => {
     let context = {
             group: undefined as SlotGroup | undefined,
-            textnode: undefined as Element | undefined
+            textnode: undefined as Node | undefined
         },
         state = STATE_HYDRATING;
 
-    ondisconnect(
-        anchor,
-        effect(() => {
-            let value = fn();
+    effect(() => {
+        let value = fn();
 
-            if (state === STATE_HYDRATING) {
+        if (state === STATE_HYDRATING) {
+            update.call(context, anchor, value);
+            state = STATE_NONE;
+        }
+        else if (state === STATE_NONE) {
+            raf.add(() => {
                 update.call(context, anchor, value);
-                state = STATE_NONE;
-            }
-            else if (state === STATE_NONE) {
-                raf.add(() => {
-                    update.call(context, anchor, value);
-                });
-            }
-        })
-    );
+            });
+        }
+    });
 };

package/src/slot/index.ts

@@ -5,8 +5,9 @@ import render from './render';
 
 export default (anchor: Element, value: unknown): void => {
     if (typeof value === 'function') {
-        return effect(anchor, value as Function);
+        effect(anchor, value as Function);
+    }
+    else {
+        anchor.after( render(anchor, value) );
     }
-
-    anchor.after(render(anchor, value));
 };

package/src/slot/reactive.ts

@@ -1,14 +1,14 @@
 import { root, ReactiveArray } from '@esportsplus/reactivity';
 import { EMPTY_FRAGMENT } from '~/constants';
-import { Fragment, RenderableReactive, SlotGroup } from '~/types';
+import { RenderableReactive, SlotGroup } from '~/types';
 import { append } from '~/utilities/fragment';
 import { cloneNode, firstChild, lastChild } from '~/utilities/node';
-import { remove } from './cleanup';
+import { ondisconnect, remove } from './cleanup';
 
 
 class ReactiveArraySlot<T> {
     array: ReactiveArray<T[]>;
-    fragment = cloneNode.call(EMPTY_FRAGMENT) as Fragment;
+    fragment: Node;
     marker: Element;
     nodes: SlotGroup[] = [];
     template: (
@@ -18,45 +18,45 @@ class ReactiveArraySlot<T> {
 
 
     constructor(anchor: Element, array: ReactiveArray<T[]>, template: RenderableReactive['template']) {
-        let fragment = this.fragment;
+        let fragment = this.fragment = cloneNode.call(EMPTY_FRAGMENT);
 
         this.array = array;
         this.marker = anchor;
         this.template = function (data, i) {
-            let frag = template.call(this, data, i).fragment,
+            let dispose: VoidFunction,
+                frag = root((d) => {
+                    dispose = d;
+                    return template.call(this, data, i);
+                }),
                 group = {
                     head: firstChild.call(frag),
                     tail: lastChild.call(frag)
                 };
 
             append.call(fragment, frag);
+            ondisconnect(group.head, dispose!);
 
             return group;
         };
 
-
-        let render = () => {
-                root(() => this.render());
-            };
-
         array.on('clear', () => this.clear());
-        array.on('reverse', render);
+        array.on('reverse', () => {
+            root(() => this.render());
+        });
         array.on('pop', () => this.pop());
         array.on('push', ({ items }) => {
             root(() => this.push(items));
         });
         array.on('shift', () => this.shift());
-        array.on('sort', render);
+        array.on('sort', () => {
+            root(() => this.render());
+        });
         array.on('splice', ({ deleteCount, items, start }) => {
             root(() => this.splice(start, deleteCount, ...items));
         });
         array.on('unshift', ({ items }) => {
             root(() => this.unshift(items));
         });
-
-        if (array.length) {
-            render();
-        }
     }
 
 

package/src/slot/render.ts

@@ -1,117 +1,50 @@
 import { isArray } from '@esportsplus/utilities';
-import {
-    EMPTY_FRAGMENT,
-    RENDERABLE,
-    RENDERABLE_ARRAY, RENDERABLE_FRAGMENT, RENDERABLE_HTML_FRAGMENT, RENDERABLE_HTML_REACTIVE_ARRAY,
-    RENDERABLE_NODE, RENDERABLE_NODE_LIST, RENDERABLE_TEXT, RENDERABLE_VOID
-} from '~/constants';
-import { Element, Fragment, RenderableReactive, RenderableTemplate } from '~/types';
-import { cloneNode } from '~/utilities/node';
+import { EMPTY_FRAGMENT, RENDERABLE } from '~/constants';
+import { Element, RenderableReactive } from '~/types';
+import { cloneNode, lastChild } from '~/utilities/node';
 import { append } from '~/utilities/fragment';
 import text from '~/utilities/text';
 import reactive from './reactive';
 
 
-function type(input: unknown) {
-    if (input === false || input == null || input === '') {
-        return RENDERABLE_VOID;
+export default function render(anchor: Element, input: unknown): Node {
+    if (input == null || input === false || input === '') {
+        return EMPTY_FRAGMENT;
     }
 
     if (typeof input !== 'object') {
-        return RENDERABLE_TEXT;
+        return text(input as any);
     }
 
-    if (RENDERABLE in input) {
-        return input[RENDERABLE];
+    if ('nodeType' in input) {
+        return input as Node;
     }
 
-    if (isArray(input)) {
-        return RENDERABLE_ARRAY;
+    if (RENDERABLE in input) {
+        return reactive(anchor, input as RenderableReactive);
     }
 
-    let nodeType = (input as any).nodeType;
+    if (isArray(input)) {
+        let fragment = cloneNode.call(EMPTY_FRAGMENT);
 
-    // Document Fragment
-    if (nodeType === 11) {
-        return RENDERABLE_FRAGMENT;
-    }
+        for (let i = 0, n = (input as unknown[]).length; i < n; i++) {
+            append.call(fragment, render(anchor, (input as unknown[])[i]));
+            anchor = lastChild.call(fragment);
+        }
 
-    if (nodeType !== undefined) {
-        return RENDERABLE_NODE;
+        return fragment;
     }
 
     if (input instanceof NodeList) {
-        return RENDERABLE_NODE_LIST;
-    }
-
-    return RENDERABLE_TEXT;
-}
-
-function loop(fragment: Node, input: unknown) {
-    let t = type(input);
-
-    switch (t) {
-        case RENDERABLE_HTML_REACTIVE_ARRAY:
-            throw new Error('@esportsplus/template: reactive arrays cannot be defined within an slot array value');
-
-        case RENDERABLE_VOID:
-            return;
-
-        case RENDERABLE_ARRAY:
-            for (let i = 0, n = (input as unknown[]).length; i < n; i++) {
-                loop(fragment, (input as unknown[])[i])
-            }
-            return;
-
-        case RENDERABLE_NODE_LIST:
-            append.call(fragment, ...input as Element[]);
-            return;
-
-        default:
-            append.call(fragment, input as Element)
-            return;
-    }
-}
-
-let scratchpad = cloneNode.call(EMPTY_FRAGMENT);
-
-
-export default function render(anchor: Element, input: unknown): Node {
-    let fragment = scratchpad,
-        t = type(input);
-
-    switch (t) {
-        case RENDERABLE_VOID:
-            break;
-
-        case RENDERABLE_TEXT:
-            append.call(fragment, text(input as string));
-            break;
-
-        case RENDERABLE_HTML_FRAGMENT:
-            return (input as RenderableTemplate).fragment;
-
-        case RENDERABLE_HTML_REACTIVE_ARRAY:
-            return reactive(anchor, input as RenderableReactive);
-
-        case RENDERABLE_ARRAY:
-            for (let i = 0, n = (input as unknown[]).length; i < n; i++) {
-                loop(fragment, (input as unknown[])[i]);
-            }
-
-            break;
-
-        case RENDERABLE_FRAGMENT:
-            return input as Fragment;
+        let fragment = cloneNode.call(EMPTY_FRAGMENT),
+            nodes = Array.from(input as NodeList);
 
-        case RENDERABLE_NODE:
-            append.call(fragment, input as Element);
-            break;
+        for (let i = 0, n = nodes.length; i < n; i++) {
+            append.call(fragment, nodes[i]);
+        }
 
-        case RENDERABLE_NODE_LIST:
-            append.call(fragment, ...input as Element[]);
-            break;
+        return fragment;
     }
 
-    return fragment;
+    return text(input as any);
 };

package/src/types.ts

@@ -1,5 +1,5 @@
 import { ReactiveArray } from '@esportsplus/reactivity';
-import { RENDERABLE, RENDERABLE_HTML_FRAGMENT, RENDERABLE_HTML_REACTIVE_ARRAY } from './constants';
+import { RENDERABLE, RENDERABLE_HTML_REACTIVE_ARRAY } from './constants';
 import { firstChild } from './utilities/node';
 import attributes from './attributes';
 import slot from './slot';
@@ -29,15 +29,11 @@ type EffectResponse<T> = T extends [] ? (Primitive | Renderable)[] : Primitive |
 
 type Element = HTMLElement & Attributes & Record<PropertyKey, unknown>;
 
-type Elements = Element[];
-
-type Fragment = (DocumentFragment | Node) & Record<PropertyKey, unknown>;
-
 // Copied from '@esportsplus/utilities'
 // - Importing from ^ causes 'cannot be named without a reference to...' error
 type Primitive = bigint | boolean | null | number | string | undefined;
 
-type Renderable = Fragment | Primitive | RenderableReactive | RenderableTemplate;
+type Renderable = DocumentFragment | Node | NodeList | Primitive | RenderableReactive | Renderable[];
 
 type RenderableReactive = Readonly<{
     [RENDERABLE]: typeof RENDERABLE_HTML_REACTIVE_ARRAY;
@@ -48,15 +44,7 @@ type RenderableReactive = Readonly<{
     ) => ReturnType<typeof html>;
 }>;
 
-type RenderableTemplate = {
-    [RENDERABLE]: typeof RENDERABLE_HTML_FRAGMENT;
-    fragment: Fragment;
-    literals: TemplateStringsArray;
-};
-
-type RenderableValue<T = unknown> = Attributes | Readonly<Attributes> | Readonly<Attributes[]> | Effect<T> | Fragment | Primitive | RenderableReactive;
-
-type RenderableValues = RenderableValue | RenderableValue[];
+type RenderableValue<T = unknown> = Attributes | Readonly<Attributes> | Readonly<Attributes[]> | Effect<T> | Primitive | RenderableReactive;
 
 type SlotGroup = {
     head: Element;
@@ -81,9 +69,8 @@ type Template = {
 
 export type {
     Attributes,
-    Effect, Element, Elements,
-    Fragment,
-    Renderable, RenderableReactive, RenderableTemplate, RenderableValue, RenderableValues,
+    Effect, Element,
+    Renderable, RenderableReactive, RenderableValue,
     SlotGroup,
     Template
 };

package/src/utilities/fragment.ts

@@ -2,18 +2,17 @@ import { innerHTML } from './element';
 import { cloneNode } from './node';
 
 
-let prototype = DocumentFragment.prototype,
-    template = document.createElement('template');
+let scratchpad = document.createElement('template');
 
 
-const append = prototype.append;
+const append = DocumentFragment.prototype.append;
 
-const fragment = (html: string) => {
-    innerHTML.call(template, html);
+const fragment = (html: string): DocumentFragment => {
+    innerHTML.call(scratchpad, html);
 
-    let content = template.content;
+    let content = scratchpad.content;
 
-    template = cloneNode.call(template) as HTMLTemplateElement;
+    scratchpad = cloneNode.call(scratchpad) as HTMLTemplateElement;
 
     return content;
 };

package/src/utilities/node.ts

@@ -2,6 +2,8 @@ let getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor,
     prototype = Node.prototype;
 
 
+const appendChild = prototype.appendChild;
+
 const cloneNode = prototype.cloneNode;
 
 const firstChild = getOwnPropertyDescriptor(prototype, 'firstChild')!.get!;
@@ -18,6 +20,7 @@ const previousSibling = getOwnPropertyDescriptor(prototype, 'previousSibling')!.
 
 
 export {
+    appendChild,
     cloneNode,
     firstChild,
     lastChild,

package/src/utilities/text.ts

@@ -1,5 +1,4 @@
 import { cloneNode, nodeValue } from './node';
-import { Element } from '~/types';
 
 
 let text = document.createTextNode('');
@@ -12,5 +11,5 @@ export default (value: string) => {
         nodeValue.call(element, value);
     }
 
-    return element as Element;
+    return element;
 };

package/build/html/hydrate.d.ts

@@ -1,3 +0,0 @@
-import { Fragment, RenderableValues, Template } from '../types.js';
-declare const _default: ({ fragment, slots }: Template, values: RenderableValues[]) => Fragment;
-export default _default;

package/build/html/hydrate.js

@@ -1,34 +0,0 @@
-import { cloneNode } from '../utilities/node.js';
-export default ({ fragment, slots }, values) => {
-    let clone = cloneNode.call(fragment, true);
-    if (slots === null) {
-        return clone;
-    }
-    let node, nodePath, parent, parentPath;
-    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 i = 0, n = pp.length; i < n; i++) {
-                    parent = pp[i].call(parent);
-                }
-            }
-        }
-        if (pr !== nodePath) {
-            node = parent;
-            nodePath = path.absolute;
-            for (let i = 0, n = pr.length; i < n; i++) {
-                node = pr[i].call(node);
-            }
-        }
-        fn(node, values[slot]);
-    }
-    return clone;
-};

package/src/html/hydrate.ts

@@ -1,53 +0,0 @@
-import { Fragment, RenderableValues, Template } from '~/types';
-import { cloneNode } from '~/utilities/node';
-
-
-export default ({ fragment, slots }: Template, values: RenderableValues[]): Fragment => {
-    let clone = cloneNode.call(fragment, true);
-
-    if (slots === null) {
-        return clone as Fragment;
-    }
-
-    let node,
-        nodePath,
-        parent,
-        parentPath;
-
-    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 i = 0, n = pp.length; i < n; i++) {
-                    parent = pp[i].call(parent);
-                }
-            }
-        }
-
-        if (pr !== nodePath) {
-            node = parent;
-            nodePath = path.absolute;
-
-            for (let i = 0, n = pr.length; i < n; i++) {
-                node = pr[i].call(node);
-            }
-        }
-
-        // @ts-ignore
-        fn(node, values[slot]);
-    }
-
-    return clone as Fragment;
-}