j-templates 6.1.10 → 6.1.12

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,25 +6,35 @@ 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");
+const domNodeConfig_1 = require("../DOM/domNodeConfig");
 var NodeRefType;
 (function (NodeRefType) {
     NodeRefType[NodeRefType["NodeRef"] = 0] = "NodeRef";
     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 +90,8 @@ var NodeRef;
                     nodeList: null,
                     setData: false,
                     setText: false,
-                    scopes: null
+                    scopes: null,
+                    destroyNodeList: list_1.List.Create()
                 };
             case NodeRefType.ComponentNode:
                 return {
@@ -106,10 +117,10 @@ var NodeRef;
     }
     NodeRef.Create = Create;
     function Init(nodeRef) {
-        if (nodeRef.node)
+        if (nodeRef.type === NodeRefType.TextNode || nodeRef.node)
             return;
-        nodeRef.node = nodeRef.nodeType === 'text' ? nodeConfig_1.NodeConfig.createTextNode() : nodeConfig_1.NodeConfig.createNode(nodeRef.nodeType, nodeRef.nodeNamespace);
-        nodeRef.childNodes = nodeRef.nodeType !== 'text' ? [] : null;
+        nodeRef.node = nodeConfig_1.NodeConfig.createNode(nodeRef.nodeType, nodeRef.nodeNamespace);
+        nodeRef.childNodes = nodeRef.nodeType !== NodeRefType.TextNode ? [] : null;
         switch (nodeRef.type) {
             case NodeRefType.BoundNode:
                 boundNode_1.BoundNode.Init(nodeRef);
@@ -124,10 +135,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 +169,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,8 +188,16 @@ 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 actualNode = priorNode ? nodeConfig_1.NodeConfig.getNextSibling(priorNode) : nodeConfig_1.NodeConfig.getFirstChild(rootNode);
+                if (virtualNode.type === NodeRefType.TextNode && virtualNode.node === null) {
+                    if (domNodeConfig_1.DOMNodeConfig.isTextNode(actualNode)) {
+                        domNodeConfig_1.DOMNodeConfig.setText(actualNode, virtualNode.value);
+                        virtualNode.node = actualNode;
+                    }
+                    else
+                        virtualNode.node = domNodeConfig_1.DOMNodeConfig.createTextNode(virtualNode.value);
+                }
                 const expectedNode = virtualNode.node;
                 if (actualNode !== expectedNode) {
                     nodeConfig_1.NodeConfig.addChildBefore(rootNode, actualNode, expectedNode);
@@ -186,14 +220,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/Store/Tree/observableScope.d.ts

@@ -41,11 +41,9 @@ export interface IObservableScope<T> extends IDestroyable {
     dirty: boolean;
     emitter: Emitter;
     emitters: (Emitter | null)[];
-    calcFunctions: ICalcFunction<any>[] | null;
+    calcFunctions: ICalcFunction<any>[];
     onDestroyed: Emitter | null;
     destroyed: boolean;
-    watchEmitters: Emitter[] | null;
-    watchEmittersSet: Set<Emitter> | null;
 }
 export declare function CalcScope<T>(callback: () => T): T;
 export declare namespace ObservableScope {
@@ -55,7 +53,6 @@ export declare namespace ObservableScope {
     function Register(emitter: Emitter): void;
     function Init<T>(scope: IObservableScope<T>): void;
     function Value<T>(scope: IObservableScope<T>): T;
-    function Watching(): boolean;
     function Touch<T>(scope: IObservableScope<T>): void;
     function Watch<T>(scope: IObservableScope<T>, callback: EmitterCallback<[IObservableScope<T>]>): void;
     function Unwatch<T>(scope: IObservableScope<T>, callback: EmitterCallback<[IObservableScope<T> | ObservableScopeValue<T>]>): void;

package/Store/Tree/observableScope.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ObservableScope = exports.ObservableScopeWrapper = exports.ObservableScopeValue = void 0;
 exports.CalcScope = CalcScope;
 const array_1 = require("../../Utils/array");
+const avlTree_1 = require("../../Utils/avlTree");
 const emitter_1 = require("../../Utils/emitter");
-const list_1 = require("../../Utils/list");
 class ObservableScopeValue {
     get Value() {
         return ObservableScope.Value(this.scope);
@@ -48,28 +48,22 @@ class ObservableScope extends ObservableScopeWrapper {
     }
 }
 exports.ObservableScope = ObservableScope;
-let watchingScope = null;
-let currentlyWatching = false;
+let watchState = null;
 function WatchScope(scope) {
-    const parentScope = watchingScope;
-    const parentWatching = currentlyWatching;
-    watchingScope = scope;
-    currentlyWatching = true;
+    const parent = watchState;
+    watchState = [avlTree_1.AVL.Create(emitter_1.Emitter.Compare), []];
     const value = scope.getFunction();
-    watchingScope.watchEmittersSet = null;
-    watchingScope = parentScope;
-    currentlyWatching = parentWatching;
-    return value;
+    const result = [value, avlTree_1.AVL.ToArray(watchState[0]), watchState[1]];
+    watchState = parent;
+    return result;
 }
 function CalcScope(callback) {
     const value = callback();
-    if (currentlyWatching) {
-        watchingScope.calcFunctions ??= [];
-        watchingScope.calcFunctions.push({
+    if (watchState !== null)
+        watchState[1].push({
             getFunction: callback,
             value
         });
-    }
     return value;
 }
 (function (ObservableScope) {
@@ -82,11 +76,9 @@ function CalcScope(callback) {
             dirty: true,
             emitter: emitter_1.Emitter.Create(),
             emitters: [],
-            calcFunctions: null,
+            calcFunctions: [],
             onDestroyed: null,
             destroyed: false,
-            watchEmitters: null,
-            watchEmittersSet: null,
             setCallback: function () {
                 return OnSet(scope);
             },
@@ -95,35 +87,25 @@ function CalcScope(callback) {
     }
     ObservableScope.Create = Create;
     function Register(emitter) {
-        if (!currentlyWatching)
+        if (watchState === null)
             return;
-        watchingScope.watchEmitters ??= [];
-        if (watchingScope.watchEmitters.length === 10)
-            watchingScope.watchEmittersSet ??= new Set(watchingScope.watchEmitters);
-        if (watchingScope.watchEmittersSet === null ? !watchingScope.watchEmitters.includes(emitter) : !watchingScope.watchEmittersSet.has(emitter)) {
-            watchingScope.watchEmittersSet?.add(emitter);
-            watchingScope.watchEmitters.push(emitter);
-        }
+        avlTree_1.AVL.Insert(watchState[0], emitter);
     }
     ObservableScope.Register = Register;
     function Init(scope) {
         if (!scope)
             return;
-        UpdateScope(scope);
+        UpdateValue(scope);
     }
     ObservableScope.Init = Init;
     function Value(scope) {
         if (!scope)
             return undefined;
         Register(scope.emitter);
-        UpdateScope(scope);
+        UpdateValue(scope);
         return scope.value;
     }
     ObservableScope.Value = Value;
-    function Watching() {
-        return currentlyWatching;
-    }
-    ObservableScope.Watching = Watching;
     function Touch(scope) {
         if (!scope || !scope.emitter)
             return;
@@ -148,6 +130,8 @@ function CalcScope(callback) {
     }
     ObservableScope.OnDestroyed = OnDestroyed;
     function Update(scope) {
+        if (!scope || scope.dirty || scope.destroyed)
+            return;
         OnSet(scope);
     }
     ObservableScope.Update = Update;
@@ -156,25 +140,6 @@ function CalcScope(callback) {
     }
     ObservableScope.Destroy = Destroy;
 })(ObservableScope || (exports.ObservableScope = ObservableScope = {}));
-function UpdateScope(scope) {
-    const prePromise = scope.promise;
-    UpdateValue(scope);
-    scope.async && prePromise !== scope.promise && scope.promise.then(function () {
-        emitter_1.Emitter.Emit(scope.emitter, scope);
-    });
-}
-const updateScopeQueue = list_1.List.Create();
-function ProcessScopeUpdateQueue() {
-    const processList = list_1.List.Split(updateScopeQueue, 0);
-    for (let node = processList.head; node !== null; node = node.next)
-        UpdateScope(node.data);
-    list_1.List.Clear(processList);
-}
-function QueueScopeUpdate(scope) {
-    list_1.List.Add(updateScopeQueue, scope);
-    if (updateScopeQueue.size === 1)
-        queueMicrotask(ProcessScopeUpdateQueue);
-}
 function CalcChanged(calc) {
     const value = calc.getFunction();
     const changed = calc.value !== value;
@@ -182,35 +147,48 @@ function CalcChanged(calc) {
     return changed;
 }
 function DirtyScope(scope) {
-    scope.dirty = scope.calcFunctions === null || scope.calcFunctions.some(CalcChanged);
-    scope.dirty && (scope.async ? QueueScopeUpdate(scope) : emitter_1.Emitter.Emit(scope.emitter, scope));
+    if (scope.dirty || !scope.getFunction)
+        return;
+    scope.dirty = scope.calcFunctions.length === 0 || scope.calcFunctions.some(CalcChanged);
+    scope.dirty && emitter_1.Emitter.Emit(scope.emitter, scope);
+}
+const scopeQueue = new Set();
+function ProcessScopeQueue() {
+    const scopes = Array.from(scopeQueue);
+    scopeQueue.clear();
+    for (let x = 0; x < scopes.length; x++)
+        DirtyScope(scopes[x]);
 }
 function OnSet(scope) {
-    if (!scope || scope.dirty || scope.destroyed)
-        return scope?.destroyed;
+    if (scope.destroyed)
+        return true;
+    if (scope.async || scope.calcFunctions.length > 0) {
+        if (scopeQueue.size === 0)
+            queueMicrotask(ProcessScopeQueue);
+        scopeQueue.add(scope);
+        return;
+    }
     DirtyScope(scope);
-    return false;
 }
 function UpdateValue(scope) {
     if (!scope.dirty)
         return;
     scope.dirty = false;
-    scope.watchEmitters = null;
-    scope.calcFunctions = null;
-    const value = WatchScope(scope);
+    const [value, emitters, calcFunctions] = WatchScope(scope);
     if (scope.async) {
         scope.promise = value.then(function (result) {
             scope.value = result;
+            emitter_1.Emitter.Emit(scope.emitter, scope);
             return result;
         });
     }
     else
         scope.value = value;
-    UpdateEmitters(scope);
+    scope.calcFunctions = calcFunctions;
+    UpdateEmitters(scope, emitters);
 }
-function UpdateEmitters(scope) {
-    const right = scope.watchEmitters;
-    if (right === null) {
+function UpdateEmitters(scope, right) {
+    if (right.length === 0) {
         if (scope.emitters.length > 0) {
             for (let x = 0; x < scope.emitters.length; x++)
                 emitter_1.Emitter.Remove(scope.emitters[x], scope.setCallback);
@@ -218,7 +196,6 @@ function UpdateEmitters(scope) {
         }
         return;
     }
-    emitter_1.Emitter.Sort(right);
     (0, array_1.ReconcileSortedArrays)(scope.emitters, right, function (emitter) {
         emitter_1.Emitter.On(emitter, scope.setCallback);
     }, function (emitter) {

package/Utils/avlTree.d.ts

@@ -0,0 +1,15 @@
+type Compare<T> = (a: T, b: T) => number;
+export interface AvlTree<T> {
+    size: number;
+    root: AvlTreeNode<T> | null;
+    compare: Compare<T>;
+}
+export type AvlTreeNode<T> = [T, number, number, AvlTreeNode<T> | null, AvlTreeNode<T> | null];
+export declare namespace AVL {
+    function Create<T>(compare: Compare<T>): AvlTree<T>;
+    function Clear(tree: AvlTree<unknown>): void;
+    function Insert<T>(tree: AvlTree<T>, value: T): void;
+    function ForEach<T>(tree: AvlTree<T>, callback: (value: T) => void): void;
+    function ToArray<T>(tree: AvlTree<T>): T[];
+}
+export {};

package/Utils/avlTree.js

@@ -0,0 +1,140 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AVL = void 0;
+const VALUE = 0;
+const BALANCE = 1;
+const HEIGHT = 2;
+const LEFT = 3;
+const RIGHT = 4;
+function Squash(x) {
+    return x ? x < 0 ? -1 : 1 : 0;
+}
+var AVL;
+(function (AVL) {
+    function Create(compare) {
+        return CreateTree(compare);
+    }
+    AVL.Create = Create;
+    function Clear(tree) {
+        tree.root = null;
+        tree.size = 0;
+    }
+    AVL.Clear = Clear;
+    function Insert(tree, value) {
+        if (tree.size === 0) {
+            tree.root = CreateNode(value);
+            tree.size = 1;
+            return;
+        }
+        InsertValue(tree, value);
+    }
+    AVL.Insert = Insert;
+    function ForEach(tree, callback) {
+        PreOrder(tree.root, callback);
+    }
+    AVL.ForEach = ForEach;
+    function ToArray(tree) {
+        const result = new Array(tree.size);
+        let index = 0;
+        ForEach(tree, function (value) {
+            result[index++] = value;
+        });
+        return result;
+    }
+    AVL.ToArray = ToArray;
+})(AVL || (exports.AVL = AVL = {}));
+function PreOrder(node, callback) {
+    if (node === null)
+        return;
+    PreOrder(node[LEFT], callback);
+    callback(node[VALUE]);
+    PreOrder(node[RIGHT], callback);
+}
+function CreateTree(compare) {
+    return {
+        size: 0,
+        compare,
+        root: null,
+    };
+}
+function CreateNode(value) {
+    return [value, 0, 1, null, null];
+}
+function InsertValue(tree, value) {
+    const startSize = tree.size;
+    let node = tree.root;
+    let comp = 0;
+    const path = [];
+    while (node !== null) {
+        comp = Squash(tree.compare(value, node[VALUE]));
+        path.push([comp, node]);
+        switch (comp) {
+            case 0:
+                node = null;
+                break;
+            case -1:
+                node = node[LEFT] ??= (tree.size++, CreateNode(value));
+                break;
+            case 1:
+                node = node[RIGHT] ??= (tree.size++, CreateNode(value));
+                break;
+        }
+    }
+    if (tree.size === startSize)
+        return;
+    for (let x = path.length - 2; x >= 0; x--) {
+        SetHeight(path[x][1]);
+        if (Math.abs(path[x][1][BALANCE]) === 2) {
+            const newRoot = BalanceNode(path[x][1]);
+            if (x === 0)
+                tree.root = newRoot;
+            else {
+                const [comp, parent] = path[x - 1];
+                switch (comp) {
+                    case -1:
+                        parent[LEFT] = newRoot;
+                        break;
+                    case 1:
+                        parent[RIGHT] = newRoot;
+                        break;
+                }
+            }
+        }
+    }
+}
+function BalanceNode(node) {
+    if (node[BALANCE] < 0) {
+        if (node[LEFT][BALANCE] > 0)
+            node[LEFT] = RotateLeft(node[LEFT]);
+        return RotateRight(node);
+    }
+    if (node[RIGHT][BALANCE] < 0)
+        node[RIGHT] = RotateRight(node[RIGHT]);
+    return RotateLeft(node);
+}
+function RotateLeft(node) {
+    const startRightLeft = node[RIGHT][LEFT];
+    const root = node[RIGHT];
+    root[LEFT] = node;
+    node[RIGHT] = startRightLeft;
+    SetHeight(node);
+    SetHeight(root);
+    return root;
+}
+function RotateRight(node) {
+    const startLeftRight = node[LEFT][RIGHT];
+    const root = node[LEFT];
+    root[RIGHT] = node;
+    node[LEFT] = startLeftRight;
+    SetHeight(node);
+    SetHeight(root);
+    return root;
+}
+function SetHeight(node) {
+    const leftHeight = node[LEFT]?.[HEIGHT] ?? 0;
+    const rightHeight = node[RIGHT]?.[HEIGHT] ?? 0;
+    const balance = rightHeight - leftHeight;
+    const height = leftHeight > rightHeight ? leftHeight : rightHeight;
+    node[HEIGHT] = height + 1;
+    node[BALANCE] = balance;
+}

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/Utils/distinctArray.d.ts

@@ -0,0 +1,10 @@
+export type DistinctArray<T> = {
+    id: (value: T) => number;
+    distinct: T[];
+    array: T[];
+};
+export declare namespace DistinctArray {
+    function Create<T>(id: (value: T) => number): DistinctArray<T>;
+    function Push<T>({ id, distinct, array }: DistinctArray<T>, value: T): void;
+    function Get<T>({ array }: DistinctArray<T>): T[];
+}

package/Utils/distinctArray.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DistinctArray = void 0;
+var DistinctArray;
+(function (DistinctArray) {
+    function Create(id) {
+        return {
+            id,
+            distinct: [],
+            array: []
+        };
+    }
+    DistinctArray.Create = Create;
+    function Push({ id, distinct, array }, value) {
+        const vId = id(value);
+        if (distinct[vId] === undefined) {
+            distinct[vId] = value;
+            array.push(value);
+        }
+    }
+    DistinctArray.Push = Push;
+    function Get({ array }) {
+        return array;
+    }
+    DistinctArray.Get = Get;
+})(DistinctArray || (exports.DistinctArray = DistinctArray = {}));

package/Utils/emitter.d.ts

@@ -2,9 +2,11 @@ export type EmitterCallback<T extends readonly any[] = any[]> = (...args: T) =>
 export type Emitter = [number, ...EmitterCallback[]];
 export declare namespace Emitter {
     function Create(): Emitter;
+    function GetId(emitter: Emitter): number;
     function On(emitter: Emitter, callback: EmitterCallback): void;
     function Emit(emitter: Emitter, ...args: any[]): void;
     function Remove(emitter: Emitter, callback: EmitterCallback): void;
     function Clear(emitter: Emitter): void;
     function Sort(emitters: Emitter[]): Emitter[];
+    function Compare(a: Emitter, b: Emitter): number;
 }

package/Utils/emitter.js

@@ -10,6 +10,10 @@ var Emitter;
         return emitter;
     }
     Emitter.Create = Create;
+    function GetId(emitter) {
+        return emitter[0];
+    }
+    Emitter.GetId = GetId;
     function On(emitter, callback) {
         emitter.push(callback);
     }
@@ -43,4 +47,5 @@ var Emitter;
     function Compare(a, b) {
         return a[0] - b[0];
     }
+    Emitter.Compare = Compare;
 })(Emitter || (exports.Emitter = Emitter = {}));

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.10",
+  "version": "6.1.12",
   "description": "j-templates",
   "license": "MIT",
   "repository": "https://github.com/TypesInCode/jTemplates",