phoenix_live_view 1.0.17 → 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/view.js

@@ -665,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)
@@ -693,6 +697,8 @@ export default class View {
 
     this.liveSocket.dispatchEvents(events)
     if(phxChildrenAdded){ this.joinNewChildren() }
+
+    return true
   }
 
   renderContainer(diff, kind){
@@ -758,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){

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "1.0.17",
+  "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) {
@@ -4865,7 +4883,7 @@ var LiveSocket = class {
   }
   // public
   version() {
-    return "1.0.17";
+    return "1.0.18";
   }
   isProfileEnabled() {
     return this.sessionStorage.getItem(PHX_LV_PROFILE) === "true";