phoenix_live_view 1.1.30 → 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/entry_uploader.js

@@ -30,7 +30,7 @@ export default class EntryUploader {
     this.uploadChannel
       .join()
       .receive("ok", (_data) => this.readNextChunk())
-      .receive("error", (reason) => this.error(reason));
+      .receive("error", ({ reason }) => this.error(reason));
   }
 
   isDone() {

package/assets/js/phoenix_live_view/js_commands.ts

@@ -1,5 +1,6 @@
 import JS from "./js";
 import LiveSocket from "./live_socket";
+import { ensureSameOrigin } from "./utils";
 
 type Transition = string | string[];
 
@@ -346,6 +347,7 @@ export default (
       });
     },
     navigate(href, opts = {}) {
+      ensureSameOrigin(href, "navigate");
       const customEvent = new CustomEvent("phx:exec");
       liveSocket.historyRedirect(
         customEvent,
@@ -356,6 +358,7 @@ export default (
       );
     },
     patch(href, opts = {}) {
+      ensureSameOrigin(href, "patch");
       const customEvent = new CustomEvent("phx:exec");
       liveSocket.pushHistoryPatch(
         customEvent,

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

@@ -4,6 +4,27 @@ import EntryUploader from "./entry_uploader";
 
 export const logError = (msg, obj) => console.error && console.error(msg, obj);
 
+// Live navigation can only stay within the current origin, as it joins the
+// 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) => {
+  let url;
+  try {
+    url = new URL(href, window.location.href);
+  } catch {
+    throw new Error(
+      `expected ${kind} destination to be a valid URL, got: ${href}`,
+    );
+  }
+  if (url.origin !== window.location.origin) {
+    throw new Error(
+      `cannot ${kind} to "${href}" because its origin does not match the ` +
+        `current origin "${window.location.origin}". Use window.location directly for cross-origin navigation.`,
+    );
+  }
+};
+
 export const isCid = (cid) => {
   const type = typeof cid;
   return type === "number" || (type === "string" && /^(0|[1-9]\d*)$/.test(cid));

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/phoenix_live_view/view_hook.ts

@@ -73,38 +73,45 @@ export interface HookInterface<E extends HTMLElement = HTMLElement> {
   js(): HookJSCommands;
 
   /**
-   * Pushes an event to the server.
+   * Pushes an event to the server and invokes a callback with the server's reply.
    *
-   * @param event - The event name.
-   * @param [payload] - The payload to send to the server. Defaults to an empty object.
-   * @param [onReply] - A callback to handle the server's reply.
+   * **Note:** this version silently ignores push errors.
+   * Use the {@link pushEvent | promise-returning version} to handle errors.
    *
-   * When onReply is not provided, the method returns a Promise that
-   * When onReply is provided, the method returns void.
+   * @param event - The event name.
+   * @param payload - The payload to send to the server. Defaults to an empty object.
+   * @param onReply - A callback to handle the server's reply.
    */
   pushEvent(event: string, payload: any, onReply: OnReply): void;
+  /**
+   * Pushes an event to the server and returns a Promise that resolves with the server's reply.
+   *
+   * The promise will be rejected in case of errors
+   * such as a disconnected state, timeout, or the server rejecting the event.
+   *
+   * @param event - The event name.
+   * @param [payload] - The payload to send to the server. Defaults to an empty object.
+   * @returns A promise that fulfills or rejects with the server's reply.
+   */
   pushEvent(event: string, payload?: any): Promise<any>;
 
   /**
-   * Pushed a targeted event to the server.
+   * Pushes a targeted event to the server and invokes a callback with the server's reply.
    *
    * It sends the event to the LiveComponent or LiveView the `selectorOrTarget` is defined in,
    * where its value can be either a query selector, an actual DOM element, or a CID (component id)
    * returned by the `@myself` assign.
    *
-   * If the query selector returns more than one element it will send the event to all of them,
-   * even if all the elements are in the same LiveComponent or LiveView. Because of this,
-   * if no callback is passed, a promise is returned that matches the return value of
-   * [`Promise.allSettled()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled#return_value).
-   * Individual fulfilled values are of the format `{ reply, ref }`, where `reply` is the server's reply.
+   * If the selector matches multiple elements, the event is sent to all of them,
+   * even if they belong to the same LiveComponent or LiveView.
+   *
+   * **Note:** this version silently ignores push errors.
+   * Use the {@link pushEventTo | promise-returning version} to handle errors.
    *
    * @param selectorOrTarget - The selector, element, or CID to target.
    * @param event - The event name.
-   * @param [payload] - The payload to send to the server. Defaults to an empty object.
-   * @param [onReply] - A callback to handle the server's reply.
-   *
-   * When onReply is not provided, the method returns a Promise.
-   * When onReply is provided, the method returns void.
+   * @param payload - The payload to send to the server. Defaults to an empty object.
+   * @param onReply - A callback to handle the server's reply.
    */
   pushEventTo(
     selectorOrTarget: PhxTarget,
@@ -112,6 +119,27 @@ export interface HookInterface<E extends HTMLElement = HTMLElement> {
     payload: object,
     onReply: OnReply,
   ): void;
+  /**
+   * Pushes a targeted event to the server and returns a Promise that resolves with the server's reply.
+   *
+   * It sends the event to the LiveComponent or LiveView the `selectorOrTarget` is defined in,
+   * where its value can be either a query selector, an actual DOM element, or a CID (component id)
+   * returned by the `@myself` assign.
+   *
+   * If the selector matches multiple elements, the event is sent to all of them,
+   * even if they belong to the same LiveComponent or LiveView.
+   * Because of this, it returns a single promise that matches the return value of
+   * [`Promise.allSettled()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled#return_value).
+   * Individual fulfilled values are of the format `{ reply, ref }`, where `reply` is the server's reply.
+   *
+   * The individual promises will be rejected in case of errors
+   * such as a disconnected state, timeout, or the server rejecting the event.
+   *
+   * @param selectorOrTarget - The selector, element, or CID to target.
+   * @param event - The event name.
+   * @param [payload] - The payload to send to the server. Defaults to an empty object.
+   * @returns A promise that resolves when the event has been handled by all targets.
+   */
   pushEventTo(
     selectorOrTarget: PhxTarget,
     event: string,

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/assets/js/types/utils.d.ts

@@ -1,6 +1,7 @@
 export function detectDuplicateIds(): void;
 export function detectInvalidStreamInserts(inserts: any): void;
 export function logError(msg: any, obj: any): void;
+export function ensureSameOrigin(href: any, kind: any): void;
 export function isCid(cid: any): boolean;
 export function debug(view: any, kind: any, msg: any, obj: any): void;
 export function closure(val: any): any;

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

@@ -59,39 +59,67 @@ export interface HookInterface<E extends HTMLElement = HTMLElement> {
      */
     js(): HookJSCommands;
     /**
-     * Pushes an event to the server.
+     * Pushes an event to the server and invokes a callback with the server's reply.
      *
-     * @param event - The event name.
-     * @param [payload] - The payload to send to the server. Defaults to an empty object.
-     * @param [onReply] - A callback to handle the server's reply.
+     * **Note:** this version silently ignores push errors.
+     * Use the {@link pushEvent | promise-returning version} to handle errors.
      *
-     * When onReply is not provided, the method returns a Promise that
-     * When onReply is provided, the method returns void.
+     * @param event - The event name.
+     * @param payload - The payload to send to the server. Defaults to an empty object.
+     * @param onReply - A callback to handle the server's reply.
      */
     pushEvent(event: string, payload: any, onReply: OnReply): void;
+    /**
+     * Pushes an event to the server and returns a Promise that resolves with the server's reply.
+     *
+     * The promise will be rejected in case of errors
+     * such as a disconnected state, timeout, or the server rejecting the event.
+     *
+     * @param event - The event name.
+     * @param [payload] - The payload to send to the server. Defaults to an empty object.
+     * @returns A promise that fulfills or rejects with the server's reply.
+     */
     pushEvent(event: string, payload?: any): Promise<any>;
     /**
-     * Pushed a targeted event to the server.
+     * Pushes a targeted event to the server and invokes a callback with the server's reply.
+     *
+     * It sends the event to the LiveComponent or LiveView the `selectorOrTarget` is defined in,
+     * where its value can be either a query selector, an actual DOM element, or a CID (component id)
+     * returned by the `@myself` assign.
+     *
+     * If the selector matches multiple elements, the event is sent to all of them,
+     * even if they belong to the same LiveComponent or LiveView.
+     *
+     * **Note:** this version silently ignores push errors.
+     * Use the {@link pushEventTo | promise-returning version} to handle errors.
+     *
+     * @param selectorOrTarget - The selector, element, or CID to target.
+     * @param event - The event name.
+     * @param payload - The payload to send to the server. Defaults to an empty object.
+     * @param onReply - A callback to handle the server's reply.
+     */
+    pushEventTo(selectorOrTarget: PhxTarget, event: string, payload: object, onReply: OnReply): void;
+    /**
+     * Pushes a targeted event to the server and returns a Promise that resolves with the server's reply.
      *
      * It sends the event to the LiveComponent or LiveView the `selectorOrTarget` is defined in,
      * where its value can be either a query selector, an actual DOM element, or a CID (component id)
      * returned by the `@myself` assign.
      *
-     * If the query selector returns more than one element it will send the event to all of them,
-     * even if all the elements are in the same LiveComponent or LiveView. Because of this,
-     * if no callback is passed, a promise is returned that matches the return value of
+     * If the selector matches multiple elements, the event is sent to all of them,
+     * even if they belong to the same LiveComponent or LiveView.
+     * Because of this, it returns a single promise that matches the return value of
      * [`Promise.allSettled()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled#return_value).
      * Individual fulfilled values are of the format `{ reply, ref }`, where `reply` is the server's reply.
      *
+     * The individual promises will be rejected in case of errors
+     * such as a disconnected state, timeout, or the server rejecting the event.
+     *
      * @param selectorOrTarget - The selector, element, or CID to target.
      * @param event - The event name.
      * @param [payload] - The payload to send to the server. Defaults to an empty object.
-     * @param [onReply] - A callback to handle the server's reply.
-     *
-     * When onReply is not provided, the method returns a Promise.
-     * When onReply is provided, the method returns void.
+     * @returns A promise that resolves when the event has been handled by all targets.
      */
-    pushEventTo(selectorOrTarget: PhxTarget, event: string, payload: object, onReply: OnReply): void;
     pushEventTo(selectorOrTarget: PhxTarget, event: string, payload?: object): Promise<PromiseSettledResult<{
         reply: any;
         ref: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "1.1.30",
+  "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

@@ -172,7 +172,7 @@ var EntryUploader = class {
   }
   upload() {
     this.uploadChannel.onError((reason) => this.error(reason));
-    this.uploadChannel.join().receive("ok", (_data) => this.readNextChunk()).receive("error", (reason) => this.error(reason));
+    this.uploadChannel.join().receive("ok", (_data) => this.readNextChunk()).receive("error", ({ reason }) => this.error(reason));
   }
   isDone() {
     return this.offset >= this.entry.file.size;
@@ -215,6 +215,21 @@ var EntryUploader = class {
 
 // js/phoenix_live_view/utils.js
 var logError = (msg, obj) => console.error && console.error(msg, obj);
+var ensureSameOrigin = (href, kind) => {
+  let url;
+  try {
+    url = new URL(href, window.location.href);
+  } catch {
+    throw new Error(
+      `expected ${kind} destination to be a valid URL, got: ${href}`
+    );
+  }
+  if (url.origin !== window.location.origin) {
+    throw new Error(
+      `cannot ${kind} to "${href}" because its origin does not match the current origin "${window.location.origin}". Use window.location directly for cross-origin navigation.`
+    );
+  }
+};
 var isCid = (cid) => {
   const type = typeof cid;
   return type === "number" || type === "string" && /^(0|[1-9]\d*)$/.test(cid);
@@ -635,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);
+            }
           });
         }
     }
@@ -2741,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) {
@@ -3882,6 +3899,7 @@ var js_commands_default = (liveSocket, eventType) => {
       });
     },
     navigate(href, opts = {}) {
+      ensureSameOrigin(href, "navigate");
       const customEvent = new CustomEvent("phx:exec");
       liveSocket.historyRedirect(
         customEvent,
@@ -3892,6 +3910,7 @@ var js_commands_default = (liveSocket, eventType) => {
       );
     },
     patch(href, opts = {}) {
+      ensureSameOrigin(href, "patch");
       const customEvent = new CustomEvent("phx:exec");
       liveSocket.pushHistoryPatch(
         customEvent,
@@ -4431,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;
@@ -4513,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
@@ -4696,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:
@@ -5976,7 +5998,7 @@ var LiveSocket = class {
   }
   // public
   version() {
-    return "1.1.30";
+    return "1.1.32";
   }
   isProfileEnabled() {
     return this.sessionStorage.getItem(PHX_LV_PROFILE) === "true";
@@ -6255,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(() => {
@@ -6273,7 +6296,7 @@ var LiveSocket = class {
       }
     });
   }
-  transitionRemoves(elements, callback) {
+  transitionRemoves(elements, view, callback) {
     const removeAttr = this.binding("remove");
     const silenceEvents = (e) => {
       e.preventDefault();
@@ -6283,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) => {
@@ -6306,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;