j-templates 8.0.20 → 8.0.23

package/DOM/domNodeConfig.js

@@ -56,6 +56,9 @@ function getHTMLNode(from, current) {
     return from;
 }
 export const DOMNodeConfig = {
+    isConnected(target) {
+        return target.isConnected;
+    },
     createNode(type, namespace) {
         return namespace
             ? document.createElementNS(namespace, type)

package/Node/component.d.ts

@@ -14,6 +14,11 @@ export declare class Component<D = void, T = void, E = {}> {
     private scope;
     private templates;
     private componentEvents;
+    /**
+     * Return if the component's vNode is connected
+     * to a parent document
+     */
+    get IsConnected(): boolean;
     /**
      * Returns the component's virtual node injector.
      */
@@ -51,6 +56,7 @@ export declare class Component<D = void, T = void, E = {}> {
      * Override to perform post‑binding initialization.
      */
     Bound(): void;
+    Connected(): void;
     /**
      * Fires a component event.
      *
@@ -85,6 +91,6 @@ export declare namespace Component {
      * @param vnode - The virtual node to be attached.
      * @returns The result of the attachment operation.
      */
-    function Attach(node: any, vnode: vNodeType): vNodeType;
+    function Attach(node: any, vnode: vElementNode): vElementNode;
 }
 export {};

package/Node/component.js

@@ -9,6 +9,13 @@ import { ObservableScope } from "../Store";
  * @template E - Event map type for component events.
  */
 export class Component {
+    /**
+     * Return if the component's vNode is connected
+     * to a parent document
+     */
+    get IsConnected() {
+        return this.vNode.connected;
+    }
     /**
      * Returns the component's virtual node injector.
      */
@@ -76,6 +83,7 @@ export class Component {
     Bound() {
         Bound.All(this);
     }
+    Connected() { }
     /**
      * Fires a component event.
      *

package/Node/nodeConfig.d.ts

@@ -1,4 +1,5 @@
 export interface INodeConfig {
+    isConnected(node: any): boolean;
     createNode(type: any, namespace: string): any;
     createTextNode(value?: string): any;
     scheduleUpdate(callback: () => void): void;

package/Node/vNode.d.ts

@@ -6,5 +6,5 @@ export declare namespace vNode {
     function Destroy(vnode: vNodeType): void;
     function DestroyAll(vnodes: vNodeType[]): void;
     function ToFunction<P = HTMLElement, E = HTMLElementEventMap>(type: string | typeof TEXT_NODE | typeof FRAGMENT_NODE, namespace?: string): <T>(config: vNodeConfig<P, E, T>, children?: vNodeType[] | vNodeChildrenFunction<T>) => vElementNode;
-    function Attach(node: any, vnode: vNodeType): vNodeType;
+    function Attach(node: any, vnode: vElementNode): vElementNode;
 }

package/Node/vNode.js

@@ -13,6 +13,7 @@ export var vNode;
         return {
             definition,
             type: definition.type,
+            connected: false,
             injector: definition.componentFactory
                 ? new Injector()
                 : (Injector.Current() ?? new Injector()),
@@ -71,8 +72,11 @@ export var vNode;
         if (vnode.type === FRAGMENT_NODE)
             throw new Error("Cannot attach a fragment directly. A fragment has no DOM node — " +
                 "wrap it in a real element (e.g. div) before attaching.");
+        // Must create a node + attach before Init so Connected can run correctly
+        // on a possible Component instance
+        const childNode = vnode.definition.node = CreateNode(vnode);
+        NodeConfig.addChild(node, childNode);
         Init(vnode);
-        NodeConfig.addChild(node, vnode.node);
         return vnode;
     }
     vNode.Attach = Attach;
@@ -80,19 +84,22 @@ export var vNode;
 function ComponentChildren() {
     return this.Template();
 }
-function InitNode(vnode, parentNode) {
-    const { type, namespace, props, attrs, on, data, componentFactory, children, childrenArray, } = vnode.definition;
-    let node = null;
+function CreateNode(vnode) {
     switch (vnode.type) {
         case FRAGMENT_NODE:
-            break;
+            return null;
         case TEXT_NODE:
-            vnode.node = node = vnode.definition.node ?? NodeConfig.createTextNode();
-            break;
+            return vnode.definition.node ?? NodeConfig.createTextNode();
         default:
-            vnode.node = node = vnode.definition.node ?? NodeConfig.createNode(type, namespace);
-            break;
+            return vnode.definition.node ?? NodeConfig.createNode(vnode.definition.type, vnode.definition.namespace);
     }
+}
+function InitNode(vnode, parentNode) {
+    const { 
+    /* type,
+    namespace, */
+    props, attrs, on, data, componentFactory, children, childrenArray, } = vnode.definition;
+    const node = vnode.node = CreateNode(vnode);
     vnode.definition = null;
     vnode.parentNode = parentNode;
     if (props) {
@@ -130,7 +137,7 @@ function InitNode(vnode, parentNode) {
     }
     if (componentFactory) {
         vnode.component = Injector.Scope(vnode.injector, componentFactory, vnode);
-        vnode.component.Bound();
+        // vnode.component.Bound();
         Children(vnode, ComponentChildren.bind(vnode.component));
     }
     else if (childrenArray) {
@@ -173,7 +180,7 @@ function CreateChildrenScope(vnode, children, data) {
     return ObservableScope.Create(DynamicChildrenFunction.bind(null, vnode.injector, children, data));
 }
 function ToVNodeType(children) {
-    return typeof children === "string" ? { type: STRING_NODE, node: children } : children;
+    return typeof children === "string" ? { type: STRING_NODE, connected: false, node: children } : children;
 }
 function GetNextNodes(injector, children, data) {
     return ToVNodeType(Injector.Scope(injector, children, data));
@@ -236,14 +243,18 @@ function UpdateChildren(vnode, init = false, skipInit = false) {
             if (vnode.destroyed || children !== vnode.children)
                 return;
             if (init) {
-                if (vnode.node !== null)
+                if (vnode.node !== null) {
                     NodeConfig.reconcileChildren(vnode.node, CleanupChildrenArray(vnode.children));
+                    vnode.component?.Bound();
+                    FireConnected(vnode, true);
+                }
             }
             else if (!async) {
                 let reconcileNode = vnode;
                 while (reconcileNode.node === null)
                     reconcileNode = reconcileNode.parentNode;
                 NodeConfig.reconcileChildren(reconcileNode.node, CleanupChildrenArray(reconcileNode.children));
+                FireConnected(vnode, true);
             }
             else {
                 NodeConfig.scheduleUpdate(function () {
@@ -253,11 +264,47 @@ function UpdateChildren(vnode, init = false, skipInit = false) {
                     while (reconcileNode.node === null)
                         reconcileNode = reconcileNode.parentNode;
                     NodeConfig.reconcileChildren(reconcileNode.node, CleanupChildrenArray(reconcileNode.children));
+                    FireConnected(vnode, true);
                 });
             }
         });
     });
 }
+function FireConnected(vnode, root = false) {
+    if ((!root && vnode.connected) ||
+        (vnode.type !== FRAGMENT_NODE && vnode.node === null))
+        return;
+    switch (vnode.type) {
+        case FRAGMENT_NODE:
+            break;
+        default: {
+            if (!vnode.connected) {
+                vnode.connected = NodeConfig.isConnected(vnode.node);
+                switch (vnode.type) {
+                    case STRING_NODE:
+                    case TEXT_NODE:
+                        break;
+                    default:
+                        vnode.connected && vnode.component?.Connected();
+                }
+            }
+            break;
+        }
+    }
+    if (vnode.type !== FRAGMENT_NODE && !vnode.connected)
+        return;
+    switch (vnode.type) {
+        case STRING_NODE:
+        case TEXT_NODE:
+            break;
+        default: {
+            const children = vnode.children;
+            const count = children?.length;
+            for (let x = 0; x < count; x++)
+                FireConnected(children[x]);
+        }
+    }
+}
 function ScheduledAssignment(assign) {
     let scheduled = false;
     return function (scope) {

package/Node/vNode.types.d.ts

@@ -27,10 +27,12 @@ export type vNodeConfig<P = HTMLElement, E = HTMLElementEventMap, T = never> = {
 };
 export type vStringNode = {
     type: typeof STRING_NODE;
+    connected: boolean;
     node: string;
 };
 export type vElementNode = {
     type: string | typeof TEXT_NODE | typeof FRAGMENT_NODE;
+    connected: boolean;
     definition: vNodeDefinition<any, any, any>;
     injector: Injector;
     parentNode: vElementNode | null;

package/SYNTAX_PRIMER.md

@@ -2,13 +2,13 @@
 
 Oct 3, 2026 · @Jay Landrum
 
-Reference for building apps with j-templates 8.0.19. Every behavioral claim was checked by running the library in jsdom; claims taken from type declarations or source alone are marked as such.
+Reference for building apps with j-templates 8.0.21. Every behavioral claim was checked by running the library in jsdom; claims taken from type declarations or source alone are marked as such.
 
 ## How to use this document
 
 Read Mental model, then Templates and State decorators before writing a component. Check the Traps checklist before shipping.
 
-- **Version:** j-templates 8.0.19 (its runtime code is identical to 8.0.18; only two type declarations changed). Tested in jsdom with TypeScript (`experimentalDecorators`).
+- **Version:** j-templates 8.0.21. The 8.0.19 claims were tested in jsdom with TypeScript (`experimentalDecorators`). 8.0.21 changed `peek`, how `@Computed` notifies readers, and emitter re-entry; those sections were re-verified against 8.0.21 in jsdom.
 - **Not verified:** a real browser `Worker` (a structured-clone shim stood in), real focus behavior, and the `docs/`, `examples/` and `src/` folders the package does not ship.
 - **Convention:** `this.x` in examples is a component field decorated with `@Value` or `@State` unless shown otherwise. Imports are omitted after the first example.
 
@@ -324,8 +324,10 @@ Tracked array methods: `push`, `pop`, `shift`, `unshift`, `splice`, `sort`, `rev
 ```
 
 - Created on first read; afterwards recomputes immediately when a dependency changes, then merges the result into the existing object.
-- No store is involved. The getter runs inside an `ObservableScope.Gated` scope; each result is copied with `ObservableNode.Clone` and merged into an internal `ObservableNode` with `ObservableNode.Apply` (from source).
-- `this.summary === this.summary` holds across updates, so `gate()` and identity-based item reuse see a stable reference.
+- No store is involved. The getter runs inside an `ObservableScope.Gated` scope that is watched; each result is copied with `ObservableNode.Clone` and merged into an internal `ObservableNode` with `ObservableNode.Apply`. The property reads that node's root through a separate scope (from source).
+- Readers of the property itself re-run only when the root is replaced. A reader of a sub-property (`this.summary.done`) re-runs only when that path changes (verified).
+- `this.summary === this.summary` holds across content updates, including arrays growing or shrinking (verified), so `gate()` and identity-based item reuse see a stable reference.
+- The root is replaced, with a new identity, when the result's type changes or an object result loses a key (verified: `{ a, b }` → `{ a }`). A primitive result therefore behaves like `gate()`: readers re-run only when the value changes (verified).
 - The result is a **copy**. `@Computed() get x() { return this.tasks; }` returns an object that is not `this.tasks`. Use `@Scope` when you need the original reference.
 - The copy step reads every property of the result, so all of them become dependencies. Returning a `@State` array therefore re-runs the getter when any item property changes (verified).
 - No arguments. Prefer `@Scope` or a plain getter for cheap values.
@@ -368,24 +370,26 @@ syncFilter(value: FilterType) { this.localFilter = value; }
 
 ## Inline scopes: scope, gate, peek, mapped
 
-These create a memoized child scope inside the scope currently being evaluated and return its value.
+`scope`, `gate` and `mapped` create a memoized child scope inside the scope currently being evaluated and return its value. `peek` creates no scope: it calls its function immediately with dependency tracking turned off.
 
 | Function | Parent re-runs when the value changes | Equality check | Use for |
 | --- | --- | --- | --- |
 | `scope(fn, id?)` | yes | none: parent re-runs on every emit | composing a value, especially async |
 | `gate(fn, id?)` | yes | `!==` only | booleans and other primitives that change less often than their inputs |
-| `peek(fn, id?)` | no | — | reading without subscribing |
+| `peek(fn)` | no | — | reading without subscribing; works anywhere |
 | `mapped(data, fn, onUpdated?, onDestroyed?)` | yes | none | a per-item scope for one value (what `data:` does internally) |
 
 Verified example: with `n` going from 0 to 1, `scope(() => n > 10)` re-runs the parent, `gate(() => n > 10)` and `peek(() => n > 10)` do not.
 
-**Where they can be called.** Only while a scope is evaluating: children functions, `data:`/`props:`/`attrs:` functions, decorated getters, and `ObservableScope.Create` value functions. Elsewhere, including `on:` handlers, they throw `scope() must be called within a watch context` (or `gate()` / `peek()`; `mapped()` reports `scope()`).
+**Where they can be called.** `scope`, `gate` and `mapped` only while a scope is evaluating: children functions, `data:`/`props:`/`attrs:` functions, decorated getters, and `ObservableScope.Create` value functions. Elsewhere, including `on:` handlers, they throw `scope() must be called within a watch context` (or `gate()`; `mapped()` reports `scope()`). They also throw inside a `peek` callback, because tracking is off there (verified).
+
+**peek() details.** `peek` can be called anywhere, including `on:` handlers and plain code (verified). It is not memoized and takes no id: the callback runs on every call, so a parent that re-runs calls it again (verified). It does not await: an `async` callback returns its Promise.
 
 **gate() with @Scope.** Works for a getter that returns a primitive: `gate(() => this.isEmpty)` suppresses re-runs while the boolean is unchanged. Useless for a getter that builds a new object or array each run, because every result is `!==` the last.
 
 ### How memoization matches calls
 
-On each re-run of the parent, each call is matched to a scope from the previous run with the same key, in call order. The key is `id` if given, otherwise one default key per function. `mapped()` keys by the `data` object instead. Consequences:
+This applies to `scope`, `gate` and `mapped`; `peek` has no scope to match. On each re-run of the parent, each call is matched to a scope from the previous run with the same key, in call order. The key is `id` if given, otherwise one default key per function. `mapped()` keys by the `data` object instead. Consequences:
 
 1. **Unconditional duplicates are safe.** Two `gate()` calls without ids, always made in the same order, stay independent across re-runs (verified).
 2. **Conditional or reordered calls need ids.** If a call without an id is skipped, the next same-function call takes its old scope and returns the wrong value, permanently:
@@ -890,11 +894,11 @@ Component.Attach(document.getElementById("app")!, app({}));
 8. **`@Value` does not see in-place mutation.** Reassign, or use `@State`.
 9. **`@State` deep-tracks plain objects and arrays only**, not class instances, `Map` or `Set`.
 10. **`@Scope` has no equality check**; consumers re-run on every change of its inputs. `gate()` it if it returns a primitive.
-11. **`@Computed` returns a copy**, not the object the getter returned, and its identity never changes.
+11. **`@Computed` returns a copy**, not the object the getter returned. Its identity changes only when the result's type changes or an object result loses a key.
 12. **`Bound()` runs before `Template()`**, with the host detached and empty. Defer DOM access with `requestAnimationFrame`. Forgetting `super.Bound()` silences `@Watch`.
 13. **`@Watch` fires immediately** with the initial value, and coalesces synchronous changes into one call.
-14. **Inline helpers outside a scope throw**, including in `on:` handlers.
-15. **Conditional `scope()`/`gate()`/`peek()` calls need ids**, or a later call takes a skipped call's scope. Callbacks are fixed at first run: don't close over locals.
+14. **`scope()`, `gate()` and `mapped()` outside a scope throw**, including in `on:` handlers and inside `peek()` callbacks. `peek()` works anywhere.
+15. **Conditional `scope()`/`gate()` calls need ids**, or a later call takes a skipped call's scope. Callbacks are fixed at first run: don't close over locals.
 16. **Async scopes need the `async` keyword**, track only reads before the first `await`, and are `null` until resolved.
 17. **Rendering is asynchronous** unless `SYNC_SCHEDULING=true`: the DOM is not updated on the line after a write, and not built when `Attach` returns.
 18. **Native DOM listeners belong on elements you render**, not the host.
@@ -905,6 +909,7 @@ Component.Attach(document.getElementById("app")!, app({}));
 
 23) **Equal-value writes still notify.** Assigning the current value again re-runs every reader. Guard repeated writes or read through `gate()`.
 24) **`JSON.stringify(node)` and `ObservableNode.Snapshot(node)` don't subscribe.** Read properties directly, or `ObservableNode.Clone(node)` to track everything.
+25) **Don't update a scope from its own emit.** Calling `ObservableScope.Update(s)` from a `Watch(s, …)` callback, or any write that re-emits the emitter currently notifying, throws `Emitter.Emit: re-entry during emit is not supported` (verified). Defer the write (`queueMicrotask`) or restructure.
 
 ## Debugging
 
@@ -928,6 +933,8 @@ Component.Attach(document.getElementById("app")!, app({}));
 | `ReferenceError: self is not defined` | importing `defaultDiffTreeWorker` on the main thread | write your own worker entry file |
 | A page or region rebuilds although nothing visibly changed | a write assigned the same value again (common in routers and sync code) | write only changed values, or read through gate() |
 | A watcher or scope over JSON.stringify/Snapshot never fires | snapshot reads register no dependencies | read properties directly, or JSON.stringify(ObservableNode.Clone(node)) |
+| `Emitter.Emit: re-entry during emit is not supported` | a `Watch`/`OnUpdated` callback updates the scope or value that is notifying it | defer the write, or move it out of the callback |
+| `scope() must be called within a watch context` inside `peek()` | tracking is off inside `peek` | call `scope()`/`gate()` outside the `peek` callback |
 
 ## Corrections from the v5 primer
 

package/Store/Tree/observableScope.d.ts

@@ -92,26 +92,24 @@ export declare function MappedScope<D, T>(data: D, callback: (data: D) => T | Pr
  */
 export declare function GateScope<T>(callback: () => T | Promise<T>, idOverride?: string): T;
 /**
- * Creates a computed scope that isn't registered as a dependency with the parent.
+ * Invokes a callback with dependency tracking suspended.
  * Use this function to read reactive data without subscribing to changes
  * to that data.
  *
- * Unlike GateScope, PeekScope does not register itself as a dependency, meaning
- * changes to the data accessed within the callback will not trigger recomputation
- * of the parent scope. The scope is still memoized by ID within the watch context
- * to avoid redundant computation during the same evaluation.
+ * No scope is created: the callback runs immediately on every call and nothing
+ * is memoized. Reactive values read inside the callback are not registered with
+ * the current watch context, so changes to them will not trigger recomputation
+ * of the parent scope. The previous watch context is restored afterwards, even
+ * if the callback throws.
  *
- * Supports async callbacks — Promise<T> is resolved and the resolved value is returned.
- *
- * Only works within a watch context (during another scope's execution).
- * Throws if called outside a watch context.
- * @template T The type of value returned by the callback (extracted from Promise if async).
- * @param callback The function to compute the derived value.
- * @param idOverride Optional custom ID for memoization when using multiple peek calls.
- * @returns The computed value, reusing existing scope if available.
- * @throws Error if called outside a watch context.
+ * Can be called anywhere, inside or outside a watch context. Because tracking is
+ * suspended, InlineScope, GateScope and MappedScope throw if called from within
+ * the callback. Async callbacks are not awaited; the Promise is returned as-is.
+ * @template T The type of value returned by the callback.
+ * @param callback The function to invoke without dependency tracking.
+ * @returns The value returned by the callback.
  */
-export declare function PeekScope<T>(callback: () => T | Promise<T>, idOverride?: string): T;
+export declare function PeekCallback<T>(callback: () => T): T;
 export declare namespace ObservableScope {
     /**
      * Creates a new observable scope from a value function.
@@ -178,6 +176,8 @@ export declare namespace ObservableScope {
     /**
      * Subscribes to changes on a dynamic scope.
      * @template T The type of value stored in the scope.
+     * The callback must not cause the same scope to emit again (for example by calling
+     * `Update(scope)`): re-entrant emits throw.
      * @param scope The scope to watch for changes.
      * @param callback Function to invoke when the scope's value changes.
      */

package/Store/Tree/observableScope.js

@@ -268,11 +268,7 @@ function ExecuteScope(scope) {
     }
 }
 function ExecuteBasicScope(scope) {
-    const parent = watchState;
-    watchState = null;
-    const result = scope.getFunction();
-    watchState = parent;
-    return result;
+    return PeekCallback(scope.getFunction);
 }
 /**
  * Creates a scope from a function, choosing between static and dynamic based on dependencies.
@@ -355,7 +351,6 @@ function MappedScopeHelper(callback, data, onUpdated, onDestroyed) {
 }
 const SCOPE_DEFAULT = Symbol("SCOPE_DEFAULT");
 const GATE_DEFAULT = Symbol("GATE_DEFAULT");
-const PEEK_DEFAULT = Symbol("PEEK_DEFAULT");
 /**
  * Creates an inline computed scope registered as a dependency of the parent.
  * The scope is memoized by ID and reused across reads within the same parent evaluation.
@@ -417,32 +412,32 @@ export function GateScope(callback, idOverride) {
     return GetScopeValue(scope);
 }
 /**
- * Creates a computed scope that isn't registered as a dependency with the parent.
+ * Invokes a callback with dependency tracking suspended.
  * Use this function to read reactive data without subscribing to changes
  * to that data.
  *
- * Unlike GateScope, PeekScope does not register itself as a dependency, meaning
- * changes to the data accessed within the callback will not trigger recomputation
- * of the parent scope. The scope is still memoized by ID within the watch context
- * to avoid redundant computation during the same evaluation.
+ * No scope is created: the callback runs immediately on every call and nothing
+ * is memoized. Reactive values read inside the callback are not registered with
+ * the current watch context, so changes to them will not trigger recomputation
+ * of the parent scope. The previous watch context is restored afterwards, even
+ * if the callback throws.
  *
- * Supports async callbacks — Promise<T> is resolved and the resolved value is returned.
- *
- * Only works within a watch context (during another scope's execution).
- * Throws if called outside a watch context.
- * @template T The type of value returned by the callback (extracted from Promise if async).
- * @param callback The function to compute the derived value.
- * @param idOverride Optional custom ID for memoization when using multiple peek calls.
- * @returns The computed value, reusing existing scope if available.
- * @throws Error if called outside a watch context.
+ * Can be called anywhere, inside or outside a watch context. Because tracking is
+ * suspended, InlineScope, GateScope and MappedScope throw if called from within
+ * the callback. Async callbacks are not awaited; the Promise is returned as-is.
+ * @template T The type of value returned by the callback.
+ * @param callback The function to invoke without dependency tracking.
+ * @returns The value returned by the callback.
  */
-export function PeekScope(callback, idOverride) {
-    if (watchState === null) {
-        throw new Error("peek() must be called within a watch context");
+export function PeekCallback(callback) {
+    const parent = watchState;
+    watchState = null;
+    try {
+        return callback();
+    }
+    finally {
+        watchState = parent;
     }
-    const id = idOverride ?? PEEK_DEFAULT;
-    const scope = ScopeHelper(callback, id, false);
-    return GetScopeValue(scope);
 }
 /**
  * Updates a scope's dependency emitters using efficient diffing.
@@ -621,6 +616,8 @@ export var ObservableScope;
     /**
      * Subscribes to changes on a dynamic scope.
      * @template T The type of value stored in the scope.
+     * The callback must not cause the same scope to emit again (for example by calling
+     * `Update(scope)`): re-entrant emits throw.
      * @param scope The scope to watch for changes.
      * @param callback Function to invoke when the scope's value changes.
      */

package/Utils/decorators.d.ts

@@ -39,13 +39,13 @@
  * | Aspect | @Computed | @Scope |
  * |--------|-----------|--------|
  * | Caching | ✅ Yes | ✅ Yes |
- * | Object identity preserved | ✅ Yes (ApplyDiff) | ❌ No (new object) |
+ * | Object identity preserved | ✅ Yes (Apply) | ❌ No (new object) |
  * | Overhead | Store + diff | Single scope |
  * | Best for | Complex objects | Primitives/simple values |
  *
  * Object Identity (Key Difference):
  * ---------------------------------
- * @Computed: Same object reference, in-place updates via ObservableNode.ApplyDiff
+ * @Computed: Same object reference, in-place updates via ObservableNode.Apply
  * @Scope: New object reference on every update
  *
  * Example:
@@ -104,13 +104,16 @@ import { Injector } from "./injector";
  * @remarks
  * The @Computed decorator uses a Gated getter scope driving a persistent observable node:
  * 1. Getter scope (Gated): Re-evaluates the getter when dependencies change, batched via
- *    the microtask queue. If the result deep-equals the previous value, no update is emitted.
+ *    the microtask queue, and returns a clone of the result. A watcher on this scope
+ *    applies each new clone to the node.
  * 2. ObservableNode.Apply: Diffs the fresh value against the node's current root and applies
- *    only the changed paths in-place, preserving the node's object identity.
- * 3. Downstream notification: Per-property scopes are fired for each changed path, so scopes
- *    reading sub-properties update directly. If the diff collapses to a full root replacement
- *    (type change or removed keys), the root value gets a new identity and the Gated scope
- *    emits, notifying top-level subscribers.
+ *    only the changed paths in-place, preserving the node's object identity. If the result
+ *    deep-equals the previous value, nothing is changed and nothing is emitted.
+ * 3. Downstream notification: Per-property emitters fire for each changed path, so scopes
+ *    reading sub-properties update directly. The property itself is backed by a separate
+ *    scope that reads the node's root; it emits, notifying top-level subscribers, only when
+ *    the diff collapses to a full root replacement (type change or removed keys) and the
+ *    root value gets a new identity.
  *
  * **Initialization**: @Computed uses lazy initialization - the scopes are created on first access:
  * ```typescript
@@ -127,7 +130,7 @@ import { Injector } from "./injector";
  * dependencies change. The key difference is what happens during re-evaluation:
  *
  * **Key benefit - Object Reuse**: The returned object maintains its identity across updates.
- * Only the changed properties are modified in-place using ObservableNode.ApplyDiff. This enables:
+ * Only the changed properties are modified in-place using ObservableNode.Apply. This enables:
  * - DOM reference preservation (no unnecessary re-renders)
  * - Existing proxy reuse (no proxy recreation overhead)
  * - Identity checks (===) remain stable across updates
@@ -156,7 +159,7 @@ import { Injector } from "./injector";
  * @see {@link Scope} for simple getter-based reactive properties (caches but new reference)
  * @see {@link ComputedAsync} for async computed properties
  * @see {@link ObservableNode.Apply} for how diffs are applied in-place to maintain object identity
- * @see {@link ObservableScope} for the Gated scope mechanism (batched, ===-gated updates)
+ * @see {@link ObservableScope} for the Gated scope mechanism (batched updates)
  * @see {@link StoreSync} for the store-backed variant used by @ComputedAsync
  */
 export declare function Computed<T extends WeakKey, K extends keyof T, D extends T[K]>(): (target: T, propertyKey: K, descriptor: PropertyDescriptor) => PropertyDescriptor;
@@ -488,7 +491,7 @@ export declare function Value(): any;
  *
  * @see {@link Computed} for cached computed properties with object reuse
  * @see {@link ComputedAsync} for sync getters with StoreAsync backend
- * @see {@link ObservableNode.ApplyDiff} for how @Computed maintains object identity
+ * @see {@link ObservableNode.Apply} for how @Computed maintains object identity
  * @see {@link ObservableScope} for the scope-based reactivity system
  * @see {@link scope} for inline computed scopes within @Scope
  */

package/Utils/decorators.js

@@ -39,13 +39,13 @@
  * | Aspect | @Computed | @Scope |
  * |--------|-----------|--------|
  * | Caching | ✅ Yes | ✅ Yes |
- * | Object identity preserved | ✅ Yes (ApplyDiff) | ❌ No (new object) |
+ * | Object identity preserved | ✅ Yes (Apply) | ❌ No (new object) |
  * | Overhead | Store + diff | Single scope |
  * | Best for | Complex objects | Primitives/simple values |
  *
  * Object Identity (Key Difference):
  * ---------------------------------
- * @Computed: Same object reference, in-place updates via ObservableNode.ApplyDiff
+ * @Computed: Same object reference, in-place updates via ObservableNode.Apply
  * @Scope: New object reference on every update
  *
  * Example:
@@ -56,7 +56,7 @@
  * console.log(list === list2);    // @Computed: true, @Scope: false
  * ```
  */
-import { ObservableScope, } from "../Store/Tree/observableScope";
+import { ObservableScope, PeekCallback, } from "../Store/Tree/observableScope";
 import { ObservableNode } from "../Store/Tree/observableNode";
 import { StoreAsync } from "../Store";
 /**
@@ -144,29 +144,43 @@ function CreateStoreScope(getter, store, defaultValue) {
     return propertyScope;
 }
 /**
- * Creates a Gated observable scope that exposes a getter's value through a persistent
+ * Creates an observable scope that exposes a getter's value through a persistent
  * observable node, preserving the value's object identity across updates.
  *
- * On each re-evaluation the getter's value is cloned and merged into the node in-place
- * via ObservableNode.Apply:
+ * The getter runs in a Gated scope that returns a clone of its value. A watcher on that
+ * scope merges each new clone into the node in-place via ObservableNode.Apply, with
+ * dependency tracking suspended. The returned scope reads the node's root:
  * - Content changes (same structure, changed properties) fire only the affected
- *   per-property scopes - the top-level scope does not emit.
+ *   per-property emitters - the returned scope does not emit.
  * - Structural changes (type change or removed keys) replace the root value with a new
- *   identity, which the Gated scope detects and emits for.
- * - Deep-equal results are suppressed entirely by the Gated ===-gating.
+ *   identity; the root's emitter fires and the returned scope emits.
+ * - Deep-equal results change nothing in the node, so nothing downstream is notified.
+ *
+ * Destroying the returned scope also destroys the Gated getter scope.
  *
  * @param getter Function computing the value. May read reactive dependencies.
- * @returns The Gated scope whose value is the observable root node.
+ * @returns A scope whose value is the observable node's root.
  */
 function CreateNodeScope(getter) {
-    const observableNode = ObservableNode.Create({ root: null });
     const getterScope = ObservableScope.Gated(function () {
         const value = getter();
         const clonedValue = ObservableNode.Clone(value);
-        ObservableNode.Apply(observableNode, { root: clonedValue });
+        return clonedValue;
+    });
+    const observableNode = ObservableNode.Create({ root: ObservableScope.Peek(getterScope) });
+    ObservableScope.Watch(getterScope, function (scope) {
+        PeekCallback(function () {
+            const value = ObservableScope.Peek(scope);
+            ObservableNode.Apply(observableNode, { root: value });
+        });
+    });
+    const nodeScope = ObservableScope.Create(function () {
         return observableNode.root;
     });
-    return getterScope;
+    ObservableScope.OnDestroyed(nodeScope, function () {
+        ObservableScope.Destroy(getterScope);
+    });
+    return nodeScope;
 }
 /**
  * Computed decorator factory for creating synchronous computed properties with caching and object reuse.
@@ -214,13 +228,16 @@ function CreateNodeScope(getter) {
  * @remarks
  * The @Computed decorator uses a Gated getter scope driving a persistent observable node:
  * 1. Getter scope (Gated): Re-evaluates the getter when dependencies change, batched via
- *    the microtask queue. If the result deep-equals the previous value, no update is emitted.
+ *    the microtask queue, and returns a clone of the result. A watcher on this scope
+ *    applies each new clone to the node.
  * 2. ObservableNode.Apply: Diffs the fresh value against the node's current root and applies
- *    only the changed paths in-place, preserving the node's object identity.
- * 3. Downstream notification: Per-property scopes are fired for each changed path, so scopes
- *    reading sub-properties update directly. If the diff collapses to a full root replacement
- *    (type change or removed keys), the root value gets a new identity and the Gated scope
- *    emits, notifying top-level subscribers.
+ *    only the changed paths in-place, preserving the node's object identity. If the result
+ *    deep-equals the previous value, nothing is changed and nothing is emitted.
+ * 3. Downstream notification: Per-property emitters fire for each changed path, so scopes
+ *    reading sub-properties update directly. The property itself is backed by a separate
+ *    scope that reads the node's root; it emits, notifying top-level subscribers, only when
+ *    the diff collapses to a full root replacement (type change or removed keys) and the
+ *    root value gets a new identity.
  *
  * **Initialization**: @Computed uses lazy initialization - the scopes are created on first access:
  * ```typescript
@@ -237,7 +254,7 @@ function CreateNodeScope(getter) {
  * dependencies change. The key difference is what happens during re-evaluation:
  *
  * **Key benefit - Object Reuse**: The returned object maintains its identity across updates.
- * Only the changed properties are modified in-place using ObservableNode.ApplyDiff. This enables:
+ * Only the changed properties are modified in-place using ObservableNode.Apply. This enables:
  * - DOM reference preservation (no unnecessary re-renders)
  * - Existing proxy reuse (no proxy recreation overhead)
  * - Identity checks (===) remain stable across updates
@@ -266,7 +283,7 @@ function CreateNodeScope(getter) {
  * @see {@link Scope} for simple getter-based reactive properties (caches but new reference)
  * @see {@link ComputedAsync} for async computed properties
  * @see {@link ObservableNode.Apply} for how diffs are applied in-place to maintain object identity
- * @see {@link ObservableScope} for the Gated scope mechanism (batched, ===-gated updates)
+ * @see {@link ObservableScope} for the Gated scope mechanism (batched updates)
  * @see {@link StoreSync} for the store-backed variant used by @ComputedAsync
  */
 export function Computed() {
@@ -733,7 +750,7 @@ function ValueDecorator(target, propertyKey) {
  *
  * @see {@link Computed} for cached computed properties with object reuse
  * @see {@link ComputedAsync} for sync getters with StoreAsync backend
- * @see {@link ObservableNode.ApplyDiff} for how @Computed maintains object identity
+ * @see {@link ObservableNode.Apply} for how @Computed maintains object identity
  * @see {@link ObservableScope} for the scope-based reactivity system
  * @see {@link scope} for inline computed scopes within @Scope
  */

package/Utils/emitter.d.ts

@@ -1,5 +1,5 @@
 export type EmitterCallback<T extends readonly any[] = any[]> = (...args: T) => void;
-export type Emitter = [number, ...EmitterCallback[]];
+export type Emitter = [[number, number], ...EmitterCallback[]];
 export declare namespace Emitter {
     function Create(): Emitter;
     function On(emitter: Emitter, callback: EmitterCallback): void;

package/Utils/emitter.js

@@ -1,8 +1,7 @@
-import { RemoveNulls } from "./array";
 import { _requestIdleCallback } from "./scheduling";
 const pendingCompactEmitters = new Set();
 function Compact(emitter) {
-    if (emitter.length === 1 || emitter[0] === 0)
+    if (emitter.length === 1 || emitter[0][0] === 0)
         return;
     pendingCompactEmitters.add(emitter);
     ScheduleCompact();
@@ -22,57 +21,63 @@ function PerformCompact() {
         CompactEmitter(compactEmitters[x]);
 }
 function CompactEmitter(emitter) {
-    if (emitter[0] === 0)
+    if (emitter[0][0] === 0)
         return;
-    emitter.splice(1, emitter[0]);
-    emitter[0] = 0;
+    emitter.splice(1, emitter[0][0]);
+    emitter[0][0] = 0;
 }
 export var Emitter;
 (function (Emitter) {
     function Create() {
-        return [0];
+        return [[0, -1]];
     }
     Emitter.Create = Create;
     function On(emitter, callback) {
         emitter.push(callback);
     }
     Emitter.On = On;
-    const emitterStack = [];
-    const modifiedDuringEmit = new Set();
+    // Re-entry during emit is not supported and considered a bug in client code
     function Emit(emitter, ...args) {
-        emitterStack.push(emitter);
-        for (let x = emitter[0] + 1; x < emitter.length; x++)
-            emitter[x]?.(...args);
-        emitterStack.pop();
-        if (modifiedDuringEmit.delete(emitter)) {
-            RemoveNulls(emitter);
-            emitter[0] = 0;
+        if (emitter[0][1] !== -1)
+            throw new Error("Emitter.Emit: re-entry during emit is not supported");
+        try {
+            for (let x = emitter[0][1] = emitter[0][0] + 1; x < emitter.length; emitter[0][1] = ++x) {
+                emitter[x](...args);
+            }
         }
+        finally {
+            emitter[0][1] = -1;
+        }
+        if (emitter[0][0] !== 0)
+            Compact(emitter);
     }
     Emitter.Emit = Emit;
+    function RemoveFromEnd(emitter, index) {
+        emitter[index] = emitter[emitter.length - 1];
+        emitter.pop();
+    }
+    function RemoveFromBeginning(emitter, index) {
+        const tombstoneSize = emitter[0][0];
+        emitter[index] = emitter[tombstoneSize + 1];
+        emitter[tombstoneSize + 1] = null;
+        emitter[0][0]++;
+    }
     function Remove(emitter, callback) {
         if (emitter.length === 1)
             return;
-        const startIndex = emitter[0] + 1;
+        const startIndex = emitter[0][0] + 1;
         const index = emitter.indexOf(callback, startIndex);
         if (index < 1)
             return;
-        const emitterStackIndex = emitterStack.indexOf(emitter);
-        if (emitterStackIndex < 0) {
-            emitter[0]++;
-            emitter[index] = emitter[startIndex];
-            emitter[startIndex] = null;
-            Compact(emitter);
-        }
-        else {
-            emitter[index] = null;
-            modifiedDuringEmit.add(emitter);
-        }
+        if (index <= emitter[0][1])
+            RemoveFromBeginning(emitter, index);
+        else
+            RemoveFromEnd(emitter, index);
     }
     Emitter.Remove = Remove;
     function Clear(emitter) {
         emitter.length > 1 && emitter.splice(1);
-        emitter[0] = 0;
+        emitter[0][0] = 0;
     }
     Emitter.Clear = Clear;
 })(Emitter || (Emitter = {}));

package/index.d.ts

@@ -1,3 +1,3 @@
 export { Component } from './Node/component';
-export { InlineScope as scope, GateScope as gate, PeekScope as peek, MappedScope as mapped } from './Store/Tree/observableScope';
+export { InlineScope as scope, GateScope as gate, PeekCallback as peek, MappedScope as mapped } from './Store/Tree/observableScope';
 export { vNode } from './Node/vNode.types';

package/index.js

@@ -1,2 +1,2 @@
 export { Component } from './Node/component';
-export { InlineScope as scope, GateScope as gate, PeekScope as peek, MappedScope as mapped } from './Store/Tree/observableScope';
+export { InlineScope as scope, GateScope as gate, PeekCallback as peek, MappedScope as mapped } from './Store/Tree/observableScope';

package/package.json

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