phoenix_live_view 1.1.31 → 1.1.32

package/assets/js/phoenix_live_view/dom.js

@@ -370,7 +370,9 @@ const DOM = {
             // we also clear the throttle timeout to prevent the callback
             // from being called again after the timeout fires
             clearTimeout(this.private(el, THROTTLED));
-            this.triggerCycle(el, DEBOUNCE_TRIGGER);
+            if (asyncFilter()) {
+              this.triggerCycle(el, DEBOUNCE_TRIGGER);
+            }
           });
         }
     }

package/assets/js/phoenix_live_view/dom_patch.js

@@ -711,7 +711,7 @@ export default class DOMPatch {
   transitionPendingRemoves() {
     const { pendingRemoves, liveSocket } = this;
     if (pendingRemoves.length > 0) {
-      liveSocket.transitionRemoves(pendingRemoves, () => {
+      liveSocket.transitionRemoves(pendingRemoves, this.view, () => {
         pendingRemoves.forEach((el) => {
           const child = DOM.firstPhxChild(el);
           if (child) {

package/assets/js/phoenix_live_view/live_socket.js

@@ -472,12 +472,15 @@ export default class LiveSocket {
     ).filter((el) => !DOM.isChildOfAny(el, stickies));
 
     const newMainEl = DOM.cloneNode(this.outgoingMainEl, "");
-    this.main.showLoader(this.loaderTimeout);
-    this.main.destroy();
+    const oldMainView = this.main;
+    oldMainView.showLoader(this.loaderTimeout);
+    oldMainView.destroy();
 
     this.main = this.newRootView(newMainEl, flash, liveReferer);
     this.main.setRedirect(href);
-    this.transitionRemoves(removeEls);
+    // the old view is destroyed at this point; pass it explicitly so the
+    // phx-remove commands execute in the context of the outgoing view
+    this.transitionRemoves(removeEls, oldMainView);
     this.main.join((joinCount, onDone) => {
       if (joinCount === 1 && this.commitPendingLink(linkRef)) {
         this.requestDOMUpdate(() => {
@@ -493,7 +496,7 @@ export default class LiveSocket {
     });
   }
 
-  transitionRemoves(elements, callback) {
+  transitionRemoves(elements, view, callback) {
     const removeAttr = this.binding("remove");
     const silenceEvents = (e) => {
       e.preventDefault();
@@ -505,7 +508,8 @@ export default class LiveSocket {
       for (const event of this.boundEventNames) {
         el.addEventListener(event, silenceEvents, true);
       }
-      this.execJS(el, el.getAttribute(removeAttr), "remove");
+      const e = new CustomEvent("phx:exec", { detail: { sourceElement: el } });
+      JS.exec(e, "remove", el.getAttribute(removeAttr), view, el);
     });
     // remove the silenced listeners when transitions are done incase the element is re-used
     // and call caller's callback as soon as we are done with transitions
@@ -533,9 +537,12 @@ export default class LiveSocket {
     let view;
     const viewEl = DOM.closestViewEl(childEl);
     if (viewEl) {
-      // 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(viewEl);
+      // resolve the view by element identity instead of id; during live
+      // navigation the new view is registered under the same id while the
+      // old DOM is still attached, and events from the old DOM must not be
+      // routed to the new view. A destroyed view removes its element binding,
+      // in which case we DO NOT want to fallback to the main element
+      view = DOM.private(viewEl, "view");
     } else {
       if (!childEl.isConnected) {
         // if the element is not part of the DOM any more

package/assets/js/phoenix_live_view/utils.js

@@ -8,10 +8,7 @@ export const logError = (msg, obj) => console.error && console.error(msg, obj);
 // target over the existing socket. A full URL to a different origin (or a
 // non-http(s) scheme, which resolves to an opaque "null" origin) is a
 // programming error, so we fail loudly instead of attempting a broken join.
-export const ensureSameOrigin = (
-  href,
-  kind,
-) => {
+export const ensureSameOrigin = (href, kind) => {
   let url;
   try {
     url = new URL(href, window.location.href);

package/assets/js/phoenix_live_view/view.js

@@ -443,6 +443,7 @@ export default class View {
     if (container) {
       const [tag, attrs] = container;
       this.el = DOM.replaceRootContainer(this.el, tag, attrs);
+      DOM.putPrivate(this.el, "view", this);
     }
     this.childJoins = 0;
     this.joinPending = true;
@@ -548,6 +549,7 @@ export default class View {
 
   attachTrueDocEl() {
     this.el = DOM.byId(this.id);
+    DOM.putPrivate(this.el, "view", this);
     this.el.setAttribute(PHX_ROOT_ID, this.root.id);
   }
 
@@ -770,6 +772,7 @@ export default class View {
     });
 
     // because we work with a template element, we must manually copy the attributes
+    // and bind the template root to this view,
     // otherwise the owner / target helpers don't work properly
     const rootEl = template.content.firstElementChild;
     rootEl.id = this.id;
@@ -777,6 +780,7 @@ export default class View {
     rootEl.setAttribute(PHX_SESSION, this.getSession());
     rootEl.setAttribute(PHX_STATIC, this.getStatic());
     rootEl.setAttribute(PHX_PARENT_ID, this.parent ? this.parent.id : null);
+    DOM.putPrivate(rootEl, "view", this);
 
     // we go over all form elements in the new HTML for the LV
     // and look for old forms in the `formsForRecovery` object;

package/assets/js/types/live_socket.d.ts

@@ -89,7 +89,7 @@ export default class LiveSocket {
     joinRootViews(): boolean;
     redirect(to: any, flash: any, reloadToken: any): void;
     replaceMain(href: any, flash: any, callback?: any, linkRef?: number): void;
-    transitionRemoves(elements: any, callback: any): void;
+    transitionRemoves(elements: any, view: any, callback: any): void;
     isPhxView(el: any): boolean;
     newRootView(el: any, flash: any, liveReferer: any): View;
     owner(childEl: any, callback: any): any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "1.1.31",
+  "version": "1.1.32",
   "description": "The Phoenix LiveView JavaScript client.",
   "license": "MIT",
   "type": "module",
@@ -37,7 +37,7 @@
     "@babel/preset-env": "7.27.2",
     "@babel/preset-typescript": "^7.27.1",
     "@eslint/js": "^9.29.0",
-    "@playwright/test": "^1.56.1",
+    "@playwright/test": "^1.60.0",
     "@types/jest": "^30.0.0",
     "@types/phoenix": "^1.6.6",
     "css.escape": "^1.5.1",

package/priv/static/phoenix_live_view.cjs.js

@@ -650,7 +650,9 @@ var DOM = {
         if (this.once(el, "bind-debounce")) {
           el.addEventListener("blur", () => {
             clearTimeout(this.private(el, THROTTLED));
-            this.triggerCycle(el, DEBOUNCE_TRIGGER);
+            if (asyncFilter()) {
+              this.triggerCycle(el, DEBOUNCE_TRIGGER);
+            }
           });
         }
     }
@@ -2756,7 +2758,7 @@ var DOMPatch = class {
   transitionPendingRemoves() {
     const { pendingRemoves, liveSocket } = this;
     if (pendingRemoves.length > 0) {
-      liveSocket.transitionRemoves(pendingRemoves, () => {
+      liveSocket.transitionRemoves(pendingRemoves, this.view, () => {
         pendingRemoves.forEach((el) => {
           const child = dom_default.firstPhxChild(el);
           if (child) {
@@ -4448,6 +4450,7 @@ var View = class _View {
     if (container) {
       const [tag, attrs] = container;
       this.el = dom_default.replaceRootContainer(this.el, tag, attrs);
+      dom_default.putPrivate(this.el, "view", this);
     }
     this.childJoins = 0;
     this.joinPending = true;
@@ -4530,6 +4533,7 @@ var View = class _View {
   }
   attachTrueDocEl() {
     this.el = dom_default.byId(this.id);
+    dom_default.putPrivate(this.el, "view", this);
     this.el.setAttribute(PHX_ROOT_ID, this.root.id);
   }
   // this is invoked for dead and live views, so we must filter by
@@ -4713,6 +4717,7 @@ var View = class _View {
     rootEl.setAttribute(PHX_SESSION, this.getSession());
     rootEl.setAttribute(PHX_STATIC, this.getStatic());
     rootEl.setAttribute(PHX_PARENT_ID, this.parent ? this.parent.id : null);
+    dom_default.putPrivate(rootEl, "view", this);
     const formsToRecover = (
       // we go over all forms in the new DOM; because this is only the HTML for the current
       // view, we can be sure that all forms are owned by this view:
@@ -5993,7 +5998,7 @@ var LiveSocket = class {
   }
   // public
   version() {
-    return "1.1.31";
+    return "1.1.32";
   }
   isProfileEnabled() {
     return this.sessionStorage.getItem(PHX_LV_PROFILE) === "true";
@@ -6272,11 +6277,12 @@ var LiveSocket = class {
       `[${this.binding("remove")}]`
     ).filter((el) => !dom_default.isChildOfAny(el, stickies));
     const newMainEl = dom_default.cloneNode(this.outgoingMainEl, "");
-    this.main.showLoader(this.loaderTimeout);
-    this.main.destroy();
+    const oldMainView = this.main;
+    oldMainView.showLoader(this.loaderTimeout);
+    oldMainView.destroy();
     this.main = this.newRootView(newMainEl, flash, liveReferer);
     this.main.setRedirect(href);
-    this.transitionRemoves(removeEls);
+    this.transitionRemoves(removeEls, oldMainView);
     this.main.join((joinCount, onDone) => {
       if (joinCount === 1 && this.commitPendingLink(linkRef)) {
         this.requestDOMUpdate(() => {
@@ -6290,7 +6296,7 @@ var LiveSocket = class {
       }
     });
   }
-  transitionRemoves(elements, callback) {
+  transitionRemoves(elements, view, callback) {
     const removeAttr = this.binding("remove");
     const silenceEvents = (e) => {
       e.preventDefault();
@@ -6300,7 +6306,8 @@ var LiveSocket = class {
       for (const event of this.boundEventNames) {
         el.addEventListener(event, silenceEvents, true);
       }
-      this.execJS(el, el.getAttribute(removeAttr), "remove");
+      const e = new CustomEvent("phx:exec", { detail: { sourceElement: el } });
+      js_default.exec(e, "remove", el.getAttribute(removeAttr), view, el);
     });
     this.requestDOMUpdate(() => {
       elements.forEach((el) => {
@@ -6323,7 +6330,7 @@ var LiveSocket = class {
     let view;
     const viewEl = dom_default.closestViewEl(childEl);
     if (viewEl) {
-      view = this.getViewByEl(viewEl);
+      view = dom_default.private(viewEl, "view");
     } else {
       if (!childEl.isConnected) {
         return null;