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

Phoenix Forum Questions / Help
, ,
#1

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!!

#2

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.

#3

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

2 Likes
#4

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).

#5

How exactly would this work? I’m assuming the answer to the question is ‘no’ you can’t access it from the mounted event?

In my mind I would need to do something like this:

  1. Liveview loads
  2. Mounted callback is triggered
  3. Server somehow knows that mounted was called (perhaps by mounted sending a message?)
  4. Server pushes an event to everyone

Is that correct? Or am I way off base here

#6

There are a few ways of communicating back and forth. The aforementioned push_event, the aforementioned assigning to a data attribute and reading it, e.g.

  def render(assigns) do
    ~L"""
      <div
        id="colorpicker-<%= @id %>"
        phx-hook="ColorPicker"
        phx-update="ignore"
        data-target="<%= @target %>"
        data-value="<%= @color %>"
        class="<%= @class %>">
        <input id="colorpicker-<%= @id %>-input" type="color" name="<%= @name %>">
      </div>
    """
  end

and hook:

Hooks.ColorPicker {
  value() {
    return this.el.dataset.value;
  },
  mounted() {
    this.picker = new ColorPicker({
      value: this.value(),
      enableOpacity: false,
      mode: "Palette",
    });

    const target = this.el.getAttribute("id") + "-input";
    this.picker.appendTo("#" + target);
  },
  updated() {
    this.picker.value = this.value();
  },
};

You see the data-value attribute in the render function is picked up in the value() function on the hook. data-value in the Hook’s tag is picked up by this.el.dataset.value.

See Phoenix LiveDashboard chart code which does this.

You can then send things back to the server with pushEvent and pushEventTo if you need.

Something like this:

    // listen to event: color changed in picker
    // this.picker.addEventListener("change", (e) => {
    //   this.pushEventTo(this.el.dataset.target, "set_color", {
    //     id: this.el.getAttribute("id"),
    //     color: e.value,
    //   });
    // });
#7

Thanks for that cmo. Apologies for taking so long to reply, I was expecting to be email notified that someone replied.

I had a large amount of trouble getting complex objects to pass in via the data-value.

Instead I think I’m going to trigger a resend to everyone when a new client joins. That would be acceptable for my scenario