phoenix_live_view 1.1.29 → 1.1.31

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/hooks.js

@@ -264,7 +264,7 @@ Hooks.InfiniteScroll = {
   updated() {
     // Check if the scroll container still exists
     // https://github.com/phoenixframework/phoenix_live_view/issues/4169.
-    if (!this.scrollContainer.isConnected) {
+    if (this.scrollContainer && !this.scrollContainer.isConnected) {
       this.destroyed();
       this.mounted();
     }

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/utils.js

@@ -4,6 +4,30 @@ 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_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/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.29",
+  "version": "1.1.31",
   "description": "The Phoenix LiveView JavaScript client.",
   "license": "MIT",
   "type": "module",

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);
@@ -1459,7 +1474,7 @@ Hooks.InfiniteScroll = {
     }
   },
   updated() {
-    if (!this.scrollContainer.isConnected) {
+    if (this.scrollContainer && !this.scrollContainer.isConnected) {
       this.destroyed();
       this.mounted();
     }
@@ -3882,6 +3897,7 @@ var js_commands_default = (liveSocket, eventType) => {
       });
     },
     navigate(href, opts = {}) {
+      ensureSameOrigin(href, "navigate");
       const customEvent = new CustomEvent("phx:exec");
       liveSocket.historyRedirect(
         customEvent,
@@ -3892,6 +3908,7 @@ var js_commands_default = (liveSocket, eventType) => {
       );
     },
     patch(href, opts = {}) {
+      ensureSameOrigin(href, "patch");
       const customEvent = new CustomEvent("phx:exec");
       liveSocket.pushHistoryPatch(
         customEvent,
@@ -5976,7 +5993,7 @@ var LiveSocket = class {
   }
   // public
   version() {
-    return "1.1.29";
+    return "1.1.31";
   }
   isProfileEnabled() {
     return this.sessionStorage.getItem(PHX_LV_PROFILE) === "true";