@esportsplus/template 0.16.1 → 0.17.0

package/src/slot/render.ts

@@ -0,0 +1,81 @@
+import { isArray } from '@esportsplus/utilities';
+import {
+    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 { append, text } from '~/utilities';
+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;
+
+    if (nodeType === 11) {
+        return RENDERABLE_FRAGMENT;
+    }
+
+    if (nodeType !== undefined) {
+        return RENDERABLE_NODE;
+    }
+
+    if (input instanceof NodeList) {
+        return RENDERABLE_NODE_LIST;
+    }
+}
+
+
+export default function render(anchor: Element, fragment: Fragment, input: unknown) {
+    let t = type(input);
+
+    switch (t) {
+        case RENDERABLE_VOID:
+            return;
+
+        case RENDERABLE_TEXT:
+            append.call(fragment, text(String(input)));
+            return;
+
+        case RENDERABLE_HTML_FRAGMENT:
+            append.call(fragment, (input as RenderableTemplate).fragment);
+            return;
+
+        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++) {
+                render(anchor, fragment, (input as unknown[])[i]);
+            }
+            return;
+
+        case RENDERABLE_FRAGMENT:
+            append.call(fragment, input as Fragment);
+            return;
+
+        case RENDERABLE_NODE:
+            append.call(fragment, input as Node);
+            return;
+
+        case RENDERABLE_NODE_LIST:
+            append.call(fragment, ...(input as NodeList));
+            return;
+    }
+};

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 { RENDERABLE, RENDERABLE_HTML_FRAGMENT, RENDERABLE_HTML_REACTIVE_ARRAY } from './constants';
 import { firstChild } from './utilities';
 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 | RenderableReactive;
 
-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.ts

@@ -2,7 +2,8 @@ import { micro as m, raf as r } from '@esportsplus/tasks';
 import { Element as E } from './types';
 
 
-let prototype,
+let getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor,
+    prototype,
     template = document.createElement('template'),
     t = document.createTextNode('');
 
@@ -18,15 +19,13 @@ const addEventListener = prototype.addEventListener;
 
 const removeEventListener = prototype.removeEventListener;
 
-const className = Object.getOwnPropertyDescriptor(prototype, 'className')!.set!;
+const className = getOwnPropertyDescriptor(prototype, 'className')!.set!;
 
-const innerHTML = Object.getOwnPropertyDescriptor(prototype, 'innerHTML')!.set!;
+const innerHTML = getOwnPropertyDescriptor(prototype, 'innerHTML')!.set!;
 
-const firstElementChild = Object.getOwnPropertyDescriptor(prototype, 'firstElementChild')!.get!;
+const firstElementChild = getOwnPropertyDescriptor(prototype, 'firstElementChild')!.get!;
 
-const nextElementSibling = Object.getOwnPropertyDescriptor(prototype, 'nextElementSibling')!.get!;
-
-const prepend = prototype.prepend;
+const nextElementSibling = getOwnPropertyDescriptor(prototype, 'nextElementSibling')!.get!;
 
 const removeAttribute = prototype.removeAttribute;
 
@@ -37,15 +36,17 @@ prototype = Node.prototype;
 
 const cloneNode = prototype.cloneNode;
 
-const firstChild = Object.getOwnPropertyDescriptor(prototype, 'firstChild')!.get!;
+const firstChild = getOwnPropertyDescriptor(prototype, 'firstChild')!.get!;
+
+const lastChild = getOwnPropertyDescriptor(prototype, 'lastChild')!.get!;
 
-const nextSibling = Object.getOwnPropertyDescriptor(prototype, 'nextSibling')!.get!;
+const nextSibling = getOwnPropertyDescriptor(prototype, 'nextSibling')!.get!;
 
-const nodeValue = Object.getOwnPropertyDescriptor(prototype, 'nodeValue')!.set!;
+const nodeValue = getOwnPropertyDescriptor(prototype, 'nodeValue')!.set!;
 
-const parentElement = Object.getOwnPropertyDescriptor(prototype, 'parentElement')!.get!;
+const parentElement = getOwnPropertyDescriptor(prototype, 'parentElement')!.get!;
 
-const parentNode = Object.getOwnPropertyDescriptor(prototype, 'parentNode')!.get!;
+const previousSibling = getOwnPropertyDescriptor(prototype, 'previousSibling')!.get!;
 
 
 const fragment = (html: string) => {
@@ -78,9 +79,10 @@ export {
     className, cloneNode,
     firstChild, firstElementChild, fragment,
     innerHTML,
+    lastChild,
     microtask,
     nextElementSibling, nextSibling, nodeValue,
-    parentElement, parentNode, prepend,
+    parentElement, previousSibling,
     raf, removeAttribute, removeEventListener,
     setAttribute,
     text

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 };

package/build/slot.js

@@ -1,204 +0,0 @@
-import { effect } from '@esportsplus/reactivity';
-import { isArray, isInstanceOf } from '@esportsplus/utilities';
-import { EMPTY_FRAGMENT, RENDERABLE, RENDERABLE_REACTIVE } from './constants.js';
-import { hydrate } from './html/index.js';
-import { append, cloneNode, microtask, nodeValue, raf, text } from './utilities.js';
-import queue from '@esportsplus/queue';
-const CLEANUP_KEY = Symbol();
-const CONNECTED = 0;
-const HYDRATING = 1;
-let cleanup = queue(64), scheduled = false;
-function remove(groups) {
-    let group, item;
-    while (group = groups.pop()) {
-        while (item = group.pop()) {
-            if (CLEANUP_KEY in item) {
-                cleanup.add(item[CLEANUP_KEY]);
-                item[CLEANUP_KEY] = null;
-            }
-            item.remove();
-        }
-    }
-    if (!scheduled && cleanup.length) {
-        schedule();
-    }
-}
-function render(anchor, elements, fragment, input, slot) {
-    if (input === false || input == null || input === '') {
-        return;
-    }
-    let type = typeof input;
-    if (type === 'object' && RENDERABLE in input) {
-        if (input[RENDERABLE] === RENDERABLE_REACTIVE) {
-            slot ??= new Slot(anchor);
-            hydrate.reactive(slot.nodes, fragment, input, slot);
-        }
-        else {
-            hydrate.static(elements, fragment, input);
-        }
-    }
-    else if (type === 'string' || type === 'number') {
-        let element = text(type === 'string' ? input : String(input));
-        if (slot) {
-            slot.text = element;
-        }
-        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)) {
-        append.call(fragment, ...input);
-        if (elements) {
-            elements.push([...input]);
-        }
-    }
-    else if (isInstanceOf(input, Node)) {
-        append.call(fragment, input);
-        if (elements) {
-            elements.push([input]);
-        }
-    }
-}
-function schedule() {
-    if (scheduled) {
-        return;
-    }
-    scheduled = true;
-    microtask.add(task);
-}
-function task() {
-    let fn, fns;
-    while (fns = cleanup.next()) {
-        try {
-            while (fn = fns.pop()) {
-                fn();
-            }
-        }
-        catch { }
-    }
-    scheduled = false;
-    if (cleanup.length) {
-        schedule();
-    }
-}
-class Slot {
-    marker;
-    nodes;
-    text = null;
-    constructor(marker) {
-        ondisconnect(marker, () => this.clear());
-        this.marker = marker;
-        this.nodes = [];
-    }
-    get length() {
-        return this.nodes.length;
-    }
-    set length(n) {
-        if (n >= this.nodes.length) {
-            return;
-        }
-        else if (n === 0) {
-            this.clear();
-        }
-        else {
-            this.splice(n);
-        }
-    }
-    anchor(index = this.nodes.length - 1) {
-        let nodes = this.nodes[index];
-        return nodes ? nodes[nodes.length - 1] : this.marker;
-    }
-    clear() {
-        if (this.text) {
-            this.nodes.push([this.text]);
-            this.text = null;
-        }
-        remove(this.nodes);
-        return this;
-    }
-    pop() {
-        let group = this.nodes.pop();
-        if (group) {
-            remove([group]);
-        }
-        return this;
-    }
-    push(fragment, ...nodes) {
-        this.anchor().after(fragment);
-        this.nodes.push(...nodes);
-        return this;
-    }
-    render(input, state = HYDRATING) {
-        let type = typeof input;
-        if (type === 'function') {
-            ondisconnect(this.marker, effect(() => {
-                let v = input();
-                if (state === HYDRATING) {
-                    this.render(v, state);
-                    state = CONNECTED;
-                }
-                else if (state === CONNECTED) {
-                    raf.add(() => {
-                        this.render(v, state);
-                    });
-                }
-            }));
-            return this;
-        }
-        let text = this.text;
-        if (text && text.isConnected && (input == null || type !== 'object')) {
-            nodeValue.call(text, (type === 'number' || type === 'string') ? input : '');
-        }
-        else {
-            this.clear();
-            let fragment = cloneNode.call(EMPTY_FRAGMENT);
-            render(this.marker, this.nodes, fragment, input, this);
-            this.marker.after(fragment);
-        }
-        return this;
-    }
-    shift() {
-        let group = this.nodes.shift();
-        if (group) {
-            remove([group]);
-        }
-        return this;
-    }
-    splice(start, stop = this.nodes.length, fragment, ...nodes) {
-        if (!fragment) {
-            remove(this.nodes.splice(start, stop));
-        }
-        else {
-            this.anchor(start).after(fragment);
-            remove(this.nodes.splice(start, stop, ...nodes));
-        }
-        return this;
-    }
-    unshift(fragment, ...nodes) {
-        this.marker.after(fragment);
-        this.nodes.unshift(...nodes);
-        return this;
-    }
-}
-const ondisconnect = (element, fn) => {
-    (element[CLEANUP_KEY] ??= []).push(fn);
-};
-export default (marker, 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 };