phoenix_live_view 1.2.0 → 1.2.1

package/assets/js/phoenix_live_view/dom.ts

@@ -411,7 +411,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.ts

@@ -792,7 +792,7 @@ export default class DOMPatch {
   private 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.ts

@@ -823,12 +823,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(() => {
@@ -845,7 +848,7 @@ export default class LiveSocket {
   }
 
   /** @internal */
-  transitionRemoves(elements, callback?) {
+  transitionRemoves(elements, view: View, callback?) {
     const removeAttr = this.binding("remove");
     const silenceEvents = (e) => {
       e.preventDefault();
@@ -857,7 +860,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 in case the element is re-used
     // and call caller's callback as soon as we are done with transitions
@@ -885,12 +889,15 @@ export default class LiveSocket {
 
   /** @internal */
   owner(childEl: Element, callback?: (view: View) => any) {
-    let view: View;
+    let view: View | undefined;
     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/view.ts

@@ -408,6 +408,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;
@@ -516,7 +517,10 @@ export default class View {
     if (!el) {
       throw new Error("unable to find root element for view");
     }
+    // child views are initially bound to an element inside the join HTML
+    // fragment (see onJoinComplete), so the binding must move to the real el
     this.el = el;
+    DOM.putPrivate(this.el, "view", this);
     this.el.setAttribute(PHX_ROOT_ID, this.root.id);
   }
 
@@ -746,6 +750,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;
@@ -753,6 +758,7 @@ export default class View {
     rootEl.setAttribute(PHX_SESSION, this.getSession());
     rootEl.setAttribute(PHX_STATIC, this.getStatic() ?? "");
     this.parent && rootEl.setAttribute(PHX_PARENT_ID, this.parent.id);
+    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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "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.59.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

@@ -671,7 +671,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);
+            }
           });
         }
     }
@@ -2825,7 +2827,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) {
@@ -4453,6 +4455,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;
@@ -4539,6 +4542,7 @@ var View = class _View {
       throw new Error("unable to find root element for view");
     }
     this.el = el;
+    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
@@ -4727,6 +4731,7 @@ var View = class _View {
     rootEl.setAttribute(PHX_SESSION, this.getSession());
     rootEl.setAttribute(PHX_STATIC, this.getStatic() ?? "");
     this.parent && rootEl.setAttribute(PHX_PARENT_ID, this.parent.id);
+    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:
@@ -6089,7 +6094,7 @@ var LiveSocket = class {
    * Returns the version of the LiveView client.
    */
   version() {
-    return "1.2.0";
+    return "1.2.1";
   }
   /**
    * Returns true if profiling is enabled. See {@link enableProfiling} and {@link disableProfiling}.
@@ -6442,11 +6447,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(() => {
@@ -6461,7 +6467,7 @@ var LiveSocket = class {
     });
   }
   /** @internal */
-  transitionRemoves(elements, callback) {
+  transitionRemoves(elements, view, callback) {
     const removeAttr = this.binding("remove");
     const silenceEvents = (e) => {
       e.preventDefault();
@@ -6471,7 +6477,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) => {
@@ -6497,7 +6504,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;