@mintjamsinc/ichigojs 0.1.83 → 0.1.84

package/dist/ichigo.esm.js

@@ -11313,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.
      */
@@ -11429,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) {
@@ -11460,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
@@ -11853,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
@@ -11862,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