-
-
Notifications
You must be signed in to change notification settings - Fork 72
-
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>
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 3 comments 4 replies
-
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
Beta Was this translation helpful? Give feedback.
All reactions
-
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>
Beta Was this translation helpful? Give feedback.
All reactions
-
We could have the JS object available probably, worth looking into
Beta Was this translation helpful? Give feedback.
All reactions
-
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?
Beta Was this translation helpful? Give feedback.
All reactions
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
-
Is there an example of ~H and svelte? That would be the way to support ~p
Beta Was this translation helpful? Give feedback.
All reactions
-
You could do something like this:
~H""" <LiveSvelte.render name="ComponentName" props={%{url: ~p"/url"}} /> """
Beta Was this translation helpful? Give feedback.