j-templates 7.0.69 → 7.0.70

package/DOM/domNodeConfig.js

@@ -169,9 +169,10 @@ exports.DOMNodeConfig = {
             target.appendChild(children[x]);
     },
     reconcileChild(target, child) {
-        if (target.childElementCount === 0)
-            target.appendChild(child);
-        else if (target.childElementCount > 1 || target.firstChild !== child)
-            target.replaceChildren(child);
+        if (target.firstChild === child)
+            return;
+        target.appendChild(child);
+        while (target.firstChild !== child)
+            target.removeChild(target.firstChild);
     },
 };

package/Node/component.d.ts

@@ -38,14 +38,6 @@ export declare class Component<D = void, T = void, E = {}> {
      * Accessor for the component's template collection.
      */
     protected get Templates(): T;
-    /**
-     * Creates a new Component instance. Not intended to be overriden.
-     *
-     * @param data - Initial data or a factory function returning data/promise.
-     * @param templates - Template definitions for rendering.
-     * @param vNode - The underlying virtual node instance.
-     * @param componentEvents - Optional event callbacks.
-     */
     constructor(vNode: vNodeType, config: vComponentConfig<D, E>, templates: T);
     /**
      * Returns the component's rendered vNode(s).

package/Node/component.js

@@ -48,32 +48,9 @@ class Component {
     get Templates() {
         return this.templates;
     }
-    /**
-     * Creates a new Component instance. Not intended to be overriden.
-     *
-     * @param data - Initial data or a factory function returning data/promise.
-     * @param templates - Template definitions for rendering.
-     * @param vNode - The underlying virtual node instance.
-     * @param componentEvents - Optional event callbacks.
-     */
-    /* constructor(
-      data: D | (() => D | Promise<D>),
-      templates: T,
-      private vNode: vNodeType,
-      private componentEvents: ComponentEvents<E>,
-    ) {
-      if (typeof data === "function")
-        this.scope = new ObservableScope<D>(data as () => D | Promise<D>);
-      else this.scope = new ObservableScope<D>(() => data);
-  
-      this.templates = templates || ({} as T);
-    } */
     constructor(vNode, config, templates) {
         this.vNode = vNode;
         const { data, on } = config;
-        /* if (typeof data === "function")
-          this.scope = new ObservableScope<D>(data as () => D | Promise<D>);
-        else this.scope = new ObservableScope<D>(() => data); */
         if (typeof data === "function")
             this.scope = Store_1.ObservableScope.Create(data);
         else
@@ -119,30 +96,13 @@ class Component {
     }
 }
 exports.Component = Component;
-/* type ComponentConstructor<D, T, E> = {
-  new (
-    data: D | (() => D | Promise<D>),
-    templates: T,
-    vNode: vNodeType,
-    componentEvents: ComponentEvents<E>,
-  ): Component<D, T, E>;
-}; */
 (function (Component) {
     /**
      * Function wraps the Component as a function that can be used to create vNode objects
      * and generate templates.
      */
-    function ToFunction(type, 
-    // constructor: ComponentConstructor<D, T, E>,
-    constructor, namespace) {
+    function ToFunction(type, constructor, namespace) {
         return function (config, templates) {
-            /* const { data, on, props } = config;
-      
-            class ConcreteComponent extends constructor {
-              constructor(vnode: vNodeType) {
-                super(data, templates, vnode, on);
-              }
-            } */
             function ComponentFactory(vnode) {
                 return new constructor(vnode, config, templates);
             }
@@ -151,7 +111,6 @@ exports.Component = Component;
                 namespace: namespace ?? null,
                 props: config.props,
                 componentFactory: ComponentFactory,
-                // componentConstructor: ConcreteComponent,
             };
             return vNode_1.vNode.Create(definition);
         };

package/Node/vNode.js

@@ -14,7 +14,6 @@ var vNode;
         return {
             definition,
             type: definition.type,
-            // injector: definition.componentConstructor
             injector: definition.componentFactory
                 ? injector_1.Injector.Scope(injector_1.Injector.Current(), function () {
                     return new injector_1.Injector();
@@ -95,9 +94,7 @@ var vNode;
     vNode.Attach = Attach;
 })(vNode || (exports.vNode = vNode = {}));
 function InitNode(vnode) {
-    const { type, namespace, props, attrs, on, data, 
-    // componentConstructor,
-    componentFactory, children, childrenArray, } = vnode.definition;
+    const { type, namespace, props, attrs, on, data, componentFactory, children, childrenArray, } = vnode.definition;
     const node = (vnode.node =
         vnode.definition.node ?? nodeConfig_1.NodeConfig.createNode(type, namespace));
     vnode.definition = null;
@@ -105,11 +102,8 @@ function InitNode(vnode) {
         const assignProperties = nodeConfig_1.NodeConfig.createPropertyAssignment(node);
         if (typeof props === "function") {
             const scope = Store_1.ObservableScope.Create(props);
-            // const [value, scope] = ObservableScope.CreateIf(props as () => any);
-            // if (scope) {
             vnode.scopes.push(scope);
             Store_1.ObservableScope.Watch(scope, ScheduledAssignment(assignProperties));
-            // }
             assignProperties(Store_1.ObservableScope.Value(scope));
         }
         else
@@ -119,11 +113,8 @@ function InitNode(vnode) {
         const assignEvents = nodeConfig_1.NodeConfig.createEventAssignment(node);
         if (typeof on === "function") {
             const scope = Store_1.ObservableScope.Create(on);
-            // const [value, scope] = ObservableScope.CreateIf(on);
-            // if (scope) {
             vnode.scopes.push(scope);
             Store_1.ObservableScope.Watch(scope, ScheduledAssignment(assignEvents));
-            // }
             assignEvents(Store_1.ObservableScope.Value(scope));
         }
         else
@@ -133,19 +124,14 @@ function InitNode(vnode) {
         const assignAttributes = nodeConfig_1.NodeConfig.createAttributeAssignment(node);
         if (typeof attrs === "function") {
             const scope = Store_1.ObservableScope.Create(attrs);
-            // const [value, scope] = ObservableScope.CreateIf(attrs);
-            // if (scope) {
             vnode.scopes.push(scope);
             Store_1.ObservableScope.Watch(scope, ScheduledAssignment(assignAttributes));
-            //}
             assignAttributes(Store_1.ObservableScope.Value(scope));
         }
         else
             assignAttributes(attrs);
     }
-    // if (componentConstructor) {
     if (componentFactory) {
-        // vnode.component = new componentConstructor(vnode);
         vnode.component = componentFactory(vnode);
         vnode.component.Bound();
         function componentChildren() {
@@ -171,7 +157,6 @@ function Children(vnode, children, data) {
                 return;
             const startChildren = vnode.children;
             const newChildren = Store_1.ObservableScope.Value(scope);
-            // AssignChildren(vnode, scope);
             if (startChildren !== newChildren) {
                 vnode.children = newChildren;
                 UpdateChildren(vnode);
@@ -179,21 +164,7 @@ function Children(vnode, children, data) {
         }));
     }
     vnode.children = Store_1.ObservableScope.Value(childrenScope);
-    // AssignChildren(vnode, childrenScope);
 }
-/* function AssignChildren(
-  vnode: vNodeType,
-  childrenScope: IObservableScope<
-    [
-      any,
-      vNodeType[],
-      IObservableScope<string | vNodeType | vNodeType[]> | null,
-    ][]
-  >,
-) {
-  const children = ObservableScope.Peek(childrenScope);
-  vnode.children = children;
-} */
 const DEFAULT_DATA = [undefined];
 function DefaultData() {
     return DEFAULT_DATA;
@@ -302,7 +273,6 @@ function EvaluateNextNodesLarge(injector, getNextChildren, nextData, nodeArray)
         if (currentChildIndex !== -1) {
             const currentChild = currentChildren[currentChildIndex];
             currentChildren[currentChildIndex] = null;
-            // if (currentChild[2]) {
             const scope = currentChild[2];
             const value = scope.value;
             const updatedValue = Store_1.ObservableScope.Value(scope);
@@ -310,13 +280,7 @@ function EvaluateNextNodesLarge(injector, getNextChildren, nextData, nodeArray)
                 vNode.DestroyAll(currentChild[1]);
                 currentChild[1] = CreateNodeArray(updatedValue);
             }
-            // }
-            /* if (currentChild[2]?.dirty) {
-              const nextChildren = ObservableScope.Value(currentChild[2]);
-              currentChild[1] = CreateNodeArray(nextChildren);
-              } */
             nextNodes[x] = currentChild;
-            // currentChildren[currentChildIndex] = null;
             if (currentChildIndex === 0)
                 dataMap.delete(data);
         }
@@ -324,9 +288,6 @@ function EvaluateNextNodesLarge(injector, getNextChildren, nextData, nodeArray)
             const scope = Store_1.ObservableScope.Create(function () {
                 return injector_1.Injector.Scope(injector, getNextChildren, data);
             });
-            /* const [nextChildren, scope] = ObservableScope.CreateIf(function () {
-              return Injector.Scope(injector, getNextChildren, data);
-              }); */
             nextNodes[x] = [
                 data,
                 CreateNodeArray(Store_1.ObservableScope.Value(scope)),
@@ -411,7 +372,6 @@ function ScheduledAssignment(assign) {
             return;
         scheduled = true;
         nodeConfig_1.NodeConfig.scheduleUpdate(function () {
-            // if (scope.destroyed) return;
             scheduled = false;
             const value = Store_1.ObservableScope.Peek(scope);
             assign(value);

package/Store/Tree/observableScope.js

@@ -5,6 +5,7 @@ exports.CalcScope = CalcScope;
 const array_1 = require("../../Utils/array");
 const emitter_1 = require("../../Utils/emitter");
 const functions_1 = require("../../Utils/functions");
+const list_1 = require("../../Utils/list");
 /**
  * Creates a dynamic (reactive) observable scope.
  * @template T The type of value stored in the scope.
@@ -83,44 +84,53 @@ function OnSet(scope) {
     emitter_1.Emitter.Emit(scope.emitter, scope);
     return false;
 }
-/**
- * Registers an emitter as a dependency for the current watch context.
- * Tracks which emitters are accessed during a scope's execution.
- * @param emitter The emitter to register as a dependency.
- */
-function RegisterEmitter(emitter) {
-    if (watchState === null)
-        return;
-    if (watchState.emitterIndex !== null &&
-        watchState.emitters[watchState.emitterIndex] === emitter) {
-        watchState.emitterIndex++;
-        return;
-    }
-    else if (watchState.emitterIndex !== null) {
-        const index = watchState.emitterIndex;
-        watchState.emitterIndex = null;
-        watchState.emitters = watchState.emitters.slice(0, index);
-    }
-    if (watchState.emitterIds) {
-        if (!watchState.emitterIds.has(emitter[0])) {
-            watchState.emitters.push(emitter);
-            watchState.emitterIds.add(emitter[0]);
-        }
+function RegisterSame(state, emitter) {
+    if (state.emitterIndex < state.emitters.length &&
+        state.emitters[state.emitterIndex] === emitter) {
+        state.emitterIndex++;
         return;
     }
-    watchState.emitters.push(emitter);
-    if (watchState.emitters.length > 50) {
-        const idSet = (watchState.emitterIds = new Set());
+    state.emitters = state.emitters.slice(0, state.emitterIndex);
+    state.emitters.push(emitter);
+    state.emitterIndex = -1;
+    state.strategy = PUSH_STRATEGY;
+}
+function RegisterPush(state, emitter) {
+    state.emitters.push(emitter);
+    if (state.emitters.length > 50) {
+        const idSet = (state.emitterIds = new Set([state.emitters[0][0]]));
         let writePos = 0;
-        for (let x = 1; x < watchState.emitters.length; x++) {
-            if (!idSet.has(watchState.emitters[x][0])) {
-                watchState.emitters[++writePos] = watchState.emitters[x];
-                idSet.add(watchState.emitters[x][0]);
+        for (let x = 1; x < state.emitters.length; x++) {
+            if (!idSet.has(state.emitters[x][0])) {
+                state.emitters[++writePos] = state.emitters[x];
+                idSet.add(state.emitters[x][0]);
             }
         }
         writePos++;
-        if (writePos < watchState.emitters.length)
-            watchState.emitters.splice(writePos);
+        if (writePos < state.emitters.length)
+            state.emitters.splice(writePos);
+        state.strategy = DISTINCT_STRATEGY;
+    }
+}
+function RegisterDistinct(state, emitter) {
+    if (!state.emitterIds.has(emitter[0])) {
+        state.emitters.push(emitter);
+        state.emitterIds.add(emitter[0]);
+    }
+}
+function RegisterEmitter(emitter) {
+    if (watchState === null)
+        return;
+    switch (watchState.strategy) {
+        case SAME_STRATEGY:
+            RegisterSame(watchState, emitter);
+            break;
+        case PUSH_STRATEGY:
+            RegisterPush(watchState, emitter);
+            break;
+        case DISTINCT_STRATEGY:
+            RegisterDistinct(watchState, emitter);
+            break;
     }
 }
 /**
@@ -144,7 +154,33 @@ function GetScopeValue(scope) {
     ExecuteScope(scope);
     return scope.value;
 }
+const SAME_STRATEGY = 1;
+const PUSH_STRATEGY = 2;
+const DISTINCT_STRATEGY = 3;
+const SHRINK_STRATEGY = 4;
 let watchState = null;
+const watchPool = list_1.List.Create();
+function CreateWatchState() {
+    return (list_1.List.Pop(watchPool) ?? {
+        emitterIndex: 0,
+        value: null,
+        emitters: null,
+        emitterIds: null,
+        currentCalc: null,
+        nextCalc: null,
+        strategy: PUSH_STRATEGY,
+    });
+}
+function ReturnWatchState(state) {
+    state.emitterIndex = 0;
+    state.value = null;
+    state.emitters = null;
+    state.emitterIds = null;
+    state.currentCalc = null;
+    state.nextCalc = null;
+    state.strategy = PUSH_STRATEGY;
+    list_1.List.Push(watchPool, state);
+}
 /**
  * Executes a callback while tracking all scope and emitter dependencies.
  * Creates a watch context that records what was accessed during execution.
@@ -152,22 +188,21 @@ let watchState = null;
  * @param currentCalc Optional map of existing calc scopes to reuse.
  * @returns The watch state containing tracked dependencies and result.
  */
-function WatchFunction(callback, currentCalc = null, initialEmitters = []) {
+function WatchFunction(callback, currentCalc, initialEmitters) {
     const parent = watchState;
-    watchState = {
-        emitterIndex: initialEmitters.length > 0 ? 0 : null,
-        value: null,
-        emitters: initialEmitters,
-        emitterIds: null,
-        currentCalc: currentCalc,
-        nextCalc: null,
-    };
+    watchState = CreateWatchState();
+    watchState.emitters = initialEmitters ?? [];
+    watchState.currentCalc = currentCalc;
+    if (initialEmitters !== null)
+        watchState.strategy = SAME_STRATEGY;
     watchState.value = callback();
     const resultState = watchState;
     watchState = parent;
-    if (resultState.emitterIndex !== null &&
-        resultState.emitterIndex < resultState.emitters.length)
+    if (resultState.strategy === SAME_STRATEGY &&
+        resultState.emitterIndex < resultState.emitters.length) {
         resultState.emitters = resultState.emitters.slice(0, resultState.emitterIndex);
+        resultState.strategy = SHRINK_STRATEGY;
+    }
     return resultState;
 }
 /**
@@ -178,8 +213,7 @@ function WatchFunction(callback, currentCalc = null, initialEmitters = []) {
 function ExecuteScope(scope) {
     scope.dirty = false;
     const state = WatchFunction(scope.getFunction, scope.calcScopes, scope.emitters);
-    if (state.emitters !== scope.emitters)
-        UpdateEmitters(scope, state.emitters, !!state.emitterIds);
+    UpdateEmitters(scope, state.emitters, state.strategy);
     const calcScopes = state.currentCalc;
     scope.calcScopes = state.nextCalc;
     for (const key in calcScopes)
@@ -191,6 +225,7 @@ function ExecuteScope(scope) {
         });
     else
         scope.value = state.value;
+    ReturnWatchState(state);
 }
 /**
  * Creates a scope from a function, choosing between static and dynamic based on dependencies.
@@ -202,19 +237,22 @@ function ExecuteScope(scope) {
  */
 function ExecuteFunction(callback, greedy, allowStatic) {
     const async = (0, functions_1.IsAsync)(callback);
-    const state = WatchFunction(callback);
-    if (!allowStatic || async || state.emitters.length > 0) {
+    const state = WatchFunction(callback, null, null);
+    if (!allowStatic || async || state.emitters !== null) {
         const scope = CreateDynamicScope(callback, greedy, async ? null : state.value);
         scope.calcScopes = state.nextCalc;
-        UpdateEmitters(scope, state.emitters, !!state.emitterIds);
+        UpdateEmitters(scope, state.emitters, state.strategy);
         if (async)
             state.value.then(function (result) {
                 scope.value = result;
                 emitter_1.Emitter.Emit(scope.emitter, scope);
             });
+        ReturnWatchState(state);
         return scope;
     }
-    return CreateStaticScope(state.value);
+    const value = state.value;
+    ReturnWatchState(state);
+    return CreateStaticScope(value);
 }
 /**
  * Creates a computed scope that acts as a gatekeeper for parent scope emissions.
@@ -254,27 +292,31 @@ function CalcScope(callback, idOverride) {
  * @param right The new list of emitters to track.
  * @param distinct Whether emitters are already unique (sorted and deduplicated).
  */
-function UpdateEmitters(scope, right, distinct = false) {
-    distinct ? emitter_1.Emitter.Sort(right) : emitter_1.Emitter.Distinct(right);
-    if (scope.emitters === null) {
-        for (let x = 0; x < right.length; x++)
-            emitter_1.Emitter.On(right[x], scope.setCallback);
-        scope.emitters = right;
-        return;
-    }
-    if (right.length === 0) {
-        if (scope.emitters.length > 0) {
-            for (let x = 0; x < scope.emitters.length; x++)
+function UpdateEmitters(scope, right, strategy) {
+    switch (strategy) {
+        case SHRINK_STRATEGY: {
+            for (let x = right.length; x < scope.emitters.length; x++)
                 emitter_1.Emitter.Remove(scope.emitters[x], scope.setCallback);
-            scope.emitters = [];
+            break;
         }
-        return;
+        case PUSH_STRATEGY:
+        case DISTINCT_STRATEGY:
+            strategy === PUSH_STRATEGY
+                ? emitter_1.Emitter.Distinct(right)
+                : emitter_1.Emitter.Sort(right);
+            if (scope.emitters === null || scope.emitters.length === 0) {
+                for (let x = 0; x < right.length; x++)
+                    emitter_1.Emitter.On(right[x], scope.setCallback);
+            }
+            else {
+                (0, array_1.ReconcileSortedEmitters)(scope.emitters, right, function (emitter) {
+                    emitter_1.Emitter.On(emitter, scope.setCallback);
+                }, function (emitter) {
+                    emitter_1.Emitter.Remove(emitter, scope.setCallback);
+                });
+            }
+            break;
     }
-    (0, array_1.ReconcileSortedEmitters)(scope.emitters, right, function (emitter) {
-        emitter_1.Emitter.On(emitter, scope.setCallback);
-    }, function (emitter) {
-        emitter_1.Emitter.Remove(emitter, scope.setCallback);
-    });
     scope.emitters = right;
 }
 /**

package/Utils/decorators.js

@@ -20,9 +20,7 @@ exports.Scope = Scope;
 exports.Watch = Watch;
 exports.Inject = Inject;
 exports.Destroy = Destroy;
-// import { Component } from "../Node/component";
 const observableScope_1 = require("../Store/Tree/observableScope");
-// import { ElementNodeRefTypes } from "../Node/nodeRef.types";
 const observableNode_1 = require("../Store/Tree/observableNode");
 const Store_1 = require("../Store");
 /**
@@ -365,14 +363,6 @@ function WatchDecorator(target, propertyKey, descriptor, scopeFunction) {
         observableScope_1.ObservableScope.Watch(scope, function (scope) {
             instance[propertyKey](observableScope_1.ObservableScope.Value(scope));
         });
-        /* const [value, scope] = ObservableScope.CreateIf(scopeFunctionWrapper, true);
-        if (scope) {
-          const propertyMap = GetScopeMapForInstance(this);
-          propertyMap[propertyKey as string] = [scope, undefined];
-          ObservableScope.Watch(scope, function (scope) {
-            (instance as any)[propertyKey](ObservableScope.Value(scope));
-          });
-        } */
         instance[propertyKey](observableScope_1.ObservableScope.Value(scope));
         return instance;
     }

package/Utils/emitter.js

@@ -42,11 +42,6 @@ var Emitter;
     function Distinct(emitters) {
         if (emitters.length < 2)
             return;
-        // emitters.length < 51 ? DistinctSmall(emitters) : DistinctLarge(emitters);
-        DistinctSmall(emitters);
-    }
-    Emitter.Distinct = Distinct;
-    function DistinctSmall(emitters) {
         Sort(emitters);
         let writePos = 0;
         for (let x = 1; x < emitters.length; x++) {
@@ -58,20 +53,7 @@ var Emitter;
         if (writePos < emitters.length)
             emitters.splice(writePos);
     }
-    function DistinctLarge(emitters) {
-        let writePos = 0;
-        const ids = new Set();
-        for (let x = 0; x < emitters.length; x++) {
-            const id = emitters[x][0];
-            if (!ids.has(id)) {
-                ids.add(id);
-                emitters[writePos++] = emitters[x];
-            }
-        }
-        if (writePos < emitters.length)
-            emitters.splice(writePos);
-        Sort(emitters);
-    }
+    Emitter.Distinct = Distinct;
     function Sort(emitters) {
         if (emitters.length < 11)
             (0, array_1.InsertionSortTuples)(emitters);

package/package.json

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