j-templates 6.0.25 → 6.0.27

package/DOM/createAssignment.d.ts

@@ -0,0 +1,3 @@
+export declare function CreateAssignment(target: any, createAssignment: {
+    (target: any, key: string): (next: any) => void;
+}): (next: any) => void;

package/DOM/createAssignment.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CreateAssignment = CreateAssignment;
+function CreateAssignment(target, createAssignment) {
+    let last;
+    let writeTo;
+    return function AssignNext(next) {
+        if (next === last)
+            return;
+        last = next;
+        writeTo ??= {};
+        const nextKeys = next && Object.keys(next);
+        for (let x = 0; nextKeys && x < nextKeys.length; x++) {
+            const key = nextKeys[x];
+            writeTo[key] ??= createAssignment(target, key);
+        }
+        const writeKeys = Object.keys(writeTo);
+        for (let x = 0; x < writeKeys.length; x++)
+            writeTo[writeKeys[x]](next);
+    };
+}

package/DOM/createEventAssignment.d.ts

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

package/DOM/createEventAssignment.js

@@ -1,29 +1,14 @@
 "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]);
+function CreateEventAssignment(target, event) {
+    let lastEvent;
+    return function (next) {
+        const nextEvent = next && next[event];
+        if (nextEvent === lastEvent)
+            return;
+        lastEvent && target.removeEventListener(event, lastEvent);
+        nextEvent && target.addEventListener(event, nextEvent);
+        lastEvent = nextEvent;
     };
 }

package/DOM/createPropertyAssignment.d.ts

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

package/DOM/createPropertyAssignment.js

@@ -2,86 +2,75 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CreateNodeValueAssignment = CreateNodeValueAssignment;
 exports.CreatePropertyAssignment = CreatePropertyAssignment;
-const jsonType_1 = require("../Utils/jsonType");
-function AssignProp(target, prop) {
-    let lastValue = target[prop];
-    return function Assign(value) {
-        if (value !== lastValue) {
-            target[prop] = value;
-            lastValue = value;
-        }
-    };
-}
+const json_1 = require("../Utils/json");
 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);
+            target.nodeValue = value;
             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 && next[prop];
-    writeTo[prop] ??= (0, jsonType_1.JsonType)(value) === 'value' ?
-        AssignProp(target, prop) :
-        CreatePropertyAssignment(target[prop], false);
-    writeTo[prop](value);
-}
-function CreateAssignProp(target, prop) {
-    let lastValue;
-    let childPropertyAssignment;
-    return function (next) {
-        const nextValue = next && next[prop];
-        if (nextValue === lastValue)
-            return;
-        const nextValueType = (0, jsonType_1.JsonType)(nextValue);
-        switch (nextValueType) {
-            case "value":
-                target[prop] = nextValue;
+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 type = (0, json_1.JsonType)(value);
+        switch (type) {
+            case "object":
+                index = WalkValue(value, callback, index, `${parent}${keys[x]}.`);
+                break;
             default:
-                childPropertyAssignment ??= CreatePropertyAssignment(target[prop]);
-                childPropertyAssignment(target[prop], nextValue);
+                callback(`${parent}${keys[x]}`, value, index);
+                index++;
+                break;
         }
-    };
+    }
+    return index;
+}
+function AssignNodeValue(target, value) {
+    target.nodeValue = value;
+}
+function AssignValue(target, value) {
+    target.value = value;
 }
-function CreatePropertyAssignment(target, root = true) {
-    let last;
-    let writeTo;
-    return function AssignNext(next) {
-        if (next === last)
+function AssignClassName(target, value) {
+    target.className = value;
+}
+function GetAssignmentFunction(path) {
+    switch (path) {
+        case "nodeValue":
+            return AssignNodeValue;
+        case "value":
+            return AssignValue;
+        case "className":
+            return AssignClassName;
+        default:
+            return new Function("t", "v", `t.${path} = v;`);
+    }
+}
+function CreatePropertyAssignment(target) {
+    const last = [["", null, null]];
+    function WalkCallback(path, value, index) {
+        if (index >= last.length || last[index][0] !== path) {
+            last[index] = [path, value, GetAssignmentFunction(path)];
+            last[index][2](target, value);
+        }
+        else if (last[index][1] !== value) {
+            last[index][2](target, value);
+        }
+    }
+    return function AssignProperty(next) {
+        if (next === null) {
+            for (let x = 0; x < last.length; x++)
+                last[x][2](target, null);
+            if (last.length > 0)
+                last.splice(0);
             return;
-        last = next;
-        writeTo ??= {};
-        const nextKeys = next && Object.keys(next);
-        for (let x = 0; nextKeys && x < nextKeys.length; x++) {
-            const key = nextKeys[x];
-            if (writeTo[key] === undefined) {
-                writeTo[key] = CreateAssignProp(target, key);
-            }
         }
-        const writeKeys = Object.keys(writeTo);
-        for (let x = 0; x < writeKeys.length; x++)
-            writeTo[writeKeys[x]](next);
+        const endIndex = WalkValue(next, WalkCallback);
+        if (endIndex < last.length)
+            last.splice(endIndex);
     };
 }

package/DOM/domNodeConfig.js

@@ -5,19 +5,18 @@ const window_1 = require("./window");
 const list_1 = require("../Utils/list");
 const createPropertyAssignment_1 = require("./createPropertyAssignment");
 const createEventAssignment_1 = require("./createEventAssignment");
+const createAssignment_1 = require("./createAssignment");
+const createPropertyAssignment_2 = require("./createPropertyAssignment");
 let pendingUpdates = list_1.List.Create();
 let updateScheduled = false;
 const updateMs = 16;
 function processUpdates() {
     list_1.List.Add(pendingUpdates, null);
-    const start = Date.now();
     let callback;
     while ((callback = list_1.List.Pop(pendingUpdates)))
         callback();
     if (pendingUpdates.size === 0)
         updateScheduled = false;
-    else if (Date.now() - start < updateMs)
-        processUpdates();
     else
         window_1.wndw.requestAnimationFrame(processUpdates);
 }
@@ -70,8 +69,11 @@ exports.DOMNodeConfig = {
     remove(target) {
         target && target.parentNode && target.parentNode.removeChild(target);
     },
+    createTextAssignment(target) {
+        return (0, createPropertyAssignment_1.CreateNodeValueAssignment)(target);
+    },
     setText(target, text) {
-        target.textContent = text;
+        target.nodeValue = text;
     },
     getAttribute(target, attribute) {
         return target.getAttribute(attribute);
@@ -80,12 +82,10 @@ exports.DOMNodeConfig = {
         target.setAttribute(attribute, value);
     },
     createPropertyAssignment(target) {
-        if (target.nodeType === Node.TEXT_NODE)
-            return (0, createPropertyAssignment_1.CreateNodeValueAssignment)(target);
-        return (0, createPropertyAssignment_1.CreatePropertyAssignment)(target);
+        return (0, createPropertyAssignment_2.CreatePropertyAssignment)(target);
     },
     createEventAssignment(target) {
-        return (0, createEventAssignment_1.CreateEventAssignment)(target);
+        return (0, createAssignment_1.CreateAssignment)(target, createEventAssignment_1.CreateEventAssignment);
     },
     fireEvent(target, event, data) {
         var cEvent = new CustomEvent(event, data);

package/Node/boundNode.js

@@ -5,36 +5,97 @@ const nodeConfig_1 = require("./nodeConfig");
 const observableScope_1 = require("../Store/Tree/observableScope");
 var BoundNode;
 (function (BoundNode) {
+    function WrapEventObject(node, events) {
+        const keys = Object.keys(events);
+        const ret = {};
+        for (let x = 0; x < keys.length; x++) {
+            const event = keys[x];
+            const eventFunc = events[event];
+            ret[event] = function (...args) {
+                if (node.destroyed)
+                    return;
+                return eventFunc(...args);
+            };
+        }
+        return ret;
+    }
     function Init(boundNode) {
         const nodeDef = boundNode.nodeDef;
         if (nodeDef.props) {
-            const scope = observableScope_1.ObservableScope.Create(nodeDef.props);
-            boundNode.scopes ??= [];
-            boundNode.scopes.push(scope);
             boundNode.assignProperties = nodeConfig_1.NodeConfig.createPropertyAssignment(boundNode.node);
-            observableScope_1.ObservableScope.Watch(scope, function (scope) { ScheduleSetProperties(boundNode, scope); });
-            const next = observableScope_1.ObservableScope.Value(scope);
-            boundNode.assignProperties(next);
+            if (typeof nodeDef.props === 'function') {
+                const scope = observableScope_1.ObservableScope.Create(nodeDef.props);
+                boundNode.scopes ??= [];
+                boundNode.scopes.push(scope);
+                observableScope_1.ObservableScope.Watch(scope, function (scope) { ScheduleSetProperties(boundNode, scope); });
+                const next = observableScope_1.ObservableScope.Value(scope);
+                boundNode.assignProperties(next);
+            }
+            else {
+                boundNode.assignProperties(nodeDef.props);
+                boundNode.assignProperties = null;
+            }
         }
         if (nodeDef.attrs) {
-            const scope = observableScope_1.ObservableScope.Create(nodeDef.attrs);
-            boundNode.scopes ??= [];
-            boundNode.scopes.push(scope);
-            observableScope_1.ObservableScope.Watch(scope, function (scope) { ScheduleSetAttributes(boundNode, scope); });
-            SetAttributes(boundNode, observableScope_1.ObservableScope.Value(scope));
+            if (typeof nodeDef.attrs === 'function') {
+                const scope = observableScope_1.ObservableScope.Create(nodeDef.attrs);
+                boundNode.scopes ??= [];
+                boundNode.scopes.push(scope);
+                observableScope_1.ObservableScope.Watch(scope, function (scope) { ScheduleSetAttributes(boundNode, scope); });
+                SetAttributes(boundNode, observableScope_1.ObservableScope.Value(scope));
+            }
+            else
+                SetAttributes(boundNode, nodeDef.attrs);
         }
         if (nodeDef.on) {
-            const scope = observableScope_1.ObservableScope.Create(nodeDef.on);
-            boundNode.scopes ??= [];
-            boundNode.scopes.push(scope);
             boundNode.assignEvents = nodeConfig_1.NodeConfig.createEventAssignment(boundNode.node);
-            observableScope_1.ObservableScope.Watch(scope, function (scope) { ScheduleSetEvents(boundNode, scope); });
-            const next = observableScope_1.ObservableScope.Value(scope);
-            boundNode.assignEvents(next);
+            if (typeof nodeDef.on === 'function') {
+                const scope = observableScope_1.ObservableScope.Create(nodeDef.on);
+                const eventScope = observableScope_1.ObservableScope.Create(function () {
+                    const events = observableScope_1.ObservableScope.Value(scope);
+                    return WrapEventObject(boundNode, events);
+                });
+                boundNode.scopes ??= [];
+                boundNode.scopes.push(scope, eventScope);
+                observableScope_1.ObservableScope.Watch(eventScope, function (scope) { ScheduleSetEvents(boundNode, scope); });
+                const next = observableScope_1.ObservableScope.Value(eventScope);
+                boundNode.assignEvents(next);
+            }
+            else {
+                boundNode.assignEvents(WrapEventObject(boundNode, nodeDef.on));
+                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;
@@ -44,7 +105,7 @@ function ScheduleSetProperties(node, scope) {
         if (node.destroyed)
             return;
         const next = observableScope_1.ObservableScope.Value(scope);
-        node.assignProperties(next);
+        node.assignProperties(next || null);
     });
 }
 function ScheduleSetAttributes(node, scope) {

package/Node/boundNode.types.d.ts

@@ -13,21 +13,23 @@ export interface NodeDefinition<T = any, E = any> {
     type: any;
     namespace: string;
     props?: FunctionOr<{
-        [name: string]: any;
+        [name: string]: unknown;
     }>;
     attrs?: FunctionOr<{
         [name: string]: string;
     }>;
     on?: FunctionOr<NodeRefEvents>;
+    text?: FunctionOr<string>;
 }
 export interface BoundNodeFunctionParam {
     props?: FunctionOr<{
-        [name: string]: any;
+        [name: string]: unknown;
     }>;
     attrs?: FunctionOr<{
         [name: string]: string;
     }>;
     on?: FunctionOr<NodeRefEvents>;
+    text?: FunctionOr<string>;
 }
 export interface IBoundNodeBase extends INodeRefBase {
     nodeDef: BoundNodeFunctionParam;
@@ -41,8 +43,12 @@ export interface IBoundNodeBase extends INodeRefBase {
             [event: string]: (event: Event) => void;
         }): void;
     };
+    assignText: {
+        (next: string): void;
+    };
     setAttributes: boolean;
     setEvents: boolean;
+    setText: boolean;
 }
 export interface IBoundNode extends IBoundNodeBase {
     type: NodeRefType.BoundNode;

package/Node/component.d.ts

@@ -12,9 +12,7 @@ export declare class Component<D = void, T = void, E = void> {
     protected get Data(): D;
     protected get NodeRef(): INodeRefBase;
     protected get Templates(): T;
-    constructor(data: D | {
-        (): D | Promise<D>;
-    }, templates: T, nodeRef: INodeRefBase, componentEvents: ComponentNodeEvents<E>);
+    constructor(data: D | (() => (D | Promise<D>)), templates: T, nodeRef: INodeRefBase, componentEvents: ComponentNodeEvents<E>);
     Template(): NodeRefTypes | NodeRefTypes[];
     Bound(): void;
     Fire<P extends keyof E>(event: P, data?: E[P]): void;

package/Node/component.js

@@ -27,7 +27,10 @@ class Component {
     constructor(data, templates, nodeRef, componentEvents) {
         this.nodeRef = nodeRef;
         this.componentEvents = componentEvents;
-        this.scope = new observableScope_1.ObservableScope(data);
+        if (typeof data === 'function')
+            this.scope = new observableScope_1.ObservableScope(data);
+        else
+            this.scope = new observableScope_1.ObservableScope(() => data);
         this.templates = templates || {};
     }
     Template() {

package/Node/componentNode.js

@@ -102,13 +102,16 @@ function AddTemplate(node, init) {
                 init: true,
                 nodes
             });
-            if (init)
+            if (init) {
                 nodeRef_1.NodeRef.ReconcileChildren(node, list);
+                list_1.List.Clear(list);
+            }
             else
                 nodeConfig_1.NodeConfig.scheduleUpdate(function () {
                     if (node.destroyed)
                         return;
                     nodeRef_1.NodeRef.ReconcileChildren(node, list);
+                    list_1.List.Clear(list);
                 });
         });
         if (node.component.Bound !== component_1.Component.prototype.Bound)

package/Node/elementNode.js

@@ -72,6 +72,7 @@ function SetDefaultData(node) {
                     nodes
                 });
                 nodeRef_1.NodeRef.ReconcileChildren(node, defaultNodeList);
+                list_1.List.Clear(defaultNodeList);
             });
         }
     });
@@ -155,8 +156,8 @@ function CreateNodeArray(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) };
+            text: function () {
+                return childrenFunc(value);
             }
         };
         return [textNode];

package/Node/nodeConfig.d.ts

@@ -18,6 +18,9 @@ export interface INodeConfig {
     removeChild(root: any, child: any): void;
     remove(target: any): void;
     fireEvent(target: any, event: string, data: any): void;
+    createTextAssignment(target: any): {
+        (next: string): void;
+    };
     createPropertyAssignment(target: any): {
         (next: any): void;
     };

package/Node/nodeRef.js

@@ -51,8 +51,10 @@ var NodeRef;
                     setProperties: false,
                     assignProperties: null,
                     assignEvents: null,
+                    assignText: null,
                     setAttributes: false,
                     setEvents: false,
+                    setText: false,
                     scopes: null
                 };
             case NodeRefType.ElementNode:
@@ -70,11 +72,13 @@ var NodeRef;
                     setProperties: false,
                     assignProperties: null,
                     assignEvents: null,
+                    assignText: null,
                     setAttributes: false,
                     setEvents: false,
                     childrenFunc: null,
                     nodeList: null,
                     setData: false,
+                    setText: false,
                     scopes: null
                 };
             case NodeRefType.ComponentNode:
@@ -201,9 +205,9 @@ var NodeRef;
         switch (node.type) {
             case NodeRefType.ComponentNode:
                 node.component?.Destroy();
-            case NodeRefType.ElementNode:
-                node.assignEvents?.(null);
             case NodeRefType.BoundNode:
+                node.assignEvents?.(null);
+            case NodeRefType.ElementNode:
                 for (let x = 0; node.scopes && x < node.scopes.length; x++)
                     Store_1.ObservableScope.Destroy(node.scopes[x]);
         }

package/Store/Tree/observableNode.d.ts

@@ -5,7 +5,6 @@ export declare const GET_TO_JSON = "toJSON";
 export declare namespace ObservableNode {
     function Create<T>(value: T): T;
     function Touch(value: unknown): void;
-    function EnableDiff(value: boolean): void;
     function ApplyDiff(rootNode: any, diffResult: JsonDiffResult): void;
     function CreateFactory(alias?: (value: any) => any | undefined): <T>(value: T) => T;
 }