@mintjamsinc/ichigojs 0.1.82 → 0.1.84

package/dist/ichigo.esm.js

@@ -10130,9 +10130,9 @@ class VNode {
      */
     #fragmentRange;
     /**
-     * Set by {@link destroy}. A destroyed clone stays in its parent's child
-     * list (v-if / v-for render new clones under the same parent), so walks
-     * over the children must skip it.
+     * Set by {@link destroy}. A destroyed node also leaves its parent's child
+     * list, but a walk that took its copy of the list before the node was
+     * destroyed may still reach it, and must skip it.
      */
     #destroyed = false;
     /**
@@ -10302,7 +10302,8 @@ class VNode {
         // walk runs once the subtree is in the document, which the outlet
         // cannot know when it renders inside a detached v-if / v-for clone.
         this.#directiveManager?.directives?.forEach(d => d.expandComponents?.());
-        this.#childVNodes?.forEach(child => child.expandComponents());
+        // A copy: expanding can render and destroy clones under this node.
+        this.#childVNodes?.slice().forEach(child => child.expandComponents());
     }
     /**
      * The application instance associated with this virtual node.
@@ -10614,8 +10615,9 @@ class VNode {
                     updater.applyToDOM();
                 }
             }
-            // Recursively update child virtual nodes
-            this.#childVNodes?.forEach(childVNode => {
+            // 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();
             });
             // If no directive requires template preservation, call onUpdated for directives that do not templatize
@@ -10627,7 +10629,7 @@ class VNode {
         }
         else if (this.#nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
             // For document fragments, recursively force update child VNodes
-            this.#childVNodes?.forEach(childVNode => {
+            this.#childVNodes?.slice().forEach(childVNode => {
                 childVNode.forceUpdate();
             });
         }
@@ -10709,6 +10711,7 @@ class VNode {
      * 4. Unregister dependencies
      * 5. Clean up directive manager
      * 6. Call onUnmounted lifecycle hooks
+     * 7. Leave the parent's child list
      */
     destroy() {
         this.#destroyed = true;
@@ -10735,9 +10738,9 @@ class VNode {
             }
             this.#userData.clear();
         }
-        // Recursively destroy child nodes
+        // Recursively destroy child nodes (a copy: each one leaves this list)
         if (this.#childVNodes) {
-            for (const childVNode of this.#childVNodes) {
+            for (const childVNode of this.#childVNodes.slice()) {
                 try {
                     childVNode.destroy();
                 }
@@ -10765,6 +10768,15 @@ class VNode {
                 d.onUnmounted?.();
             });
         }
+        // Leave the parent's child list. v-if and v-for render every new clone
+        // under the same parent VNode, so a destroyed clone left in the list
+        // would keep its whole subtree — VNodes, DOM nodes, bindings — alive
+        // for as long as the parent, growing with each toggle or row change.
+        const siblings = this.#parentVNode ? this.#parentVNode.#childVNodes : undefined;
+        const index = siblings ? siblings.indexOf(this) : -1;
+        if (index !== -1) {
+            siblings.splice(index, 1);
+        }
     }
 }
 
@@ -11301,6 +11313,25 @@ class VForDirective {
      * Previous iterations to detect changes
      */
     #previousIterations = [];
+    /**
+     * The source array watched for writes made directly to it, and the function
+     * that stops watching it.
+     *
+     * A write such as `items[1] = x` is reported as a change of "items[1]", which
+     * does not match this directive's dependency on "items", and the row's loop
+     * variable holds the value it was rendered with. The directive therefore
+     * watches the array itself and refreshes the rows that were written.
+     */
+    #watchedSource;
+    #unwatchSource;
+    /**
+     * Positions written since the last refresh, and whether a write (such as one
+     * to `length`) needs the whole list rendered again.
+     */
+    #writtenIndexes = new Set();
+    #writtenWhole = false;
+    #refreshScheduled = false;
+    #destroyed = false;
     /**
      * @param context The context for parsing the directive.
      */
@@ -11417,6 +11448,10 @@ class VForDirective {
      * @inheritdoc
      */
     destroy() {
+        this.#destroyed = true;
+        this.#unwatchSource?.();
+        this.#unwatchSource = undefined;
+        this.#watchedSource = undefined;
         // Clean up all rendered items
         // First destroy all VNodes (calls @unmount hooks), then remove from DOM
         for (const { vNode } of this.#renderedItems) {
@@ -11448,6 +11483,10 @@ class VForDirective {
         }
         // Evaluate the source expression to get the data
         const sourceData = this.#sourceEvaluator.evaluate();
+        // Every row is rendered from the source below, including those written in place
+        this.#watchSource(sourceData);
+        this.#writtenIndexes.clear();
+        this.#writtenWhole = false;
         // Get iterations from the source data
         let iterations = this.#getIterations(sourceData);
         // If we don't have a key evaluator yet, try to create it
@@ -11841,6 +11880,89 @@ class VForDirective {
         }
         vNode.update();
     }
+    /**
+     * Watches the source for writes made directly to its elements. Only a
+     * reactive array can be written that way; anything else is not watched.
+     */
+    #watchSource(source) {
+        if (source === this.#watchedSource) {
+            return;
+        }
+        this.#unwatchSource?.();
+        this.#unwatchSource = undefined;
+        this.#watchedSource = source;
+        const path = Array.isArray(source) ? ReactiveProxy.getPath(source) : undefined;
+        if (!path) {
+            return;
+        }
+        this.#unwatchSource = ReactiveProxy.subscribe(source, (changedPath) => {
+            this.#onSourceWritten(path, changedPath);
+        });
+    }
+    /**
+     * Notes a write made directly to the source array. A change below an
+     * element (e.g. "items[1].name") is followed by the row's own bindings, and
+     * a change of the whole array (e.g. by splice) by the usual dependency on it.
+     */
+    #onSourceWritten(path, changedPath) {
+        if (!changedPath || !changedPath.startsWith(path + '[') || !changedPath.endsWith(']')) {
+            return;
+        }
+        const property = changedPath.substring(path.length + 1, changedPath.length - 1);
+        if (property.includes(']')) {
+            return;
+        }
+        if (/^\d+$/.test(property)) {
+            this.#writtenIndexes.add(Number(property));
+        }
+        else {
+            // e.g. `items.length = 0`
+            this.#writtenWhole = true;
+        }
+        // Writes made together are refreshed together, after the application's update
+        if (!this.#refreshScheduled) {
+            this.#refreshScheduled = true;
+            queueMicrotask(() => {
+                this.#refreshScheduled = false;
+                this.#refreshWritten();
+            });
+        }
+    }
+    /**
+     * Shows the elements written since the last refresh. A row whose position or
+     * key no longer holds is not patched; the whole list is rendered again.
+     */
+    #refreshWritten() {
+        if (this.#destroyed || (!this.#writtenWhole && this.#writtenIndexes.size === 0)) {
+            return;
+        }
+        const indexes = [...this.#writtenIndexes];
+        const whole = this.#writtenWhole;
+        this.#writtenIndexes.clear();
+        this.#writtenWhole = false;
+        const source = this.#sourceEvaluator?.evaluate();
+        if (whole || source !== this.#watchedSource || !Array.isArray(source) || source.length !== this.#renderedItems.length) {
+            this.#render();
+            return;
+        }
+        for (const index of indexes) {
+            const rendered = this.#renderedItems[index];
+            let context = { key: index, item: source[index], index };
+            if (this.#evaluateKey && (this.#itemName || this.#itemDestructure)) {
+                const itemBindings = new VBindings({
+                    parent: this.#vNode.bindings
+                });
+                this.#setItemBindings(itemBindings, context);
+                context = { ...context, key: this.#evaluateKey(itemBindings) };
+            }
+            if (!rendered || context.key !== rendered.key) {
+                this.#render();
+                return;
+            }
+            this.#updateItemBindings(rendered.vNode, context);
+            this.#previousIterations[index] = context;
+        }
+    }
     /**
      * Get iterations from various data types
      * Supports: Arrays, Objects, Sets, Maps, Iterables, Numbers, Strings
@@ -11850,7 +11972,8 @@ class VForDirective {
             return [];
         // Array
         if (Array.isArray(data)) {
-            return data.map((item, index) => ({
+            // Array.from rather than map: a hole (e.g. after `items[5] = x` past the end) is a row of undefined
+            return Array.from(data, (item, index) => ({
                 item,
                 index,
                 key: index