Push JS Commands to the client

Phoenix Forum Questions / Help
,
1

I’d like to do sth in the line of

JS.push_to_client(
  socket, 
  JS.set_attribute({"some-attr", "some-value"}, to: "#some-id")}
)

What would be the best way to accomplish that?

Background

I try to get webcomponents to work with LV.
One of the major pain points are attributes that are changed by the components, most common example is sth like @open for a drawer.

So it’s not ideal to do

~H"""
<wc-drawer open={@is_open} ... />
"""

because

  1. If the the drawer component changes the open-state itself, it will be overwritten with the next LV-update. This can be fixed in onBeforeElUpdated for example but it gets messy
  2. @is-open would have to be in the assigns, but it’s not really application state. It’s rather the result of the imperative drawer.open(). Also there would have to be an @is_open for each WC used.

So I think the best way would be to just command the drawer to open and forget about it afterwards.

2

There is push_event/3 which you can use either with a hook or a global event listener.

If you use a hook, you can use the handleEvent function to set the attribute.

const AttributeHook = {
  mounted() {
    this.handleEvent("set_some_attr", data => {
      this.el.setAttribute(data.attr_name, data.value)
    }
  }
}

def mount(socket) do
  socket = push_event(socket, "set_some_attr", %{ attr_name: "foo", value: "bar" })
  {:ok, socket}
end

def render(assigns) do
  ~H"""
  <wc-drawer phx-hook="AttributeHook" />
  """
end

Or if you just want to do it on mount and not on a server event:

def render(assigns) do
  ~H"""
  <wc-drawer phx-mounted={JS.set_attribute({"some-attr", "some-value"}, to: "#some-id")} />
  """
end

Why does is_open needs to be a server state?

1 Like
3

Thanks, I knew that actually. I did to much JS the last days, my head hurts. :dizzy_face:

It does not. But if I set it in a function-component it has to be in assigns.
Say sth is happening in the backend and I want to open a drawer in response.
How should I do that if not set the open-state for a specific drawer in the assigns of the LV?

4

push_event as @benlime showed. Letting Phoenix and some front-end code share control of an attribute is not the happy path imo.

5

sure, that refers to the question why is_open needs to be in the state (if I do not use push, put set an attribute in a function component)

6

Still, I’d use push_event/3 for that. You would have a handle_event or handle_info callback in your LiveView and then call push_event so the JS hook can set the attribute accordingly (or call drawer.open() or whatever code is needed to open the drawer client-side).