@esportsplus/template 0.17.0 → 0.19.0

package/src/types.ts

@@ -1,6 +1,6 @@
 import { ReactiveArray } from '@esportsplus/reactivity';
-import { RENDERABLE, RENDERABLE_HTML_FRAGMENT, RENDERABLE_HTML_REACTIVE_ARRAY } from './constants';
-import { firstChild } from './utilities';
+import { RENDERABLE, RENDERABLE_HTML_REACTIVE_ARRAY } from './constants';
+import { firstChild } from './utilities/node';
 import attributes from './attributes';
 import slot from './slot';
 import html from './html';
@@ -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 | RenderableReactive;
+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/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,21 @@
+import { innerHTML } from './element';
+import { cloneNode } from './node';
+
+
+let scratchpad = document.createElement('template');
+
+
+const append = DocumentFragment.prototype.append;
+
+const fragment = (html: string): DocumentFragment => {
+    innerHTML.call(scratchpad, html);
+
+    let content = scratchpad.content;
+
+    scratchpad = cloneNode.call(scratchpad) as HTMLTemplateElement;
+
+    return content;
+};
+
+
+export { append, fragment };

package/src/utilities/node.ts

@@ -0,0 +1,29 @@
+let getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor,
+    prototype = Node.prototype;
+
+
+const appendChild = prototype.appendChild;
+
+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 {
+    appendChild,
+    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,15 @@
+import { cloneNode, nodeValue } from './node';
+
+
+let text = document.createTextNode('');
+
+
+export default (value: string) => {
+    let element = cloneNode.call(text);
+
+    if (value !== '') {
+        nodeValue.call(element, value);
+    }
+
+    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.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/build/utilities.d.ts

@@ -1,28 +0,0 @@
-import { Element as E } from './types.js';
-declare const append: (...nodes: (Node | string)[]) => void;
-declare const addEventListener: {
-    <K extends keyof ElementEventMap>(type: K, listener: (this: Element, ev: ElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-    (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-};
-declare const removeEventListener: {
-    <K extends keyof ElementEventMap>(type: K, listener: (this: Element, ev: ElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-    (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-};
-declare const className: (v: any) => void;
-declare const innerHTML: (v: any) => void;
-declare const firstElementChild: () => any;
-declare const nextElementSibling: () => any;
-declare const removeAttribute: (qualifiedName: string) => void;
-declare const setAttribute: (qualifiedName: string, value: string) => void;
-declare const cloneNode: (subtree?: boolean) => Node;
-declare const firstChild: () => any;
-declare const lastChild: () => any;
-declare const nextSibling: () => any;
-declare const nodeValue: (v: any) => void;
-declare const parentElement: () => any;
-declare const previousSibling: () => any;
-declare const fragment: (html: string) => DocumentFragment;
-declare const microtask: import("@esportsplus/tasks/build/factory").Scheduler;
-declare const raf: import("@esportsplus/tasks/build/factory").Scheduler;
-declare const text: (value: string) => E;
-export { addEventListener, append, className, cloneNode, firstChild, firstElementChild, fragment, innerHTML, lastChild, microtask, nextElementSibling, nextSibling, nodeValue, parentElement, previousSibling, raf, removeAttribute, removeEventListener, setAttribute, text };

package/build/utilities.js

@@ -1,37 +0,0 @@
-import { micro as m, raf as r } from '@esportsplus/tasks';
-let getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor, prototype, template = document.createElement('template'), t = document.createTextNode('');
-prototype = DocumentFragment.prototype;
-const append = prototype.append;
-prototype = Element.prototype;
-const addEventListener = prototype.addEventListener;
-const removeEventListener = prototype.removeEventListener;
-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;
-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;
-const fragment = (html) => {
-    innerHTML.call(template, html);
-    let { content } = template;
-    template = cloneNode.call(template);
-    return content;
-};
-const microtask = m();
-const raf = r();
-const text = (value) => {
-    let element = cloneNode.call(t);
-    if (value !== '') {
-        nodeValue.call(element, value);
-    }
-    return element;
-};
-export { addEventListener, append, className, cloneNode, firstChild, firstElementChild, fragment, innerHTML, lastChild, microtask, nextElementSibling, nextSibling, nodeValue, parentElement, previousSibling, raf, removeAttribute, removeEventListener, setAttribute, text };

package/src/html/hydrate.ts

@@ -1,53 +0,0 @@
-import { Fragment, RenderableValues, Template } from '~/types';
-import { cloneNode } from '~/utilities';
-
-
-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;
-}

package/src/utilities.ts

@@ -1,89 +0,0 @@
-import { micro as m, raf as r } from '@esportsplus/tasks';
-import { Element as E } from './types';
-
-
-let getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor,
-    prototype,
-    template = document.createElement('template'),
-    t = document.createTextNode('');
-
-
-prototype = DocumentFragment.prototype;
-
-const append = prototype.append
-
-// https://github.com/localvoid/ivi/blob/master/packages/ivi/src/client/core.ts#L38
-prototype = Element.prototype;
-
-const addEventListener = prototype.addEventListener;
-
-const removeEventListener = prototype.removeEventListener;
-
-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;
-
-
-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!;
-
-
-const fragment = (html: string) => {
-    innerHTML.call(template, html);
-
-    let { content } = template;
-
-    template = cloneNode.call(template) as HTMLTemplateElement;
-
-    return content;
-};
-
-const microtask = m();
-
-const raf = r();
-
-const text = (value: string) => {
-    let element = cloneNode.call(t);
-
-    if (value !== '') {
-        nodeValue.call(element, value);
-    }
-
-    return element as E;
-};
-
-
-export {
-    addEventListener, append,
-    className, cloneNode,
-    firstChild, firstElementChild, fragment,
-    innerHTML,
-    lastChild,
-    microtask,
-    nextElementSibling, nextSibling, nodeValue,
-    parentElement, previousSibling,
-    raf, removeAttribute, removeEventListener,
-    setAttribute,
-    text
-};