@mintjamsinc/ichigojs 0.1.87 → 0.1.89

package/dist/ichigo.cjs

@@ -8849,6 +8849,7 @@
          */
         clearChanges() {
             this.#changes.clear();
+            this.#changeLog.length = 0;
             if (this.#dirtyScopes) {
                 for (const scope of this.#dirtyScopes) {
                     scope.#changes.clear();
@@ -8862,14 +8863,39 @@
          */
         #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.
@@ -10775,8 +10801,7 @@
                 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) {
@@ -10797,7 +10822,7 @@
                     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());
                         }
                     }
                 }
@@ -10806,7 +10831,7 @@
                     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());
                         }
                     }
                 }
@@ -10844,8 +10869,7 @@
         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
@@ -10863,13 +10887,13 @@
                     }
                     // 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
@@ -10891,6 +10915,38 @@
                 });
             }
         }
+        /**
+         * 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.
@@ -15452,6 +15508,14 @@
          * 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.
@@ -15609,8 +15673,11 @@
                 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.
@@ -15895,8 +15962,10 @@
             }
             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();
             });
         }
         /**
@@ -15910,14 +15979,46 @@
             // 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.