@mintjamsinc/ichigojs 0.1.88 → 0.1.90

package/dist/ichigo.esm.js

@@ -6807,6 +6807,13 @@ class ReactiveProxy {
      * through a reactive proxy. Nested calls record into the innermost set only;
      * the previous set is restored when fn returns or throws.
      *
+     * The set is kept closed under ancestors: whenever a path is recorded, every
+     * path above it ("items" and "items[2]" for "items[2].name") is in the set as
+     * well. A read reached through a proxy records them on its way down; a read
+     * that starts partway (a proxy a computed returned, a v-for item) has them
+     * added when it is recorded. changeAffectsRead relies on this to answer with
+     * one lookup.
+     *
      * @param paths The set that receives the paths read.
      * @param fn The function to run.
      * @returns The value fn returns.
@@ -6821,6 +6828,57 @@ class ReactiveProxy {
             this.tracker = previous;
         }
     }
+    /**
+     * Records a read made outside any proxy while track() runs: a binding read by
+     * name (`this.flag`, `this[key]`), which the bindings report here. Reads below
+     * a binding are recorded by the proxy itself.
+     *
+     * @param path The binding name read.
+     */
+    static recordRead(path) {
+        this.tracker?.add(path);
+    }
+    /**
+     * Records a read made through a proxy while track() runs: the member `key` of
+     * the object at `containerPath`. The container's own path and its ancestors are
+     * added first when they are missing, which happens when the proxy was not
+     * reached from a root binding during this run (see track()). A container that
+     * is already recorded has its ancestors recorded too, so the common case is one
+     * lookup.
+     *
+     * @param containerPath The source path of the object read from ("" for a root).
+     * @param key The property key read.
+     */
+    static recordProxyRead(containerPath, key) {
+        const tracker = this.tracker;
+        if (containerPath && !tracker.has(containerPath)) {
+            for (let i = 1; i < containerPath.length; i++) {
+                const c = containerPath[i];
+                if (c === '.' || c === '[') {
+                    tracker.add(containerPath.substring(0, i));
+                }
+            }
+            tracker.add(containerPath);
+        }
+        tracker.add(this.joinPath(containerPath, key));
+    }
+    /**
+     * Checks whether a change touches something read during a tracked run (see
+     * track()): the path read was written, or an object or array holding it was
+     * replaced. A change below a path read does not count, since a read of the
+     * changed member itself would have been recorded too; this keeps a read of a
+     * whole collection ("items") from matching a write to one element.
+     *
+     * The set holds the ancestors of every path read, so a replaced container is
+     * found by the same lookup as the path itself.
+     *
+     * @param changePath The path that was changed (e.g., "items[2].name")
+     * @param readPaths The paths read during the tracked run
+     * @returns True if the change touches a path read
+     */
+    static changeAffectsRead(changePath, readPaths) {
+        return readPaths.has(changePath);
+    }
     /**
      * The `Object.prototype.toString` tags of the *only* value types we deeply
      * proxy. Everything else is returned untouched (raw).
@@ -6912,7 +6970,7 @@ class ReactiveProxy {
                 // Function-valued members (push, Map#get, …) are accesses to behaviour,
                 // not data, so they are left out.
                 if (ReactiveProxy.tracker && typeof key !== 'symbol' && typeof value !== 'function') {
-                    ReactiveProxy.tracker.add(ReactiveProxy.joinPath(path, key));
+                    ReactiveProxy.recordProxyRead(path, key);
                 }
                 // If the value is an object or array, make it reactive too
                 if (typeof value === 'object' && value !== null) {
@@ -7331,6 +7389,18 @@ class ExpressionUtils {
         });
         return Array.from(identifiers);
     }
+    /**
+     * Whether an expression refers to one of the application's methods, judged by the
+     * identifiers extractIdentifiers returned for it. A called method may read bindings
+     * the source analysis cannot name (e.g. `this[key]`), so such an expression records
+     * its reads when it runs.
+     * @param identifiers The identifiers extracted from the expression.
+     * @param functionDependencies The application's methods and their dependencies.
+     * @returns True if an identifier names a method.
+     */
+    static callsFunction(identifiers, functionDependencies) {
+        return identifiers.some(id => Object.prototype.hasOwnProperty.call(functionDependencies, id));
+    }
     /**
      * Returns the binding name an identifier chain starts with
      * (e.g. "items" for "items[0].name" or "user.name").
@@ -7729,26 +7799,27 @@ class ExpressionEvaluator {
      */
     additionalContext;
     /**
-     * Whether any identifier has an index known only at run time ("items[*].name").
-     * Only then are the paths read during evaluation worth recording.
+     * Whether the paths read during evaluation are recorded: when an identifier has an
+     * index known only at run time ("items[*].name"), or when the expression calls a
+     * method, whose reads (`this[key]` among them) the source analysis may not see.
      */
-    hasDynamicIndex;
+    tracksReads;
     /**
-     * The source paths read through reactive proxies during the last evaluation,
-     * or undefined before the first evaluation and when nothing is recorded.
+     * The source paths read during the last evaluation, or undefined before the
+     * first evaluation and when nothing is recorded.
      */
     trackedPathSet;
     /**
      * Private constructor. Use ExpressionEvaluator.create() to create instances.
      */
-    constructor(expression, bindings, identifiers, originalIdentifiers, evaluatorFunc, additionalContext) {
+    constructor(expression, bindings, identifiers, originalIdentifiers, evaluatorFunc, callsMethod, additionalContext) {
         this.expression = expression;
         this.bindings = bindings;
         this.identifiers = identifiers;
         this.originalIdentifiers = originalIdentifiers;
         this.evaluatorFunc = evaluatorFunc;
         this.additionalContext = additionalContext;
-        this.hasDynamicIndex = originalIdentifiers.some(id => id.includes('[*]'));
+        this.tracksReads = callsMethod || originalIdentifiers.some(id => id.includes('[*]'));
     }
     /**
      * Creates an ExpressionEvaluator instance.
@@ -7790,7 +7861,7 @@ class ExpressionEvaluator {
             // Cache the compiled function
             this.cache.set(cacheKey, evaluatorFunc);
         }
-        return new ExpressionEvaluator(expression, bindings, baseIdentifiers, extractedIdentifiers, evaluatorFunc, options?.additionalContext);
+        return new ExpressionEvaluator(expression, bindings, baseIdentifiers, extractedIdentifiers, evaluatorFunc, ExpressionUtils.callsFunction(extractedIdentifiers, functionDependencies), options?.additionalContext);
     }
     /**
      * Compiles an expression into a function.
@@ -7845,9 +7916,11 @@ class ExpressionEvaluator {
                 values.push(...Object.values(this.additionalContext));
             }
             // Call the compiled function with the gathered values. When an index is
-            // known only at run time, record which concrete paths this evaluation
-            // read so that change matching can be narrowed to them (see trackedPaths).
-            if (!this.hasDynamicIndex) {
+            // known only at run time or a method is called, record which concrete
+            // paths this evaluation read (see trackedPaths). The values above are
+            // gathered outside the tracked call on purpose: a binding passed in by
+            // name is already among the identifiers.
+            if (!this.tracksReads) {
                 return this.evaluatorFunc(...values);
             }
             const paths = new Set();
@@ -7862,11 +7935,11 @@ class ExpressionEvaluator {
         }
     }
     /**
-     * The source paths read through reactive proxies during the last evaluation,
-     * recorded only for an expression with a run-time index ("items[i].name").
+     * The source paths read during the last evaluation, recorded only for an
+     * expression with a run-time index ("items[i].name") or a method call.
      * Each evaluation replaces the previous set, so a path read for a former
      * index value is dropped as soon as the expression runs with the new one.
-     * Undefined before the first evaluation and for expressions without such an index.
+     * Undefined before the first evaluation and for other expressions.
      */
     get trackedPaths() {
         return this.trackedPathSet;
@@ -8658,7 +8731,14 @@ class VBindings {
                     this.#resolveComputedIfDirty(key);
                 }
                 if (Reflect.has(obj, key)) {
-                    return Reflect.get(obj, key);
+                    const value = Reflect.get(obj, key);
+                    // Record the read for a computed property or expression being tracked
+                    // (see ReactiveProxy.track). Methods are behaviour, not data; a binding of a
+                    // parent scope is recorded by the parent's own trap.
+                    if (typeof key === 'string' && typeof value !== 'function') {
+                        ReactiveProxy.recordRead(key);
+                    }
+                    return value;
                 }
                 return this.#parent?.raw[key];
             },
@@ -9003,6 +9083,13 @@ class VBindings {
     markComputedDirty(key) {
         this.#dirtyComputeds.add(key);
     }
+    /**
+     * Indicates whether a computed property is marked dirty and not yet recomputed.
+     * @param key The computed property name.
+     */
+    isComputedDirty(key) {
+        return this.#dirtyComputeds.has(key);
+    }
     /**
      * Reads the currently cached value of a computed property without triggering pull-based
      * re-evaluation. Used by the recompute routine to obtain the previous value for change
@@ -9122,10 +9209,14 @@ class VBindings {
      * path fits the identifier (not evaluated yet, a raw object, a short-circuited read),
      * the identifier keeps matching every index.
      *
+     * The recorded paths also count as dependencies of their own: they include what a
+     * method called by the expression read, such as `this[key]`, which the identifiers
+     * found in the source cannot name.
+     *
      * @param changes The change paths of the current update cycle.
      * @param identifiers The identifiers the expression depends on.
      * @param trackedPaths The paths read during the expression's last evaluation, if recorded.
-     * @returns True if some change matches some identifier.
+     * @returns True if some change matches some identifier or recorded path.
      */
     isAffected(changes, identifiers, trackedPaths) {
         if (changes.length === 0) {
@@ -9139,6 +9230,9 @@ class VBindings {
                 }
             }
         }
+        if (trackedPaths && trackedPaths.size > 0) {
+            return changes.some(change => ReactiveProxy.changeAffectsRead(change, trackedPaths));
+        }
         return false;
     }
     /**
@@ -10205,8 +10299,8 @@ class VTextEvaluator {
      */
     #evaluate;
     /**
-     * The source paths read through reactive proxies during the last evaluation,
-     * recorded only when some expression has a run-time index ("items[i].name").
+     * The source paths read during the last evaluation, recorded only when some
+     * expression has a run-time index ("items[i].name") or calls a method.
      */
     #trackedPaths;
     /**
@@ -10249,10 +10343,15 @@ class VTextEvaluator {
                 func: new Function(args, funcBody)
             };
         });
-        // Only an expression with an index known at run time needs its reads recorded
-        const hasDynamicIndex = this.#identifiers.some(id => id.includes('[*]'));
-        // Create a function to reconstruct the text with evaluated expressions
-        const evaluateText = (bindings) => {
+        // Only an expression with an index known at run time, or one that calls a method
+        // (whose reads, such as `this[key]`, the source analysis may not see), needs its
+        // reads recorded
+        const tracksReads = this.#identifiers.some(id => id.includes('[*]')) ||
+            ExpressionUtils.callsFunction(this.#identifiers, functionDependencies);
+        // Create a function to reconstruct the text with evaluated expressions. The values
+        // are gathered outside the tracked call: a binding passed in by name is already
+        // among the identifiers.
+        const evaluateText = (bindings, paths) => {
             let result = text;
             evaluators.forEach((evaluator, i) => {
                 // Build values for baseArgs (no dots) in the same order as function parameters
@@ -10266,15 +10365,16 @@ class VTextEvaluator {
                 });
                 // Evaluate the expression and replace {{...}} in the text.
                 // A function replacement keeps `$`-patterns in the value literal.
-                result = result.replace(matches[i][0], () => toDisplayString(evaluator.func(...values)));
+                const value = paths ? ReactiveProxy.track(paths, () => evaluator.func(...values)) : evaluator.func(...values);
+                result = result.replace(matches[i][0], () => toDisplayString(value));
             });
             return result;
         };
-        this.#evaluate = hasDynamicIndex
+        this.#evaluate = tracksReads
             ? (bindings) => {
                 const paths = new Set();
                 this.#trackedPaths = undefined;
-                const result = ReactiveProxy.track(paths, () => evaluateText(bindings));
+                const result = evaluateText(bindings, paths);
                 this.#trackedPaths = paths;
                 return result;
             }
@@ -10296,9 +10396,9 @@ class VTextEvaluator {
         return this.#identifiers;
     }
     /**
-     * The source paths read through reactive proxies during the last evaluation.
-     * Recorded only when an expression has a run-time index ("items[i].name");
-     * undefined before the first evaluation and for texts without such an index.
+     * The source paths read during the last evaluation. Recorded only when an
+     * expression has a run-time index ("items[i].name") or calls a method;
+     * undefined before the first evaluation and for other texts.
      */
     get trackedPaths() {
         return this.#trackedPaths;
@@ -10719,6 +10819,29 @@ class VNode {
         this.#dependentIdentifiers = [...new Set(ids)];
         return this.#dependentIdentifiers;
     }
+    /**
+     * Whether a change of the current update cycle concerns this node, so that a node it
+     * depends on should update it: a change matches one of its identifiers, or touches a
+     * path one of its bindings read the last time it ran. The recorded reads cover what a
+     * called method read, such as `this[key]`, which the identifiers cannot name. Each
+     * binding decides again for itself when the node updates.
+     * @param changes The change paths of the current update cycle.
+     */
+    isAffectedBy(changes) {
+        if (changes.length === 0) {
+            return false;
+        }
+        if (this.dependentIdentifiers.some(id => changes.some(change => this.bindings.doesChangeMatchIdentifier(change, id)))) {
+            return true;
+        }
+        const recorded = [
+            this.#textEvaluator?.trackedPaths,
+            ...(this.#directiveManager?.bindingsPreparers ?? []).map(preparer => preparer.trackedPaths),
+            ...(this.#directiveManager?.domUpdaters ?? []).map(updater => updater.trackedPaths),
+        ];
+        return recorded.some(paths => paths !== undefined && paths.size > 0 &&
+            changes.some(change => ReactiveProxy.changeAffectsRead(change, paths)));
+    }
     get preparableIdentifiers() {
         // If already computed, return the cached preparable identifiers
         if (this.#preparableIdentifiers) {
@@ -10795,8 +10918,7 @@ class VNode {
             const changed = this.bindings.isAffected(changes, this.#textEvaluator.identifiers, this.#textEvaluator.trackedPaths);
             // If the text node has changed, update its content
             if (changed) {
-                const text = this.#node;
-                text.data = this.#textEvaluator.evaluate(this.bindings);
+                this.#renderText();
             }
         }
         else if (this.#nodeType === Node.ELEMENT_NODE) {
@@ -10817,7 +10939,7 @@ class VNode {
                 for (const preparer of this.#directiveManager.bindingsPreparers) {
                     const changed = this.bindings.isAffected(changes, preparer.dependentIdentifiers, preparer.trackedPaths);
                     if (changed) {
-                        preparer.prepareBindings();
+                        this.#renderSafely(() => preparer.prepareBindings());
                     }
                 }
             }
@@ -10826,14 +10948,13 @@ class VNode {
                 for (const updater of this.#directiveManager.domUpdaters) {
                     const changed = this.bindings.isAffected(changes, updater.dependentIdentifiers, updater.trackedPaths);
                     if (changed) {
-                        updater.applyToDOM();
+                        this.#renderSafely(() => updater.applyToDOM());
                     }
                 }
             }
             // Recursively update dependent virtual nodes
             this.#dependents?.forEach(dependentNode => {
-                const changed = dependentNode.dependentIdentifiers.some(id => changes.some(change => dependentNode.bindings.doesChangeMatchIdentifier(change, id)));
-                if (changed) {
+                if (dependentNode.isAffectedBy(changes)) {
                     dependentNode.update();
                 }
             });
@@ -10848,8 +10969,7 @@ class VNode {
             // For document fragments (e.g. from <template v-if>), propagate updates
             // to dependent virtual nodes so that child bindings stay reactive.
             this.#dependents?.forEach(dependentNode => {
-                const changed = dependentNode.dependentIdentifiers.some(id => changes.some(change => dependentNode.bindings.doesChangeMatchIdentifier(change, id)));
-                if (changed) {
+                if (dependentNode.isAffectedBy(changes)) {
                     dependentNode.update();
                 }
             });
@@ -10862,10 +10982,58 @@ class VNode {
      * This is useful when an immediate update is needed, bypassing the usual change detection.
      */
     forceUpdate() {
+        // One pass per outermost call; a call made while a pass runs (a directive rendering
+        // a fresh clone, a component mounting) joins it. The node is stamped with the pass,
+        // so that the recursion over the children below skips a child a directive has
+        // already rendered in this pass (see #forceChildren).
+        const outermost = VNode.#forcePass === 0;
+        if (outermost) {
+            VNode.#forcePass = ++VNode.#forcePassCounter;
+        }
+        this.#forcedInPass = VNode.#forcePass;
+        try {
+            this.#forceUpdate();
+        }
+        finally {
+            if (outermost) {
+                VNode.#forcePass = 0;
+            }
+        }
+    }
+    /**
+     * The pass counter behind {@link forceUpdate}: the last pass number handed out.
+     */
+    static #forcePassCounter = 0;
+    /**
+     * The pass that is running, or 0 between passes.
+     */
+    static #forcePass = 0;
+    /**
+     * The pass this node was last forced in, or 0 if never.
+     */
+    #forcedInPass = 0;
+    /**
+     * Forces the children that have not been forced in the running pass. A v-if / v-for /
+     * slot clone is a child of its host, and the host's directive renders it with its own
+     * forceUpdate() call as soon as it is created, so recursing into it here would render it a
+     * second time. A clone that already existed, and that the directive updated with
+     * update(), has not been forced in this pass and is still forced here.
+     */
+    #forceChildren() {
+        // A copy: an update can destroy a v-if / v-for clone, which removes it from this list.
+        this.#childVNodes?.slice().forEach(childVNode => {
+            if (childVNode.#forcedInPass !== VNode.#forcePass) {
+                childVNode.forceUpdate();
+            }
+        });
+    }
+    /**
+     * The body of {@link forceUpdate}, run within a pass.
+     */
+    #forceUpdate() {
         if (this.#nodeType === Node.TEXT_NODE && this.#textEvaluator) {
             // If this is a text node with a text evaluator, update its content if needed
-            const text = this.#node;
-            text.data = this.#textEvaluator.evaluate(this.bindings);
+            this.#renderText();
         }
         else if (this.#nodeType === Node.ELEMENT_NODE) {
             // If this is an element node, update directives and child nodes
@@ -10883,20 +11051,17 @@ class VNode {
                 }
                 // Prepare bindings for each preparer if relevant identifiers have changed
                 for (const preparer of this.#directiveManager.bindingsPreparers) {
-                    preparer.prepareBindings();
+                    this.#renderSafely(() => preparer.prepareBindings());
                 }
             }
             // Apply DOM updaters from directives, if any
             if (this.#directiveManager?.domUpdaters) {
                 for (const updater of this.#directiveManager.domUpdaters) {
-                    updater.applyToDOM();
+                    this.#renderSafely(() => updater.applyToDOM());
                 }
             }
-            // Recursively update child virtual nodes. A copy: an update can
-            // destroy a v-if / v-for clone, which removes it from this list.
-            this.#childVNodes?.slice().forEach(childVNode => {
-                childVNode.forceUpdate();
-            });
+            // Recursively update child virtual nodes
+            this.#forceChildren();
             // If no directive requires template preservation, call onUpdated for directives that do not templatize
             if (!this.#templatized) {
                 this.#directiveManager?.directives?.forEach(d => {
@@ -10906,10 +11071,40 @@ class VNode {
         }
         else if (this.#nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
             // For document fragments, recursively force update child VNodes
-            this.#childVNodes?.slice().forEach(childVNode => {
-                childVNode.forceUpdate();
-            });
+            this.#forceChildren();
+        }
+    }
+    /**
+     * Evaluates this text node's expressions into its content.
+     */
+    #renderText() {
+        const text = this.#node;
+        this.#renderSafely(() => {
+            text.data = this.#textEvaluator.evaluate(this.bindings);
+        });
+    }
+    /**
+     * Runs one binding's render step. A binding whose expression throws (for example one that
+     * reads a member of a value that is still undefined) is logged and left as it was, so that
+     * it does not stop the rest of the tree from rendering.
+     * @param render The render step.
+     */
+    #renderSafely(render) {
+        try {
+            render();
+        }
+        catch (error) {
+            this.#vApplication.logManager.getLogger(this.constructor.name).error(`Error rendering ${this.#describe()}: ${error}`);
+        }
+    }
+    /**
+     * Describes this node for a log message: a text node by its text, an element by its tag.
+     */
+    #describe() {
+        if (this.#nodeType === Node.TEXT_NODE) {
+            return `text "${(this.#node.textContent ?? '').trim()}"`;
         }
+        return `<${this.#nodeName.toLowerCase()}>`;
     }
     /**
      * Adds a child virtual node to this virtual node.
@@ -15447,6 +15642,13 @@ class VApplication {
      * A dictionary mapping computed property names to their dependencies.
      */
     #computedDependencies;
+    /**
+     * The paths each computed property read the last time it was evaluated (see
+     * ReactiveProxy.track). A change to one of them marks the computed dirty as well as
+     * a change to the dependencies found in its source, since a read the source does not
+     * spell out, such as `this[key]`, is seen only here.
+     */
+    #computedReads = new Map();
     /**
      * A map tracking source paths for computed property values.
      * Maps source path (e.g., "model.elements[0]") to computed property name (e.g., "selectedElement").
@@ -15637,8 +15839,11 @@ class VApplication {
             vApplication: this,
             bindings: this.#bindings
         });
-        // Initial rendering
-        this.#vNode.update();
+        // Initial rendering. Every binding is applied, not only those whose identifiers were
+        // recorded as changed while the data was set up: a value that starts undefined is never
+        // recorded (undefined -> undefined is no change), and an expression over globals only
+        // has no identifier to record at all.
+        this.#vNode.forceUpdate();
         // Expand the components in the tree. Last, so every component element
         // has been compiled and has had its prop values delivered before its
         // template is cloned in. See VNode.expandComponents.
@@ -16013,20 +16218,33 @@ class VApplication {
     }
     /**
      * Marks computed properties as dirty (pull-based invalidation) when a dependency changes.
-     * Uses the statically analyzed dependency graph; because computed→computed and computed→method
-     * dependencies are flattened to their underlying reactive paths during analysis, a single change
-     * marks every transitively dependent computed dirty in one pass. The actual recomputation is
-     * deferred until the value is read (see #recomputeOne).
+     * A computed depends on what its source names (statically analyzed, with computed→computed and
+     * computed→method dependencies flattened to their underlying reactive paths) and on what it read
+     * the last time it ran (#computedReads). A computed marked dirty is itself a change for the
+     * computeds that read it, so marking follows those reads too. A computed already dirty is
+     * skipped: the computeds that read it were marked when it was, and a computed cannot be
+     * recomputed without reading — and so resolving — the dirty ones it depends on. The actual
+     * recomputation is deferred until the value is read (see #recomputeOne).
      * @param identifier The changed identifier reported by the bindings change tracker.
      */
     #markDirtyComputeds(identifier) {
         if (!this.#options.computed || !this.#bindings) {
             return;
         }
-        for (const key of Object.keys(this.#computedDependencies)) {
-            const deps = this.#computedDependencies[key] || [];
-            if (deps.some(dep => this.#dependencyAffectedBy(dep, identifier))) {
-                this.#bindings.markComputedDirty(key);
+        const pending = [identifier];
+        while (pending.length > 0) {
+            const changed = pending.pop();
+            for (const key of Object.keys(this.#computedDependencies)) {
+                if (this.#bindings.isComputedDirty(key)) {
+                    continue;
+                }
+                const deps = this.#computedDependencies[key] || [];
+                const reads = this.#computedReads.get(key);
+                if (deps.some(dep => this.#dependencyAffectedBy(dep, changed)) ||
+                    (reads !== undefined && ReactiveProxy.changeAffectsRead(changed, reads))) {
+                    this.#bindings.markComputedDirty(key);
+                    pending.push(key);
+                }
             }
         }
     }
@@ -16086,10 +16304,21 @@ class VApplication {
             return;
         }
         const computedFn = VApplication.#getComputedGetter(def);
+        const bindings = this.#bindings;
         try {
             // Read the previous value without triggering re-resolution, for change detection.
-            const oldValue = this.#bindings.peekComputed(key);
-            const newValue = computedFn.call(this.#bindings.raw);
+            const oldValue = bindings.peekComputed(key);
+            // Record what the getter reads, replacing the previous record: the reads can differ
+            // from run to run (a branch, a dynamic key). Kept even when the getter throws, so a
+            // change to what it read before failing retries it.
+            const reads = new Set();
+            let newValue;
+            try {
+                newValue = ReactiveProxy.track(reads, () => computedFn.call(bindings.raw));
+            }
+            finally {
+                this.#computedReads.set(key, reads);
+            }
             // Check if the value actually changed.
             let hasChanged = oldValue !== newValue;
             // For arrays, always treat as changed (VBindings detects length changes via its length