Passing assigns to LiveView JS Hook's `mounted` callback

Is there a way to pass initial values to a LiveView JS hook from the server?

Here’s my example LiveView:

defmodule FooWeb.PageLive do
  use FooWeb, :live_view

  @impl true
  def mount(_params, _session, socket) do
    {:ok, assign(socket, foo_assigns_i_want_to_reference_in_my_hook: %{bar: "hi"})}
  end

  @impl true
  def render(assigns) do
    ~L"""
    <div phx-hook="FooDomNode"></div>
    """
  end
end

And here is my JS hook:

let Hook = {}
Hook.FooDomNode = {
  mounted() {
    // Is there anyway I can access `foo_assigns_i_want_to_reference_in_my_hook` in here?
  }
}

// ... More JS boilerplate that properly passes `Hook` to `new LiveSocket(...)` and connects

As the commented part of the JS hook states: Is there anyway to reference the assigns of the LiveView mount in the JS hook’s mounted callback?

Thank you!!

I’m going to preemptively add: I’m wondering if there is a cleaner and more official way to do this than to serialize the assigns in a data attribute on the hook’s node.

There was recently added push_event/3 in 0.14.0 for pushing events and data from the server to the client.

1 Like

Oh, great, thank you! It took me a minute to realize I was on v1.13 of LiveView (I was conflating Phoenix and LiveView versions).