phoenix_live_view 1.2.0-rc.3 → 1.2.0

package/README.md

@@ -1,6 +1,6 @@
 # Phoenix LiveView
 
-[![Actions Status](https://github.com/phoenixframework/phoenix_live_view/workflows/CI/badge.svg)](https://github.com/phoenixframework/phoenix_live_view/actions?query=workflow%3ACI) [![Hex.pm](https://img.shields.io/hexpm/v/phoenix_live_view.svg)](https://hex.pm/packages/phoenix_live_view) [![Documentation](https://img.shields.io/badge/documentation-gray)](https://hexdocs.pm/phoenix_live_view)
+[![Actions Status](https://github.com/phoenixframework/phoenix_live_view/workflows/CI/badge.svg)](https://github.com/phoenixframework/phoenix_live_view/actions?query=workflow%3ACI) [![Hex.pm](https://img.shields.io/hexpm/v/phoenix_live_view.svg)](https://hex.pm/packages/phoenix_live_view) [![Documentation](https://img.shields.io/badge/documentation-gray)](https://phoenix-live-view.hexdocs.pm)
 
 Phoenix LiveView enables rich, real-time user experiences with server-rendered HTML.
 
@@ -34,7 +34,7 @@ model while keeping your code closer to your data (and ultimately your source of
 
   * **Diffs over the wire:** Instead of sending "HTML over the wire", LiveView knows exactly which parts of your templates change, sending minimal diffs over the wire after the initial render, reducing latency and bandwidth usage. The client leverages this information and optimizes the browser with 5-10x faster updates, compared to solutions that replace whole HTML fragments.
 
-  * **Live form validation:** LiveView supports real-time form validation out of the box. Create rich user interfaces with features like uploads, nested inputs, and [specialized recovery](https://hexdocs.pm/phoenix_live_view/form-bindings.html#recovery-following-crashes-or-disconnects).
+  * **Live form validation:** LiveView supports real-time form validation out of the box. Create rich user interfaces with features like uploads, nested inputs, and [specialized recovery](https://phoenix-live-view.hexdocs.pm/form-bindings.html#recovery-following-crashes-or-disconnects).
 
   * **File uploads:** Real-time file uploads with progress indicators and image previews. Process your uploads on the fly or submit them to your desired cloud service.
 
@@ -52,9 +52,9 @@ model while keeping your code closer to your data (and ultimately your source of
 
 ## Learning
 
-Check our [comprehensive docs](https://hexdocs.pm/phoenix_live_view) to get started.
+Check our [comprehensive docs](https://phoenix-live-view.hexdocs.pm) to get started.
 
-The Phoenix framework documentation also keeps a list of [community resources](https://hexdocs.pm/phoenix/community.html), including books, videos, and other materials, and some include LiveView too.
+The Phoenix framework documentation also keeps a list of [community resources](https://phoenix.hexdocs.pm/community.html), including books, videos, and other materials, and some include LiveView too.
 
 Also follow these announcements from the Phoenix team on LiveView for more examples and rationale:
 
@@ -103,7 +103,7 @@ which provides quick times for "First Meaningful Paint", in addition to
 helping search and indexing engines.
 
 Then LiveView uses a persistent connection between client and server.
-This allows LiveView applications to react faster to user events as
+This allows LiveView applications to react faster to user events, as
 there is less work to be done and less data to be sent compared to
 stateless requests that have to authenticate, decode, load, and encode
 data on every request.

package/assets/js/phoenix_live_view/README.md

@@ -1,3 +1,3 @@
 ## LiveView JavaScript Client
 
-This is the documentation for the LiveView JavaScript client. It is a more low-level API documentation for advanced users. For a higher-level overview, [see the page on JavaScript interoperability](https://hexdocs.pm/phoenix_live_view/js-interop.html) instead.
+This is the documentation for the LiveView JavaScript client. It is a more low-level API documentation for advanced users. For a higher-level overview, [see the page on JavaScript interoperability](https://phoenix-live-view.hexdocs.pm/js-interop.html) instead.

package/assets/js/phoenix_live_view/index.ts

@@ -1,9 +1,9 @@
 /*
  * This is the documentation for the LiveView JavaScript client.
  * It is a more low-level API documentation for advanced users.
- * For a higher-level overview, [see the page on JavaScript interoperability](https://hexdocs.pm/phoenix_live_view/js-interop.html) instead.
+ * For a higher-level overview, [see the page on JavaScript interoperability](https://phoenix-live-view.hexdocs.pm/js-interop.html) instead.
  *
- * The main documentation can be found at `https://hexdocs.pm/phoenix_live_view`.
+ * The main documentation can be found at `https://phoenix-live-view.hexdocs.pm`.
  *
  * @packageDocumentation
  */

package/assets/js/phoenix_live_view/live_socket.ts

@@ -92,7 +92,7 @@ export interface LiveSocketOptions {
   /**
    * Callbacks for LiveView hooks.
    *
-   * See [Client hooks via `phx-hook`](https://hexdocs.pm/phoenix_live_view/js-interop.html#client-hooks-via-phx-hook) for more information.
+   * See [Client hooks via `phx-hook`](https://phoenix-live-view.hexdocs.pm/js-interop.html#client-hooks-via-phx-hook) for more information.
    */
   hooks?: HooksOptions;
   /** Callbacks for LiveView uploaders. */
@@ -425,7 +425,7 @@ export default class LiveSocket {
    * Enables debugging.
    *
    * When debugging is enabled, the LiveView client will log debug information to the console.
-   * See [Debugging client events](https://hexdocs.pm/phoenix_live_view/js-interop.html#debugging-client-events) for more information.
+   * See [Debugging client events](https://phoenix-live-view.hexdocs.pm/js-interop.html#debugging-client-events) for more information.
    */
   enableDebug(): void {
     this.sessionStorage.setItem(PHX_LV_DEBUG, "true");
@@ -458,7 +458,7 @@ export default class LiveSocket {
    * Enables latency simulation.
    *
    * When latency simulation is enabled, the LiveView client will add a delay to requests and responses from the server.
-   * See [Simulating Latency](https://hexdocs.pm/phoenix_live_view/js-interop.html#simulating-latency) for more information.
+   * See [Simulating Latency](https://phoenix-live-view.hexdocs.pm/js-interop.html#simulating-latency) for more information.
    */
   enableLatencySim(upperBoundMs: number): void {
     this.enableDebug();
@@ -547,7 +547,7 @@ export default class LiveSocket {
   /**
    * Executes an encoded JS command, targeting the given element.
    *
-   * See [`Phoenix.LiveView.JS`](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.JS.html) for more information.
+   * See [`Phoenix.LiveView.JS`](https://phoenix-live-view.hexdocs.pm/Phoenix.LiveView.JS.html) for more information.
    */
   execJS(
     el: Element,
@@ -562,7 +562,7 @@ export default class LiveSocket {
    * Returns an object with methods to manipulate the DOM and execute JavaScript.
    * The applied changes integrate with server DOM patching.
    *
-   * See [JavaScript interoperability](https://hexdocs.pm/phoenix_live_view/js-interop.html) for more information.
+   * See [JavaScript interoperability](https://phoenix-live-view.hexdocs.pm/js-interop.html) for more information.
    */
   js(): LiveSocketJSCommands {
     return jsCommands(this, "js");

package/assets/js/phoenix_live_view/view.ts

@@ -1152,6 +1152,10 @@ export default class View {
   }
 
   onJoinError(resp) {
+    if (resp.events) {
+      this.liveSocket.dispatchEvents(resp.events);
+    }
+
     if (resp.reason === "reload") {
       this.log("error", () => [
         `failed mount with ${resp.status}. Falling back to page reload`,

package/assets/js/phoenix_live_view/view_hook.ts

@@ -84,10 +84,12 @@ export interface HookInterface<E extends HTMLElement = HTMLElement> {
    * Use the {@link pushEvent | promise-returning version} to handle errors.
    *
    * @param event - The event name.
-   * @param payload - The payload to send to the server. Defaults to an empty object.
+   * @param payload - The payload to send to the server. Must be a serializable
+   * value (typically JSON-serializable, depends on the Socket configuration).
+   * Defaults to an empty object.
    * @param onReply - A callback to handle the server's reply.
    */
-  pushEvent(event: string, payload: any, onReply: OnReply): void;
+  pushEvent(event: string, payload: unknown, onReply: OnReply): void;
   /**
    * Pushes an event to the server and returns a Promise that resolves with the server's reply.
    *
@@ -95,10 +97,12 @@ export interface HookInterface<E extends HTMLElement = HTMLElement> {
    * 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.
+   * @param [payload] - The payload to send to the server. Must be a serializable
+   * value (typically JSON-serializable, depends on the Socket configuration).
+   * Defaults to an empty object.
    * @returns A promise that fulfills or rejects with the server's reply.
    */
-  pushEvent(event: string, payload?: any): Promise<any>;
+  pushEvent(event: string, payload?: unknown): Promise<any>;
 
   /**
    * Pushes a targeted event to the server and invokes a callback with the server's reply.
@@ -115,13 +119,15 @@ export interface HookInterface<E extends HTMLElement = HTMLElement> {
    *
    * @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 payload - The payload to send to the server. Must be a serializable
+   * value (typically JSON-serializable, depends on the Socket configuration).
+   * Defaults to an empty object.
    * @param onReply - A callback to handle the server's reply.
    */
   pushEventTo(
     selectorOrTarget: PhxTarget,
     event: string,
-    payload: object,
+    payload: unknown,
     onReply: OnReply,
   ): void;
   /**
@@ -142,13 +148,15 @@ export interface HookInterface<E extends HTMLElement = HTMLElement> {
    *
    * @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 [payload] - The payload to send to the server. Must be a serializable
+   * value (typically JSON-serializable, depends on the Socket configuration).
+   * Defaults to an empty object.
    * @returns A promise that resolves when the event has been handled by all targets.
    */
   pushEventTo(
     selectorOrTarget: PhxTarget,
     event: string,
-    payload?: object,
+    payload?: unknown,
   ): Promise<PromiseSettledResult<{ reply: any; ref: number }>[]>;
 
   /**
@@ -445,11 +453,11 @@ export class ViewHook<E extends HTMLElement = HTMLElement>
     };
   }
 
-  pushEvent(event: string, payload: any, onReply: OnReply): void;
-  pushEvent(event: string, payload?: any): Promise<any>;
+  pushEvent(event: string, payload: unknown, onReply: OnReply): void;
+  pushEvent(event: string, payload?: unknown): Promise<any>;
   pushEvent(
     event: string,
-    payload?: any,
+    payload?: unknown,
     onReply?: OnReply,
   ): Promise<any> | void {
     const promise = this.__view().pushHookEvent(
@@ -471,18 +479,18 @@ export class ViewHook<E extends HTMLElement = HTMLElement>
   pushEventTo(
     selectorOrTarget: PhxTarget,
     event: string,
-    payload: object,
+    payload: unknown,
     onReply: OnReply,
   ): void;
   pushEventTo(
     selectorOrTarget: PhxTarget,
     event: string,
-    payload?: object,
+    payload?: unknown,
   ): Promise<PromiseSettledResult<{ reply: any; ref: number }>[]>;
   pushEventTo(
     selectorOrTarget: PhxTarget,
     event: string,
-    payload?: object,
+    payload?: unknown,
     onReply?: OnReply,
   ): Promise<PromiseSettledResult<{ reply: any; ref: number }>[]> | void {
     if (onReply === undefined) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "1.2.0-rc.3",
+  "version": "1.2.0",
   "description": "The Phoenix LiveView JavaScript client.",
   "license": "MIT",
   "type": "module",

package/priv/static/phoenix_live_view.cjs.js

@@ -5021,6 +5021,9 @@ var View = class _View {
     });
   }
   onJoinError(resp) {
+    if (resp.events) {
+      this.liveSocket.dispatchEvents(resp.events);
+    }
     if (resp.reason === "reload") {
       this.log("error", () => [
         `failed mount with ${resp.status}. Falling back to page reload`,
@@ -6086,7 +6089,7 @@ var LiveSocket = class {
    * Returns the version of the LiveView client.
    */
   version() {
-    return "1.2.0-rc.3";
+    return "1.2.0";
   }
   /**
    * Returns true if profiling is enabled. See {@link enableProfiling} and {@link disableProfiling}.
@@ -6110,7 +6113,7 @@ var LiveSocket = class {
    * Enables debugging.
    *
    * When debugging is enabled, the LiveView client will log debug information to the console.
-   * See [Debugging client events](https://hexdocs.pm/phoenix_live_view/js-interop.html#debugging-client-events) for more information.
+   * See [Debugging client events](https://phoenix-live-view.hexdocs.pm/js-interop.html#debugging-client-events) for more information.
    */
   enableDebug() {
     this.sessionStorage.setItem(PHX_LV_DEBUG, "true");
@@ -6139,7 +6142,7 @@ var LiveSocket = class {
    * Enables latency simulation.
    *
    * When latency simulation is enabled, the LiveView client will add a delay to requests and responses from the server.
-   * See [Simulating Latency](https://hexdocs.pm/phoenix_live_view/js-interop.html#simulating-latency) for more information.
+   * See [Simulating Latency](https://phoenix-live-view.hexdocs.pm/js-interop.html#simulating-latency) for more information.
    */
   enableLatencySim(upperBoundMs) {
     this.enableDebug();
@@ -6214,7 +6217,7 @@ var LiveSocket = class {
   /**
    * Executes an encoded JS command, targeting the given element.
    *
-   * See [`Phoenix.LiveView.JS`](https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.JS.html) for more information.
+   * See [`Phoenix.LiveView.JS`](https://phoenix-live-view.hexdocs.pm/Phoenix.LiveView.JS.html) for more information.
    */
   execJS(el, encodedJS, eventType = null) {
     const e = new CustomEvent("phx:exec", { detail: { sourceElement: el } });
@@ -6224,7 +6227,7 @@ var LiveSocket = class {
    * Returns an object with methods to manipulate the DOM and execute JavaScript.
    * The applied changes integrate with server DOM patching.
    *
-   * See [JavaScript interoperability](https://hexdocs.pm/phoenix_live_view/js-interop.html) for more information.
+   * See [JavaScript interoperability](https://phoenix-live-view.hexdocs.pm/js-interop.html) for more information.
    */
   js() {
     return js_commands_default(this, "js");