Push JS Commands to the client

[Sebb]

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.

[benlime]

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?

[Sebb]

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

@benlime

Why does is_open needs to be a server state?

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?

[cmo]

@Sebb

How should I do that if not set the open-state for a specific drawer in the assigns of the LV?

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

[Sebb]

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)

[benlime]

@Sebb

How should I do that if not set the open-state for a specific drawer in the assigns of the LV?

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