phoenix_live_view 1.0.9 → 1.0.10

package/assets/js/phoenix_live_view/dom_patch.js

@@ -21,7 +21,7 @@ import {
   detectInvalidStreamInserts,
   isCid
 } from "./utils"
-
+import ElementRef from "./element_ref"
 import DOM from "./dom"
 import DOMPostMorphRestorer from "./dom_post_morph_restorer"
 import morphdom from "morphdom"
@@ -217,20 +217,23 @@ export default class DOMPatch {
           // apply any changes that happened while the element was locked.
           let isFocusedFormEl = focused && fromEl.isSameNode(focused) && DOM.isFormInput(fromEl)
           let focusedSelectChanged = isFocusedFormEl && this.isChangedSelect(fromEl, toEl)
-          // only perform the clone step if this is not a patch that unlocks
-          if(fromEl.hasAttribute(PHX_REF_SRC) && fromEl.getAttribute(PHX_REF_LOCK) != this.undoRef){
-            if(DOM.isUploadInput(fromEl)){
-              DOM.mergeAttrs(fromEl, toEl, {isIgnored: true})
-              this.trackBefore("updated", fromEl, toEl)
-              updates.push(fromEl)
-            }
-            DOM.applyStickyOperations(fromEl)
-            let isLocked = fromEl.hasAttribute(PHX_REF_LOCK)
-            let 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
+          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))){
+              if(DOM.isUploadInput(fromEl)){
+                DOM.mergeAttrs(fromEl, toEl, {isIgnored: true})
+                this.trackBefore("updated", fromEl, toEl)
+                updates.push(fromEl)
+              }
+              DOM.applyStickyOperations(fromEl)
+              let isLocked = fromEl.hasAttribute(PHX_REF_LOCK)
+              let 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
+                }
               }
             }
           }

package/assets/js/phoenix_live_view/view.js

@@ -24,6 +24,7 @@ import {
   PHX_ROOT_ID,
   PHX_SESSION,
   PHX_STATIC,
+  PHX_STICKY,
   PHX_TRACK_STATIC,
   PHX_TRACK_UPLOADS,
   PHX_UPDATE,
@@ -181,6 +182,7 @@ export default class View {
         session: this.getSession(),
         static: this.getStatic(),
         flash: this.flash,
+        sticky: this.el.hasAttribute(PHX_STICKY)
       }
     })
   }
@@ -850,7 +852,7 @@ export default class View {
       return
     } else if(resp.reason === "unauthorized" || resp.reason === "stale"){
       this.log("error", () => ["unauthorized live_redirect. Falling back to page request", resp])
-      this.onRedirect({to: this.root.href})
+      this.onRedirect({to: this.root.href, flash: this.flash})
       return
     }
     if(resp.redirect || resp.live_redirect){
@@ -1168,7 +1170,9 @@ export default class View {
       event: phxEvent,
       value: this.extractMeta(el, meta, opts.value),
       cid: this.targetComponentID(el, targetCtx, opts)
-    }).then(({reply}) => onReply && onReply(reply))
+    })
+      .then(({reply}) => onReply && onReply(reply))
+      .catch((error) => logError("Failed to push event", error))
   }
 
   pushFileProgress(fileEl, entryRef, progress, onReply = function (){ }){
@@ -1179,7 +1183,9 @@ export default class View {
         entry_ref: entryRef,
         progress: progress,
         cid: view.targetComponentID(fileEl.form, targetCtx)
-      }).then(({resp}) => onReply(resp))
+      })
+        .then(({resp}) => onReply(resp))
+        .catch((error) => logError("Failed to push file progress", error))
     })
   }
 
@@ -1244,7 +1250,7 @@ export default class View {
       } else {
         callback && callback(resp)
       }
-    })
+    }).catch((error) => logError("Failed to push input event", error))
   }
 
   triggerAwaitingSubmit(formEl, phxEvent){
@@ -1343,7 +1349,9 @@ export default class View {
           value: formData,
           meta: meta,
           cid: cid
-        }).then(({resp}) => onReply(resp))
+        })
+          .then(({resp}) => onReply(resp))
+          .catch((error) => logError("Failed to push form submit", error))
       })
     } else if(!(formEl.hasAttribute(PHX_REF_SRC) && formEl.classList.contains("phx-submit-loading"))){
       let meta = this.extractMeta(formEl, {}, opts.value)
@@ -1354,7 +1362,9 @@ export default class View {
         value: formData,
         meta: meta,
         cid: cid
-      }).then(({resp}) => onReply(resp))
+      })
+        .then(({resp}) => onReply(resp))
+        .catch((error) => logError("Failed to push form submit", error))
     }
   }
 
@@ -1410,7 +1420,7 @@ export default class View {
           }
           uploader.initAdapterUpload(resp, onError, this.liveSocket)
         }
-      })
+      }).catch((error) => logError("Failed to push upload", error))
     })
   }
 
@@ -1546,10 +1556,10 @@ export default class View {
           if(completelyDestroyCIDs.length > 0){
             this.pushWithReply(null, "cids_destroyed", {cids: completelyDestroyCIDs}).then(({resp}) => {
               this.rendered.pruneCIDs(resp.cids)
-            })
+            }).catch((error) => logError("Failed to push components destroyed", error))
           }
         })
-      })
+      }).catch((error) => logError("Failed to push components destroyed", error))
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "The Phoenix LiveView JavaScript client.",
   "license": "MIT",
   "module": "./priv/static/phoenix_live_view.esm.js",
@@ -24,25 +24,25 @@
     "assets/js/phoenix_live_view/*"
   ],
   "dependencies": {
-    "morphdom": "2.7.4"
+    "morphdom": "2.7.5"
   },
   "devDependencies": {
-    "@babel/cli": "7.26.4",
-    "@babel/core": "7.26.0",
-    "@babel/preset-env": "7.26.0",
-    "@eslint/js": "^9.18.0",
-    "@playwright/test": "^1.49.1",
-    "@stylistic/eslint-plugin-js": "^2.12.1",
+    "@babel/cli": "7.27.0",
+    "@babel/core": "7.26.10",
+    "@babel/preset-env": "7.26.9",
+    "@eslint/js": "^9.24.0",
+    "@playwright/test": "^1.51.1",
+    "@stylistic/eslint-plugin-js": "^4.2.0",
     "css.escape": "^1.5.1",
-    "eslint": "9.18.0",
-    "eslint-plugin-jest": "28.10.0",
-    "eslint-plugin-playwright": "^2.1.0",
-    "globals": "^15.14.0",
+    "eslint": "9.24.0",
+    "eslint-plugin-jest": "28.11.0",
+    "eslint-plugin-playwright": "^2.2.0",
+    "globals": "^16.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-monocart-coverage": "^1.1.1",
-    "monocart-reporter": "^2.9.13",
-    "phoenix": "1.7.18"
+    "monocart-reporter": "^2.9.17",
+    "phoenix": "1.7.21"
   },
   "scripts": {
     "setup": "mix deps.get && npm install",

package/priv/static/phoenix_live_view.cjs.js

@@ -2164,19 +2164,22 @@ var DOMPatch = class {
           }
           let isFocusedFormEl = focused && fromEl.isSameNode(focused) && dom_default.isFormInput(fromEl);
           let focusedSelectChanged = isFocusedFormEl && this.isChangedSelect(fromEl, toEl);
-          if (fromEl.hasAttribute(PHX_REF_SRC) && fromEl.getAttribute(PHX_REF_LOCK) != this.undoRef) {
-            if (dom_default.isUploadInput(fromEl)) {
-              dom_default.mergeAttrs(fromEl, toEl, { isIgnored: true });
-              this.trackBefore("updated", fromEl, toEl);
-              updates.push(fromEl);
-            }
-            dom_default.applyStickyOperations(fromEl);
-            let isLocked = fromEl.hasAttribute(PHX_REF_LOCK);
-            let 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;
+          if (fromEl.hasAttribute(PHX_REF_SRC)) {
+            const ref = new ElementRef(fromEl);
+            if (ref.lockRef && (!this.undoRef || !ref.isLockUndoneBy(this.undoRef))) {
+              if (dom_default.isUploadInput(fromEl)) {
+                dom_default.mergeAttrs(fromEl, toEl, { isIgnored: true });
+                this.trackBefore("updated", fromEl, toEl);
+                updates.push(fromEl);
+              }
+              dom_default.applyStickyOperations(fromEl);
+              let isLocked = fromEl.hasAttribute(PHX_REF_LOCK);
+              let 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;
+                }
               }
             }
           }
@@ -3463,7 +3466,8 @@ var View = class _View {
         params: this.connectParams(liveReferer),
         session: this.getSession(),
         static: this.getStatic(),
-        flash: this.flash
+        flash: this.flash,
+        sticky: this.el.hasAttribute(PHX_STICKY)
       };
     });
   }
@@ -4052,7 +4056,7 @@ var View = class _View {
       return;
     } else if (resp.reason === "unauthorized" || resp.reason === "stale") {
       this.log("error", () => ["unauthorized live_redirect. Falling back to page request", resp]);
-      this.onRedirect({ to: this.root.href });
+      this.onRedirect({ to: this.root.href, flash: this.flash });
       return;
     }
     if (resp.redirect || resp.live_redirect) {
@@ -4390,7 +4394,7 @@ var View = class _View {
       event: phxEvent,
       value: this.extractMeta(el, meta, opts.value),
       cid: this.targetComponentID(el, targetCtx, opts)
-    }).then(({ reply }) => onReply && onReply(reply));
+    }).then(({ reply }) => onReply && onReply(reply)).catch((error) => logError("Failed to push event", error));
   }
   pushFileProgress(fileEl, entryRef, progress, onReply = function() {
   }) {
@@ -4401,7 +4405,7 @@ var View = class _View {
         entry_ref: entryRef,
         progress,
         cid: view.targetComponentID(fileEl.form, targetCtx)
-      }).then(({ resp }) => onReply(resp));
+      }).then(({ resp }) => onReply(resp)).catch((error) => logError("Failed to push file progress", error));
     });
   }
   pushInput(inputEl, targetCtx, forceCid, phxEvent, opts, callback) {
@@ -4462,7 +4466,7 @@ var View = class _View {
       } else {
         callback && callback(resp);
       }
-    });
+    }).catch((error) => logError("Failed to push input event", error));
   }
   triggerAwaitingSubmit(formEl, phxEvent) {
     let awaitingSubmit = this.getScheduledSubmit(formEl);
@@ -4549,7 +4553,7 @@ var View = class _View {
           value: formData,
           meta,
           cid
-        }).then(({ resp }) => onReply(resp));
+        }).then(({ resp }) => onReply(resp)).catch((error) => logError("Failed to push form submit", error));
       });
     } else if (!(formEl.hasAttribute(PHX_REF_SRC) && formEl.classList.contains("phx-submit-loading"))) {
       let meta = this.extractMeta(formEl, {}, opts.value);
@@ -4560,7 +4564,7 @@ var View = class _View {
         value: formData,
         meta,
         cid
-      }).then(({ resp }) => onReply(resp));
+      }).then(({ resp }) => onReply(resp)).catch((error) => logError("Failed to push form submit", error));
     }
   }
   uploadFiles(formEl, phxEvent, targetCtx, ref, cid, onComplete) {
@@ -4608,7 +4612,7 @@ var View = class _View {
           };
           uploader.initAdapterUpload(resp, onError, this.liveSocket);
         }
-      });
+      }).catch((error) => logError("Failed to push upload", error));
     });
   }
   handleFailedEntryPreflight(uploadRef, reason, uploader) {
@@ -4719,10 +4723,10 @@ var View = class _View {
           if (completelyDestroyCIDs.length > 0) {
             this.pushWithReply(null, "cids_destroyed", { cids: completelyDestroyCIDs }).then(({ resp }) => {
               this.rendered.pruneCIDs(resp.cids);
-            });
+            }).catch((error) => logError("Failed to push components destroyed", error));
           }
         });
-      });
+      }).catch((error) => logError("Failed to push components destroyed", error));
     }
   }
   ownsElement(el) {
@@ -4812,7 +4816,7 @@ var LiveSocket = class {
   }
   // public
   version() {
-    return "1.0.9";
+    return "1.0.10";
   }
   isProfileEnabled() {
     return this.sessionStorage.getItem(PHX_LV_PROFILE) === "true";