j-templates 7.0.52 → 7.0.53

package/DOM/domNodeConfig.d.ts

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

package/DOM/domNodeConfig.js

@@ -51,13 +51,13 @@ function wrapPriorityUpdates(callback) {
 }
 exports.DOMNodeConfig = {
     createNode(type, namespace) {
-        if (type === 'text')
-            return window_1.wndw.document.createTextNode('');
-        return namespace ?
-            window_1.wndw.document.createElementNS(namespace, type) :
-            window_1.wndw.document.createElement(type);
+        if (type === "text")
+            return window_1.wndw.document.createTextNode("");
+        return namespace
+            ? window_1.wndw.document.createElementNS(namespace, type)
+            : window_1.wndw.document.createElement(type);
     },
-    createTextNode(value = '') {
+    createTextNode(value = "") {
         return window_1.wndw.document.createTextNode(value);
     },
     isTextNode(target) {
@@ -143,8 +143,15 @@ exports.DOMNodeConfig = {
     },
     reconcileChildren(target, children) {
         if (!target.firstChild) {
-            for (let x = 0; x < children.length; x++)
-                target.appendChild(children[x]);
+            if (children.length > 10) {
+                const fragment = new DocumentFragment();
+                for (let x = 0; x < children.length; x++)
+                    fragment.appendChild(children[x]);
+                target.appendChild(fragment);
+            }
+            else
+                for (let x = 0; x < children.length; x++)
+                    target.appendChild(children[x]);
             return;
         }
         if (children.length === 0) {
@@ -172,7 +179,14 @@ exports.DOMNodeConfig = {
         }
         while (target.lastChild !== children[x - 1])
             target.removeChild(target.lastChild);
-        for (; x < children.length; x++)
-            target.appendChild(children[x]);
-    }
+        if (children.length - x > 10) {
+            const fragment = new DocumentFragment();
+            for (; x < children.length; x++)
+                fragment.appendChild(children[x]);
+            target.appendChild(fragment);
+        }
+        else
+            for (; x < children.length; x++)
+                target.appendChild(children[x]);
+    },
 };

package/Node/vNode.d.ts

@@ -10,6 +10,7 @@ type vNodeConfig<P = HTMLElement, E = HTMLElementEventMap, T = never> = {
 };
 export declare namespace vNode {
     function Create<P = HTMLElement, E = HTMLElementEventMap, T = never>(definition: vNodeDefinition<P, E, T>): vNodeType;
+    function CreateText(text: string): vNodeType;
     function Init(vnode: vNodeType): void;
     function InitAll(vnodes: vNodeType[]): void;
     function Destroy(vnode: vNodeType): void;

package/Node/vNode.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.vNode = void 0;
 const Store_1 = require("../Store");
+const emitter_1 = require("../Utils/emitter");
 const injector_1 = require("../Utils/injector");
 const list_1 = require("../Utils/list");
 const thread_1 = require("../Utils/thread");
@@ -16,11 +17,26 @@ var vNode;
             node: definition.node ?? null,
             children: null,
             destroyed: false,
+            onDestroyed: null,
             component: null,
             scopes: [],
         };
     }
     vNode.Create = Create;
+    function CreateText(text) {
+        return {
+            definition: null,
+            type: "text",
+            injector: null,
+            node: nodeConfig_1.NodeConfig.createTextNode(text),
+            children: null,
+            destroyed: false,
+            onDestroyed: null,
+            component: null,
+            scopes: [],
+        };
+    }
+    vNode.CreateText = CreateText;
     function Init(vnode) {
         if (vnode.definition === null)
             return;
@@ -38,6 +54,7 @@ var vNode;
         vnode.destroyed = true;
         vnode.component?.Destroy();
         Store_1.ObservableScope.DestroyAll(vnode.scopes);
+        vnode.onDestroyed && emitter_1.Emitter.Emit(vnode.onDestroyed);
         vnode.children && DestroyAll(vnode.children);
     }
     vNode.Destroy = Destroy;
@@ -70,7 +87,8 @@ var vNode;
 })(vNode || (exports.vNode = vNode = {}));
 function InitNode(vnode) {
     const { type, namespace, props, attrs, on, data, componentConstructor, children, childrenArray, } = vnode.definition;
-    const node = (vnode.node = vnode.definition.node ?? nodeConfig_1.NodeConfig.createNode(type, namespace));
+    const node = (vnode.node =
+        vnode.definition.node ?? nodeConfig_1.NodeConfig.createNode(type, namespace));
     vnode.definition = null;
     if (props) {
         const assignProperties = nodeConfig_1.NodeConfig.createPropertyAssignment(node);
@@ -95,6 +113,11 @@ function InitNode(vnode) {
         }
         else
             assignEvents(on);
+        vnode.onDestroyed ??= emitter_1.Emitter.Create();
+        emitter_1.Emitter.On(vnode.onDestroyed, function () {
+            assignEvents(null);
+            return true;
+        });
     }
     if (attrs) {
         const assignAttributes = nodeConfig_1.NodeConfig.createAttributeAssignment(node);
@@ -112,7 +135,9 @@ function InitNode(vnode) {
         vnode.component = new componentConstructor(vnode);
         vnode.component.Bound();
         const componentScope = Store_1.ObservableScope.Create(function () {
-            let nodes = injector_1.Injector.Scope(vnode.injector, function () { return vnode.component.Template(); });
+            let nodes = injector_1.Injector.Scope(vnode.injector, function () {
+                return vnode.component.Template();
+            });
             if (!Array.isArray(nodes))
                 nodes = [nodes];
             return nodes;
@@ -144,8 +169,9 @@ function Children(vnode, children, data) {
     Store_1.ObservableScope.Watch(childrenScope, CreateScheduledCallback(function (scope) {
         if (vnode.destroyed)
             return;
+        const startChildren = vnode.children;
         AssignChildren(vnode, scope);
-        UpdateChildren(vnode);
+        startChildren !== vnode.children && UpdateChildren(vnode);
     }));
     AssignChildren(vnode, childrenScope);
 }
@@ -166,6 +192,7 @@ function CreateChildrenScope(vnode, children, data) {
     Store_1.ObservableScope.OnDestroyed(scope, function () {
         DestroyNodeList(nodeList);
         Store_1.ObservableScope.Destroy(dataScope);
+        return true;
     });
     return scope;
 }
@@ -209,7 +236,7 @@ function WrapChildren(injector, children, data, nodeList) {
                         list_1.List.Add(nextNodeList, {
                             data,
                             nodes: Store_1.ObservableScope.Value(childrenScope),
-                            scope: childrenScope
+                            scope: childrenScope,
                         });
                     }
                     nextNodeArray.push(...nextNodeList.tail.data.nodes);
@@ -225,14 +252,21 @@ function WrapChildren(injector, children, data, nodeList) {
 function CreateNodeArray(children, previousChildren) {
     if (Array.isArray(children))
         return children;
-    return typeof children === 'string' ? [vNode.Create({
-            type: 'text',
-            namespace: null,
-            node: previousChildren?.[0]?.type === 'text' && previousChildren[0].node || undefined,
-            props: {
-                nodeValue: children
-            }
-        })] : [children];
+    if (typeof children === "string") {
+        const firstPrevChild = previousChildren?.[0];
+        if (firstPrevChild &&
+            firstPrevChild.node &&
+            firstPrevChild.type === "text") {
+            nodeConfig_1.NodeConfig.setText(firstPrevChild.node, children);
+            return previousChildren.length === 1
+                ? previousChildren
+                : [firstPrevChild];
+        }
+        return [
+            vNode.CreateText(children),
+        ];
+    }
+    return [children];
 }
 function DestroyNodeList(nodeList) {
     for (let node = nodeList.head; node !== null; node = node.next) {
@@ -251,6 +285,10 @@ function AssignChildren(vnode, childrenScope) {
 function UpdateChildren(vnode, init = false, skipInit = false) {
     if (!vnode.children)
         return;
+    if (vnode.children.length === 1 && vnode.children[0].type === "text") {
+        nodeConfig_1.NodeConfig.reconcileChildren(vnode.node, [vnode.children[0].node]);
+        return;
+    }
     const children = vnode.children;
     (0, thread_1.Thread)(function () {
         if (vnode.destroyed || children !== vnode.children)

package/Node/vNode.types.d.ts

@@ -2,6 +2,7 @@ import { Component } from "./component";
 import { IObservableScope } from "../Store/Tree/observableScope";
 import { Injector } from "../Utils/injector";
 import { RecursivePartial } from "../Utils/utils.types";
+import { Emitter } from "../Utils/emitter";
 export type FunctionOr<T> = {
     (): T | Promise<T>;
 } | T;
@@ -20,6 +21,7 @@ export type vNode = {
     node: Node | null;
     children: vNode[] | null;
     destroyed: boolean;
+    onDestroyed: Emitter | null;
     scopes: IObservableScope<unknown>[];
     component: Component;
 };

package/Store/Tree/observableScope.d.ts

@@ -24,10 +24,6 @@ export declare class ObservableScope<T> extends ObservableScopeWrapper<T> {
         (): T | Promise<T>;
     });
 }
-interface ICalcObservable<T> {
-    id: string;
-    scope: IObservableScope<T>;
-}
 export interface IObservableScope<T> extends IDestroyable {
     getFunction: {
         (): T;
@@ -39,12 +35,14 @@ export interface IObservableScope<T> extends IDestroyable {
     dirty: boolean;
     emitter: Emitter;
     emitters: (Emitter | null)[];
-    calcScopes: ICalcObservable<unknown>[] | null;
+    calcScopes: {
+        [id: string]: IObservableScope<unknown> | null;
+    } | null;
     calc: boolean;
     onDestroyed: Emitter | null;
     destroyed: boolean;
 }
-export declare function CalcScope<T>(callback: () => T): any;
+export declare function CalcScope<T>(callback: () => T, idOverride?: string): unknown;
 export declare namespace ObservableScope {
     function Create<T>(valueFunction: {
         (): T | Promise<T>;
@@ -56,9 +54,8 @@ export declare namespace ObservableScope {
     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;
-    function OnDestroyed(scope: IObservableScope<unknown>, callback: () => void): void;
+    function OnDestroyed(scope: IObservableScope<unknown>, callback: EmitterCallback): void;
     function Update(scope: IObservableScope<any>): void;
     function Destroy<T>(scope: IObservableScope<T>): void;
     function DestroyAll(scopes: IObservableScope<unknown>[]): void;
 }
-export {};

package/Store/Tree/observableScope.js

@@ -56,34 +56,29 @@ function WatchScope(scope) {
     const emitters = watchState[0];
     UpdateEmitters(scope, emitters);
     const calcScopes = watchState[1];
-    for (let x = 0; calcScopes && x < calcScopes.length; x++)
-        ObservableScope.Destroy(calcScopes[x]?.scope);
+    const calcScopeValues = calcScopes && Object.values(calcScopes);
+    for (let x = 0; calcScopeValues && x < calcScopeValues.length; x++)
+        calcScopeValues[x] && ObservableScope.Destroy(calcScopeValues[x]);
     scope.calcScopes = watchState[2];
     watchState = parent;
     return value;
 }
-function CalcScope(callback) {
+function CalcScope(callback, idOverride) {
     if (watchState === null)
         return callback();
-    watchState[2] ??= [];
+    const nextScopes = (watchState[2] ??= {});
     const currentScopes = watchState[1];
-    const id = callback.toString();
-    if (currentScopes !== null) {
-        let index = 0;
-        for (; currentScopes[index].id !== id; index++) { }
-        if (index < currentScopes.length) {
-            const scope = currentScopes[index];
-            currentScopes[index] = null;
-            watchState[2].push(scope);
-            return ObservableScope.Value(scope.scope);
-        }
+    const id = idOverride ?? callback.toString();
+    const currentScope = currentScopes?.[id];
+    if (currentScope) {
+        delete currentScopes[id];
+        nextScopes[id] = currentScope;
     }
-    const scope = ObservableScope.Create(callback, true);
-    watchState[2].push({
-        id,
-        scope,
-    });
-    return ObservableScope.Value(scope);
+    else if (!nextScopes[id]) {
+        const scope = ObservableScope.Create(callback, true);
+        nextScopes[id] = scope;
+    }
+    return ObservableScope.Value(nextScopes[id]);
 }
 (function (ObservableScope) {
     function Create(valueFunction, calc = false) {
@@ -174,17 +169,13 @@ function CalcScope(callback) {
 function DirtyScope(scope) {
     if (scope.dirty || !scope.getFunction)
         return;
-    if (scope.calc) {
-        const startVal = scope.value;
-        scope.dirty = true;
-        UpdateValue(scope);
-        if (startVal !== scope.value)
-            emitter_1.Emitter.Emit(scope.emitter);
-        return;
-    }
     scope.dirty = true;
-    if (scope.async) {
+    if (scope.async)
+        UpdateValue(scope);
+    else if (scope.calc) {
+        const startValue = scope.value;
         UpdateValue(scope);
+        startValue !== scope.value && emitter_1.Emitter.Emit(scope.emitter);
     }
     else
         emitter_1.Emitter.Emit(scope.emitter, scope);
@@ -255,12 +246,14 @@ function UpdateEmitters(scope, right) {
 function DestroyScope(scope) {
     if (!scope)
         return;
+    const scopes = scope.calcScopes && Object.values(scope.calcScopes);
+    scopes && ObservableScope.DestroyAll(scopes);
+    scope.calcScopes = null;
     scope.emitters = null;
+    emitter_1.Emitter.Clear(scope.emitter);
     scope.emitter = null;
     scope.getFunction = null;
     scope.setCallback = null;
-    for (let x = 0; scope.calcScopes && x < scope.calcScopes.length; x++)
-        ObservableScope.Destroy(scope.calcScopes[x].scope);
     scope.destroyed = true;
-    scope.onDestroyed !== null && emitter_1.Emitter.Emit(scope.onDestroyed);
+    scope.onDestroyed && emitter_1.Emitter.Emit(scope.onDestroyed);
 }

package/Utils/array.d.ts

@@ -1,4 +1,5 @@
 export declare function RemoveNulls(array: (unknown | null)[], startIndex?: number): void;
 export declare function ArrayDiff(source: any[], target: any[]): boolean;
 export declare function ReconcileSortedEmitters<T extends [number]>(left: T[], right: T[], add: (value: T) => void, remove: (value: T) => void): void;
+export declare function InsertionSortTuples<T extends [number, ...any[]]>(arr: T[]): T[];
 export declare function ReconcileSortedArrays<T>(left: T[], right: T[], add: (value: T) => void, remove: (value: T) => void): void;

package/Utils/array.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RemoveNulls = RemoveNulls;
 exports.ArrayDiff = ArrayDiff;
 exports.ReconcileSortedEmitters = ReconcileSortedEmitters;
+exports.InsertionSortTuples = InsertionSortTuples;
 exports.ReconcileSortedArrays = ReconcileSortedArrays;
 function RemoveNulls(array, startIndex = 0) {
     let nullIndex = startIndex;
@@ -50,6 +51,19 @@ function ReconcileSortedEmitters(left, right, add, remove) {
     for (let ri = rightIndex; ri < right.length; ri++)
         add(right[ri]);
 }
+function InsertionSortTuples(arr) {
+    const n = arr.length;
+    for (let i = 1; i < n; i++) {
+        const currentItem = arr[i];
+        let j = i - 1;
+        while (j >= 0 && arr[j][0] > currentItem[0]) {
+            arr[j + 1] = arr[j];
+            j--;
+        }
+        arr[j + 1] = currentItem;
+    }
+    return arr;
+}
 function ReconcileSortedArrays(left, right, add, remove) {
     let leftIndex = 0;
     let rightIndex = 0;

package/Utils/emitter.d.ts

@@ -8,6 +8,6 @@ export declare namespace Emitter {
     function Remove(emitter: Emitter, callback: EmitterCallback): void;
     function Clear(emitter: Emitter): void;
     function Distinct(emitters: Emitter[]): void;
-    function Sort(emitters: Emitter[]): Emitter[];
+    function Sort(emitters: Emitter[]): void;
     function Compare(a: Emitter, b: Emitter): number;
 }

package/Utils/emitter.js

@@ -21,7 +21,8 @@ var Emitter;
     function Emit(emitter, ...args) {
         let removed = false;
         for (let x = 1; x < emitter.length; x++) {
-            if (emitter[x] === null || emitter[x](...args) === true) {
+            if (emitter[x] === null ||
+                emitter[x](...args) === true) {
                 removed = true;
                 emitter[x] = null;
             }
@@ -41,16 +42,16 @@ var Emitter;
     }
     Emitter.Clear = Clear;
     function Distinct(emitters) {
-        if (emitters.length === 1)
+        if (emitters.length < 2)
             return;
-        emitters.length < 50 ? DistinctSmall(emitters) : DistinctLarge(emitters);
+        emitters.length < 51 ? DistinctSmall(emitters) : DistinctLarge(emitters);
     }
     Emitter.Distinct = Distinct;
     function DistinctSmall(emitters) {
         Sort(emitters);
-        let lastId = -1;
+        let lastId = emitters[0][0];
         let remove = false;
-        for (let x = 0; x < emitters.length; x++) {
+        for (let x = 1; x < emitters.length; x++) {
             const id = emitters[x][0];
             if (lastId === emitters[x][0]) {
                 emitters[x] = null;
@@ -76,7 +77,10 @@ var Emitter;
         Sort(emitters);
     }
     function Sort(emitters) {
-        return emitters.sort(Compare);
+        if (emitters.length < 11)
+            (0, array_1.InsertionSortTuples)(emitters);
+        else
+            emitters.sort(Compare);
     }
     Emitter.Sort = Sort;
     function Compare(a, b) {

package/package.json

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