@mintjamsinc/ichigojs 0.1.83 → 0.1.85

package/dist/ichigo.umd.js

@@ -7787,13 +7787,20 @@
         }
         /**
          * Updates a regular attribute.
+         * An attribute that already holds the value is left alone: setting `src` on
+         * an <iframe>, even to the same URL, loads its page again.
          */
         #updateAttribute(element, name, value) {
             if (value == null || value === false) {
-                element.removeAttribute(name);
+                if (element.hasAttribute(name)) {
+                    element.removeAttribute(name);
+                }
             }
             else {
-                element.setAttribute(name, String(value));
+                const text = String(value);
+                if (element.getAttribute(name) !== text) {
+                    element.setAttribute(name, text);
+                }
             }
         }
     }
@@ -11319,6 +11326,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 +11461,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 +11496,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 +11893,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 +11985,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
@@ -11949,6 +12067,11 @@
          * The expression evaluator for this directive.
          */
         #evaluator;
+        /**
+         * The HTML last set on the element. The same HTML is not set again: that
+         * would replace the elements inside, and load their frames and images again.
+         */
+        #html;
         /**
          * @param context The context for parsing the directive.
          */
@@ -11999,10 +12122,14 @@
                 get dependentIdentifiers() {
                     return identifiers;
                 },
-                applyToDOM() {
+                applyToDOM: () => {
                     const element = vNode.node;
-                    const htmlContent = evaluator.evaluate();
-                    element.innerHTML = htmlContent ?? '';
+                    const htmlContent = evaluator.evaluate() ?? '';
+                    if (htmlContent === this.#html) {
+                        return;
+                    }
+                    this.#html = htmlContent;
+                    element.innerHTML = htmlContent;
                 }
             };
             return updater;