search

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

Expand "What did we do?" in installation guide #110

Closed acco closed 8 months ago

acco commented 8 months ago

Hey there,

This looks promising! Our team wants to adopt, but we're having trouble understanding what exactly is going on in the installation. For example, the guide mentions that the esbuild watcher is no longer needed - but we'd like to understand why?

Essentially, laying out "what we just did" in even more detail so folks like us can adopt and feel informed about the impact of the decision.

I'm happy to open a PR for the README if you provide the brief details!

Thanks, Anthony

woutdp commented 8 months ago

Hi Anthony,

Very cool to hear you're interested in adopting LiveSvelte for your team!

Basically what happens during the setup is we go from using the standard Elixir esbuild package to using esbuild directly as a node_module. The standard Elixir esbuild package works great for simple projects with phoenix hooks, but to use LiveSvelte we need a more complex setup.

From the official docs: https://hexdocs.pm/phoenix/asset_management.html#esbuild-plugins

Phoenix's default configuration of esbuild (via the Elixir wrapper) does not allow you to use esbuild plugins. If you want to use an esbuild plugin, for example to compile SASS files to CSS, you can replace the default build system with a custom build script.

That's basically what's going on here. LiveSvelte follows the official documentation in this regard and that's by design.

The standard Elixir esbuild watcher is no longer needed as we create a new watcher that does the same thing: node: ["build.js", "--watch", cd: Path.expand("../assets", __DIR__)]

Let me know if that makes sense or things are still unclear, happy to explain more!

Also, PR's are welcome as you said to improve the documentation :)

acco commented 8 months ago

@woutdp Thank you, totally makes sense! Your response really cleared things up for me, so I weaved it into the docs – take or leave :)

https://github.com/woutdp/live_svelte/pull/111