@esportsplus/template 0.16.1 → 0.18.0

package/src/slot/effect.ts

@@ -0,0 +1,74 @@
+import { effect } from '@esportsplus/reactivity';
+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;
+
+    if (this.group) {
+        remove([this.group]);
+        this.group = undefined;
+    }
+
+    if (value == null || type !== 'object') {
+        let textnode = this.textnode;
+
+        if (textnode) {
+            nodeValue.call(textnode, String(value));
+        }
+        else {
+            textnode = this.textnode = text( String(value) );
+        }
+
+        if (!textnode.isConnected) {
+            anchor.after(textnode);
+        }
+    }
+    else {
+        let fragment = render(anchor, value);
+
+        if (!fragment) {
+            return;
+        }
+
+        this.group = {
+            head: firstChild.call(fragment),
+            tail: lastChild.call(fragment)
+        };
+
+        anchor.after(fragment);
+    }
+}
+
+
+export default (anchor: Element, fn: Function) => {
+    let context = {
+            group: undefined as SlotGroup | undefined,
+            textnode: undefined as Element | undefined
+        },
+        state = STATE_HYDRATING;
+
+    ondisconnect(
+        anchor,
+        effect(() => {
+            let value = fn();
+
+            if (state === STATE_HYDRATING) {
+                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

@@ -0,0 +1,12 @@
+import { Element } from '~/types';
+import effect from './effect';
+import render from './render';
+
+
+export default (anchor: Element, value: unknown): void => {
+    if (typeof value === 'function') {
+        return effect(anchor, value as Function);
+    }
+
+    anchor.after(render(anchor, value));
+};

package/src/slot/reactive.ts

@@ -0,0 +1,177 @@
+import { root, ReactiveArray } from '@esportsplus/reactivity';
+import { EMPTY_FRAGMENT } from '~/constants';
+import { Fragment, RenderableReactive, SlotGroup } from '~/types';
+import { append } from '~/utilities/fragment';
+import { cloneNode, firstChild, lastChild } from '~/utilities/node';
+import { remove } from './cleanup';
+
+
+class ReactiveArraySlot<T> {
+    array: ReactiveArray<T[]>;
+    fragment = cloneNode.call(EMPTY_FRAGMENT) as Fragment;
+    marker: Element;
+    nodes: SlotGroup[] = [];
+    template: (
+        this: ReactiveArray<T[]>,
+        ...args: Parameters< Parameters<ReactiveArray<T[]>['map']>[0] >
+    ) => SlotGroup;
+
+
+    constructor(anchor: Element, array: ReactiveArray<T[]>, template: RenderableReactive['template']) {
+        let fragment = this.fragment;
+
+        this.array = array;
+        this.marker = anchor;
+        this.template = function (data, i) {
+            let frag = template.call(this, data, i).fragment,
+                group = {
+                    head: firstChild.call(frag),
+                    tail: lastChild.call(frag)
+                };
+
+            append.call(fragment, frag);
+
+            return group;
+        };
+
+
+        let render = () => {
+                root(() => this.render());
+            };
+
+        array.on('clear', () => this.clear());
+        array.on('reverse', 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('splice', ({ deleteCount, items, start }) => {
+            root(() => this.splice(start, deleteCount, ...items));
+        });
+        array.on('unshift', ({ items }) => {
+            root(() => this.unshift(items));
+        });
+
+        if (array.length) {
+            render();
+        }
+    }
+
+
+    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) {
+        let node = this.nodes[index];
+
+        if (node) {
+            return node.tail || node.head;
+        }
+
+        return this.marker;
+    }
+
+    clear() {
+        remove(this.nodes);
+    }
+
+    pop() {
+        let group = this.nodes.pop();
+
+        if (group) {
+            remove([group]);
+        }
+    }
+
+    push(items: T[]) {
+        let anchor = this.anchor(),
+            array = this.array,
+            length = this.nodes.length;
+
+        this.nodes.length = length + items.length;
+
+        for (let i = 0, n = items.length; i < n; i++) {
+            this.nodes[i + length] = this.template.call(array, items[i], i);
+        }
+        anchor.after(this.fragment);
+    }
+
+    render() {
+        let nodes = this.nodes;
+
+        if (nodes.length) {
+            remove(nodes);
+        }
+
+        nodes = this.array.map(this.template);
+        this.marker.after(this.fragment);
+    }
+
+    shift() {
+        let group = this.nodes.shift();
+
+        if (group) {
+            remove([group]);
+        }
+    }
+
+    splice(start: number, stop: number = this.nodes.length, ...items: T[]) {
+        if (!items.length) {
+            return remove(this.nodes.splice(start, stop));
+        }
+
+        let array = this.array,
+            n = items.length,
+            nodes = new Array(n);
+
+        for (let i = 0; i < n; i++) {
+            nodes[i] = this.template.call(array, items[i], i);
+        }
+
+        remove(this.nodes.splice(start, stop, ...nodes));
+        this.anchor(start - 1).after(this.fragment);
+    }
+
+    unshift(items: T[]) {
+        let array = this.array,
+            n = items.length,
+            nodes = new Array(n);
+
+        for (let i = 0; i < n; i++) {
+            nodes[i] = this.template.call(array, items[i], i);
+        }
+
+        this.nodes.unshift(...nodes);
+        this.marker.after(this.fragment);
+    }
+}
+
+
+export default (anchor: Element, renderable: RenderableReactive) => {
+    let { array, template } = renderable,
+        slot = new ReactiveArraySlot(anchor, array, template);
+
+    if (array.length) {
+        root(() => {
+            slot.nodes = array.map(slot.template);
+        });
+    }
+
+    return slot.fragment;
+};

package/src/slot/render.ts

@@ -0,0 +1,117 @@
+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 { 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;
+    }
+
+    if (typeof input !== 'object') {
+        return RENDERABLE_TEXT;
+    }
+
+    if (RENDERABLE in input) {
+        return input[RENDERABLE];
+    }
+
+    if (isArray(input)) {
+        return RENDERABLE_ARRAY;
+    }
+
+    let nodeType = (input as any).nodeType;
+
+    // Document Fragment
+    if (nodeType === 11) {
+        return RENDERABLE_FRAGMENT;
+    }
+
+    if (nodeType !== undefined) {
+        return RENDERABLE_NODE;
+    }
+
+    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;
+
+        case RENDERABLE_NODE:
+            append.call(fragment, input as Element);
+            break;
+
+        case RENDERABLE_NODE_LIST:
+            append.call(fragment, ...input as Element[]);
+            break;
+    }
+
+    return fragment;
+};

package/src/svg.ts

@@ -1,9 +1,8 @@
 import html from './html';
-import { RenderableTemplate } from './types';
 
 
 const svg = html.bind(null) as typeof html & {
-    sprite: <T>(symbol: string) => RenderableTemplate<T>
+    sprite: (symbol: string) => ReturnType<typeof html>
 };
 
 svg.sprite = (symbol: string) => {

package/src/types.ts

@@ -1,8 +1,9 @@
 import { ReactiveArray } from '@esportsplus/reactivity';
-import { RENDERABLE, RENDERABLE_REACTIVE, RENDERABLE_TEMPLATE } from './constants';
-import { firstChild } from './utilities';
+import { RENDERABLE, RENDERABLE_HTML_FRAGMENT, RENDERABLE_HTML_REACTIVE_ARRAY } from './constants';
+import { firstChild } from './utilities/node';
 import attributes from './attributes';
 import slot from './slot';
+import html from './html';
 
 
 type Attribute = Primitive | Effect<Primitive | Primitive[]>;
@@ -24,38 +25,43 @@ type Attributes = {
 
 type Effect<T> = () => EffectResponse<T>;
 
-type EffectResponse<T> = T extends [] ? EffectResponse<T[number]>[] : Primitive | Renderable<T>;
+type EffectResponse<T> = T extends [] ? (Primitive | Renderable)[] : Primitive | Renderable;
 
 type Element = HTMLElement & Attributes & Record<PropertyKey, unknown>;
 
 type Elements = Element[];
 
-type Fragment = DocumentFragment | Node;
+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<T = unknown> = RenderableReactive<T> | RenderableTemplate<T>;
+type Renderable = Fragment | Primitive | RenderableReactive | RenderableTemplate;
 
-type RenderableReactive<T = unknown> = Readonly<{
-    [RENDERABLE]: typeof RENDERABLE_REACTIVE;
-    literals: null;
+type RenderableReactive = Readonly<{
+    [RENDERABLE]: typeof RENDERABLE_HTML_REACTIVE_ARRAY;
+    array: ReactiveArray<unknown[]>;
     template: (
-        this: ThisParameterType< Parameters<ReactiveArray<T>['map']>[0] >,
-        ...args: Parameters< Parameters<ReactiveArray<T>['map']>[0] >
-    ) => RenderableTemplate<T>;
-    values: ReactiveArray<T>;
+        this: ReactiveArray<unknown[]>,
+        ...args: Parameters< Parameters<ReactiveArray<unknown[]>['map']>[0] >
+    ) => ReturnType<typeof html>;
 }>;
 
-type RenderableTemplate<T = unknown> = {
-    [RENDERABLE]: typeof RENDERABLE_TEMPLATE;
+type RenderableTemplate = {
+    [RENDERABLE]: typeof RENDERABLE_HTML_FRAGMENT;
+    fragment: Fragment;
     literals: TemplateStringsArray;
-    template: Template | null;
-    values: (RenderableValue<T> | RenderableValue<T>[])[];
 };
 
-type RenderableValue<T = unknown> = Attributes | Readonly<Attributes> | Readonly<Attributes[]> | Effect<T> | Primitive | Renderable;
+type RenderableValue<T = unknown> = Attributes | Readonly<Attributes> | Readonly<Attributes[]> | Effect<T> | Fragment | Primitive | RenderableReactive;
+
+type RenderableValues = RenderableValue | RenderableValue[];
+
+type SlotGroup = {
+    head: Element;
+    tail: Element;
+};
 
 type Template = {
     fragment: DocumentFragment;
@@ -77,6 +83,7 @@ export type {
     Attributes,
     Effect, Element, Elements,
     Fragment,
-    Renderable, RenderableReactive, RenderableTemplate, RenderableValue,
+    Renderable, RenderableReactive, RenderableTemplate, RenderableValue, RenderableValues,
+    SlotGroup,
     Template
 };

package/src/utilities/element.ts

@@ -0,0 +1,28 @@
+let getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor,
+    prototype = Element.prototype;
+
+
+const addEventListener = prototype.addEventListener;
+
+const className = getOwnPropertyDescriptor(prototype, 'className')!.set!;
+
+const innerHTML = getOwnPropertyDescriptor(prototype, 'innerHTML')!.set!;
+
+const firstElementChild = getOwnPropertyDescriptor(prototype, 'firstElementChild')!.get!;
+
+const nextElementSibling = getOwnPropertyDescriptor(prototype, 'nextElementSibling')!.get!;
+
+const removeAttribute = prototype.removeAttribute;
+
+const setAttribute = prototype.setAttribute;
+
+
+export {
+    addEventListener,
+    className,
+    innerHTML,
+    firstElementChild,
+    nextElementSibling,
+    removeAttribute,
+    setAttribute
+};

package/src/utilities/fragment.ts

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

package/src/utilities/node.ts

@@ -0,0 +1,26 @@
+let getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor,
+    prototype = Node.prototype;
+
+
+const cloneNode = prototype.cloneNode;
+
+const firstChild = getOwnPropertyDescriptor(prototype, 'firstChild')!.get!;
+
+const lastChild = getOwnPropertyDescriptor(prototype, 'lastChild')!.get!;
+
+const nextSibling = getOwnPropertyDescriptor(prototype, 'nextSibling')!.get!;
+
+const nodeValue = getOwnPropertyDescriptor(prototype, 'nodeValue')!.set!;
+
+const parentElement = getOwnPropertyDescriptor(prototype, 'parentElement')!.get!;
+
+const previousSibling = getOwnPropertyDescriptor(prototype, 'previousSibling')!.get!;
+
+
+export {
+    cloneNode,
+    firstChild,
+    lastChild,
+    nextSibling, nodeValue,
+    parentElement, previousSibling
+};

package/src/utilities/queue.ts

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

package/src/utilities/text.ts

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

package/build/slot.d.ts

@@ -1,21 +0,0 @@
-import { Element, Elements, Fragment } from './types.js';
-declare class Slot {
-    marker: Element;
-    nodes: Elements[];
-    text: Element | null;
-    constructor(marker: Element);
-    get length(): number;
-    set length(n: number);
-    anchor(index?: number): Element;
-    clear(): this;
-    pop(): this;
-    push(fragment: Fragment, ...nodes: Elements[]): this;
-    render(input: unknown, state?: number): this;
-    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) => void;
-export default _default;
-export { ondisconnect, Slot };