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

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