@mintjamsinc/ichigojs 0.1.82 → 0.1.84

package/dist/ichigo.cjs

@@ -10136,9 +10136,9 @@
          */
         #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;
         /**
@@ -10308,7 +10308,8 @@
             // 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.
@@ -10620,8 +10621,9 @@
                         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
@@ -10633,7 +10635,7 @@
             }
             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();
                 });
             }
@@ -10715,6 +10717,7 @@
          * 4. Unregister dependencies
          * 5. Clean up directive manager
          * 6. Call onUnmounted lifecycle hooks
+         * 7. Leave the parent's child list
          */
         destroy() {
             this.#destroyed = true;
@@ -10741,9 +10744,9 @@
                 }
                 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();
                     }
@@ -10771,6 +10774,15 @@
                     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);
+            }
         }
     }
 
@@ -11307,6 +11319,25 @@
          * 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.
          */
@@ -11423,6 +11454,10 @@
          * @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) {
@@ -11454,6 +11489,10 @@
             }
             // 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
@@ -11847,6 +11886,89 @@
             }
             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
@@ -11856,7 +11978,8 @@
                 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