j-templates 7.0.68 → 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.d.ts

@@ -1,39 +1,138 @@
 import { Emitter, EmitterCallback } from "../../Utils/emitter";
+/**
+ * Represents a static (non-reactive) observable scope.
+ * Static scopes are immutable and do not track dependencies or emit updates.
+ * @template T The type of value stored in the scope.
+ */
 interface IStaticObservableScope<T> {
     type: "static";
     value: T;
 }
+/**
+ * Represents a dynamic (reactive) observable scope.
+ * Dynamic scopes track dependencies, detect when values change, and emit updates.
+ * @template T The type of value stored in the scope.
+ */
 interface IDynamicObservableScope<T> {
     type: "dynamic";
+    /** Whether the scope's getter function is async */
     async: boolean;
+    /** Whether updates are batched (true) or immediate (false) */
     greedy: boolean;
+    /** Whether the scope needs recomputation */
     dirty: boolean;
+    /** Whether the scope has been destroyed */
     destroyed: boolean;
+    /** Function that returns the scope's current or computed value */
     getFunction: () => Promise<T> | T;
+    /** Callback invoked when dependencies change */
     setCallback: EmitterCallback;
+    /** Current cached value */
     value: T;
+    /** Emitter for notifying listeners of value changes */
     emitter: Emitter;
+    /** Array of emitters this scope listens to for dependency changes */
     emitters: (Emitter | null)[];
+    /** Emitter for notifying when the scope is destroyed */
     onDestroyed: Emitter | null;
+    /** Map of nested calc scopes created during this scope's execution */
     calcScopes: {
         [id: string]: IObservableScope<unknown> | null;
     } | null;
 }
+/**
+ * A reactive or static scope containing a value.
+ * @template T The type of value stored in the scope.
+ */
 export type IObservableScope<T> = IStaticObservableScope<T> | IDynamicObservableScope<T>;
+/**
+ * Creates a computed scope that acts as a gatekeeper for parent scope emissions.
+ * If this scope's value doesn't change (=== comparison) it won't emit.
+ *
+ * Useful for optimizing expensive operations driven by key values (e.g., sort keys).
+ * Scopes are memoized by ID and reused across multiple reads within a single parent scope evaluation.
+ * Defaults to "default" ID - provide custom IDs when using multiple calc scopes.
+ *
+ * Only works within a watch context (during another scope's execution).
+ * Always creates greedy scopes that batch updates via microtask queue.
+ * @template T The type of value returned by the callback.
+ * @param callback The function to compute the derived value.
+ * @param idOverride Optional custom ID for memoization when using multiple calc scopes.
+ * @returns The computed value, reusing existing scope if available.
+ */
 export declare function CalcScope<T>(callback: () => T, idOverride?: string): T;
 export declare namespace ObservableScope {
+    /**
+     * Creates a new observable scope from a value function.
+     * @template T The type of value returned by the function.
+     * @param valueFunction Function that returns the scope's value. Can be async.
+     * @param greedy Whether updates should be batched via microtask queue. Defaults to false.
+     * @param force If true, always creates a dynamic scope even without dependencies. Defaults to false.
+     * @returns A new observable scope.
+     */
     function Create<T>(valueFunction: {
         (): T | Promise<T>;
     }, greedy?: boolean, force?: boolean): IObservableScope<T>;
+    /**
+     * Registers an emitter as a dependency for the current watch context.
+     * @param emitter The emitter to register as a dependency.
+     */
     function Register(emitter: Emitter): void;
+    /**
+     * Gets a scope's current value without registering as a dependency.
+     * @template T The type of value stored in the scope.
+     * @param scope The scope to peek at.
+     * @returns The scope's current value.
+     */
     function Peek<T>(scope: IObservableScope<T>): T;
+    /**
+     * Gets a scope's current value and registers as a dependency.
+     * @template T The type of value stored in the scope.
+     * @param scope The scope to get the value from.
+     * @returns The scope's current value.
+     */
     function Value<T>(scope: IObservableScope<T>): T;
+    /**
+     * Registers a scope as a dependency without retrieving its value.
+     * @template T The type of value stored in the scope.
+     * @param scope The scope to register as a dependency.
+     */
     function Touch<T>(scope: IObservableScope<T>): void;
+    /**
+     * Subscribes to changes on a dynamic scope.
+     * @template T The type of value stored in the scope.
+     * @param scope The scope to watch for changes.
+     * @param callback Function to invoke when the scope's value changes.
+     */
     function Watch<T>(scope: IObservableScope<T>, callback: EmitterCallback<[IObservableScope<T>]>): void;
+    /**
+     * Unsubscribes from changes on a dynamic scope.
+     * @template T The type of value stored in the scope.
+     * @param scope The scope to stop watching.
+     * @param callback The callback function to remove.
+     */
     function Unwatch<T>(scope: IObservableScope<T>, callback: EmitterCallback<[IObservableScope<T>]>): void;
+    /**
+     * Registers a callback to be invoked when the scope is destroyed.
+     * @param scope The scope to monitor for destruction.
+     * @param callback Function to invoke when the scope is destroyed.
+     */
     function OnDestroyed(scope: IObservableScope<unknown>, callback: EmitterCallback): void;
+    /**
+     * Marks a scope as dirty, triggering recomputation on next access or batch.
+     * @param scope The scope to mark for update.
+     */
     function Update(scope: IObservableScope<any>): void;
+    /**
+     * Destroys a scope, cleaning up all resources and dependencies.
+     * @template T The type of value stored in the scope.
+     * @param scope The scope to destroy.
+     */
     function Destroy<T>(scope: IObservableScope<T>): void;
+    /**
+     * Destroys multiple scopes, cleaning up their resources.
+     * @param scopes Array of scopes to destroy.
+     */
     function DestroyAll(scopes: IObservableScope<unknown>[]): void;
 }
 export {};

package/Store/Tree/observableScope.js

@@ -5,6 +5,15 @@ 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.
+ * @param getFunction Function that returns the scope's value. May be async.
+ * @param greedy Whether updates should be batched via microtask queue.
+ * @param value Initial value for the scope (null for async functions).
+ * @returns A new dynamic observable scope.
+ */
 function CreateDynamicScope(getFunction, greedy, value) {
     const async = (0, functions_1.IsAsync)(getFunction);
     const scope = {
@@ -25,6 +34,13 @@ function CreateDynamicScope(getFunction, greedy, value) {
     };
     return scope;
 }
+/**
+ * Creates a static (non-reactive) observable scope.
+ * Static scopes are optimized for values that never change and don't need dependency tracking.
+ * @template T The type of value stored in the scope.
+ * @param initialValue The immutable value to store in the scope.
+ * @returns A new static observable scope.
+ */
 function CreateStaticScope(initialValue) {
     return {
         type: "static",
@@ -50,6 +66,11 @@ function OnSetQueued(scope) {
         queueMicrotask(ProcessScopeQueue);
     scopeQueue.push(scope);
 }
+/**
+ * Marks a scope as dirty and triggers update behavior based on scope type.
+ * @param scope The scope to mark for update.
+ * @returns true if the scope is static or destroyed, false if queued or non-greedy scope emitted.
+ */
 function OnSet(scope) {
     if (scope.type === "static" || scope.destroyed)
         return true;
@@ -63,59 +84,136 @@ function OnSet(scope) {
     emitter_1.Emitter.Emit(scope.emitter, scope);
     return false;
 }
-function RegisterEmitter(emitter) {
-    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;
     }
 }
+/**
+ * Registers a scope as a dependency for the current watch context.
+ * @param scope The scope to register as a dependency.
+ */
 function RegisterScope(scope) {
     if (watchState === null || scope.type === "static")
         return;
     RegisterEmitter(scope.emitter);
 }
+/**
+ * Gets the current value of a scope, recomputing if dirty.
+ * @template T The type of value stored in the scope.
+ * @param scope The scope to get the value from.
+ * @returns The scope's current value.
+ */
 function GetScopeValue(scope) {
     if (scope.type === "static" || !scope.dirty || scope.destroyed)
         return scope.value;
     ExecuteScope(scope);
     return scope.value;
 }
+const SAME_STRATEGY = 1;
+const PUSH_STRATEGY = 2;
+const DISTINCT_STRATEGY = 3;
+const SHRINK_STRATEGY = 4;
 let watchState = null;
-function WatchFunction(callback, currentCalc = null) {
-    const parent = watchState;
-    watchState = {
+const watchPool = list_1.List.Create();
+function CreateWatchState() {
+    return (list_1.List.Pop(watchPool) ?? {
+        emitterIndex: 0,
         value: null,
-        emitters: [],
+        emitters: null,
         emitterIds: null,
-        currentCalc: currentCalc,
+        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.
+ * @param callback The function to execute while tracking dependencies.
+ * @param currentCalc Optional map of existing calc scopes to reuse.
+ * @returns The watch state containing tracked dependencies and result.
+ */
+function WatchFunction(callback, currentCalc, initialEmitters) {
+    const parent = watchState;
+    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.strategy === SAME_STRATEGY &&
+        resultState.emitterIndex < resultState.emitters.length) {
+        resultState.emitters = resultState.emitters.slice(0, resultState.emitterIndex);
+        resultState.strategy = SHRINK_STRATEGY;
+    }
     return resultState;
 }
+/**
+ * Recomputes a scope's value by re-executing its getFunction.
+ * Updates the scope's dependencies and emits if the value changed.
+ * @param scope The scope to recompute.
+ */
 function ExecuteScope(scope) {
     scope.dirty = false;
-    const state = WatchFunction(scope.getFunction, scope.calcScopes);
-    UpdateEmitters(scope, state.emitters, !!state.emitterIds);
+    const state = WatchFunction(scope.getFunction, scope.calcScopes, scope.emitters);
+    UpdateEmitters(scope, state.emitters, state.strategy);
     const calcScopes = state.currentCalc;
     scope.calcScopes = state.nextCalc;
     for (const key in calcScopes)
@@ -127,28 +225,55 @@ function ExecuteScope(scope) {
         });
     else
         scope.value = state.value;
+    ReturnWatchState(state);
 }
+/**
+ * Creates a scope from a function, choosing between static and dynamic based on dependencies.
+ * @template T The type of value returned by the callback.
+ * @param callback The function to compute the scope's value.
+ * @param greedy Whether the scope should batch updates.
+ * @param allowStatic Whether to return a static scope if no dependencies are found.
+ * @returns A new observable 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.
+ * If this scope's value doesn't change (=== comparison) it won't emit.
+ *
+ * Useful for optimizing expensive operations driven by key values (e.g., sort keys).
+ * Scopes are memoized by ID and reused across multiple reads within a single parent scope evaluation.
+ * Defaults to "default" ID - provide custom IDs when using multiple calc scopes.
+ *
+ * Only works within a watch context (during another scope's execution).
+ * Always creates greedy scopes that batch updates via microtask queue.
+ * @template T The type of value returned by the callback.
+ * @param callback The function to compute the derived value.
+ * @param idOverride Optional custom ID for memoization when using multiple calc scopes.
+ * @returns The computed value, reusing existing scope if available.
+ */
 function CalcScope(callback, idOverride) {
     if (watchState === null)
         return callback();
     const nextScopes = (watchState.nextCalc ??= {});
-    const id = idOverride ?? callback.toString();
+    const id = idOverride ?? "default";
     if (nextScopes[id]) {
         RegisterScope(nextScopes[id]);
         return GetScopeValue(nextScopes[id]);
@@ -160,33 +285,53 @@ function CalcScope(callback, idOverride) {
     RegisterScope(nextScopes[id]);
     return GetScopeValue(nextScopes[id]);
 }
-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++)
+/**
+ * Updates a scope's dependency emitters using efficient diffing.
+ * Subscribes to new emitters and unsubscribes from removed ones.
+ * @param scope The scope to update dependencies for.
+ * @param right The new list of emitters to track.
+ * @param distinct Whether emitters are already unique (sorted and deduplicated).
+ */
+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;
 }
+/**
+ * Destroys multiple scopes, cleaning up their resources.
+ * @param scopes Array of scopes to destroy.
+ */
 function DestroyAllScopes(scopes) {
     for (let x = 0; x < scopes.length; x++)
         DestroyScope(scopes[x]);
 }
+/**
+ * Destroys a scope, cleaning up all resources and dependencies.
+ * Unsubscribes from emitters, destroys nested scopes, and clears references.
+ * @param scope The scope to destroy.
+ */
 function DestroyScope(scope) {
     if (!scope || scope.type === "static")
         return;
@@ -207,18 +352,42 @@ function DestroyScope(scope) {
 }
 var ObservableScope;
 (function (ObservableScope) {
+    /**
+     * Creates a new observable scope from a value function.
+     * @template T The type of value returned by the function.
+     * @param valueFunction Function that returns the scope's value. Can be async.
+     * @param greedy Whether updates should be batched via microtask queue. Defaults to false.
+     * @param force If true, always creates a dynamic scope even without dependencies. Defaults to false.
+     * @returns A new observable scope.
+     */
     function Create(valueFunction, greedy = false, force = false) {
         return ExecuteFunction(valueFunction, greedy, !force);
     }
     ObservableScope.Create = Create;
+    /**
+     * Registers an emitter as a dependency for the current watch context.
+     * @param emitter The emitter to register as a dependency.
+     */
     function Register(emitter) {
         RegisterEmitter(emitter);
     }
     ObservableScope.Register = Register;
+    /**
+     * Gets a scope's current value without registering as a dependency.
+     * @template T The type of value stored in the scope.
+     * @param scope The scope to peek at.
+     * @returns The scope's current value.
+     */
     function Peek(scope) {
         return GetScopeValue(scope);
     }
     ObservableScope.Peek = Peek;
+    /**
+     * Gets a scope's current value and registers as a dependency.
+     * @template T The type of value stored in the scope.
+     * @param scope The scope to get the value from.
+     * @returns The scope's current value.
+     */
     function Value(scope) {
         if (!scope)
             return undefined;
@@ -226,24 +395,46 @@ var ObservableScope;
         return Peek(scope);
     }
     ObservableScope.Value = Value;
+    /**
+     * Registers a scope as a dependency without retrieving its value.
+     * @template T The type of value stored in the scope.
+     * @param scope The scope to register as a dependency.
+     */
     function Touch(scope) {
         if (!scope)
             return;
         RegisterScope(scope);
     }
     ObservableScope.Touch = Touch;
+    /**
+     * Subscribes to changes on a dynamic scope.
+     * @template T The type of value stored in the scope.
+     * @param scope The scope to watch for changes.
+     * @param callback Function to invoke when the scope's value changes.
+     */
     function Watch(scope, callback) {
         if (!scope || scope.type === "static")
             return;
         emitter_1.Emitter.On(scope.emitter, callback);
     }
     ObservableScope.Watch = Watch;
+    /**
+     * Unsubscribes from changes on a dynamic scope.
+     * @template T The type of value stored in the scope.
+     * @param scope The scope to stop watching.
+     * @param callback The callback function to remove.
+     */
     function Unwatch(scope, callback) {
         if (!scope || scope.type === "static")
             return;
         emitter_1.Emitter.Remove(scope.emitter, callback);
     }
     ObservableScope.Unwatch = Unwatch;
+    /**
+     * Registers a callback to be invoked when the scope is destroyed.
+     * @param scope The scope to monitor for destruction.
+     * @param callback Function to invoke when the scope is destroyed.
+     */
     function OnDestroyed(scope, callback) {
         if (scope.type === "static")
             return;
@@ -251,16 +442,29 @@ var ObservableScope;
         emitter_1.Emitter.On(scope.onDestroyed, callback);
     }
     ObservableScope.OnDestroyed = OnDestroyed;
+    /**
+     * Marks a scope as dirty, triggering recomputation on next access or batch.
+     * @param scope The scope to mark for update.
+     */
     function Update(scope) {
         if (!scope)
             return;
         OnSet(scope);
     }
     ObservableScope.Update = Update;
+    /**
+     * Destroys a scope, cleaning up all resources and dependencies.
+     * @template T The type of value stored in the scope.
+     * @param scope The scope to destroy.
+     */
     function Destroy(scope) {
         DestroyScope(scope);
     }
     ObservableScope.Destroy = Destroy;
+    /**
+     * Destroys multiple scopes, cleaning up their resources.
+     * @param scopes Array of scopes to destroy.
+     */
     function DestroyAll(scopes) {
         DestroyAllScopes(scopes);
     }

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.68",
+  "version": "7.0.70",
   "description": "j-templates",
   "license": "MIT",
   "repository": "https://github.com/TypesInCode/jTemplates",