j-templates 7.0.77 → 7.0.79

package/DOM/domNodeConfig.js

@@ -48,6 +48,16 @@ function wrapPriorityUpdates(callback) {
         highPriority = currentPriority;
     };
 }
+function getHTMLNode(from, current) {
+    if (typeof from === "string") {
+        if (current?.nodeType === Node.TEXT_NODE) {
+            exports.DOMNodeConfig.setText(current, from);
+            return current;
+        }
+        return exports.DOMNodeConfig.createTextNode(from);
+    }
+    return from;
+}
 exports.DOMNodeConfig = {
     createNode(type, namespace) {
         if (type === "text")
@@ -136,8 +146,10 @@ exports.DOMNodeConfig = {
     },
     reconcileChildren(target, children) {
         if (!target.firstChild) {
-            for (let x = 0; x < children.length; x++)
-                target.appendChild(children[x]);
+            for (let x = 0; x < children.length; x++) {
+                const child = getHTMLNode(children[x]);
+                target.appendChild(child);
+            }
             return;
         }
         if (children.length === 0) {
@@ -148,7 +160,8 @@ exports.DOMNodeConfig = {
         let x = 0;
         let removed = false;
         for (; actualNode && x < children.length; x++) {
-            const expectedNode = children[x];
+            const child = children[x];
+            let expectedNode = getHTMLNode(child, actualNode);
             if (!removed && actualNode !== expectedNode) {
                 const remove = actualNode;
                 actualNode = actualNode.nextSibling;
@@ -165,14 +178,17 @@ exports.DOMNodeConfig = {
         }
         while (target.lastChild !== children[x - 1])
             target.removeChild(target.lastChild);
-        for (; x < children.length; x++)
-            target.appendChild(children[x]);
+        for (; x < children.length; x++) {
+            const child = getHTMLNode(children[x]);
+            target.appendChild(child);
+        }
     },
     reconcileChild(target, child) {
-        if (target.firstChild === child)
+        const newChild = getHTMLNode(child, target.firstChild);
+        if (target.firstChild === newChild)
             return;
-        target.appendChild(child);
-        while (target.firstChild !== child)
+        target.appendChild(newChild);
+        while (target.firstChild !== newChild)
             target.removeChild(target.firstChild);
     },
 };

package/DOM/elements.d.ts

@@ -5,7 +5,7 @@ export declare const div: <T>(config: {
     }>;
     on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
     data?: () => T | T[] | Promise<T[]> | Promise<T>;
-}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
+}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vElementNode;
 export declare const a: <T>(config: {
     props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
     attrs?: import("../Node/vNode.types").FunctionOr<{
@@ -13,7 +13,7 @@ export declare const a: <T>(config: {
     }>;
     on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
     data?: () => T | T[] | Promise<T[]> | Promise<T>;
-}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
+}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vElementNode;
 export declare const b: <T>(config: {
     props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
     attrs?: import("../Node/vNode.types").FunctionOr<{
@@ -21,7 +21,7 @@ export declare const b: <T>(config: {
     }>;
     on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
     data?: () => T | T[] | Promise<T[]> | Promise<T>;
-}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
+}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vElementNode;
 export declare const button: <T>(config: {
     props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLButtonElement>>;
     attrs?: import("../Node/vNode.types").FunctionOr<{
@@ -29,7 +29,7 @@ export declare const button: <T>(config: {
     }>;
     on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
     data?: () => T | T[] | Promise<T[]> | Promise<T>;
-}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
+}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vElementNode;
 export declare const h1: <T>(config: {
     props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
     attrs?: import("../Node/vNode.types").FunctionOr<{
@@ -37,7 +37,7 @@ export declare const h1: <T>(config: {
     }>;
     on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
     data?: () => T | T[] | Promise<T[]> | Promise<T>;
-}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
+}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vElementNode;
 export declare const h2: <T>(config: {
     props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
     attrs?: import("../Node/vNode.types").FunctionOr<{
@@ -45,7 +45,7 @@ export declare const h2: <T>(config: {
     }>;
     on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
     data?: () => T | T[] | Promise<T[]> | Promise<T>;
-}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
+}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vElementNode;
 export declare const h3: <T>(config: {
     props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
     attrs?: import("../Node/vNode.types").FunctionOr<{
@@ -53,7 +53,7 @@ export declare const h3: <T>(config: {
     }>;
     on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
     data?: () => T | T[] | Promise<T[]> | Promise<T>;
-}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
+}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vElementNode;
 export declare const input: <T>(config: {
     props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLInputElement>>;
     attrs?: import("../Node/vNode.types").FunctionOr<{
@@ -61,7 +61,7 @@ export declare const input: <T>(config: {
     }>;
     on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
     data?: () => T | T[] | Promise<T[]> | Promise<T>;
-}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
+}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vElementNode;
 export declare const textarea: <T>(config: {
     props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLTextAreaElement>>;
     attrs?: import("../Node/vNode.types").FunctionOr<{
@@ -69,7 +69,7 @@ export declare const textarea: <T>(config: {
     }>;
     on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
     data?: () => T | T[] | Promise<T[]> | Promise<T>;
-}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
+}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vElementNode;
 export declare const span: <T>(config: {
     props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
     attrs?: import("../Node/vNode.types").FunctionOr<{
@@ -77,7 +77,7 @@ export declare const span: <T>(config: {
     }>;
     on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
     data?: () => T | T[] | Promise<T[]> | Promise<T>;
-}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
+}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vElementNode;
 export declare const table: <T>(config: {
     props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
     attrs?: import("../Node/vNode.types").FunctionOr<{
@@ -85,7 +85,7 @@ export declare const table: <T>(config: {
     }>;
     on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
     data?: () => T | T[] | Promise<T[]> | Promise<T>;
-}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
+}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vElementNode;
 export declare const thead: <T>(config: {
     props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
     attrs?: import("../Node/vNode.types").FunctionOr<{
@@ -93,7 +93,7 @@ export declare const thead: <T>(config: {
     }>;
     on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
     data?: () => T | T[] | Promise<T[]> | Promise<T>;
-}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
+}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vElementNode;
 export declare const th: <T>(config: {
     props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
     attrs?: import("../Node/vNode.types").FunctionOr<{
@@ -101,7 +101,7 @@ export declare const th: <T>(config: {
     }>;
     on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
     data?: () => T | T[] | Promise<T[]> | Promise<T>;
-}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
+}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vElementNode;
 export declare const tbody: <T>(config: {
     props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
     attrs?: import("../Node/vNode.types").FunctionOr<{
@@ -109,7 +109,7 @@ export declare const tbody: <T>(config: {
     }>;
     on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
     data?: () => T | T[] | Promise<T[]> | Promise<T>;
-}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
+}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vElementNode;
 export declare const tr: <T>(config: {
     props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
     attrs?: import("../Node/vNode.types").FunctionOr<{
@@ -117,7 +117,7 @@ export declare const tr: <T>(config: {
     }>;
     on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
     data?: () => T | T[] | Promise<T[]> | Promise<T>;
-}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
+}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vElementNode;
 export declare const td: <T>(config: {
     props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
     attrs?: import("../Node/vNode.types").FunctionOr<{
@@ -125,7 +125,7 @@ export declare const td: <T>(config: {
     }>;
     on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
     data?: () => T | T[] | Promise<T[]> | Promise<T>;
-}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
+}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vElementNode;
 export declare const img: <T>(config: {
     props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLImageElement>>;
     attrs?: import("../Node/vNode.types").FunctionOr<{
@@ -133,7 +133,7 @@ export declare const img: <T>(config: {
     }>;
     on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
     data?: () => T | T[] | Promise<T[]> | Promise<T>;
-}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
+}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vElementNode;
 export declare const video: <T>(config: {
     props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLVideoElement>>;
     attrs?: import("../Node/vNode.types").FunctionOr<{
@@ -141,7 +141,7 @@ export declare const video: <T>(config: {
     }>;
     on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
     data?: () => T | T[] | Promise<T[]> | Promise<T>;
-}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
+}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vElementNode;
 export declare const select: <T>(config: {
     props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLSelectElement>>;
     attrs?: import("../Node/vNode.types").FunctionOr<{
@@ -149,7 +149,7 @@ export declare const select: <T>(config: {
     }>;
     on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
     data?: () => T | T[] | Promise<T[]> | Promise<T>;
-}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
+}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vElementNode;
 export declare const option: <T>(config: {
     props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLOptionElement>>;
     attrs?: import("../Node/vNode.types").FunctionOr<{
@@ -157,7 +157,7 @@ export declare const option: <T>(config: {
     }>;
     on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
     data?: () => T | T[] | Promise<T[]> | Promise<T>;
-}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
+}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vElementNode;
 export declare const aside: <T>(config: {
     props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
     attrs?: import("../Node/vNode.types").FunctionOr<{
@@ -165,7 +165,7 @@ export declare const aside: <T>(config: {
     }>;
     on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
     data?: () => T | T[] | Promise<T[]> | Promise<T>;
-}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
+}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vElementNode;
 export declare const p: <T>(config: {
     props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
     attrs?: import("../Node/vNode.types").FunctionOr<{
@@ -173,7 +173,7 @@ export declare const p: <T>(config: {
     }>;
     on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
     data?: () => T | T[] | Promise<T[]> | Promise<T>;
-}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
+}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vElementNode;
 export declare const label: <T>(config: {
     props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
     attrs?: import("../Node/vNode.types").FunctionOr<{
@@ -181,7 +181,7 @@ export declare const label: <T>(config: {
     }>;
     on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
     data?: () => T | T[] | Promise<T[]> | Promise<T>;
-}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
+}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vElementNode;
 export declare const pre: <T>(config: {
     props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
     attrs?: import("../Node/vNode.types").FunctionOr<{
@@ -189,5 +189,29 @@ export declare const pre: <T>(config: {
     }>;
     on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
     data?: () => T | T[] | Promise<T[]> | Promise<T>;
-}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vNode;
-export declare const text: (callback: () => string) => import("../Node/vNode.types").vNode;
+}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vElementNode;
+export declare const ul: <T>(config: {
+    props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
+    attrs?: import("../Node/vNode.types").FunctionOr<{
+        [name: string]: string;
+    }>;
+    on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
+    data?: () => T | T[] | Promise<T[]> | Promise<T>;
+}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vElementNode;
+export declare const ol: <T>(config: {
+    props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
+    attrs?: import("../Node/vNode.types").FunctionOr<{
+        [name: string]: string;
+    }>;
+    on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
+    data?: () => T | T[] | Promise<T[]> | Promise<T>;
+}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vElementNode;
+export declare const li: <T>(config: {
+    props?: import("../Node/vNode.types").FunctionOr<import("../Utils/utils.types").RecursivePartial<HTMLElement>>;
+    attrs?: import("../Node/vNode.types").FunctionOr<{
+        [name: string]: string;
+    }>;
+    on?: import("../Node/vNode.types").FunctionOr<import("../Node/vNode.types").vNodeEvents<HTMLElementEventMap>>;
+    data?: () => T | T[] | Promise<T[]> | Promise<T>;
+}, children?: import("../Node/vNode.types").vNode[] | import("../Node/vNode.types").vNodeChildrenFunction<T>) => import("../Node/vNode.types").vElementNode;
+export declare const text: (callback: () => string) => import("../Node/vNode.types").vElementNode;

package/DOM/elements.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.text = exports.pre = exports.label = exports.p = exports.aside = exports.option = exports.select = exports.video = exports.img = exports.td = exports.tr = exports.tbody = exports.th = exports.thead = exports.table = exports.span = exports.textarea = exports.input = exports.h3 = exports.h2 = exports.h1 = exports.button = exports.b = exports.a = exports.div = void 0;
+exports.text = exports.li = exports.ol = exports.ul = exports.pre = exports.label = exports.p = exports.aside = exports.option = exports.select = exports.video = exports.img = exports.td = exports.tr = exports.tbody = exports.th = exports.thead = exports.table = exports.span = exports.textarea = exports.input = exports.h3 = exports.h2 = exports.h1 = exports.button = exports.b = exports.a = exports.div = void 0;
 const vNode_1 = require("../Node/vNode");
 exports.div = vNode_1.vNode.ToFunction("div");
 exports.a = vNode_1.vNode.ToFunction("a");
@@ -26,6 +26,9 @@ exports.aside = vNode_1.vNode.ToFunction("aside");
 exports.p = vNode_1.vNode.ToFunction("p");
 exports.label = vNode_1.vNode.ToFunction("label");
 exports.pre = vNode_1.vNode.ToFunction("pre");
+exports.ul = vNode_1.vNode.ToFunction("ul");
+exports.ol = vNode_1.vNode.ToFunction("ol");
+exports.li = vNode_1.vNode.ToFunction("li");
 const textElement = vNode_1.vNode.ToFunction("text");
 const text = function (callback) {
     return textElement({ props: () => ({ nodeValue: callback() }) });

package/Node/component.d.ts

@@ -1,5 +1,5 @@
 import { ComponentEvents } from "./component.types";
-import { FunctionOr, vNode as vNodeType } from "./vNode.types";
+import { FunctionOr, vNode as vNodeType, vElementNode } from "./vNode.types";
 import { RecursivePartial } from "../Utils/utils.types";
 import { IObservableScope } from "../Store/Tree/observableScope";
 /**
@@ -33,12 +33,12 @@ export declare class Component<D = void, T = void, E = {}> {
     /**
      * Accessor for the component's virtual node.
      */
-    protected get VNode(): vNodeType;
+    protected get VNode(): vElementNode;
     /**
      * Accessor for the component's template collection.
      */
     protected get Templates(): T;
-    constructor(vNode: vNodeType, config: vComponentConfig<D, E>, templates: T);
+    constructor(vNode: vElementNode, config: vComponentConfig<D, E>, templates: T);
     /**
      * Returns the component's rendered vNode(s).
      * Override to provide custom rendering logic.
@@ -73,7 +73,7 @@ export declare namespace Component {
      * Function wraps the Component as a function that can be used to create vNode objects
      * and generate templates.
      */
-    function ToFunction<D, T, E, P = HTMLElement>(type: string, constructor: typeof Component<D, T, E>, namespace?: string): (config: vComponentConfig<D, E, P>, templates?: T) => vNodeType;
+    function ToFunction<D, T, E, P = HTMLElement>(type: string, constructor: typeof Component<D, T, E>, namespace?: string): (config: vComponentConfig<D, E, P>, templates?: T) => vElementNode;
     /**
      * Function registers the Component as a WebComponent as the provided name.
      */

package/Node/vNode.d.ts

@@ -1,5 +1,5 @@
 import { RecursivePartial } from "../Utils/utils.types";
-import { vNode as vNodeType, vNodeDefinition, FunctionOr, vNodeEvents, vNodeChildrenFunction } from "./vNode.types";
+import { vNode as vNodeType, vNodeDefinition, FunctionOr, vNodeEvents, vNodeChildrenFunction, vElementNode } from "./vNode.types";
 type vNodeConfig<P = HTMLElement, E = HTMLElementEventMap, T = never> = {
     props?: FunctionOr<RecursivePartial<P>>;
     attrs?: FunctionOr<{
@@ -9,13 +9,13 @@ type vNodeConfig<P = HTMLElement, E = HTMLElementEventMap, T = never> = {
     data?: () => T | Array<T> | Promise<Array<T>> | Promise<T>;
 };
 export declare namespace vNode {
-    function Create<P = HTMLElement, E = HTMLElementEventMap, T = never>(definition: vNodeDefinition<P, E, T>): vNodeType;
+    function Create<P = HTMLElement, E = HTMLElementEventMap, T = never>(definition: vNodeDefinition<P, E, T>): vElementNode;
     function CreateText(text: string): vNodeType;
     function Init(vnode: vNodeType): void;
     function InitAll(vnodes: vNodeType[]): void;
     function Destroy(vnode: vNodeType): void;
     function DestroyAll(vnodes: vNodeType[]): void;
-    function ToFunction<P = HTMLElement, E = HTMLElementEventMap>(type: string, namespace?: string): <T>(config: vNodeConfig<P, E, T>, children?: vNodeType[] | vNodeChildrenFunction<T>) => vNodeType;
+    function ToFunction<P = HTMLElement, E = HTMLElementEventMap>(type: string, namespace?: string): <T>(config: vNodeConfig<P, E, T>, children?: vNodeType[] | vNodeChildrenFunction<T>) => vElementNode;
     function Attach(node: any, vnode: vNodeType): vNodeType;
 }
 export {};

package/Node/vNode.js

@@ -8,6 +8,7 @@ const functions_1 = require("../Utils/functions");
 const injector_1 = require("../Utils/injector");
 const thread_1 = require("../Utils/thread");
 const nodeConfig_1 = require("./nodeConfig");
+const vNode_types_1 = require("./vNode.types");
 var vNode;
 (function (vNode) {
     function Create(definition) {
@@ -43,7 +44,7 @@ var vNode;
     }
     vNode.CreateText = CreateText;
     function Init(vnode) {
-        if (vnode.definition === null)
+        if ((0, vNode_types_1.isStringNode)(vnode) || vnode.definition === null)
             return;
         InitNode(vnode);
     }
@@ -54,7 +55,7 @@ var vNode;
     }
     vNode.InitAll = InitAll;
     function Destroy(vnode) {
-        if (vnode.destroyed)
+        if ((0, vNode_types_1.isStringNode)(vnode) || vnode.destroyed)
             return;
         vnode.destroyed = true;
         vnode.component?.Destroy();
@@ -181,22 +182,28 @@ function CreateChildrenScope(vnode, children, data = DefaultData) {
     return Store_1.ObservableScope.Create(WrapChildren(vnode.injector, children, data));
 }
 function WrapChildren(injector, children, data) {
-    let nodeArray = [];
+    let nodeArray;
     return function () {
-        const nextData = ToArray(data());
+        const nextData = data === DefaultData ? data() : ToArray(data());
         switch (nextData.length) {
             case 0: {
-                for (let x = 0; x < nodeArray.length; x++) {
-                    vNode.DestroyAll(nodeArray[x][1]);
-                    Store_1.ObservableScope.Destroy(nodeArray[x][2]);
+                if (nodeArray !== undefined) {
+                    for (let x = 0; x < nodeArray.length; x++) {
+                        vNode.DestroyAll(nodeArray[x][1]);
+                        Store_1.ObservableScope.Destroy(nodeArray[x][2]);
+                    }
+                    nodeArray = [];
                 }
-                nodeArray.splice(0);
+                break;
             }
             default: {
-                if (nodeArray.length < 21)
+                if (nodeArray === undefined)
+                    nodeArray = InitializeNextNodes(injector, children, nextData);
+                else if (nodeArray.length < 11)
                     nodeArray = EvaluateNextNodesSmall(injector, children, nextData, nodeArray);
                 else
                     nodeArray = EvaluateNextNodesLarge(injector, children, nextData, nodeArray);
+                break;
             }
         }
         return nodeArray;
@@ -209,54 +216,61 @@ function ToArray(result) {
         return result;
     return [result];
 }
-function EvaluateNextNodesSmall(injector, getNextChildren, nextData, nodeArray) {
-    if (nextData === DEFAULT_DATA) {
-        const nextChildren = injector_1.Injector.Scope(injector, getNextChildren, nextData[0]);
-        const children = CreateNodeArray(nextChildren, nodeArray[0]?.[1]);
-        for (let x = 0; x < nodeArray.length; x++) {
-            vNode.DestroyAll(nodeArray[x][1]);
-            Store_1.ObservableScope.Destroy(nodeArray[x][2]);
-        }
-        return [
-            [undefined, children, null],
-        ];
-    }
+function GetNextNodeRow(data, injector, getNextChildren, scope) {
+    scope ??=
+        data === undefined
+            ? null
+            : Store_1.ObservableScope.Create(function () {
+                const children = injector_1.Injector.Scope(injector, getNextChildren, data);
+                return CreateNodeArray(children);
+            });
+    const children = scope === null
+        ? CreateNodeArray(injector_1.Injector.Scope(injector, getNextChildren, undefined))
+        : Store_1.ObservableScope.Value(scope);
+    return [data, children, scope];
+}
+function InitializeNextNodes(injector, getNextChildren, nextData) {
     const nextNodes = new Array(nextData.length);
     for (let x = 0; x < nextData.length; x++) {
         const data = nextData[x];
-        let i = 0;
-        for (; i < nodeArray.length &&
-            (nodeArray[i] === null || nodeArray[i][0] !== data); i++) { }
-        if (i !== nodeArray.length) {
-            if (nodeArray[i][2]) {
-                const scope = nodeArray[i][2];
-                const value = scope.value;
-                const updatedValue = Store_1.ObservableScope.Value(scope);
-                if (value !== updatedValue)
-                    nodeArray[i][1] = CreateNodeArray(updatedValue);
-            }
-            nextNodes[x] = nodeArray[i];
-            nodeArray[i] = null;
-        }
-        else {
-            const scope = Store_1.ObservableScope.Create(function () {
-                return injector_1.Injector.Scope(injector, getNextChildren, data);
-            });
-            nextNodes[x] = [
-                data,
-                CreateNodeArray(Store_1.ObservableScope.Value(scope)),
-                scope,
-            ];
-        }
-    }
-    for (let x = 0; x < nodeArray.length; x++) {
-        if (nodeArray[x] !== null) {
-            vNode.DestroyAll(nodeArray[x][1]);
-            Store_1.ObservableScope.Destroy(nodeArray[x][2]);
-        }
+        nextNodes[x] = GetNextNodeRow(data, injector, getNextChildren);
     }
     return nextNodes;
 }
+function GetNextNodeRowSmall(injector, getNextChildren, nodeArray, data) {
+    let i = 0;
+    for (; i < nodeArray.length && (nodeArray[i] === null || nodeArray[i][0] !== data); i++) { }
+    if (i === nodeArray.length)
+        return GetNextNodeRow(data, injector, getNextChildren);
+    const nextNodeRow = GetNextNodeRow(data, injector, getNextChildren, nodeArray[i][2]);
+    if (nodeArray[i][1] !== nextNodeRow[1])
+        vNode.DestroyAll(nodeArray[i][1]);
+    nodeArray[i] = null;
+    return nextNodeRow;
+}
+function EvaluateNextNodesSmall(injector, getNextChildren, nextData, nodeArray) {
+    const nextNodes = new Array(nextData.length);
+    for (let x = 0; x < nextData.length; x++)
+        nextNodes[x] = GetNextNodeRowSmall(injector, getNextChildren, nodeArray, nextData[x]);
+    return nextNodes;
+}
+function GetNextNodeRowLarge(injector, getNextChildren, nodeRowMap, data) {
+    const currentChildren = nodeRowMap.get(data);
+    let currentChildIndex = currentChildren ? currentChildren.length - 1 : -1;
+    for (; currentChildIndex >= 0 && currentChildren[currentChildIndex] === null; currentChildIndex--) { }
+    if (currentChildIndex >= 0) {
+        const nodeRow = currentChildren[currentChildIndex];
+        if (currentChildIndex === 0)
+            nodeRowMap.delete(data);
+        else
+            currentChildren[currentChildIndex] = null;
+        const nextNodeRow = GetNextNodeRow(data, injector, getNextChildren, nodeRow[2]);
+        if (nodeRow[1] !== nextNodeRow[1])
+            vNode.DestroyAll(nodeRow[1]);
+        return nextNodeRow;
+    }
+    return GetNextNodeRow(data, injector, getNextChildren);
+}
 function EvaluateNextNodesLarge(injector, getNextChildren, nextData, nodeArray) {
     const nextNodes = new Array(nextData.length);
     const dataMap = new Map();
@@ -266,34 +280,7 @@ function EvaluateNextNodesLarge(injector, getNextChildren, nextData, nodeArray)
         dataMap.set(nodeArray[x][0], arr);
     }
     for (let x = 0; x < nextData.length; x++) {
-        const data = nextData[x];
-        const currentChildren = dataMap.get(data);
-        let currentChildIndex = currentChildren ? currentChildren.length - 1 : -1;
-        for (; currentChildIndex >= 0 && currentChildren[currentChildIndex] === null; currentChildIndex--) { }
-        if (currentChildIndex !== -1) {
-            const currentChild = currentChildren[currentChildIndex];
-            currentChildren[currentChildIndex] = null;
-            const scope = currentChild[2];
-            const value = scope.value;
-            const updatedValue = Store_1.ObservableScope.Value(scope);
-            if (value !== updatedValue) {
-                vNode.DestroyAll(currentChild[1]);
-                currentChild[1] = CreateNodeArray(updatedValue);
-            }
-            nextNodes[x] = currentChild;
-            if (currentChildIndex === 0)
-                dataMap.delete(data);
-        }
-        else {
-            const scope = Store_1.ObservableScope.Create(function () {
-                return injector_1.Injector.Scope(injector, getNextChildren, data);
-            });
-            nextNodes[x] = [
-                data,
-                CreateNodeArray(Store_1.ObservableScope.Value(scope)),
-                scope,
-            ];
-        }
+        nextNodes[x] = GetNextNodeRowLarge(injector, getNextChildren, dataMap, nextData[x]);
     }
     for (const value of dataMap.values()) {
         for (let x = 0; x < value.length; x++) {
@@ -304,22 +291,13 @@ function EvaluateNextNodesLarge(injector, getNextChildren, nextData, nodeArray)
     }
     return nextNodes;
 }
-function CreateNodeArray(children, previousChildren) {
-    if (Array.isArray(children))
-        return children;
-    if (typeof children === "string") {
-        const firstPrevChild = previousChildren?.[0];
-        if (firstPrevChild &&
-            firstPrevChild.node &&
-            firstPrevChild.type === "text") {
-            nodeConfig_1.NodeConfig.setText(firstPrevChild.node, children);
-            return previousChildren.length === 1
-                ? previousChildren
-                : [firstPrevChild];
-        }
-        return [vNode.CreateText(children)];
+function CreateNodeArray(children) {
+    if (!Array.isArray(children)) {
+        return typeof children === "string"
+            ? [{ type: "string", node: children }]
+            : [children];
     }
-    return [children];
+    return children;
 }
 function UpdateChildren(vnode, init = false, skipInit = false) {
     if (!vnode.children)
@@ -335,15 +313,16 @@ function UpdateChildren(vnode, init = false, skipInit = false) {
         if (vnode.destroyed || children !== vnode.children)
             return;
         for (let x = 0; !skipInit && x < children.length; x++)
-            for (let y = 0; y < children[x][1].length; y++)
-                if (children[x][1][y].definition) {
-                    const childNode = children[x][1][y];
+            for (let y = 0; y < children[x][1].length; y++) {
+                const childNode = children[x][1][y];
+                if (!(0, vNode_types_1.isStringNode)(childNode) && childNode.definition) {
                     (0, thread_1.Schedule)(function () {
                         if (vnode.destroyed || children !== vnode.children)
                             return;
                         vNode.Init(childNode);
                     });
                 }
+            }
         (0, thread_1.Thread)(function (async) {
             if (vnode.destroyed || children !== vnode.children)
                 return;

package/Node/vNode.types.d.ts

@@ -14,17 +14,27 @@ export type vNodeEvents<E extends {
     };
 };
 export type vNodeChildrenFunction<T> = ((data: T) => vNode | vNode[]) | ((data: T) => string);
-export type vNode = {
+export type vStringNode = {
+    type: "string";
+    node: string;
+};
+export type vElementNode = {
     type: string;
     definition: vNodeDefinition<any, any, any>;
     injector: Injector;
     node: Node | null;
-    children: [any, vNode[], IObservableScope<string | vNode | vNode[]> | null][] | null;
+    children: (readonly [
+        any,
+        vNode[],
+        IObservableScope<string | vNode | vNode[]> | null
+    ])[] | null;
     destroyed: boolean;
     onDestroyed: Emitter | null;
     scopes: IObservableScope<unknown>[];
     component: Component;
 };
+export type vNode = vStringNode | vElementNode;
+export declare function isStringNode(vnode: vNode): vnode is vStringNode;
 export type vNodeDefinition<P = HTMLElement, E = HTMLElementEventMap, T = never> = {
     type: string;
     node?: Node;

package/Node/vNode.types.js

@@ -1,2 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.isStringNode = isStringNode;
+function isStringNode(vnode) {
+    return vnode.type === "string";
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "j-templates",
-  "version": "7.0.77",
+  "version": "7.0.79",
   "description": "j-templates",
   "license": "MIT",
   "repository": "https://github.com/TypesInCode/jTemplates",