woutdp / live_svelte

Svelte inside Phoenix LiveView with seamless end-to-end reactivity
https://hexdocs.pm/live_svelte
MIT License
1.2k stars 46 forks source link

HMR (hot module refresh) at all possible? #92

Closed cibernox closed 8 months ago

cibernox commented 11 months ago

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?

johnknott commented 11 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.

woutdp commented 11 months ago

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.

nfplay commented 10 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.

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?

cibernox commented 10 months ago

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.

woutdp commented 10 months ago

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.

woutdp commented 8 months ago

Closing for now