Closed cibernox closed 8 months ago
I'm only a user of this project, but I had similar needs to you and I replaced esbuild with Vite and HMR worked great. The dev experience seems much more polished when you don't need the hard refresh and (usually) you don't lose the client state .The only thing that didn't work out of the box was SSR but I didn't put any effort into integrating it and I didn't actually need it for my project.
Make sure to that your build.js
is correctly configured.
An example can be found here.
https://github.com/woutdp/live_svelte/blob/master/example_project/assets/build.js
together with this line:
https://github.com/woutdp/live_svelte/blob/95f8db76c4b240e31405bd022ba8acf04a79cf40/example_project/config/dev.exs#L28
The --watch
flag is what's important here.
Technically it's not HMR, but it should reload the server automatically without manual intervention.
I'm only a user of this project, but I had similar needs to you and I replaced esbuild with Vite and HMR worked great. The dev experience seems much more polished when you don't need the hard refresh and (usually) you don't lose the client state .The only thing that didn't work out of the box was SSR but I didn't put any effort into integrating it and I didn't actually need it for my project.
I think the project could benefit from having a step-by-step in how to integrate Vite. Even if a user could start by Vite's setup using a svelte template, and then adding LiveSelte.
What do you think?
I fully agree. Most of us who do svelte (although I realize that most people that come to live_svelte come from the elixir side of the street) came to absolute love vite as the best javascript built tool by a mile. In fact giving up vite was my main source of reluctance for trying live_svelte.
Definitely up for a Vite guide for LiveSvelte if anyone wants to contribute one! I've went with esbuild as that's the default in Phoenix but I'm also in favor of Vite.
Closing for now
I've switched on a project from building an app with sveltekit and integrating it into a bigger live_view app though an API, to use live_svelte and it has a surprisingly pleasant experience.
My only caveat right now would be that I miss deeply the Hot Module Replacement of vite/sveltekit. Adding/removing classes to svelte components require a hard refresh and sometimes some clicking around to restore the state to check the effects of those changes.
Is there a way of having HMR in live_svelte. Or would it be possible to use vite instead of esbuild?