phoenix_live_view 1.0.16 → 1.0.18

package/assets/js/phoenix_live_view/dom_patch.js

@@ -70,9 +70,25 @@ export default class DOMPatch {
   }
 
   perform(isJoinPatch){
-    let {view, liveSocket, html, container, targetContainer} = this
+    let {view, liveSocket, html, container} = this
+    let targetContainer = this.targetContainer
     if(this.isCIDPatch() && !targetContainer){ return }
 
+    if(this.isCIDPatch()){
+      // https://github.com/phoenixframework/phoenix_live_view/pull/3942
+      // we need to ensure that no parent is locked
+      const closestLock = targetContainer.closest(`[${PHX_REF_LOCK}]`)
+      if(closestLock){
+        const clonedTree = DOM.private(closestLock, PHX_REF_LOCK)
+        if(clonedTree){
+          // if a parent is locked with a cloned tree, we need to patch the cloned tree instead
+          targetContainer = clonedTree.querySelector(
+            `[data-phx-component="${this.targetCID}"]`,
+          )
+        }
+      }
+    }
+
     let focused = liveSocket.getActiveElement()
     let {selectionStart, selectionEnd} = focused && DOM.hasSelectionRange(focused) ? focused : {}
     let phxUpdate = liveSocket.binding(PHX_UPDATE)

package/assets/js/phoenix_live_view/live_socket.js

@@ -461,7 +461,15 @@ export default class LiveSocket {
   }
 
   owner(childEl, callback){
-    let view = maybe(childEl.closest(PHX_VIEW_SELECTOR), el => this.getViewByEl(el)) || this.main
+    let view
+    const closestViewEl = childEl.closest(PHX_VIEW_SELECTOR)
+    if(closestViewEl){
+      // it can happen that we find a view that is already destroyed;
+      // in that case we DO NOT want to fallback to the main element
+      view = this.getViewByEl(closestViewEl)
+    } else {
+      view = this.main
+    }
     return view && callback ? callback(view) : view
   }
 

package/assets/js/phoenix_live_view/view.js

@@ -57,6 +57,8 @@ import Rendered from "./rendered"
 import ViewHook from "./view_hook"
 import JS from "./js"
 
+import morphdom from "morphdom"
+
 export let prependFormDataKey = (key, prefix) => {
   let isArray = key.endsWith("[]")
   // Remove the "[]" if it's an array
@@ -663,9 +665,13 @@ export default class View {
     })
   }
 
-  update(diff, events){
+  update(diff, events, isPending=false){
     if(this.isJoinPending() || (this.liveSocket.hasPendingLink() && this.root.isMain())){
-      return this.pendingDiffs.push({diff, events})
+      // don't mutate if this is already a pending diff
+      if(!isPending){
+        this.pendingDiffs.push({diff, events})
+      }
+      return false
     }
 
     this.rendered.mergeDiff(diff)
@@ -691,6 +697,8 @@ export default class View {
 
     this.liveSocket.dispatchEvents(events)
     if(phxChildrenAdded){ this.joinNewChildren() }
+
+    return true
   }
 
   renderContainer(diff, kind){
@@ -756,15 +764,13 @@ export default class View {
   }
 
   applyPendingUpdates(){
-    // prevent race conditions where we might still be pending a new
-    // navigation after applying the current one;
-    // if we call update and a pendingDiff is not applied, it would
-    // be silently dropped otherwise, as update would push it back to
-    // pendingDiffs, but we clear it immediately after
-    if(this.liveSocket.hasPendingLink() && this.root.isMain()){ return }
-    this.pendingDiffs.forEach(({diff, events}) => this.update(diff, events))
-    this.pendingDiffs = []
-    this.eachChild(child => child.applyPendingUpdates())
+    // To prevent race conditions where we might still be pending a new
+    // navigation or the join is still pending, `this.update` returns false
+    // if the diff was not applied.
+    this.pendingDiffs = this.pendingDiffs.filter(
+      ({diff, events}) => !this.update(diff, events, true),
+    )
+    this.eachChild((child) => child.applyPendingUpdates())
   }
 
   eachChild(callback){
@@ -1533,13 +1539,20 @@ export default class View {
       .filter(form => form.elements.length > 0)
       .filter(form => form.getAttribute(this.binding(PHX_AUTO_RECOVER)) !== "ignore")
       .map(form => {
-        // we perform a shallow clone and manually copy all elementsAdd commentMore actions
+        // we perform a shallow clone and manually copy all elements
         const clonedForm = form.cloneNode(false)
         // we need to copy the private data as it contains
         // the information about touched fields
         DOM.copyPrivates(clonedForm, form)
         Array.from(form.elements).forEach((el) => {
-          const clonedEl = el.cloneNode(false)
+          // we need to clone all child nodes as well,
+          // because those could also be selects
+          const clonedEl = el.cloneNode(true)
+          // we call morphdom to copy any special state
+          // like the selected option of a <select> element;
+          // this should be plenty fast as we call it on a small subset of the DOM,
+          // single inputs or a select with children
+          morphdom(clonedEl, el)
           DOM.copyPrivates(clonedEl, el)
           clonedForm.appendChild(clonedEl)
         })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "The Phoenix LiveView JavaScript client.",
   "license": "MIT",
   "module": "./priv/static/phoenix_live_view.esm.js",
@@ -24,7 +24,7 @@
     "assets/js/phoenix_live_view/*"
   ],
   "dependencies": {
-    "morphdom": "2.7.5"
+    "morphdom": "2.7.7"
   },
   "devDependencies": {
     "@babel/cli": "7.27.0",

package/priv/static/phoenix_live_view.cjs.js

@@ -1675,6 +1675,10 @@ var specialElHandlers = {
         if (nodeName === "OPTGROUP") {
           optgroup = curChild;
           curChild = optgroup.firstChild;
+          if (!curChild) {
+            curChild = optgroup.nextSibling;
+            optgroup = null;
+          }
         } else {
           if (nodeName === "OPTION") {
             if (curChild.hasAttribute("selected")) {
@@ -2049,10 +2053,22 @@ var DOMPatch = class {
     });
   }
   perform(isJoinPatch) {
-    let { view, liveSocket, html, container, targetContainer } = this;
+    let { view, liveSocket, html, container } = this;
+    let targetContainer = this.targetContainer;
     if (this.isCIDPatch() && !targetContainer) {
       return;
     }
+    if (this.isCIDPatch()) {
+      const closestLock = targetContainer.closest(`[${PHX_REF_LOCK}]`);
+      if (closestLock) {
+        const clonedTree = dom_default.private(closestLock, PHX_REF_LOCK);
+        if (clonedTree) {
+          targetContainer = clonedTree.querySelector(
+            `[data-phx-component="${this.targetCID}"]`
+          );
+        }
+      }
+    }
     let focused = liveSocket.getActiveElement();
     let { selectionStart, selectionEnd } = focused && dom_default.hasSelectionRange(focused) ? focused : {};
     let phxUpdate = liveSocket.binding(PHX_UPDATE);
@@ -3925,9 +3941,12 @@ var View = class _View {
       this.pendingJoinOps = [];
     });
   }
-  update(diff, events) {
+  update(diff, events, isPending = false) {
     if (this.isJoinPending() || this.liveSocket.hasPendingLink() && this.root.isMain()) {
-      return this.pendingDiffs.push({ diff, events });
+      if (!isPending) {
+        this.pendingDiffs.push({ diff, events });
+      }
+      return false;
     }
     this.rendered.mergeDiff(diff);
     let phxChildrenAdded = false;
@@ -3951,6 +3970,7 @@ var View = class _View {
     if (phxChildrenAdded) {
       this.joinNewChildren();
     }
+    return true;
   }
   renderContainer(diff, kind) {
     return this.liveSocket.time(`toString diff (${kind})`, () => {
@@ -4005,11 +4025,9 @@ var View = class _View {
     delete this.viewHooks[hookId];
   }
   applyPendingUpdates() {
-    if (this.liveSocket.hasPendingLink() && this.root.isMain()) {
-      return;
-    }
-    this.pendingDiffs.forEach(({ diff, events }) => this.update(diff, events));
-    this.pendingDiffs = [];
+    this.pendingDiffs = this.pendingDiffs.filter(
+      ({ diff, events }) => !this.update(diff, events, true)
+    );
     this.eachChild((child) => child.applyPendingUpdates());
   }
   eachChild(callback) {
@@ -4747,7 +4765,8 @@ var View = class _View {
       const clonedForm = form.cloneNode(false);
       dom_default.copyPrivates(clonedForm, form);
       Array.from(form.elements).forEach((el) => {
-        const clonedEl = el.cloneNode(false);
+        const clonedEl = el.cloneNode(true);
+        morphdom_esm_default(clonedEl, el);
         dom_default.copyPrivates(clonedEl, el);
         clonedForm.appendChild(clonedEl);
       });
@@ -4864,7 +4883,7 @@ var LiveSocket = class {
   }
   // public
   version() {
-    return "1.0.16";
+    return "1.0.18";
   }
   isProfileEnabled() {
     return this.sessionStorage.getItem(PHX_LV_PROFILE) === "true";
@@ -5134,7 +5153,13 @@ var LiveSocket = class {
     return view;
   }
   owner(childEl, callback) {
-    let view = maybe(childEl.closest(PHX_VIEW_SELECTOR), (el) => this.getViewByEl(el)) || this.main;
+    let view;
+    const closestViewEl = childEl.closest(PHX_VIEW_SELECTOR);
+    if (closestViewEl) {
+      view = this.getViewByEl(closestViewEl);
+    } else {
+      view = this.main;
+    }
     return view && callback ? callback(view) : view;
   }
   withinOwners(childEl, callback) {