LiveView API - mount

mount is called by the LiveViewJS runtime when your LiveView is first mounted (over HTTP and Websocket). mount is where you initialize the context (i.e. state) of your LiveView (using socket.assign) and otherwise configure the LiveView. The webserver integrations automatically make session data available via the session which can be useful if you need to use data from the user's session. Don't worry about params for now. We'll cover that later.

mount Signature

mount(
  socket: LiveViewSocket<TContext, TInfos>,
  session: Partial<SessionData>,
  params: LiveViewMountParams
): void | Promise<void>;

As you can see in the counterLiveView.ts below, mount initializes the count to 0 (and doesn't use the session or params):

counterLiveView.ts

import { createLiveView, html } from "liveviewjs";
/**
 * A basic counter that increments and decrements a number.
 */
export const counterLiveView = createLiveView<
  { count: number }, // Define LiveView Context / State
  { type: "increment" } | { type: "decrement" } // Define LiveView Events
>({
  // Setup / initialize the LiveView Context (i.e.,  set count to 0)
  mount: (socket) => {
    socket.assign({ count: 0 });
  },
  // Handle incoming increment and decrement events from User input
  handleEvent: (event, socket) => {
    const { count } = socket.context;
    switch (event.type) {
      case "increment":
        socket.assign({ count: count + 1 });
        break;
      case "decrement":
        socket.assign({ count: count - 1 });
        break;
    }
  },
  // Renders the Counter View based on the current Context / State
  render: (context) => {
    const { count } = context;
    return html`
      <div>
        <h1>Count is: ${count}</h1>
        <button phx-click="decrement">-</button>
        <button phx-click="increment">+</button>
      </div>
    `;
  },
});

info

The LiveViewSocket is passed into all methods except for render. LiveViewSocket is the swiss army knife of LiveViewJS. We will cover its API in more detail shortly.