phoenix_live_view 1.2.0-rc.0 → 1.2.0-rc.2

package/assets/js/phoenix_live_view/dom_patch.js

@@ -54,7 +54,11 @@ export default class DOMPatch {
       afterphxChildAdded: [],
       aftertransitionsDiscarded: [],
     };
-    this.withChildren = opts.withChildren || opts.undoRef || false;
+    // unlock patches pass undoRef and must morph the locked element itself, not
+    // only its children. The first client ref is 0, so this must check for the
+    // option's presence rather than truthiness.
+    this.withChildren =
+      opts.withChildren || opts.undoRef !== undefined || false;
     this.undoRef = opts.undoRef;
   }
 
@@ -105,6 +109,12 @@ export default class DOMPatch {
           targetContainer = clonedTree.querySelector(
             `[data-phx-component="${this.targetCID}"]`,
           );
+          // The visible DOM can still contain the target CID while the locked
+          // clone has gone stale and no longer does. In that case there is no
+          // safe clone target for this component diff, so leave the visible DOM
+          // locked and wait for a later patch instead of throwing or patching
+          // outside the locked tree.
+          if (!targetContainer) return;
         }
       }
     }
@@ -148,6 +158,13 @@ export default class DOMPatch {
           if (isJoinPatch) {
             return node.id;
           }
+
+          // If ID was touched by JavaScript hook, use PHX_MAGIC_ID for matching.
+          // This ensures morphdom can match elements even when JS modifies their IDs.
+          if (DOM.private(node, "clientsideIdAttribute")) {
+            return node.getAttribute && node.getAttribute(PHX_MAGIC_ID);
+          }
+
           return (
             node.id || (node.getAttribute && node.getAttribute(PHX_MAGIC_ID))
           );
@@ -309,7 +326,16 @@ export default class DOMPatch {
             phxViewportBottom,
           );
           DOM.cleanChildNodes(toEl, phxUpdate);
+          const isFocusedFormEl =
+            focused && fromEl.isSameNode(focused) && DOM.isFormInput(fromEl);
+          const focusedSelectChanged =
+            isFocusedFormEl && this.isChangedSelect(fromEl, toEl);
           if (this.skipCIDSibling(toEl)) {
+            // A skipped update returns before the normal update path below, so
+            // it must still perform the lock bookkeeping that keeps private
+            // cloned trees in sync.
+            this.maybeCloneLockedElement(fromEl, isFocusedFormEl);
+            this.copyNestedPrivateLock(fromEl, toEl);
             // if this is a live component used in a stream, we may need to reorder it
             this.maybeReOrderStream(fromEl);
             return false;
@@ -354,30 +380,7 @@ export default class DOMPatch {
           // We keep a reference to the cloned tree in the element's private data, and
           // on ack (view.undoRefs), we morph the cloned tree with the true fromEl in the DOM to
           // apply any changes that happened while the element was locked.
-          const isFocusedFormEl =
-            focused && fromEl.isSameNode(focused) && DOM.isFormInput(fromEl);
-          const focusedSelectChanged =
-            isFocusedFormEl && this.isChangedSelect(fromEl, toEl);
-          if (fromEl.hasAttribute(PHX_REF_SRC)) {
-            const ref = new ElementRef(fromEl);
-            // only perform the clone step if this is not a patch that unlocks
-            if (
-              ref.lockRef &&
-              (!this.undoRef || !ref.isLockUndoneBy(this.undoRef))
-            ) {
-              DOM.applyStickyOperations(fromEl);
-              const isLocked = fromEl.hasAttribute(PHX_REF_LOCK);
-              const clone = isLocked
-                ? DOM.private(fromEl, PHX_REF_LOCK) || fromEl.cloneNode(true)
-                : null;
-              if (clone) {
-                DOM.putPrivate(fromEl, PHX_REF_LOCK, clone);
-                if (!isFocusedFormEl) {
-                  fromEl = clone;
-                }
-              }
-            }
-          }
+          fromEl = this.maybeCloneLockedElement(fromEl, isFocusedFormEl);
 
           // nested view handling
           if (DOM.isPhxChild(toEl)) {
@@ -391,14 +394,10 @@ export default class DOMPatch {
             return false;
           }
 
-          // if we are undoing a lock, copy potentially nested clones over
-          if (this.undoRef && DOM.private(toEl, PHX_REF_LOCK)) {
-            DOM.putPrivate(
-              fromEl,
-              PHX_REF_LOCK,
-              DOM.private(toEl, PHX_REF_LOCK),
-            );
-          }
+          // If we are undoing a lock, copy potentially nested clones over.
+          // This keeps an inner locked subtree's private clone alive while an
+          // ancestor lock is being reconciled.
+          this.copyNestedPrivateLock(fromEl, toEl);
           // now copy regular DOM.private data
           DOM.copyPrivates(toEl, fromEl);
 
@@ -649,18 +648,26 @@ export default class DOMPatch {
     }
 
     if (streamAt === 0) {
-      el.parentElement.insertBefore(el, el.parentElement.firstElementChild);
+      this.moveOrInsertBefore(
+        el.parentElement,
+        el,
+        el.parentElement.firstElementChild,
+      );
     } else if (streamAt > 0) {
       const children = Array.from(el.parentElement.children);
       const oldIndex = children.indexOf(el);
       if (streamAt >= children.length - 1) {
-        el.parentElement.appendChild(el);
+        this.moveOrInsertBefore(el.parentElement, el, null);
       } else {
         const sibling = children[streamAt];
         if (oldIndex > streamAt) {
-          el.parentElement.insertBefore(el, sibling);
+          this.moveOrInsertBefore(el.parentElement, el, sibling);
         } else {
-          el.parentElement.insertBefore(el, sibling.nextElementSibling);
+          this.moveOrInsertBefore(
+            el.parentElement,
+            el,
+            sibling.nextElementSibling,
+          );
         }
       }
     }
@@ -668,6 +675,25 @@ export default class DOMPatch {
     this.maybeLimitStream(el);
   }
 
+  // Reorder a child within its parent. When supported, use the atomic
+  // moveBefore (https://developer.mozilla.org/en-US/docs/Web/API/Node/moveBefore)
+  // so connected custom elements (and other state-bearing nodes like iframes)
+  // are not disconnected and reconnected by the move. Falls back to
+  // insertBefore otherwise. Passing `ref === null` moves to the end.
+  // See also https://github.com/phoenixframework/phoenix_live_view/issues/4212.
+  moveOrInsertBefore(parent, child, ref) {
+    if (typeof parent.moveBefore === "function") {
+      try {
+        parent.moveBefore(child, ref);
+        return;
+      } catch {
+        // moveBefore can throw (e.g. HierarchyRequestError) in cases where
+        // an atomic move is not possible; fall back to insertBefore.
+      }
+    }
+    parent.insertBefore(child, ref);
+  }
+
   maybeLimitStream(el) {
     const { limit } = this.getStreamInsert(el);
     const children = limit !== null && Array.from(el.parentElement.children);
@@ -722,6 +748,39 @@ export default class DOMPatch {
     return el.nodeType === Node.ELEMENT_NODE && el.hasAttribute(PHX_SKIP);
   }
 
+  maybeCloneLockedElement(fromEl, isFocusedFormEl) {
+    if (!fromEl.hasAttribute(PHX_REF_SRC)) return fromEl;
+
+    const ref = new ElementRef(fromEl);
+    // Only perform the clone step while the element remains locked. lockRef can
+    // be 0 for the first event, so compare against null/undefined explicitly.
+    if (
+      ref.lockRef === null ||
+      (this.undoRef !== undefined && ref.isLockUndoneBy(this.undoRef))
+    ) {
+      return fromEl;
+    }
+
+    DOM.applyStickyOperations(fromEl);
+    const clone = fromEl.hasAttribute(PHX_REF_LOCK)
+      ? DOM.private(fromEl, PHX_REF_LOCK) || fromEl.cloneNode(true)
+      : null;
+    if (!clone) return fromEl;
+
+    DOM.putPrivate(fromEl, PHX_REF_LOCK, clone);
+    return isFocusedFormEl ? fromEl : clone;
+  }
+
+  copyNestedPrivateLock(fromEl, toEl) {
+    // During unlock morphs, toEl may be the private clone that accumulated a
+    // nested locked subtree. Copy that private clone back to fromEl before the
+    // outer unlock finishes so the nested element can apply its own ack later.
+    // undoRef can be 0, so presence is checked with undefined.
+    if (this.undoRef === undefined || !DOM.private(toEl, PHX_REF_LOCK)) return;
+
+    DOM.putPrivate(fromEl, PHX_REF_LOCK, DOM.private(toEl, PHX_REF_LOCK));
+  }
+
   targetCIDContainer(html) {
     if (!this.isCIDPatch()) {
       return;

package/assets/js/phoenix_live_view/hooks.js

@@ -46,10 +46,8 @@ const Hooks = {
       this.inputEl = document.getElementById(
         this.el.getAttribute(PHX_UPLOAD_REF),
       );
-      LiveUploader.getEntryDataURL(this.inputEl, this.ref, (url) => {
-        this.url = url;
-        this.el.src = url;
-      });
+      this.url = LiveUploader.getEntryDataURL(this.inputEl, this.ref);
+      this.el.src = this.url;
     },
     destroyed() {
       URL.revokeObjectURL(this.url);
@@ -264,7 +262,7 @@ Hooks.InfiniteScroll = {
   updated() {
     // Check if the scroll container still exists
     // https://github.com/phoenixframework/phoenix_live_view/issues/4169.
-    if (!this.scrollContainer.isConnected) {
+    if (this.scrollContainer && !this.scrollContainer.isConnected) {
       this.destroyed();
       this.mounted();
     }

package/assets/js/phoenix_live_view/index.ts

@@ -15,6 +15,7 @@ import { logError } from "./utils";
 import type { EncodedJS, LiveSocketJSCommands } from "./js_commands";
 import type { Hook, HooksOptions } from "./view_hook";
 import type { Socket as PhoenixSocket } from "phoenix";
+import LiveUploader from "./live_uploader";
 
 /**
  * Options for configuring the LiveSocket instance.
@@ -350,4 +351,32 @@ function createHook(el: HTMLElement, callbacks: Hook): ViewHook {
   return hook;
 }
 
-export { LiveSocket, isUsedInput, createHook, ViewHook, Hook, HooksOptions };
+/** Returns an object URL for the file matching the given upload ref,
+ * or `null` if no matching file is found.
+ *
+ * @param input - The file input element associated with the upload.
+ * @param uploadRef - The upload ref identifying the file entry.
+ *
+ * @example
+ *
+ * import { getFileURLForUpload } from "phoenix_live_view"
+ *
+ * let url = getFileURLForUpload(inputEl, uploadRef)
+ * if (url) { imgEl.src = url }
+ */
+function getFileURLForUpload(
+  input: HTMLElement,
+  uploadRef: string,
+): string | null {
+  return LiveUploader.getEntryDataURL(input, uploadRef);
+}
+
+export {
+  LiveSocket,
+  isUsedInput,
+  createHook,
+  ViewHook,
+  Hook,
+  HooksOptions,
+  getFileURLForUpload,
+};

package/assets/js/phoenix_live_view/js.js

@@ -600,6 +600,11 @@ const JS = {
       .filter((attr) => !alteredAttrs.includes(attr))
       .concat(removes);
 
+    // If element ID is touched via JavaScript, mark it for cheap lookup during morphdom
+    if (sets.some(([attr, _val]) => attr === "id")) {
+      DOM.putPrivate(el, "clientsideIdAttribute", true);
+    }
+
     DOM.putSticky(el, "attrs", (currentEl) => {
       newRemoves.forEach((attr) => currentEl.removeAttribute(attr));
       newSets.forEach(([attr, val]) => currentEl.setAttribute(attr, val));

package/assets/js/phoenix_live_view/live_uploader.js

@@ -22,11 +22,12 @@ export default class LiveUploader {
     }
   }
 
-  static getEntryDataURL(inputEl, ref, callback) {
+  static getEntryDataURL(inputEl, ref) {
     const file = this.activeFiles(inputEl).find(
       (file) => this.genFileRef(file) === ref,
     );
-    callback(URL.createObjectURL(file));
+    if (!file) return null;
+    return URL.createObjectURL(file);
   }
 
   static hasUploadsInProgress(formEl) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "1.2.0-rc.0",
+  "version": "1.2.0-rc.2",
   "description": "The Phoenix LiveView JavaScript client.",
   "license": "MIT",
   "type": "module",

package/priv/static/phoenix_live_view.cjs.js

@@ -22,6 +22,7 @@ __export(phoenix_live_view_exports, {
   LiveSocket: () => LiveSocket2,
   ViewHook: () => ViewHook,
   createHook: () => createHook,
+  getFileURLForUpload: () => getFileURLForUpload,
   isUsedInput: () => isUsedInput
 });
 module.exports = __toCommonJS(phoenix_live_view_exports);
@@ -1061,11 +1062,13 @@ var LiveUploader = class _LiveUploader {
       return file._phxRef;
     }
   }
-  static getEntryDataURL(inputEl, ref, callback) {
+  static getEntryDataURL(inputEl, ref) {
     const file = this.activeFiles(inputEl).find(
       (file2) => this.genFileRef(file2) === ref
     );
-    callback(URL.createObjectURL(file));
+    if (!file)
+      return null;
+    return URL.createObjectURL(file);
   }
   static hasUploadsInProgress(formEl) {
     let active = 0;
@@ -1292,10 +1295,8 @@ var Hooks = {
       this.inputEl = document.getElementById(
         this.el.getAttribute(PHX_UPLOAD_REF)
       );
-      LiveUploader.getEntryDataURL(this.inputEl, this.ref, (url) => {
-        this.url = url;
-        this.el.src = url;
-      });
+      this.url = LiveUploader.getEntryDataURL(this.inputEl, this.ref);
+      this.el.src = this.url;
     },
     destroyed() {
       URL.revokeObjectURL(this.url);
@@ -1460,7 +1461,7 @@ Hooks.InfiniteScroll = {
     }
   },
   updated() {
-    if (!this.scrollContainer.isConnected) {
+    if (this.scrollContainer && !this.scrollContainer.isConnected) {
       this.destroyed();
       this.mounted();
     }
@@ -2271,7 +2272,7 @@ var DOMPatch = class {
       afterphxChildAdded: [],
       aftertransitionsDiscarded: []
     };
-    this.withChildren = opts.withChildren || opts.undoRef || false;
+    this.withChildren = opts.withChildren || opts.undoRef !== void 0 || false;
     this.undoRef = opts.undoRef;
   }
   before(kind, callback) {
@@ -2310,6 +2311,8 @@ var DOMPatch = class {
           targetContainer = clonedTree.querySelector(
             `[data-phx-component="${this.targetCID}"]`
           );
+          if (!targetContainer)
+            return;
         }
       }
     }
@@ -2338,6 +2341,9 @@ var DOMPatch = class {
           if (isJoinPatch) {
             return node.id;
           }
+          if (dom_default.private(node, "clientsideIdAttribute")) {
+            return node.getAttribute && node.getAttribute(PHX_MAGIC_ID);
+          }
           return node.id || node.getAttribute && node.getAttribute(PHX_MAGIC_ID);
         },
         // skip indexing from children when container is stream
@@ -2459,7 +2465,11 @@ var DOMPatch = class {
             phxViewportBottom
           );
           dom_default.cleanChildNodes(toEl, phxUpdate);
+          const isFocusedFormEl = focused && fromEl.isSameNode(focused) && dom_default.isFormInput(fromEl);
+          const focusedSelectChanged = isFocusedFormEl && this.isChangedSelect(fromEl, toEl);
           if (this.skipCIDSibling(toEl)) {
+            this.maybeCloneLockedElement(fromEl, isFocusedFormEl);
+            this.copyNestedPrivateLock(fromEl, toEl);
             this.maybeReOrderStream(fromEl);
             return false;
           }
@@ -2487,22 +2497,7 @@ var DOMPatch = class {
           if (fromEl.type === "number" && fromEl.validity && fromEl.validity.badInput) {
             return false;
           }
-          const isFocusedFormEl = focused && fromEl.isSameNode(focused) && dom_default.isFormInput(fromEl);
-          const focusedSelectChanged = isFocusedFormEl && this.isChangedSelect(fromEl, toEl);
-          if (fromEl.hasAttribute(PHX_REF_SRC)) {
-            const ref = new ElementRef(fromEl);
-            if (ref.lockRef && (!this.undoRef || !ref.isLockUndoneBy(this.undoRef))) {
-              dom_default.applyStickyOperations(fromEl);
-              const isLocked = fromEl.hasAttribute(PHX_REF_LOCK);
-              const clone2 = isLocked ? dom_default.private(fromEl, PHX_REF_LOCK) || fromEl.cloneNode(true) : null;
-              if (clone2) {
-                dom_default.putPrivate(fromEl, PHX_REF_LOCK, clone2);
-                if (!isFocusedFormEl) {
-                  fromEl = clone2;
-                }
-              }
-            }
-          }
+          fromEl = this.maybeCloneLockedElement(fromEl, isFocusedFormEl);
           if (dom_default.isPhxChild(toEl)) {
             const prevSession = fromEl.getAttribute(PHX_SESSION);
             dom_default.mergeAttrs(fromEl, toEl, { exclude: [PHX_STATIC] });
@@ -2513,13 +2508,7 @@ var DOMPatch = class {
             dom_default.applyStickyOperations(fromEl);
             return false;
           }
-          if (this.undoRef && dom_default.private(toEl, PHX_REF_LOCK)) {
-            dom_default.putPrivate(
-              fromEl,
-              PHX_REF_LOCK,
-              dom_default.private(toEl, PHX_REF_LOCK)
-            );
-          }
+          this.copyNestedPrivateLock(fromEl, toEl);
           dom_default.copyPrivates(toEl, fromEl);
           if (dom_default.isPortalTemplate(toEl)) {
             portalCallbacks.push(() => this.teleport(toEl, morph));
@@ -2701,23 +2690,47 @@ var DOMPatch = class {
       return;
     }
     if (streamAt === 0) {
-      el.parentElement.insertBefore(el, el.parentElement.firstElementChild);
+      this.moveOrInsertBefore(
+        el.parentElement,
+        el,
+        el.parentElement.firstElementChild
+      );
     } else if (streamAt > 0) {
       const children = Array.from(el.parentElement.children);
       const oldIndex = children.indexOf(el);
       if (streamAt >= children.length - 1) {
-        el.parentElement.appendChild(el);
+        this.moveOrInsertBefore(el.parentElement, el, null);
       } else {
         const sibling = children[streamAt];
         if (oldIndex > streamAt) {
-          el.parentElement.insertBefore(el, sibling);
+          this.moveOrInsertBefore(el.parentElement, el, sibling);
         } else {
-          el.parentElement.insertBefore(el, sibling.nextElementSibling);
+          this.moveOrInsertBefore(
+            el.parentElement,
+            el,
+            sibling.nextElementSibling
+          );
         }
       }
     }
     this.maybeLimitStream(el);
   }
+  // Reorder a child within its parent. When supported, use the atomic
+  // moveBefore (https://developer.mozilla.org/en-US/docs/Web/API/Node/moveBefore)
+  // so connected custom elements (and other state-bearing nodes like iframes)
+  // are not disconnected and reconnected by the move. Falls back to
+  // insertBefore otherwise. Passing `ref === null` moves to the end.
+  // See also https://github.com/phoenixframework/phoenix_live_view/issues/4212.
+  moveOrInsertBefore(parent, child, ref) {
+    if (typeof parent.moveBefore === "function") {
+      try {
+        parent.moveBefore(child, ref);
+        return;
+      } catch {
+      }
+    }
+    parent.insertBefore(child, ref);
+  }
   maybeLimitStream(el) {
     const { limit } = this.getStreamInsert(el);
     const children = limit !== null && Array.from(el.parentElement.children);
@@ -2758,6 +2771,25 @@ var DOMPatch = class {
   skipCIDSibling(el) {
     return el.nodeType === Node.ELEMENT_NODE && el.hasAttribute(PHX_SKIP);
   }
+  maybeCloneLockedElement(fromEl, isFocusedFormEl) {
+    if (!fromEl.hasAttribute(PHX_REF_SRC))
+      return fromEl;
+    const ref = new ElementRef(fromEl);
+    if (ref.lockRef === null || this.undoRef !== void 0 && ref.isLockUndoneBy(this.undoRef)) {
+      return fromEl;
+    }
+    dom_default.applyStickyOperations(fromEl);
+    const clone2 = fromEl.hasAttribute(PHX_REF_LOCK) ? dom_default.private(fromEl, PHX_REF_LOCK) || fromEl.cloneNode(true) : null;
+    if (!clone2)
+      return fromEl;
+    dom_default.putPrivate(fromEl, PHX_REF_LOCK, clone2);
+    return isFocusedFormEl ? fromEl : clone2;
+  }
+  copyNestedPrivateLock(fromEl, toEl) {
+    if (this.undoRef === void 0 || !dom_default.private(toEl, PHX_REF_LOCK))
+      return;
+    dom_default.putPrivate(fromEl, PHX_REF_LOCK, dom_default.private(toEl, PHX_REF_LOCK));
+  }
   targetCIDContainer(html) {
     if (!this.isCIDPatch()) {
       return;
@@ -3695,6 +3727,9 @@ var JS = {
     const alteredAttrs = sets.map(([attr, _val]) => attr).concat(removes);
     const newSets = prevSets.filter(([attr, _val]) => !alteredAttrs.includes(attr)).concat(sets);
     const newRemoves = prevRemoves.filter((attr) => !alteredAttrs.includes(attr)).concat(removes);
+    if (sets.some(([attr, _val]) => attr === "id")) {
+      dom_default.putPrivate(el, "clientsideIdAttribute", true);
+    }
     dom_default.putSticky(el, "attrs", (currentEl) => {
       newRemoves.forEach((attr) => currentEl.removeAttribute(attr));
       newSets.forEach(([attr, val]) => currentEl.setAttribute(attr, val));
@@ -5952,7 +5987,7 @@ var LiveSocket = class {
   }
   // public
   version() {
-    return "1.2.0-rc.0";
+    return "1.2.0-rc.2";
   }
   isProfileEnabled() {
     return this.sessionStorage.getItem(PHX_LV_PROFILE) === "true";
@@ -7003,4 +7038,7 @@ function createHook(el, callbacks) {
   dom_default.putCustomElHook(el, hook);
   return hook;
 }
+function getFileURLForUpload(input, uploadRef) {
+  return LiveUploader.getEntryDataURL(input, uploadRef);
+}
 //# sourceMappingURL=phoenix_live_view.cjs.js.map