@mintjamsinc/ichigojs 0.1.87 → 0.1.89

package/dist/ichigo.esm.js

@@ -8843,6 +8843,7 @@ class VBindings {
      */
     clearChanges() {
         this.#changes.clear();
+        this.#changeLog.length = 0;
         if (this.#dirtyScopes) {
             for (const scope of this.#dirtyScopes) {
                 scope.#changes.clear();
@@ -8856,14 +8857,39 @@ class VBindings {
      */
     #addChange(key) {
         this.#changes.add(key);
-        if (!this.#parent) {
-            return;
+        let root = this;
+        while (root.#parent) {
+            root = root.#parent;
+        }
+        root.#changeLog.push(key);
+        if (root !== this) {
+            (root.#dirtyScopes ??= new Set()).add(this);
         }
+    }
+    /**
+     * Every change recorded since the last clearChanges(), in order and with repeats, on the
+     * root; the change set itself cannot tell a write made during an update cycle from the one
+     * the cycle was scheduled for when both touch the same identifier.
+     */
+    #changeLog = [];
+    /**
+     * A marker for {@link changesSince}: the number of changes recorded so far.
+     */
+    get changeLogLength() {
+        return this.#root.#changeLog.length;
+    }
+    /**
+     * The distinct identifiers recorded after the marker was taken.
+     */
+    changesSince(marker) {
+        return Array.from(new Set(this.#root.#changeLog.slice(marker)));
+    }
+    get #root() {
         let root = this;
         while (root.#parent) {
             root = root.#parent;
         }
-        (root.#dirtyScopes ??= new Set()).add(this);
+        return root;
     }
     /**
      * Sets a binding value.
@@ -10769,8 +10795,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) {
@@ -10791,7 +10816,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());
                     }
                 }
             }
@@ -10800,7 +10825,7 @@ 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());
                     }
                 }
             }
@@ -10838,8 +10863,7 @@ class VNode {
     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
@@ -10857,13 +10881,13 @@ 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
@@ -10885,6 +10909,38 @@ class VNode {
             });
         }
     }
+    /**
+     * 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.
      * @param child The child virtual node to add.
@@ -15446,6 +15502,14 @@ class VApplication {
      * Flag to indicate if an update is already scheduled.
      */
     #updateScheduled = false;
+    /**
+     * How many update cycles in a row ended with changes made during the cycle (by a watcher
+     * or a lifecycle hook), each of which runs another cycle. Reset when a cycle ends clean;
+     * past MAX_CASCADED_UPDATES the late changes are dropped, so a watcher that writes on every
+     * cycle cannot keep the application updating forever.
+     */
+    #cascadedUpdates = 0;
+    static #MAX_CASCADED_UPDATES = 100;
     /**
      * The custom element hosting this application when it powers a component
      * defined via defineComponent(). Set by IchigoElement before mounting.
@@ -15603,8 +15667,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.
@@ -15889,8 +15956,10 @@ class VApplication {
         }
         this.#updateScheduled = true;
         queueMicrotask(() => {
-            this.#update();
+            // Cleared before the update runs, not after: a change made during the update (by a
+            // watcher or a lifecycle hook) then schedules the next cycle instead of being dropped.
             this.#updateScheduled = false;
+            this.#update();
         });
     }
     /**
@@ -15904,14 +15973,46 @@ class VApplication {
         // This converts paths like "model.elements[0].executionListeners"
         // to "selectedElement.executionListeners" when selectedElement points to model.elements[0]
         this.#applyComputedPathMappings();
+        // The changes this cycle was scheduled for. Whatever is recorded after this point was
+        // written during the cycle itself (see below); the marker tells the two apart even when
+        // a watcher writes the very identifier it watches.
+        const scheduledChanges = this.#bindings ? this.#bindings.changes : [];
+        const lateMarker = this.#bindings ? this.#bindings.changeLogLength : 0;
         // Notify watchers before DOM update
         if (this.#bindings) {
-            this.#watcher.notify(this.#bindings.changes, (p) => this.#getValueByPath(p), this.#bindings.raw);
+            this.#watcher.notify(scheduledChanges, (p) => this.#getValueByPath(p), this.#bindings.raw);
+            // A watcher may have written data. The computed properties that depend on it were
+            // only marked dirty, which the DOM diff below does not see; resolve them now, so this
+            // render already shows what the watcher did, and so the computed names are in the
+            // change set when the diff runs.
+            this.#flushDirtyComputeds();
+            this.#applyComputedPathMappings();
         }
         // Update the DOM
         this.#vNode?.update();
-        // Clear the set of changed identifiers after the update
-        this.#bindings?.clearChanges();
+        // Clear the set of changed identifiers after the update. Changes recorded during the
+        // cycle (by watchers or lifecycle hooks) are carried into the next cycle instead: the DOM
+        // diff above has seen them, but watchers that depend on them have not, since watcher
+        // notification ran before they were written.
+        if (this.#bindings) {
+            const late = this.#bindings.changesSince(lateMarker);
+            this.#bindings.clearChanges();
+            if (late.length > 0) {
+                this.#cascadedUpdates++;
+                if (this.#cascadedUpdates > VApplication.#MAX_CASCADED_UPDATES) {
+                    this.#logger.warn(`Update cycle did not settle after ${VApplication.#MAX_CASCADED_UPDATES} cascaded updates; dropping changes: ${late.join(', ')}`);
+                    this.#cascadedUpdates = 0;
+                    return;
+                }
+                for (const change of late) {
+                    this.#bindings.markChanged(change);
+                }
+                this.#scheduleUpdate();
+            }
+            else {
+                this.#cascadedUpdates = 0;
+            }
+        }
     }
     /**
      * Applies computed source path mappings to the current changes.