@esportsplus/template 0.19.0 → 0.19.2

package/build/html/index.d.ts

@@ -1,7 +1,8 @@
 import { ReactiveArray } from '@esportsplus/reactivity';
-import { RenderableReactive, RenderableValue } from '../types.js';
+import { Attributes, Renderable, RenderableReactive } from '../types.js';
+type Values<T = unknown> = Attributes | Attributes[] | Readonly<Attributes> | Readonly<Attributes[]> | Renderable<T>;
 declare const html: {
-    (literals: TemplateStringsArray, ...values: (RenderableValue | RenderableValue[])[]): DocumentFragment;
+    (literals: TemplateStringsArray, ...values: (Values | Values[])[]): Node;
     reactive<T>(array: ReactiveArray<T[]>, template: RenderableReactive["template"]): RenderableReactive;
 };
 export default html;

package/build/html/index.js

@@ -2,37 +2,21 @@ import { RENDERABLE, RENDERABLE_HTML_REACTIVE_ARRAY } from '../constants.js';
 import { cloneNode } from '../utilities/node.js';
 import parser from './parser.js';
 const html = (literals, ...values) => {
-    let { fragment, slots } = parser.parse(literals);
-    fragment = cloneNode.call(fragment, true);
+    let { fragment, slots } = parser.parse(literals), clone = cloneNode.call(fragment, true);
     if (slots !== null) {
-        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 = fragment;
-                    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);
+        let node, nodePath;
+        for (let i = slots.length - 1; i >= 0; i--) {
+            let { fn, path, slot } = slots[i];
+            if (nodePath !== path) {
+                node = clone;
+                for (let i = 0, n = path.length; i < n; i++) {
+                    node = path[i].call(node);
                 }
             }
             fn(node, values[slot]);
         }
     }
-    return fragment;
+    return clone;
 };
 html.reactive = (array, template) => {
     return {

package/build/html/parser.js

@@ -27,15 +27,11 @@ function build(literals) {
                 ? methods(parent.elements, parent.path, firstElementChild, nextElementSibling)
                 : methods(parent.children, [], firstChild, nextSibling);
             if (attr) {
-                let i = attr.indexOf(SLOT_MARKER), p = {
-                    absolute: path,
-                    parent: parent.path,
-                    relative: path.slice(parent.path.length)
-                };
+                let i = attr.indexOf(SLOT_MARKER);
                 while (i !== -1) {
                     slots.push({
                         fn: spread,
-                        path: p,
+                        path,
                         slot
                     });
                     buffer += parsed[slot++];
@@ -52,15 +48,10 @@ function build(literals) {
             parent.elements++;
         }
         else if (type === NODE_SLOT) {
-            let relative = methods(parent.children, [], firstChild, nextSibling);
             buffer += parsed[slot] + SLOT_HTML;
             slots.push({
                 fn: s,
-                path: {
-                    absolute: [...parent.path, ...relative],
-                    parent: parent.path,
-                    relative
-                },
+                path: methods(parent.children, parent.path, firstChild, nextSibling),
                 slot: slot++
             });
         }

package/build/index.d.ts

@@ -1,4 +1,4 @@
 export { default as html } from './html/index.js';
 export { default as render } from './render.js';
 export { default as svg } from './svg.js';
-export type { Attributes, Element, Renderable, RenderableValue } from './types.js';
+export type { Attributes, Element, Renderable } from './types.js';

package/build/types.d.ts

@@ -17,17 +17,15 @@ type Attributes = {
     ondisconnect?: (element: Element) => void;
     onrender?: (element: Element) => void;
 } & Record<PropertyKey, unknown>;
-type Effect<T> = () => EffectResponse<T>;
-type EffectResponse<T> = T extends [] ? (Primitive | Renderable)[] : Primitive | Renderable;
+type Effect<T> = () => T extends [] ? Renderable[] : Renderable;
 type Element = HTMLElement & Attributes & Record<PropertyKey, unknown>;
 type Primitive = bigint | boolean | null | number | string | undefined;
-type Renderable = DocumentFragment | Node | NodeList | Primitive | RenderableReactive | Renderable[];
+type Renderable<T = unknown> = DocumentFragment | Effect<T> | Node | NodeList | Primitive | RenderableReactive | Renderable[];
 type RenderableReactive = Readonly<{
     [RENDERABLE]: typeof RENDERABLE_HTML_REACTIVE_ARRAY;
     array: ReactiveArray<unknown[]>;
     template: (this: ReactiveArray<unknown[]>, ...args: Parameters<Parameters<ReactiveArray<unknown[]>['map']>[0]>) => ReturnType<typeof html>;
 }>;
-type RenderableValue<T = unknown> = Attributes | Readonly<Attributes> | Readonly<Attributes[]> | Effect<T> | Primitive | RenderableReactive;
 type SlotGroup = {
     head: Element;
     tail: Element;
@@ -38,12 +36,8 @@ type Template = {
     literals: TemplateStringsArray;
     slots: {
         fn: typeof attributes.spread | typeof slot;
-        path: {
-            absolute: typeof firstChild[];
-            parent: typeof firstChild[];
-            relative: typeof firstChild[];
-        };
+        path: typeof firstChild[];
         slot: number;
     }[] | null;
 };
-export type { Attributes, Effect, Element, Renderable, RenderableReactive, RenderableValue, SlotGroup, Template };
+export type { Attributes, Effect, Element, Renderable, RenderableReactive, SlotGroup, Template };

package/package.json

@@ -14,7 +14,7 @@
   "private": false,
   "type": "module",
   "types": "./build/index.d.ts",
-  "version": "0.19.0",
+  "version": "0.19.2",
   "scripts": {
     "build": "tsc && tsc-alias",
     "-": "-"

package/src/attributes.ts

@@ -8,6 +8,9 @@ import q from '@esportsplus/queue';
 import event from './event';
 
 
+// TODO: Refactor
+
+
 const EFFECT = Symbol();
 
 const STORE = Symbol();

package/src/html/index.ts

@@ -1,46 +1,59 @@
 import { ReactiveArray } from '@esportsplus/reactivity';
 import { RENDERABLE, RENDERABLE_HTML_REACTIVE_ARRAY } from '~/constants';
-import { RenderableReactive, RenderableValue } from '~/types';
+import { Attributes, Renderable, RenderableReactive } from '~/types';
 import { cloneNode } from '~/utilities/node';
 import parser from './parser';
 
 
-const html = (literals: TemplateStringsArray, ...values: (RenderableValue | RenderableValue[])[]): DocumentFragment => {
-    let { fragment, slots } = parser.parse(literals);
+type Values<T = unknown> = Attributes | Attributes[] | Readonly<Attributes> | Readonly<Attributes[]> | Renderable<T>;
 
-    fragment = cloneNode.call(fragment, true) as DocumentFragment;
+
+const html = (literals: TemplateStringsArray, ...values: (Values | Values[])[]) => {
+    let { fragment, slots } = parser.parse(literals),
+        clone = cloneNode.call(fragment, true);
 
     if (slots !== null) {
-        let node, nodePath, parent, parentPath;
+        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;
+        // TODO: when a new slot is added it breaks pathfinding for the next slot
+        // for (let i = 0, n = slots.length; i < n; i++) {
+        for (let i = slots.length - 1; i >= 0; i--) {
+            let { fn, path, slot } = slots[i];
 
-            if (pp !== parentPath) {
-                if (pp === nodePath) {
-                    parent = node;
-                    parentPath = nodePath;
+            //     pp = path.parent,
+            //     pr = path.relative;
 
-                    nodePath = undefined;
-                }
-                else {
-                    parent = fragment;
-                    parentPath = pp;
+            // if (pp !== parentPath) {
+            //     if (pp === nodePath) {
+            //         parent = node;
+            //         parentPath = nodePath;
 
-                    for (let i = 0, n = pp.length; i < n; i++) {
-                        parent = pp[i].call(parent);
-                    }
-                }
-            }
+            //         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);
+            //     }
+            // }
 
-            if (pr !== nodePath) {
-                node = parent;
-                nodePath = path.absolute;
+            if (nodePath !== path) {
+                node = clone;
 
-                for (let i = 0, n = pr.length; i < n; i++) {
-                    node = pr[i].call(node);
+                for (let i = 0, n = path.length; i < n; i++) {
+                    node = path[i].call(node);
                 }
             }
 
@@ -49,7 +62,7 @@ const html = (literals: TemplateStringsArray, ...values: (RenderableValue | Rend
         }
     }
 
-    return fragment;
+    return clone;
 };
 
 html.reactive = <T>(array: ReactiveArray<T[]>, template: RenderableReactive['template']): RenderableReactive => {

package/src/html/parser.ts

@@ -29,7 +29,7 @@ function build(literals: TemplateStringsArray) {
         levels = [{
             children: 0,
             elements: 0,
-            path: [] as NonNullable<Template['slots']>[number]['path']['parent']
+            path: [] as NonNullable<Template['slots']>[number]['path']
         }],
         parsed = html.split(SLOT_MARKER),
         slot = 0,
@@ -51,17 +51,18 @@ function build(literals: TemplateStringsArray) {
                     : methods(parent.children, [], firstChild, nextSibling);
 
             if (attr) {
-                let i = attr.indexOf(SLOT_MARKER),
-                    p = {
-                        absolute: path,
-                        parent: parent.path,
-                        relative: path.slice(parent.path.length)
-                    };
+                let i = attr.indexOf(SLOT_MARKER);
+                    // @see ./index.ts comments
+                    // p = {
+                    //     absolute: path,
+                    //     parent: parent.path,
+                    //     relative: path.slice(parent.path.length)
+                    // };
 
                 while (i !== -1) {
                     slots.push({
                         fn: spread,
-                        path: p,
+                        path,
                         slot
                     });
 
@@ -81,16 +82,18 @@ function build(literals: TemplateStringsArray) {
             parent.elements++;
         }
         else if (type === NODE_SLOT) {
-            let relative = methods(parent.children, [], firstChild, nextSibling);
+            // @see ./index.ts comments
+            // let relative = methods(parent.children, [], firstChild, nextSibling);
 
             buffer += parsed[slot] + SLOT_HTML;
             slots.push({
                 fn: s,
-                path: {
-                    absolute: [...parent.path, ...relative],
-                    parent: parent.path,
-                    relative
-                },
+                path: methods(parent.children, parent.path, firstChild, nextSibling),
+                // path: {
+                //     absolute: [...parent.path, ...relative],
+                //     parent: parent.path,
+                //     relative
+                // },
                 slot: slot++
             });
         }

package/src/index.ts

@@ -1,4 +1,4 @@
 export { default as html } from './html';
 export { default as render } from './render';
 export { default as svg } from './svg';
-export type { Attributes, Element, Renderable, RenderableValue } from './types';
+export type { Attributes, Element, Renderable } from './types';

package/src/types.ts

@@ -18,14 +18,10 @@ type Attributes = {
     [key: `data-${string}`]: string | undefined;
     onconnect?: (element: Element) => void;
     ondisconnect?: (element: Element) => void;
-    // Rendered in fragment
-    // - Used to retrieve reference to the element
     onrender?: (element: Element) => void;
 } & Record<PropertyKey, unknown>;
 
-type Effect<T> = () => EffectResponse<T>;
-
-type EffectResponse<T> = T extends [] ? (Primitive | Renderable)[] : Primitive | Renderable;
+type Effect<T> = () => T extends [] ? Renderable[] : Renderable;
 
 type Element = HTMLElement & Attributes & Record<PropertyKey, unknown>;
 
@@ -33,7 +29,7 @@ type Element = HTMLElement & Attributes & Record<PropertyKey, unknown>;
 // - Importing from ^ causes 'cannot be named without a reference to...' error
 type Primitive = bigint | boolean | null | number | string | undefined;
 
-type Renderable = DocumentFragment | Node | NodeList | Primitive | RenderableReactive | Renderable[];
+type Renderable<T = unknown> = DocumentFragment | Effect<T> | Node | NodeList | Primitive | RenderableReactive | Renderable[];
 
 type RenderableReactive = Readonly<{
     [RENDERABLE]: typeof RENDERABLE_HTML_REACTIVE_ARRAY;
@@ -44,8 +40,6 @@ type RenderableReactive = Readonly<{
     ) => ReturnType<typeof html>;
 }>;
 
-type RenderableValue<T = unknown> = Attributes | Readonly<Attributes> | Readonly<Attributes[]> | Effect<T> | Primitive | RenderableReactive;
-
 type SlotGroup = {
     head: Element;
     tail: Element;
@@ -57,11 +51,13 @@ type Template = {
     literals: TemplateStringsArray;
     slots: {
         fn: typeof attributes.spread | typeof slot;
-        path: {
-            absolute: typeof firstChild[],
-            parent: typeof firstChild[],
-            relative: typeof firstChild[]
-        };
+        // @see ./html/index.ts comments
+        path: typeof firstChild[];
+        // path: {
+        //     absolute: typeof firstChild[],
+        //     parent: typeof firstChild[],
+        //     relative: typeof firstChild[]
+        // };
         slot: number;
     }[] | null;
 };
@@ -70,7 +66,7 @@ type Template = {
 export type {
     Attributes,
     Effect, Element,
-    Renderable, RenderableReactive, RenderableValue,
+    Renderable, RenderableReactive,
     SlotGroup,
     Template
 };