@mintjamsinc/ichigojs 0.1.83 → 0.1.84

package/dist/ichigo.umd.js

@@ -11319,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.
          */
@@ -11435,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) {
@@ -11466,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
@@ -11859,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
@@ -11868,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