~V and JS.dispatch

[terrisgit]

If I put this in a ~V block:

<button phx-click={JS.dispatch("pyro:theme-system")}>dark</button>

I get the error at runtime: ReferenceError: JS is not defined

I think I need it to output html like this:

<button phx-click="[["dispatch",{"event":"pyro:theme-system","to":null}]]">dark</button>

[woutdp]

I think JS is only available in regular HEEx templates.

Looking at the docs, you might be able to achieve the same result with CustomEvents as it seems to use that under the hood.
https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.JS.html#dispatch/2
https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent

Since you're in Svelte in this case, you'll have to do something like this

<button on:click={() => CustomEvent("pyro:theme-system", {to: null})}>dark</button>

Let me know if that works

[dev-guy]

Here is the solution. How could we make this easier with the ~V magic?

<button on:click={() => window.dispatchEvent(new CustomEvent("pyro:theme-system", {to: null}))}>dark</button>

[woutdp]

We could have the JS object available probably, worth looking into

[dev-guy]

Is there a way to "run" any sort of Elixir code in ~V strings? Perhaps that would be an escape hatch instead of looking for "{JS." Or does HEEX only support "certain things" as well?

[woutdp]

No, not at the moment. Essentially the ~V sigil makes is a full Svelte template.

If you want to use elixir code use ~H with the components, that will work.

[dev-guy]

Is there an example of ~H and svelte? That would be the way to support ~p

[woutdp]

You could do something like this:

~H"""
<LiveSvelte.render name="ComponentName" props={%{url: ~p"/url"}} />
"""