j-templates 6.1.9 → 6.1.11

package/DOM/createPropertyAssignment.js

@@ -13,16 +13,16 @@ function CreateNodeValueAssignment(target) {
     };
 }
 function WalkValue(next, callback, index = 0, parent = "") {
-    const keys = Object.keys(next);
-    for (let x = 0; x < keys.length; x++) {
-        const value = next[keys[x]];
+    const entries = Object.entries(next);
+    for (let x = 0; x < entries.length; x++) {
+        const [key, value] = entries[x];
         const type = (0, json_1.JsonType)(value);
         switch (type) {
             case "object":
-                index = WalkValue(value, callback, index, `${parent}${keys[x]}.`);
+                index = WalkValue(value, callback, index, `${parent}${key}.`);
                 break;
             default:
-                callback(`${parent}${keys[x]}`, value, index);
+                callback(`${parent}${key}`, value, index);
                 index++;
                 break;
         }
@@ -51,7 +51,9 @@ function GetAssignmentFunction(path) {
     }
 }
 function CreatePropertyAssignment(target) {
-    const last = [["", null, null]];
+    const last = [
+        ["", null, null],
+    ];
     function WalkCallback(path, value, index) {
         if (index >= last.length || last[index][0] !== path) {
             last[index] = [path, value, GetAssignmentFunction(path)];

package/DOM/domNodeConfig.js

@@ -57,6 +57,9 @@ exports.DOMNodeConfig = {
     createTextNode(value = '') {
         return window_1.wndw.document.createTextNode(value);
     },
+    isTextNode(target) {
+        return target.nodeType === Node.TEXT_NODE;
+    },
     scheduleUpdate,
     wrapPriorityUpdates,
     addListener(target, type, callback) {

package/Node/boundNode.js

@@ -66,36 +66,9 @@ var BoundNode;
                 boundNode.assignEvents = null;
             }
         }
-        if (nodeDef.text) {
-            boundNode.assignText = nodeConfig_1.NodeConfig.createTextAssignment(boundNode.node);
-            if (typeof nodeDef.text === 'function') {
-                const scope = observableScope_1.ObservableScope.Create(nodeDef.text);
-                boundNode.scopes ??= [];
-                boundNode.scopes.push(scope);
-                observableScope_1.ObservableScope.Watch(scope, function (scope) { ScheduleSetText(boundNode, scope); });
-                const next = observableScope_1.ObservableScope.Value(scope);
-                boundNode.assignText(next);
-            }
-            else {
-                boundNode.assignText(nodeDef.text);
-                boundNode.assignText = null;
-            }
-        }
     }
     BoundNode.Init = Init;
 })(BoundNode || (exports.BoundNode = BoundNode = {}));
-function ScheduleSetText(node, scope) {
-    if (node.setText)
-        return;
-    node.setText = true;
-    nodeConfig_1.NodeConfig.scheduleUpdate(function () {
-        node.setText = false;
-        if (node.destroyed)
-            return;
-        const next = observableScope_1.ObservableScope.Value(scope);
-        node.assignText(next);
-    });
-}
 function ScheduleSetProperties(node, scope) {
     if (node.setProperties)
         return;

package/Node/boundNode.types.d.ts

@@ -1,7 +1,7 @@
 import { IObservableScope } from "../Store/Tree/observableScope";
 import { RecursivePartial } from "../Utils/utils.types";
 import { NodeRefType } from "./nodeRef";
-import { INodeRefBase } from "./nodeRef.types";
+import { AllNodeRefTypes, INodeRefBase } from "./nodeRef.types";
 export type FunctionOr<T> = {
     (...args: Array<any>): T | Promise<T>;
 } | T;
@@ -53,4 +53,5 @@ export interface IBoundNodeBase extends INodeRefBase {
 }
 export interface IBoundNode extends IBoundNodeBase {
     type: NodeRefType.BoundNode;
+    childNodes: AllNodeRefTypes[];
 }

package/Node/component.d.ts

@@ -1,6 +1,6 @@
 import { ComponentNodeEvents, ComponentNodeFunction } from "./componentNode.types";
 import { ObservableScope } from "../Store/Tree/observableScope";
-import { INodeRefBase, NodeRefTypes } from "./nodeRef.types";
+import { INodeRefBase, ElementNodeRefTypes } from "./nodeRef.types";
 export declare class Component<D = void, T = void, E = void> {
     private nodeRef;
     private componentEvents;
@@ -13,7 +13,7 @@ export declare class Component<D = void, T = void, E = void> {
     protected get NodeRef(): INodeRefBase;
     protected get Templates(): T;
     constructor(data: D | (() => (D | Promise<D>)), templates: T, nodeRef: INodeRefBase, componentEvents: ComponentNodeEvents<E>);
-    Template(): NodeRefTypes | NodeRefTypes[];
+    Template(): ElementNodeRefTypes | ElementNodeRefTypes[];
     Bound(): void;
     Fire<P extends keyof E>(event: P, data?: E[P]): void;
     Destroy(): void;
@@ -22,7 +22,7 @@ export declare namespace Component {
     function ToFunction<D = void, T = void, E = void>(type: string, constructor: ComponentConstructor<D, T, E>): ComponentNodeFunction<D, T, E>;
     function ToFunction<D = void, T = void, E = void>(type: string, namespace: string, constructor: ComponentConstructor<D, T, E>): ComponentNodeFunction<D, T, E>;
     function Register<D = void, T = void, E = void>(name: string, constructor: ComponentConstructor<D, T, E>): void;
-    function Attach(node: Node, nodeRef: NodeRefTypes): void;
+    function Attach(node: Node, nodeRef: ElementNodeRefTypes): void;
 }
 export type ComponentConstructor<D, T, E> = {
     new (data: {

package/Node/componentNode.js

@@ -100,6 +100,7 @@ function AddTemplate(node, init) {
             list_1.List.Add(list, {
                 value: undefined,
                 init: true,
+                scope: null,
                 nodes
             });
             if (init) {

package/Node/componentNode.types.d.ts

@@ -1,6 +1,7 @@
 import { BoundNodeFunctionParam, IBoundNodeBase, NodeDefinition } from "./boundNode.types";
 import { Component, ComponentConstructor } from "./component";
 import { NodeRefType } from "./nodeRef";
+import { AllNodeRefTypes } from "./nodeRef.types";
 export type ComponentNodeEvents<E = void> = {
     [P in keyof E]?: {
         (data: E[P]): void;
@@ -32,4 +33,5 @@ export interface IComponentNodeBase<D, T, E> extends IBoundNodeBase {
 }
 export interface IComponentNode<D, T, E> extends IComponentNodeBase<D, T, E> {
     type: NodeRefType.ComponentNode;
+    childNodes: AllNodeRefTypes[];
 }

package/Node/elementNode.js

@@ -21,28 +21,82 @@ var ElementNode;
         return elemNode;
     }
     ElementNode.Create = Create;
+    function CreateValueScopeCallback(dataScope) {
+        return function () {
+            const value = observableScope_1.ObservableScope.Value(dataScope);
+            if (!value)
+                return valueDefault;
+            if (!Array.isArray(value))
+                return [value];
+            return value;
+        };
+    }
+    function CreateNodeScopeCallback(elementNode, valueScope) {
+        let lastNodeList;
+        return function () {
+            const values = observableScope_1.ObservableScope.Value(valueScope);
+            const lastNodeMap = lastNodeList && list_1.List.ToNodeMap(lastNodeList, GetDataValue);
+            const nextNodeList = list_1.List.Create();
+            for (let x = 0; x < values.length; x++) {
+                let curNode = null;
+                if (lastNodeMap !== undefined) {
+                    const nodeArr = lastNodeMap.get(values[x]);
+                    if (nodeArr !== undefined) {
+                        let y = nodeArr.length - 1;
+                        for (; y >= 0 && nodeArr[y] === null; y--) { }
+                        curNode = nodeArr[y];
+                        nodeArr[y] = null;
+                    }
+                }
+                const value = values[x];
+                if (curNode !== null) {
+                    list_1.List.RemoveNode(lastNodeList, curNode);
+                    list_1.List.AddNode(nextNodeList, curNode);
+                    const nextNodes = observableScope_1.ObservableScope.Value(curNode.data.scope);
+                    if (curNode.data.nodes !== nextNodes) {
+                        list_1.List.Add(elementNode.destroyNodeList, {
+                            ...curNode.data,
+                            scope: null
+                        });
+                        curNode.data.init = false;
+                        curNode.data.nodes = nextNodes;
+                    }
+                }
+                else {
+                    const scope = observableScope_1.ObservableScope.Create(function () {
+                        return injector_1.Injector.Scope(elementNode.injector, CreateNodeArray, elementNode.children, value);
+                    });
+                    curNode = list_1.List.Add(nextNodeList, {
+                        value,
+                        init: false,
+                        scope,
+                        nodes: observableScope_1.ObservableScope.Value(scope),
+                    });
+                }
+            }
+            lastNodeList && list_1.List.Append(elementNode.destroyNodeList, lastNodeList);
+            lastNodeList = nextNodeList;
+            return nextNodeList;
+        };
+    }
     function Init(elementNode) {
-        const nodeDef = elementNode.nodeDef;
-        if (elementNode.childrenArray !== null || (elementNode.children !== null && !nodeDef.data)) {
-            SetDefaultData(elementNode);
-        }
-        else if (elementNode.children !== null) {
-            const dataScope = observableScope_1.ObservableScope.Create(nodeDef.data);
-            const valueScope = observableScope_1.ObservableScope.Create(function () {
-                const value = observableScope_1.ObservableScope.Value(dataScope);
-                if (!value)
-                    return valueDefault;
-                if (!Array.isArray(value))
-                    return [value];
-                return value;
+        elementNode.childNodes = new Set();
+        if (elementNode.children !== null) {
+            const dataScope = elementNode.nodeDef.data ? observableScope_1.ObservableScope.Create(elementNode.nodeDef.data) : observableScope_1.ObservableScope.Create(function () {
+                return [true];
             });
+            const valueScope = observableScope_1.ObservableScope.Create(CreateValueScopeCallback(dataScope));
+            const nodeScope = observableScope_1.ObservableScope.Create(CreateNodeScopeCallback(elementNode, valueScope));
             elementNode.childNodes = new Set();
             elementNode.scopes ??= [];
-            elementNode.scopes.push(dataScope, valueScope);
-            observableScope_1.ObservableScope.Watch(valueScope, function () {
-                ScheduleSetData(elementNode, valueScope);
+            elementNode.scopes.push(dataScope, valueScope, nodeScope);
+            observableScope_1.ObservableScope.Watch(nodeScope, function (scope) {
+                ScheduleSetData(elementNode, scope);
             });
-            SetData(elementNode, observableScope_1.ObservableScope.Value(valueScope), true);
+            UpdateNodes(elementNode, observableScope_1.ObservableScope.Value(nodeScope), true);
+        }
+        else if (elementNode.childrenArray !== null) {
+            SetDefaultData(elementNode);
         }
         boundNode_1.BoundNode.Init(elementNode);
     }
@@ -56,104 +110,56 @@ function ScheduleSetData(node, scope) {
         node.setData = false;
         if (node.destroyed)
             return;
-        SetData(node, observableScope_1.ObservableScope.Value(scope));
+        UpdateNodes(node, observableScope_1.ObservableScope.Value(scope));
     });
 }
 function SetDefaultData(node) {
-    (0, thread_1.Synch)(function () {
-        const nodes = node.childrenArray || injector_1.Injector.Scope(node.injector, CreateNodeArray, node.children, true);
-        node.childrenArray = null;
-        if (nodes.length > 0) {
-            (0, thread_1.Schedule)(function () {
-                if (node.destroyed)
-                    return;
-                nodeRef_1.NodeRef.InitAll(node, nodes);
-            });
-            (0, thread_1.Thread)(function () {
-                if (node.destroyed)
-                    return;
-                const defaultNodeList = list_1.List.Create();
-                list_1.List.Add(defaultNodeList, {
-                    value: null,
-                    init: true,
-                    nodes
-                });
-                nodeRef_1.NodeRef.ReconcileChildren(node, defaultNodeList);
-                list_1.List.Clear(defaultNodeList);
-            });
-        }
+    const nodes = node.childrenArray ||
+        injector_1.Injector.Scope(node.injector, CreateNodeArray, node.children, true);
+    node.childrenArray = null;
+    const defaultNodeList = list_1.List.Create();
+    list_1.List.Add(defaultNodeList, {
+        value: null,
+        init: false,
+        scope: null,
+        nodes
     });
+    UpdateNodes(node, defaultNodeList, true);
 }
 function GetDataValue(data) {
     return data.value;
 }
-function ReconcileNodeData(node, values) {
-    const nextNodeList = list_1.List.Create();
-    const currentNodeList = node.nodeList;
-    const nodeMap = currentNodeList && list_1.List.ToNodeMap(currentNodeList, GetDataValue);
-    for (let x = 0; x < values.length; x++) {
-        let curNode = null;
-        if (nodeMap) {
-            const nodeArr = nodeMap.get(values[x]);
-            if (nodeArr) {
-                let y = nodeArr.length - 1;
-                for (; y >= 0 && !curNode; y--) {
-                    curNode = nodeArr[y];
-                    nodeArr[y] = null;
-                }
-            }
-        }
-        if (curNode) {
-            list_1.List.RemoveNode(currentNodeList, curNode);
-            list_1.List.AddNode(nextNodeList, curNode);
-        }
-        else {
-            curNode = list_1.List.Add(nextNodeList, {
-                value: values[x],
-                init: false,
-                nodes: injector_1.Injector.Scope(node.injector, CreateNodeArray, node.children, values[x])
-            });
-        }
-    }
-    let curNode = nextNodeList.head;
-    while (curNode) {
-        const data = curNode.data;
-        !data.init && (0, thread_1.Schedule)(function () {
-            if (node.destroyed || nextNodeList.size === 0)
-                return;
-            nodeRef_1.NodeRef.InitAll(node, data.nodes);
-            data.init = true;
-        });
-        curNode = curNode.next;
-    }
-    if (currentNodeList) {
-        let curDetach = currentNodeList.head;
-        while (curDetach) {
-            const data = curDetach.data;
-            curDetach = curDetach.next;
+function UpdateNodes(elementNode, nodeList, init = false) {
+    (0, thread_1.Synch)(function () {
+        let data;
+        while (data = list_1.List.Pop(elementNode.destroyNodeList)) {
+            observableScope_1.ObservableScope.Destroy(data.scope);
             for (let x = 0; x < data.nodes.length; x++)
-                node.childNodes.delete(data.nodes[x]);
+                elementNode.childNodes.delete(data.nodes[x]);
             nodeRef_1.NodeRef.DestroyAll(data.nodes);
         }
-        list_1.List.Clear(currentNodeList);
-    }
-    node.nodeList = nextNodeList;
-}
-function SetData(node, values, init = false) {
-    (0, thread_1.Synch)(function () {
-        ReconcileNodeData(node, values);
-        const attachNodes = node.nodeList;
-        const startSize = attachNodes.size;
+        for (let node = nodeList.head; node !== null; node = node.next) {
+            if (!node.data.init) {
+                const nodeData = node.data;
+                (0, thread_1.Schedule)(function () {
+                    if (elementNode.destroyed || nodeData.init)
+                        return;
+                    nodeRef_1.NodeRef.InitAll(elementNode, nodeData.nodes);
+                    nodeData.init = true;
+                });
+            }
+        }
+        const startSize = nodeList.size;
         (0, thread_1.Thread)(function (async) {
-            if (node.destroyed)
+            if (elementNode.destroyed)
                 return;
             if (init || !async)
-                nodeRef_1.NodeRef.ReconcileChildren(node, attachNodes);
+                nodeRef_1.NodeRef.ReconcileChildren(elementNode, nodeList);
             else
                 nodeConfig_1.NodeConfig.scheduleUpdate(function () {
-                    if (node.destroyed || attachNodes.size !== startSize)
+                    if (elementNode.destroyed || nodeList.size !== startSize)
                         return;
-                    nodeRef_1.NodeRef.ReconcileChildren(node, attachNodes);
+                    nodeRef_1.NodeRef.ReconcileChildren(elementNode, nodeList);
                 });
         });
     });
@@ -161,12 +167,7 @@ function SetData(node, values, init = false) {
 function CreateNodeArray(childrenFunc, value) {
     const newNodes = childrenFunc(value);
     if (typeof newNodes === "string" || !newNodes) {
-        const textNode = nodeRef_1.NodeRef.Create("text", null, nodeRef_1.NodeRefType.BoundNode);
-        textNode.nodeDef = {
-            text: function () {
-                return childrenFunc(value);
-            }
-        };
+        const textNode = nodeRef_1.NodeRef.Create(newNodes, null, nodeRef_1.NodeRefType.TextNode);
         return [textNode];
     }
     if (Array.isArray(newNodes))

package/Node/elementNode.types.d.ts

@@ -1,11 +1,12 @@
+import { IObservableScope } from "../Store/Tree/observableScope";
 import { IList } from "../Utils/list";
 import { NodeDefinition, BoundNodeFunctionParam, IBoundNodeBase } from "./boundNode.types";
 import { NodeRefType } from "./nodeRef";
-import { INodeRefBase, NodeRefTypes } from "./nodeRef.types";
+import { INodeRefBase, ElementNodeRefTypes, AllNodeRefTypes } from "./nodeRef.types";
 export type ElementChildrenFunction<T> = {
-    (data: T): string | NodeRefTypes | NodeRefTypes[];
+    (data: T): string | ElementNodeRefTypes | ElementNodeRefTypes[];
 };
-export type ElementChildrenFunctionParam<T> = ElementChildrenFunction<T> | NodeRefTypes[];
+export type ElementChildrenFunctionParam<T> = ElementChildrenFunction<T> | ElementNodeRefTypes[];
 export type ElementNodeFunction<T> = {
     (nodeDef: ElementNodeFunctionParam<T>, children?: ElementChildrenFunctionParam<T>): INodeRefBase;
 };
@@ -23,15 +24,17 @@ export interface ElementNodeFunctionParam<T, P = HTMLElement, E = HTMLElementEve
 export interface IElementDataNode<T> {
     value: T;
     init: boolean;
-    nodes: NodeRefTypes[] | null;
+    scope: IObservableScope<AllNodeRefTypes[] | null>;
+    nodes: AllNodeRefTypes[] | null;
 }
 export interface IElementNodeBase<T> extends IBoundNodeBase {
     nodeDef: ElementNodeFunctionParam<T>;
     children: ElementChildrenFunction<T>;
-    childrenArray: NodeRefTypes[];
-    nodeList: IList<IElementDataNode<T>> | null;
+    childrenArray: ElementNodeRefTypes[];
+    destroyNodeList: IList<IElementDataNode<T>>;
     setData: boolean;
 }
 export interface IElementNode<T> extends IElementNodeBase<T> {
     type: NodeRefType.ElementNode;
+    childNodes: Set<AllNodeRefTypes>;
 }

package/Node/nodeConfig.d.ts

@@ -4,6 +4,7 @@ export interface INodeConfig {
     scheduleUpdate(callback: () => void): void;
     wrapPriorityUpdates<P extends any[]>(callback: (...args: P) => void): (...args: P) => void;
     setText(target: any, text: string): void;
+    isTextNode(target: any): boolean;
     getAttribute(target: any, attribute: string): string;
     setAttribute(target: any, attribute: string, value: string): void;
     addListener(target: any, type: string, callback: {

package/Node/nodeRef.d.ts

@@ -1,23 +1,26 @@
-import { INodeRef, INodeRefBase, NodeRefTypes } from "./nodeRef.types";
+import { INodeRef, ElementNodeRefTypes, AllNodeRefTypes } from "./nodeRef.types";
 import { IBoundNode } from "./boundNode.types";
 import { IElementDataNode, IElementNode } from "./elementNode.types";
 import { IComponentNode } from "./componentNode.types";
 import { IList } from "../Utils/list";
+import { ITextNode } from "./textNode.types";
 export declare enum NodeRefType {
     NodeRef = 0,
     BoundNode = 1,
     ElementNode = 2,
-    ComponentNode = 3
+    ComponentNode = 3,
+    TextNode = 4
 }
 export declare namespace NodeRef {
     function Wrap(node: any): INodeRef;
-    function Create(nodeType: any, namespace: string, type: NodeRefType): INodeRef | IBoundNode | IElementNode<any> | IComponentNode<any, any, any>;
-    function Init(nodeRef: NodeRefTypes): void;
-    function InitAll(parentNode: NodeRefTypes, nodeRefs: Array<NodeRefTypes>): void;
-    function AddChild(node: INodeRefBase, child: INodeRefBase): void;
-    function AddChildAfter(node: INodeRefBase, currentChild: INodeRefBase, newChild: INodeRefBase): void;
-    function ReconcileChildren(node: INodeRefBase, nextChildren: IList<IElementDataNode<unknown>>): void;
-    function DetachChild(node: INodeRefBase, child: INodeRefBase): void;
-    function Destroy(node: NodeRefTypes): void;
-    function DestroyAll(nodes: Array<INodeRefBase>): void;
+    function Create(nodeType: any, namespace: string, type: NodeRefType): INodeRef | IBoundNode | IElementNode<any> | IComponentNode<any, any, any> | ITextNode;
+    function Init(nodeRef: AllNodeRefTypes): void;
+    function InitAll(parentNode: ElementNodeRefTypes, nodeRefs: Array<AllNodeRefTypes>): void;
+    function AddChild(node: ElementNodeRefTypes, child: AllNodeRefTypes): void;
+    function AddChildAfter(node: ElementNodeRefTypes, currentChild: AllNodeRefTypes, newChild: AllNodeRefTypes): void;
+    function AddChildBefore(node: ElementNodeRefTypes, currentChild: AllNodeRefTypes, newChild: AllNodeRefTypes): void;
+    function ReconcileChildren(node: ElementNodeRefTypes, nextChildren: IList<IElementDataNode<unknown>>): void;
+    function DetachChild(node: ElementNodeRefTypes, child: AllNodeRefTypes): void;
+    function Destroy(node: AllNodeRefTypes): void;
+    function DestroyAll(nodes: Array<AllNodeRefTypes>): void;
 }

package/Node/nodeRef.js

@@ -6,6 +6,7 @@ const injector_1 = require("../Utils/injector");
 const boundNode_1 = require("./boundNode");
 const elementNode_1 = require("./elementNode");
 const componentNode_1 = require("./componentNode");
+const list_1 = require("../Utils/list");
 const Store_1 = require("../Store");
 var NodeRefType;
 (function (NodeRefType) {
@@ -13,18 +14,26 @@ var NodeRefType;
     NodeRefType[NodeRefType["BoundNode"] = 1] = "BoundNode";
     NodeRefType[NodeRefType["ElementNode"] = 2] = "ElementNode";
     NodeRefType[NodeRefType["ComponentNode"] = 3] = "ComponentNode";
+    NodeRefType[NodeRefType["TextNode"] = 4] = "TextNode";
 })(NodeRefType || (exports.NodeRefType = NodeRefType = {}));
 var NodeRef;
 (function (NodeRef) {
     function Wrap(node) {
-        var nodeRef = Create(null, null, NodeRefType.NodeRef);
+        const nodeRef = Create(null, null, NodeRefType.BoundNode);
         nodeRef.node = node;
-        nodeRef.childNodes = new Set();
+        nodeRef.childNodes = [];
         return nodeRef;
     }
     NodeRef.Wrap = Wrap;
     function Create(nodeType, namespace, type) {
         switch (type) {
+            case NodeRefType.TextNode:
+                return {
+                    type: NodeRefType.TextNode,
+                    parent: null,
+                    node: null,
+                    value: nodeType
+                };
             case NodeRefType.NodeRef:
                 return {
                     node: null,
@@ -80,7 +89,8 @@ var NodeRef;
                     nodeList: null,
                     setData: false,
                     setText: false,
-                    scopes: null
+                    scopes: null,
+                    destroyNodeList: list_1.List.Create()
                 };
             case NodeRefType.ComponentNode:
                 return {
@@ -106,7 +116,7 @@ var NodeRef;
     }
     NodeRef.Create = Create;
     function Init(nodeRef) {
-        if (nodeRef.node)
+        if (nodeRef.node || nodeRef.type === NodeRefType.TextNode)
             return;
         nodeRef.node = nodeRef.nodeType === 'text' ? nodeConfig_1.NodeConfig.createTextNode() : nodeConfig_1.NodeConfig.createNode(nodeRef.nodeType, nodeRef.nodeNamespace);
         nodeRef.childNodes = nodeRef.nodeType !== 'text' ? [] : null;
@@ -124,10 +134,17 @@ var NodeRef;
     }
     NodeRef.Init = Init;
     function AddChildToNode(parentNode, child) {
-        if (Array.isArray(parentNode.childNodes))
-            parentNode.childNodes.push(child);
-        else
-            parentNode.childNodes.add(child);
+        switch (parentNode.type) {
+            case NodeRefType.ElementNode:
+                parentNode.childNodes.add(child);
+                break;
+            case NodeRefType.ComponentNode:
+            case NodeRefType.BoundNode:
+                parentNode.childNodes.push(child);
+                break;
+            default:
+                throw "Unable to add child node to node";
+        }
     }
     function InitAll(parentNode, nodeRefs) {
         for (var x = 0; x < nodeRefs.length; x++) {
@@ -151,6 +168,14 @@ var NodeRef;
         nodeConfig_1.NodeConfig.addChildAfter(node.node, currentChild && currentChild.node, newChild.node);
     }
     NodeRef.AddChildAfter = AddChildAfter;
+    function AddChildBefore(node, currentChild, newChild) {
+        if (currentChild && currentChild.parent !== node)
+            throw "currentChild is not valid";
+        newChild.parent = node;
+        AddChildToNode(node, newChild);
+        nodeConfig_1.NodeConfig.addChildBefore(node.node, currentChild && currentChild.node, newChild.node);
+    }
+    NodeRef.AddChildBefore = AddChildBefore;
     function ReconcileChildren(node, nextChildren) {
         const rootNode = node.node;
         if (nextChildren.size === 0) {
@@ -162,9 +187,17 @@ var NodeRef;
         let remove = false;
         for (let curDataNode = nextChildren.head; curDataNode !== null; curDataNode = curDataNode.next) {
             for (let x = 0; x < curDataNode.data.nodes.length; x++) {
-                const actualNode = priorNode ? nodeConfig_1.NodeConfig.getNextSibling(priorNode) : nodeConfig_1.NodeConfig.getFirstChild(rootNode);
                 const virtualNode = curDataNode.data.nodes[x];
-                const expectedNode = virtualNode.node;
+                const actualNode = priorNode ? nodeConfig_1.NodeConfig.getNextSibling(priorNode) : nodeConfig_1.NodeConfig.getFirstChild(rootNode);
+                let expectedNode;
+                if (virtualNode.type === NodeRefType.TextNode && actualNode !== null && nodeConfig_1.NodeConfig.isTextNode(actualNode)) {
+                    nodeConfig_1.NodeConfig.setText(actualNode, virtualNode.value);
+                    virtualNode.node = expectedNode = actualNode;
+                }
+                else if (virtualNode.type === NodeRefType.TextNode)
+                    expectedNode = nodeConfig_1.NodeConfig.createTextNode(virtualNode.value);
+                else
+                    expectedNode = virtualNode.node;
                 if (actualNode !== expectedNode) {
                     nodeConfig_1.NodeConfig.addChildBefore(rootNode, actualNode, expectedNode);
                     !remove && insert && actualNode && nodeConfig_1.NodeConfig.removeChild(rootNode, actualNode);
@@ -186,14 +219,12 @@ var NodeRef;
     }
     NodeRef.ReconcileChildren = ReconcileChildren;
     function DetachChild(node, child) {
-        if (!Array.isArray(node.childNodes) && node.childNodes.delete(child)) {
-            nodeConfig_1.NodeConfig.removeChild(node.node, child.node);
+        if (node.type === NodeRefType.ElementNode && node.childNodes.delete(child))
             child.parent = null;
-        }
     }
     NodeRef.DetachChild = DetachChild;
     function Destroy(node) {
-        if (node.destroyed)
+        if (node.type === NodeRefType.TextNode || node.destroyed)
             return;
         node.destroyed = true;
         if (Array.isArray(node.childNodes))

package/Node/nodeRef.types.d.ts

@@ -3,6 +3,7 @@ import { IBoundNode } from "./boundNode.types";
 import { IComponentNode } from "./componentNode.types";
 import { IElementNode } from "./elementNode.types";
 import { NodeRefType } from "./nodeRef";
+import { ITextNode } from "./textNode.types";
 export interface INodeRefBase {
     type: NodeRefType;
     node: any;
@@ -10,10 +11,11 @@ export interface INodeRefBase {
     nodeNamespace: string;
     injector: Injector;
     parent: INodeRefBase;
-    childNodes: INodeRefBase[] | Set<INodeRefBase>;
+    childNodes: AllNodeRefTypes[] | Set<AllNodeRefTypes>;
     destroyed: boolean;
 }
 export interface INodeRef extends INodeRefBase {
     type: NodeRefType.NodeRef;
 }
-export type NodeRefTypes = INodeRef | IBoundNode | IElementNode<any> | IComponentNode<any, any, any>;
+export type ElementNodeRefTypes = INodeRef | IBoundNode | IElementNode<any> | IComponentNode<any, any, any>;
+export type AllNodeRefTypes = ElementNodeRefTypes | ITextNode;

package/Node/textNode.types.d.ts

@@ -0,0 +1,7 @@
+import { NodeRefType } from "./nodeRef";
+export interface ITextNode {
+    type: NodeRefType.TextNode;
+    parent: any;
+    node: any;
+    value: string;
+}

package/Node/textNode.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/Utils/decorators.d.ts

@@ -1,6 +1,6 @@
 import { Component } from "../Node/component";
 import { IDestroyable } from "./utils.types";
-import { NodeRefTypes } from "../Node/nodeRef.types";
+import { ElementNodeRefTypes } from "../Node/nodeRef.types";
 export declare function Computed<T extends Component<any, any, any>, K extends keyof T, V extends T[K]>(defaultValue: V): (target: T, propertyKey: K, descriptor: PropertyDescriptor) => PropertyDescriptor;
 export declare function ComputedAsync<T extends Component<any, any, any>, K extends keyof T, V extends T[K]>(defaultValue: V): (target: T, propertyKey: K, descriptor: PropertyDescriptor) => PropertyDescriptor;
 export declare function State(): any;
@@ -16,12 +16,12 @@ export declare namespace Destroy {
 }
 declare function DestroyDecorator<T extends Component<any, any, any> & Record<K, IDestroyable>, K extends string>(target: T, propertyKey: K): any;
 export declare function PreReqTemplate(template: {
-    (): NodeRefTypes | NodeRefTypes[];
+    (): ElementNodeRefTypes | ElementNodeRefTypes[];
 }): <T extends Component<any, any, any>>(target: {
     new (...args: Array<any>): T;
 }) => any;
 export declare namespace PreReqTemplate {
-    function Get(value: any): NodeRefTypes[];
+    function Get(value: any): ElementNodeRefTypes[];
 }
 export declare function PreReq(): typeof PreReqDecorator;
 export declare namespace PreReq {

package/index.d.ts

@@ -1,3 +1,3 @@
-export { NodeRefTypes } from "./Node/nodeRef.types";
+export { AllNodeRefTypes as NodeRefTypes } from "./Node/nodeRef.types";
 export { Component } from "./Node/component";
 export { CalcScope as calc } from './Store/Tree/observableScope';

package/package.json

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