j-templates 5.0.47 → 5.0.49

package/DOM/domNodeConfig.js

@@ -78,5 +78,14 @@ exports.DOMNodeConfig = {
         var cEvent = new CustomEvent(event, data);
         target.dispatchEvent(cEvent);
     },
-    setProperties: utils_1.SetProperties
+    setProperties: utils_1.SetProperties,
+    getFirstChild(target) {
+        return target.firstChild;
+    },
+    getNextSibling(target) {
+        return target.nextSibling;
+    },
+    replaceChildren(target, children) {
+        target.replaceChildren(...children);
+    },
 };

package/Node/componentNode.js

@@ -8,6 +8,7 @@ const component_1 = require("./component");
 const injector_1 = require("../Utils/injector");
 const decorators_1 = require("../Utils/decorators");
 const thread_1 = require("../Utils/thread");
+const list_1 = require("../Utils/list");
 var ComponentNode;
 (function (ComponentNode) {
     function Fire(event, data) {
@@ -55,7 +56,7 @@ function AddPreReqTemplate(node) {
             (0, thread_1.Schedule)(function () {
                 if (node.destroyed)
                     return;
-                nodeRef_1.NodeRef.InitAll(preNodes);
+                nodeRef_1.NodeRef.InitAll(node, preNodes);
             });
             (0, thread_1.Thread)(function () {
                 if (node.destroyed)
@@ -91,20 +92,24 @@ function AddTemplate(node, init) {
             return;
         const nodes = injector_1.Injector.Scope(node.injector, InvokeNodeTemplate, node);
         (0, thread_1.Schedule)(function () {
-            nodeRef_1.NodeRef.InitAll(nodes);
+            nodeRef_1.NodeRef.InitAll(node, nodes);
         });
         (0, thread_1.Thread)(function () {
             if (node.destroyed)
                 return;
+            const list = list_1.List.Create();
+            list_1.List.Add(list, {
+                value: undefined,
+                init: true,
+                nodes
+            });
             if (init)
-                for (var x = 0; x < nodes.length; x++)
-                    nodeRef_1.NodeRef.AddChild(node, nodes[x]);
+                nodeRef_1.NodeRef.ReconcileChildren(node, list);
             else
                 nodeConfig_1.NodeConfig.scheduleUpdate(function () {
                     if (node.destroyed)
                         return;
-                    for (var x = 0; x < nodes.length; x++)
-                        nodeRef_1.NodeRef.AddChild(node, nodes[x]);
+                    nodeRef_1.NodeRef.ReconcileChildren(node, list);
                 });
         });
         if (node.component.Bound !== component_1.Component.prototype.Bound)

package/Node/elementNode.d.ts

@@ -1,4 +1,4 @@
-import { ElementNodeFunctionParam, ElementChildrenFunction, IElementNode, IElementNodeBase } from "./elementNode.types";
+import { ElementChildrenFunction, ElementNodeFunctionParam, IElementNode, IElementNodeBase } from "./elementNode.types";
 export declare namespace ElementNode {
     function Create<T>(type: any, namespace: string, nodeDef: ElementNodeFunctionParam<T>, children: ElementChildrenFunction<T>): IElementNode<T>;
     function Init<T>(elementNode: IElementNodeBase<T>): void;

package/Node/elementNode.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ElementNode = void 0;
-const boundNode_1 = require("./boundNode");
-const nodeConfig_1 = require("./nodeConfig");
+const observableScope_1 = require("../Store/Tree/observableScope");
 const injector_1 = require("../Utils/injector");
 const list_1 = require("../Utils/list");
 const thread_1 = require("../Utils/thread");
+const boundNode_1 = require("./boundNode");
+const nodeConfig_1 = require("./nodeConfig");
 const nodeRef_1 = require("./nodeRef");
-const observableScope_1 = require("../Store/Tree/observableScope");
 var ElementNode;
 (function (ElementNode) {
     function Create(type, namespace, nodeDef, children) {
@@ -63,79 +63,97 @@ function SetDefaultData(node) {
     (0, thread_1.Synch)(function () {
         const nodes = injector_1.Injector.Scope(node.injector, CreateNodeArray, node.childrenFunc, true);
         if (nodes.length > 0) {
-            nodeRef_1.NodeRef.InitAll(nodes);
+            nodeRef_1.NodeRef.InitAll(node, nodes);
             (0, thread_1.Thread)(function () {
                 if (node.destroyed)
                     return;
-                DetachAndAddNodes(node, [], [nodes]);
+                const defaultNodeList = list_1.List.Create();
+                list_1.List.Add(defaultNodeList, {
+                    value: null,
+                    init: true,
+                    nodes
+                });
+                nodeRef_1.NodeRef.ReconcileChildren(node, defaultNodeList);
             });
         }
     });
 }
-function SetData(node, values, init = false) {
-    (0, thread_1.Synch)(function () {
-        const newNodesMap = new Map();
-        const newNodesArrays = new Array(values.length);
-        for (let x = 0; x < values.length; x++) {
-            const value = values[x];
-            let nodes;
-            if (node.nodesMap) {
-                let nodeArrayList = node.nodesMap.get(value);
-                nodes = nodeArrayList && list_1.List.Remove(nodeArrayList);
-            }
-            let newNodeArrayList = newNodesMap.get(value);
-            if (!newNodeArrayList) {
-                newNodeArrayList = list_1.List.Create();
-                newNodesMap.set(value, newNodeArrayList);
-            }
-            if (!nodes) {
-                nodes = injector_1.Injector.Scope(node.injector, CreateNodeArray, node.childrenFunc, value);
-                (0, thread_1.Schedule)(function () {
-                    if (node.destroyed || newNodesMap.size === 0)
-                        return;
-                    nodeRef_1.NodeRef.InitAll(nodes);
-                    list_1.List.Push(newNodeArrayList, nodes);
-                });
+function GetDataValue(data) {
+    return data.value;
+}
+function ReconcileNodeData(node, values) {
+    const nextNodeList = list_1.List.Create();
+    const initNodeList = 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;
+        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;
+                }
             }
-            else
-                list_1.List.Push(newNodeArrayList, nodes);
-            newNodesArrays[x] = nodes;
         }
-        var detachNodes = [];
-        if (node.nodesMap) {
-            for (var nodeArrayList of node.nodesMap.values())
-                nodeArrayList.size > 0 && detachNodes.push(DestroyNodeArrayList(nodeArrayList));
-            node.nodesMap.clear();
+        if (curNode) {
+            list_1.List.RemoveNode(currentNodeList, curNode);
+            list_1.List.AddNode(nextNodeList, curNode);
+            if (!curNode.data.init)
+                list_1.List.Add(initNodeList, curNode.data);
         }
-        node.nodesMap = newNodesMap;
+        else {
+            curNode = list_1.List.Add(nextNodeList, {
+                value: values[x],
+                init: false,
+                nodes: injector_1.Injector.Scope(node.injector, CreateNodeArray, node.childrenFunc, values[x])
+            });
+            list_1.List.Add(initNodeList, curNode.data);
+        }
+    }
+    let curNode = initNodeList.head;
+    while (curNode) {
+        const data = curNode.data;
+        (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) {
+            nodeRef_1.NodeRef.DestroyAll(curDetach.data.nodes);
+            for (let x = 0; x < curDetach.data.nodes.length; x++)
+                node.childNodes.delete(curDetach.data.nodes[x]);
+            curDetach = curDetach.next;
+        }
+        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;
         (0, thread_1.Thread)(function () {
             if (node.destroyed)
                 return;
             if (init)
-                DetachAndAddNodes(node, detachNodes, newNodesMap.size > 0 && newNodesArrays);
+                nodeRef_1.NodeRef.ReconcileChildren(node, attachNodes);
             else
                 nodeConfig_1.NodeConfig.scheduleUpdate(function () {
-                    if (node.destroyed)
+                    if (node.destroyed || attachNodes.size < node.childNodes.size)
                         return;
-                    DetachAndAddNodes(node, detachNodes, newNodesMap.size > 0 && newNodesArrays);
+                    nodeRef_1.NodeRef.ReconcileChildren(node, attachNodes);
                 });
         });
     });
 }
-function DetachAndAddNodes(node, detachNodes, newNodes) {
-    for (var x = 0; x < detachNodes.length; x++)
-        list_1.List.ForEach(detachNodes[x], function (nodes) {
-            for (var x = 0; x < nodes.length; x++)
-                nodeRef_1.NodeRef.DetachChild(node, nodes[x]);
-        });
-    var previousNode = null;
-    for (var x = 0; newNodes && x < newNodes.length; x++) {
-        for (var y = 0; y < newNodes[x].length; y++) {
-            nodeRef_1.NodeRef.AddChildAfter(node, previousNode, newNodes[x][y]);
-            previousNode = newNodes[x][y];
-        }
-    }
-}
 function CreateNodeArray(childrenFunc, value) {
     var newNodes = childrenFunc(value);
     if (typeof newNodes === "string") {
@@ -151,7 +169,3 @@ function CreateNodeArray(childrenFunc, value) {
         return newNodes;
     return [newNodes];
 }
-function DestroyNodeArrayList(nodeArrayList) {
-    list_1.List.ForEach(nodeArrayList, nodeRef_1.NodeRef.DestroyAll);
-    return nodeArrayList;
-}

package/Node/elementNode.types.d.ts

@@ -21,12 +21,17 @@ export type ElementChildrenFunction<T> = {
 export type ElementNodeFunction<T> = {
     (nodeDef: ElementNodeFunctionParam<T>, children?: ElementChildrenFunction<T>): INodeRefBase;
 };
+export interface IElementDataNode<T> {
+    value: T;
+    init: boolean;
+    nodes: NodeRefTypes[] | null;
+}
 export interface IElementNodeBase<T> extends IBoundNodeBase {
     nodeDef: ElementNodeFunctionParam<T>;
     childrenFunc: {
         (data: T): string | NodeRefTypes | NodeRefTypes[];
     };
-    nodesMap: Map<T, IList<Array<NodeRefTypes>>>;
+    nodeList: IList<IElementDataNode<T>> | null;
     setData: boolean;
 }
 export interface IElementNode<T> extends IElementNodeBase<T> {

package/Node/nodeConfig.d.ts

@@ -18,5 +18,8 @@ export interface INodeConfig {
     remove(target: any): void;
     fireEvent(target: any, event: string, data: any): void;
     setProperties(target: any, lastProperties: any, properties: any): void;
+    getFirstChild(target: any): any;
+    getNextSibling(target: any): any;
+    replaceChildren(target: any, children: any[]): void;
 }
 export declare const NodeConfig: INodeConfig;

package/Node/nodeRef.d.ts

@@ -1,7 +1,8 @@
 import { INodeRef, INodeRefBase, NodeRefTypes } from "./nodeRef.types";
 import { IBoundNode } from "./boundNode.types";
-import { IElementNode } from "./elementNode.types";
+import { IElementDataNode, IElementNode } from "./elementNode.types";
 import { IComponentNode } from "./componentNode.types";
+import { IList } from "../Utils/list";
 export declare enum NodeRefType {
     NodeRef = 0,
     BoundNode = 1,
@@ -12,9 +13,10 @@ 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(nodeRefs: Array<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: INodeRefBase): void;
     function DestroyAll(nodes: Array<INodeRefBase>): void;

package/Node/nodeRef.js

@@ -70,7 +70,7 @@ var NodeRef;
                     setAttributes: false,
                     setEvents: false,
                     childrenFunc: null,
-                    nodesMap: null,
+                    nodeList: null,
                     setData: false
                 };
             case NodeRefType.ComponentNode:
@@ -113,9 +113,12 @@ var NodeRef;
         }
     }
     NodeRef.Init = Init;
-    function InitAll(nodeRefs) {
-        for (var x = 0; x < nodeRefs.length; x++)
+    function InitAll(parentNode, nodeRefs) {
+        for (var x = 0; x < nodeRefs.length; x++) {
+            nodeRefs[x].parent = parentNode;
+            parentNode.childNodes.add(nodeRefs[x]);
             Init(nodeRefs[x]);
+        }
     }
     NodeRef.InitAll = InitAll;
     function AddChild(node, child) {
@@ -125,16 +128,42 @@ var NodeRef;
     }
     NodeRef.AddChild = AddChild;
     function AddChildAfter(node, currentChild, newChild) {
-        if (currentChild && !node.childNodes.has(currentChild))
+        if (currentChild && currentChild.parent !== node)
             throw "currentChild is not valid";
         newChild.parent = node;
         node.childNodes.add(newChild);
         nodeConfig_1.NodeConfig.addChildAfter(node.node, currentChild && currentChild.node, newChild.node);
     }
     NodeRef.AddChildAfter = AddChildAfter;
+    function ReconcileChildren(node, nextChildren) {
+        const rootNode = node.node;
+        if (nextChildren.size === 0) {
+            nodeConfig_1.NodeConfig.replaceChildren(rootNode, []);
+            return;
+        }
+        let priorNode;
+        let curDataNode = nextChildren?.head;
+        while (curDataNode) {
+            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;
+                if (actualNode !== expectedNode) {
+                    nodeConfig_1.NodeConfig.addChildBefore(rootNode, actualNode, expectedNode);
+                }
+                priorNode = expectedNode;
+            }
+            curDataNode = curDataNode.next;
+        }
+        let remainingSibling = priorNode && nodeConfig_1.NodeConfig.getNextSibling(priorNode);
+        while (remainingSibling) {
+            nodeConfig_1.NodeConfig.removeChild(rootNode, remainingSibling);
+            remainingSibling = nodeConfig_1.NodeConfig.getNextSibling(priorNode);
+        }
+    }
+    NodeRef.ReconcileChildren = ReconcileChildren;
     function DetachChild(node, child) {
-        if (node.childNodes.has(child)) {
-            node.childNodes.delete(child);
+        if (node.childNodes.delete(child)) {
             nodeConfig_1.NodeConfig.removeChild(node.node, child.node);
             child.parent = null;
         }
@@ -144,7 +173,7 @@ var NodeRef;
         if (node.destroyed)
             return;
         node.destroyed = true;
-        node.childNodes.forEach(Destroy);
+        node.childNodes?.forEach(Destroy);
         for (let x = 0; x < node.destroyables.length; x++)
             node.destroyables[x]?.Destroy();
     }

package/Store/Tree/observableTree.js

@@ -208,14 +208,12 @@ class ObservableTree {
         if (!parentValue)
             throw new Error("Unable to write path: " + path + ". Falsey value found at: " + pathParts.slice(0, x).join("."));
         const prop = pathParts[x];
-        const exists = Object.hasOwn(parentValue, prop);
         const oldValue = parentValue[prop];
         const oldType = TypeOf(oldValue);
         parentValue[prop] = value;
-        if (oldType !== Type.Value)
-            return this.scopeCache.get(oldValue) ||
-                this.scopeCache.get(parentValue);
-        const leafScopes = exists && this.leafScopeCache.get(parentValue);
+        if (oldType !== Type.Value || Array.isArray(parentValue))
+            return this.scopeCache.get(parentValue) || this.scopeCache.get(oldValue);
+        const leafScopes = this.leafScopeCache.get(parentValue);
         return leafScopes && leafScopes[prop] || this.scopeCache.get(parentValue);
     }
     UpdatePathCache(path, value) {
@@ -223,6 +221,9 @@ class ObservableTree {
         if (type === Type.Value)
             return;
         this.pathCache.set(value, path);
+        this.proxyCache.delete(value);
+        this.scopeCache.delete(value);
+        this.leafScopeCache.delete(value);
         const keys = Object.keys(value);
         for (let x = 0; x < keys.length; x++)
             this.UpdatePathCache(`${path}.${keys[x]}`, value[keys[x]]);

package/Utils/list.d.ts

@@ -14,10 +14,13 @@ export declare namespace List {
     function Push<T>(list: IList<T>, data: T): INode<T>;
     function Pop<T>(list: IList<T>): T;
     function Add<T>(list: IList<T>, data: T): INode<T>;
+    function AddNode<T>(list: IList<T>, node: INode<T>): INode<T>;
     function AddBefore<T>(list: IList<T>, node: INode<T>, data: T): INode<T>;
     function AddAfter<T>(list: IList<T>, node: INode<T>, data: T): INode<T>;
     function Remove<T>(list: IList<T>): T;
+    function RemoveNode<T>(list: IList<T>, node: INode<T>): void;
     function ForEach<T>(list: IList<T>, callback: {
         (value: T): void;
     }): void;
+    function ToNodeMap<T>(list: IList<T>, keyCallback: (data: T) => unknown): Map<any, INode<T>[]>;
 }

package/Utils/list.js

@@ -47,7 +47,11 @@ var List;
     }
     List.Pop = Pop;
     function Add(list, data) {
-        var node = { previous: null, next: null, data: data };
+        const node = { previous: null, next: null, data: data };
+        return AddNode(list, node);
+    }
+    List.Add = Add;
+    function AddNode(list, node) {
         if (list.size === 0) {
             list.head = node;
             list.tail = node;
@@ -61,7 +65,7 @@ var List;
         }
         return node;
     }
-    List.Add = Add;
+    List.AddNode = AddNode;
     function AddBefore(list, node, data) {
         if (!node)
             return List.Add(list, data);
@@ -109,6 +113,25 @@ var List;
         return node.data;
     }
     List.Remove = Remove;
+    function RemoveNode(list, node) {
+        if (list.head === node) {
+            list.head = node.next;
+        }
+        else if (list.tail === node) {
+            list.tail = node.previous;
+        }
+        else {
+            const prev = node.previous;
+            const next = node.next;
+            prev.next = next;
+            next.previous = prev;
+        }
+        node.next = node.previous = null;
+        list.size--;
+        if (list.size > 0)
+            list.head.previous = list.tail.next = null;
+    }
+    List.RemoveNode = RemoveNode;
     function ForEach(list, callback) {
         var node = list.head;
         while (node) {
@@ -117,4 +140,19 @@ var List;
         }
     }
     List.ForEach = ForEach;
+    function ToNodeMap(list, keyCallback) {
+        const map = new Map();
+        let node = list.head;
+        while (node) {
+            const key = keyCallback(node.data);
+            const nodes = map.get(key) || [node];
+            if (nodes[0] !== node)
+                nodes.push(node);
+            else
+                map.set(key, nodes);
+            node = node.next;
+        }
+        return map;
+    }
+    List.ToNodeMap = ToNodeMap;
 })(List || (exports.List = List = {}));

package/index.debug.d.ts

@@ -1 +0,0 @@
-export {};

package/index.debug.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const web_export_1 = require("./web.export");
-class HelloWorld extends web_export_1.Component {
-    Template() {
-        return [
-            (0, web_export_1.div)({ data: () => [{ prop: "Hello" }, { prop: "World" }] }, (msg) => (0, web_export_1.span)({}, () => msg.prop))
-        ];
-    }
-}
-const helloWorld = web_export_1.Component.ToFunction("hello-world", null, HelloWorld);
-web_export_1.Component.Attach(document.body, helloWorld({}));