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

sodapopcan

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

6 comments

/phoenix #javascript #hooks

1 4922 6

2021-07-07 04:09:21 UTC

Showing Posts 1 to 6

Show Best Posts
Show All (oldest first)
Show All (newest first)

sodapopcan

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.

Post #1

sfusato

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

Post #2

sodapopcan

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

Post #3

Lango

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:

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

Is that correct? Or am I way off base here

Post #4

cmo

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,
    //   });
    // });

Post #5