j-templates 5.0.51 → 5.0.53

package/DOM/createEventAssignment.d.ts

@@ -0,0 +1,3 @@
+export declare function CreateEventAssignment(target: HTMLElement): (next: null | {
+    [event: string]: (event: Event) => void;
+}) => void;

package/DOM/createEventAssignment.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CreateEventAssignment = CreateEventAssignment;
+function AssignEvent(target, event) {
+    let lastValue;
+    return function Assign(value) {
+        if (value !== lastValue) {
+            lastValue && target.removeEventListener(event, lastValue);
+            value && target.addEventListener(event, value);
+            lastValue = value;
+        }
+    };
+}
+function DefaultAssignment(target, writeTo, next, event) {
+    const value = next;
+    writeTo[event] ??= AssignEvent(target, event);
+    writeTo[event](value);
+}
+function CreateEventAssignment(target) {
+    let priorKeys;
+    const writeTo = {};
+    return function AssignNext(next) {
+        const nextKeys = next !== null ? Object.keys(next) : [];
+        const keys = priorKeys === undefined ? nextKeys : nextKeys.concat(priorKeys);
+        priorKeys = nextKeys;
+        for (let x = 0; x < keys.length; x++)
+            DefaultAssignment(target, writeTo, next && next[keys[x]], keys[x]);
+    };
+}

package/DOM/createPropertyAssignment.d.ts

@@ -0,0 +1,4 @@
+export declare function CreateNodeValueAssignment(target: HTMLElement): (value: {
+    nodeValue: string;
+}) => void;
+export declare function CreatePropertyAssignment(target: any, root?: boolean): (next: any) => void;

package/DOM/createPropertyAssignment.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CreateNodeValueAssignment = CreateNodeValueAssignment;
+exports.CreatePropertyAssignment = CreatePropertyAssignment;
+const json_1 = require("../Utils/json");
+function AssignProp(target, prop) {
+    let lastValue = target[prop];
+    return function Assign(value) {
+        if (value !== lastValue) {
+            target[prop] = value;
+            lastValue = value;
+        }
+    };
+}
+function CreateNodeValueAssignment(target) {
+    let lastValue = target.nodeValue;
+    return function AssignNodeValue(value) {
+        if (value.nodeValue !== lastValue) {
+            target.nodeValue = value.nodeValue;
+            lastValue = value.nodeValue;
+        }
+    };
+}
+function CreateValueAssignment(target) {
+    let lastValue = target.value;
+    target.addEventListener('blur', function () {
+        target.value = lastValue;
+    });
+    return function AssignValue(value) {
+        if (value !== lastValue) {
+            const start = target.selectionStart;
+            const end = target.selectionEnd;
+            target.value = value;
+            if (target.ownerDocument.activeElement === target)
+                target.setSelectionRange(start, end);
+            lastValue = value;
+        }
+    };
+}
+function ValueAssignment(target, writeTo, next) {
+    writeTo.value ??= target.nodeName === 'INPUT' ? CreateValueAssignment(target) : AssignProp(target, 'value');
+    writeTo.value(next.value);
+}
+function DefaultAssignment(target, writeTo, next, prop) {
+    const value = next[prop];
+    writeTo[prop] ??= (0, json_1.JsonType)(value) === 'value' ?
+        AssignProp(target, prop) :
+        CreatePropertyAssignment(target[prop], false);
+    writeTo[prop](value);
+}
+function CreatePropertyAssignment(target, root = true) {
+    const writeTo = {};
+    return function AssignNext(next) {
+        const keys = Object.keys(next);
+        for (let x = 0; x < keys.length; x++) {
+            switch (root) {
+                case true: {
+                    switch (keys[x]) {
+                        case 'value':
+                            ValueAssignment(target, writeTo, next);
+                            break;
+                        default:
+                            DefaultAssignment(target, writeTo, next, keys[x]);
+                            break;
+                    }
+                    break;
+                }
+                default:
+                    DefaultAssignment(target, writeTo, next, keys[x]);
+                    break;
+            }
+        }
+    };
+}

package/DOM/domNodeConfig.d.ts

@@ -1,2 +1,2 @@
 import { INodeConfig } from '../Node/nodeConfig';
-export declare var DOMNodeConfig: INodeConfig;
+export declare const DOMNodeConfig: INodeConfig;

package/DOM/domNodeConfig.js

@@ -3,27 +3,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DOMNodeConfig = void 0;
 const window_1 = require("./window");
 const list_1 = require("../Utils/list");
-const utils_1 = require("./utils");
-const thread_1 = require("../Utils/thread");
-var pendingUpdates = list_1.List.Create();
-var updateScheduled = false;
+const createPropertyAssignment_1 = require("./createPropertyAssignment");
+const createEventAssignment_1 = require("./createEventAssignment");
+let pendingUpdates = list_1.List.Create();
+let updateScheduled = false;
+const updateMs = 16;
 function processUpdates() {
     list_1.List.Add(pendingUpdates, null);
-    var callback;
+    const start = Date.now();
+    let callback;
     while ((callback = list_1.List.Pop(pendingUpdates)))
-        (0, thread_1.Synch)(callback);
+        callback();
     if (pendingUpdates.size === 0)
         updateScheduled = false;
+    else if (Date.now() - start < updateMs)
+        processUpdates();
     else
         window_1.wndw.requestAnimationFrame(processUpdates);
 }
 exports.DOMNodeConfig = {
     createNode(type, namespace) {
-        return type !== "text" ?
-            namespace ?
-                window_1.wndw.document.createElementNS(namespace, type) :
-                window_1.wndw.document.createElement(type) :
-            window_1.wndw.document.createTextNode("");
+        return namespace ?
+            window_1.wndw.document.createElementNS(namespace, type) :
+            window_1.wndw.document.createElement(type);
+    },
+    createTextNode(value = '') {
+        return window_1.wndw.document.createTextNode(value);
     },
     scheduleUpdate(callback) {
         list_1.List.Add(pendingUpdates, callback);
@@ -74,14 +79,24 @@ exports.DOMNodeConfig = {
     setAttribute(target, attribute, value) {
         target.setAttribute(attribute, value);
     },
+    createPropertyAssignment(target) {
+        if (target.nodeType === Node.TEXT_NODE)
+            return (0, createPropertyAssignment_1.CreateNodeValueAssignment)(target);
+        return (0, createPropertyAssignment_1.CreatePropertyAssignment)(target);
+    },
+    createEventAssignment(target) {
+        return (0, createEventAssignment_1.CreateEventAssignment)(target);
+    },
     fireEvent(target, event, data) {
         var cEvent = new CustomEvent(event, data);
         target.dispatchEvent(cEvent);
     },
-    setProperties: utils_1.SetProperties,
     getFirstChild(target) {
         return target.firstChild;
     },
+    getLastChild(target) {
+        return target.lastChild;
+    },
     getNextSibling(target) {
         return target.nextSibling;
     },

package/DOM/elements.d.ts

@@ -10,6 +10,7 @@ export declare function img<T>(nodeDef: ElementNodeFunctionParam<T>): import("..
 export declare function video<T>(nodeDef: ElementNodeFunctionParam<T>, children?: ElementChildrenFunction<T>): import("../Node/elementNode.types").IElementNode<T>;
 export declare function source<T>(nodeDef: ElementNodeFunctionParam<T>): import("../Node/elementNode.types").IElementNode<T>;
 export declare function input<T>(nodeDef: ElementNodeFunctionParam<T>): import("../Node/elementNode.types").IElementNode<T>;
+export declare function textarea<T>(nodeDef: ElementNodeFunctionParam<T>): import("../Node/elementNode.types").IElementNode<T>;
 export declare function select<T>(nodeDef: ElementNodeFunctionParam<T>, children?: ElementChildrenFunction<T>): import("../Node/elementNode.types").IElementNode<T>;
 export declare function option<T>(nodeDef: ElementNodeFunctionParam<T>, children?: ElementChildrenFunction<T>): import("../Node/elementNode.types").IElementNode<T>;
 export declare function h1<T>(nodeDef: ElementNodeFunctionParam<T>, children?: ElementChildrenFunction<T>): import("../Node/elementNode.types").IElementNode<T>;

package/DOM/elements.js

@@ -1,96 +1,99 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.td = exports.tr = exports.th = exports.table = exports.button = exports.style = exports.p = exports.h3 = exports.h2 = exports.h1 = exports.option = exports.select = exports.input = exports.source = exports.video = exports.img = exports.span = exports.b = exports.br = exports.li = exports.ul = exports.a = exports.div = void 0;
+exports.div = div;
+exports.a = a;
+exports.ul = ul;
+exports.li = li;
+exports.br = br;
+exports.b = b;
+exports.span = span;
+exports.img = img;
+exports.video = video;
+exports.source = source;
+exports.input = input;
+exports.textarea = textarea;
+exports.select = select;
+exports.option = option;
+exports.h1 = h1;
+exports.h2 = h2;
+exports.h3 = h3;
+exports.p = p;
+exports.style = style;
+exports.button = button;
+exports.table = table;
+exports.th = th;
+exports.tr = tr;
+exports.td = td;
 const elementNode_1 = require("../Node/elementNode");
 function div(nodeDef, children) {
     return elementNode_1.ElementNode.Create("div", null, nodeDef, children);
 }
-exports.div = div;
 function a(nodeDef, children) {
     return elementNode_1.ElementNode.Create("a", null, nodeDef, children);
 }
-exports.a = a;
 function ul(nodeDef, children) {
     return elementNode_1.ElementNode.Create("ul", null, nodeDef, children);
 }
-exports.ul = ul;
 function li(nodeDef, children) {
     return elementNode_1.ElementNode.Create("li", null, nodeDef, children);
 }
-exports.li = li;
 function br(nodeDef) {
     return elementNode_1.ElementNode.Create("br", null, nodeDef, null);
 }
-exports.br = br;
 function b(nodeDef, children) {
     return elementNode_1.ElementNode.Create("b", null, nodeDef, children);
 }
-exports.b = b;
 function span(nodeDef, children) {
     return elementNode_1.ElementNode.Create("span", null, nodeDef, children);
 }
-exports.span = span;
 function img(nodeDef) {
     return elementNode_1.ElementNode.Create("img", null, nodeDef, null);
 }
-exports.img = img;
 function video(nodeDef, children) {
     return elementNode_1.ElementNode.Create("video", null, nodeDef, children);
 }
-exports.video = video;
 function source(nodeDef) {
     return elementNode_1.ElementNode.Create("source", null, nodeDef, null);
 }
-exports.source = source;
 function input(nodeDef) {
     return elementNode_1.ElementNode.Create("input", null, nodeDef, null);
 }
-exports.input = input;
+function textarea(nodeDef) {
+    return elementNode_1.ElementNode.Create("textarea", null, nodeDef, null);
+}
 function select(nodeDef, children) {
     return elementNode_1.ElementNode.Create("select", null, nodeDef, children);
 }
-exports.select = select;
 function option(nodeDef, children) {
     return elementNode_1.ElementNode.Create("option", null, nodeDef, children);
 }
-exports.option = option;
 function h1(nodeDef, children) {
     return elementNode_1.ElementNode.Create("h1", null, nodeDef, children);
 }
-exports.h1 = h1;
 function h2(nodeDef, children) {
     return elementNode_1.ElementNode.Create("h2", null, nodeDef, children);
 }
-exports.h2 = h2;
 function h3(nodeDef, children) {
     return elementNode_1.ElementNode.Create("h3", null, nodeDef, children);
 }
-exports.h3 = h3;
 function p(nodeDef, children) {
     return elementNode_1.ElementNode.Create("p", null, nodeDef, children);
 }
-exports.p = p;
 function style(nodeDef, children) {
     return elementNode_1.ElementNode.Create("style", null, nodeDef, children);
 }
-exports.style = style;
 function button(nodeDef, children) {
     return elementNode_1.ElementNode.Create("button", null, nodeDef, children);
 }
-exports.button = button;
 function table(nodeDef, children) {
     return elementNode_1.ElementNode.Create("table", null, nodeDef, children);
 }
-exports.table = table;
 function th(nodeDef, children) {
     return elementNode_1.ElementNode.Create("th", null, nodeDef, children);
 }
-exports.th = th;
 function tr(nodeDef, children) {
     return elementNode_1.ElementNode.Create("tr", null, nodeDef, children);
 }
-exports.tr = tr;
 function td(nodeDef, children) {
     return elementNode_1.ElementNode.Create("td", null, nodeDef, children);
 }
-exports.td = td;

package/DOM/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./elements";
 export * from "./svgElements";
-export * from "./utils";
+export * from "./createPropertyAssignment";
+export * from "./createEventAssignment";

package/DOM/index.js

@@ -16,4 +16,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./elements"), exports);
 __exportStar(require("./svgElements"), exports);
-__exportStar(require("./utils"), exports);
+__exportStar(require("./createPropertyAssignment"), exports);
+__exportStar(require("./createEventAssignment"), exports);

package/DOM/svgElements.js

@@ -1,17 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.circle = exports.g = exports.svg = void 0;
+exports.svg = svg;
+exports.g = g;
+exports.circle = circle;
 const elementNode_1 = require("../Node/elementNode");
 const svgNs = "http://www.w3.org/2000/svg";
 function svg(nodeDef, children) {
     return elementNode_1.ElementNode.Create("svg", svgNs, nodeDef, children);
 }
-exports.svg = svg;
 function g(nodeDef, children) {
     return elementNode_1.ElementNode.Create("g", svgNs, nodeDef, children);
 }
-exports.g = g;
 function circle(nodeDef, children) {
     return elementNode_1.ElementNode.Create("circle", svgNs, nodeDef, children);
 }
-exports.circle = circle;

package/Node/boundNode.js

@@ -9,37 +9,32 @@ var BoundNode;
         const nodeDef = boundNode.nodeDef;
         if (nodeDef.props) {
             const scope = observableScope_1.ObservableScope.Create(nodeDef.props);
-            boundNode.destroyables.push(CreateScopeDestroyable(scope));
+            boundNode.scopes ??= [];
+            boundNode.scopes.push(scope);
+            boundNode.assignProperties = nodeConfig_1.NodeConfig.createPropertyAssignment(boundNode.node);
             observableScope_1.ObservableScope.Watch(scope, function (scope) { ScheduleSetProperties(boundNode, scope); });
-            SetProperties(boundNode, observableScope_1.ObservableScope.Value(scope));
+            const next = observableScope_1.ObservableScope.Value(scope);
+            boundNode.assignProperties(next);
         }
         if (nodeDef.attrs) {
             const scope = observableScope_1.ObservableScope.Create(nodeDef.attrs);
-            boundNode.destroyables.push(CreateScopeDestroyable(scope));
+            boundNode.scopes ??= [];
+            boundNode.scopes.push(scope);
             observableScope_1.ObservableScope.Watch(scope, function (scope) { ScheduleSetAttributes(boundNode, scope); });
             SetAttributes(boundNode, observableScope_1.ObservableScope.Value(scope));
         }
         if (nodeDef.on) {
             const scope = observableScope_1.ObservableScope.Create(nodeDef.on);
-            boundNode.destroyables.push(CreateScopeDestroyable(scope));
-            boundNode.destroyables.push({
-                Destroy() {
-                    SetEvents(boundNode, {});
-                }
-            });
+            boundNode.scopes ??= [];
+            boundNode.scopes.push(scope);
+            boundNode.assignEvents = nodeConfig_1.NodeConfig.createEventAssignment(boundNode.node);
             observableScope_1.ObservableScope.Watch(scope, function (scope) { ScheduleSetEvents(boundNode, scope); });
-            SetEvents(boundNode, observableScope_1.ObservableScope.Value(scope));
+            const next = observableScope_1.ObservableScope.Value(scope);
+            boundNode.assignEvents(next);
         }
     }
     BoundNode.Init = Init;
 })(BoundNode || (exports.BoundNode = BoundNode = {}));
-function CreateScopeDestroyable(scope) {
-    return {
-        Destroy() {
-            observableScope_1.ObservableScope.Destroy(scope);
-        }
-    };
-}
 function ScheduleSetProperties(node, scope) {
     if (node.setProperties)
         return;
@@ -48,15 +43,10 @@ function ScheduleSetProperties(node, scope) {
         node.setProperties = false;
         if (node.destroyed)
             return;
-        SetProperties(node, observableScope_1.ObservableScope.Value(scope));
+        const next = observableScope_1.ObservableScope.Value(scope);
+        node.assignProperties(next);
     });
 }
-function SetProperties(node, properties) {
-    if (!properties)
-        return;
-    nodeConfig_1.NodeConfig.setProperties(node.node, node.lastProperties, properties);
-    node.lastProperties = properties;
-}
 function ScheduleSetAttributes(node, scope) {
     if (node.setAttributes)
         return;
@@ -85,15 +75,7 @@ function ScheduleSetEvents(node, scope) {
         node.setEvents = false;
         if (node.destroyed)
             return;
-        SetEvents(node, observableScope_1.ObservableScope.Value(scope));
+        const next = observableScope_1.ObservableScope.Value(scope);
+        node.assignEvents(next);
     });
 }
-function SetEvents(node, events) {
-    if (!events)
-        return;
-    for (var key in node.lastEvents)
-        nodeConfig_1.NodeConfig.removeListener(node.node, key, node.lastEvents[key]);
-    for (var key in events)
-        nodeConfig_1.NodeConfig.addListener(node.node, key, events[key]);
-    node.lastEvents = events;
-}

package/Node/boundNode.types.d.ts

@@ -1,3 +1,4 @@
+import { IObservableScope } from "../Store/Tree/observableScope";
 import { NodeRefType } from "./nodeRef";
 import { INodeRefBase } from "./nodeRef.types";
 export type FunctionOr<T> = {
@@ -30,11 +31,16 @@ export interface BoundNodeFunctionParam {
 }
 export interface IBoundNodeBase extends INodeRefBase {
     nodeDef: BoundNodeFunctionParam;
-    lastProperties: any;
-    lastEvents: {
-        [name: string]: any;
-    };
+    scopes: IObservableScope<unknown>[];
     setProperties: boolean;
+    assignProperties: {
+        (next: any): void;
+    };
+    assignEvents: {
+        (next: {
+            [event: string]: (event: Event) => void;
+        }): void;
+    };
     setAttributes: boolean;
     setEvents: boolean;
 }

package/Node/component.js

@@ -49,6 +49,7 @@ class Component {
         eventCallback && eventCallback(data);
     }
     Destroy() {
+        this.scope.Destroy();
         decorators_1.Destroy.All(this);
     }
 }

package/Node/componentNode.js

@@ -28,7 +28,6 @@ var ComponentNode;
         nodeDef.on = null;
         componentNode.component = new componentNode.constructor(nodeDef.data, componentNode.templates, componentNode, events);
         SetChildren(componentNode);
-        componentNode.destroyables.push(componentNode.component);
         boundNode_1.BoundNode.Init(componentNode);
     }
     ComponentNode.Init = Init;

package/Node/elementNode.js

@@ -22,15 +22,13 @@ var ElementNode;
             var nodeDef = elementNode.nodeDef;
             if (nodeDef.data) {
                 const dataScope = observableScope_1.ObservableScope.Create(nodeDef.data);
+                elementNode.childNodes = new Set();
+                elementNode.scopes ??= [];
+                elementNode.scopes.push(dataScope);
                 observableScope_1.ObservableScope.Watch(dataScope, function () {
                     ScheduleSetData(elementNode, dataScope);
                 });
                 SetData(elementNode, GetValue(dataScope), true);
-                elementNode.destroyables.push({
-                    Destroy: function () {
-                        observableScope_1.ObservableScope.Destroy(dataScope);
-                    }
-                });
             }
             else
                 SetDefaultData(elementNode);
@@ -127,10 +125,11 @@ function ReconcileNodeData(node, values) {
     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]);
+            const data = curDetach.data;
             curDetach = curDetach.next;
+            for (let x = 0; x < data.nodes.length; x++)
+                node.childNodes.delete(data.nodes[x]);
+            nodeRef_1.NodeRef.DestroyAll(data.nodes);
         }
         list_1.List.Clear(currentNodeList);
     }
@@ -141,10 +140,10 @@ function SetData(node, values, init = false) {
         ReconcileNodeData(node, values);
         const attachNodes = node.nodeList;
         const startSize = attachNodes.size;
-        (0, thread_1.Thread)(function () {
+        (0, thread_1.Thread)(function (async) {
             if (node.destroyed)
                 return;
-            if (init)
+            if (init || !async)
                 nodeRef_1.NodeRef.ReconcileChildren(node, attachNodes);
             else
                 nodeConfig_1.NodeConfig.scheduleUpdate(function () {
@@ -156,9 +155,9 @@ function SetData(node, values, init = false) {
     });
 }
 function CreateNodeArray(childrenFunc, value) {
-    var newNodes = childrenFunc(value);
-    if (typeof newNodes === "string") {
-        var textNode = nodeRef_1.NodeRef.Create("text", null, nodeRef_1.NodeRefType.BoundNode);
+    const newNodes = childrenFunc(value);
+    if (typeof newNodes === "string" || !newNodes) {
+        const textNode = nodeRef_1.NodeRef.Create("text", null, nodeRef_1.NodeRefType.BoundNode);
         textNode.nodeDef = {
             props: function () {
                 return { nodeValue: childrenFunc(value) };

package/Node/nodeConfig.d.ts

@@ -1,5 +1,6 @@
 export interface INodeConfig {
     createNode(type: any, namespace: string): any;
+    createTextNode(value?: string): any;
     scheduleUpdate(callback: () => void): void;
     setText(target: any, text: string): void;
     getAttribute(target: any, attribute: string): string;
@@ -17,8 +18,16 @@ export interface INodeConfig {
     removeChild(root: any, child: any): void;
     remove(target: any): void;
     fireEvent(target: any, event: string, data: any): void;
-    setProperties(target: any, lastProperties: any, properties: any): void;
+    createPropertyAssignment(target: any): {
+        (next: any): void;
+    };
+    createEventAssignment(target: any): {
+        (next: {
+            [event: string]: (event: Event) => void;
+        }): void;
+    };
     getFirstChild(target: any): any;
+    getLastChild(target: any): any;
     getNextSibling(target: any): any;
     replaceChildren(target: any, children: any[]): void;
 }

package/Node/nodeRef.d.ts

@@ -18,6 +18,6 @@ export declare namespace NodeRef {
     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 Destroy(node: NodeRefTypes): void;
     function DestroyAll(nodes: Array<INodeRefBase>): void;
 }