How to pass data and functions between Svelte and Elixir functions?

[gevera]

I am new to Phoenix/Elixir. This project seems to combine my two favorite frameworks into one. Now I wonder how do you pass data back to Elixir from Svelte component? Via dispatch? How about passing to Svelte component a Elixir function? A simple increment example with a on click handler button will suffice to understand the flow. Thank you

[nikokozak]

So the way this lib works is that it essentially extends esbuild to package svelte components as single files, which are then attached to a div (and passed initial data via props). What this means is that the back-and-forth you get between Phoenix and Svelte is not as close as you would with an ecosystem using only JS for example (because then it becomes easier to pass a component to a function, for example).

What you can do is the following:

• use fetch to call a POST route that you define in Phoenix, which will allow you to send and receive information from the Svelte component.
• or, set up a websocket connection with Phoenix from the svelte component which will allow you to do the same thing, but is much more complex (i haven’t tried this personally, might be worth building in the support for this in the future).

Let me know if this clears things up a bit - I’ll be happy to provide an example when I’m not on mobile.

edit: in other words, think of the Svelte component, once mounted, as a separate “app” that now needs to communicate with Phoenix.

[gevera]

I guess a good way of thinking about it is to consider svelte components as microfrontends. It makes sense in certain cases, however it brings in lots of boiler plate and verbosity for trivial tasks. I wish Svonix could integrate more tightly Svelte into Phoenix. A good article to read on it is here https://nathancahill.com/phoenix-svelte maybe could be an inspiration for future