This post is based on a talk given at ElixirConf 2022
Svelte is a reactive JS framework that is delightful to use - it finds a perfect balance bet...
For further actions, you may consider blocking this person and/or reporting abuse
Love this. I tried it out and it works!
I was wondering if it would be possible to Server Side Render the Svelte component, it only loads in in the browser in my setup so you get a brief flash of unrendered content. Is that something you looked into by any chance?
It would be awesome to have a full integration working where you could simply provide a Svelte sigil just like how surface-ui does it but for Svelte... That seems like the ultimate E2E reactivity experience, your post makes me think it's totally possible...
I don't think it's possible to Server Side Render the component, since the Svelte "engine" is running client-side as JavaScript and is manipulating the DOM in the browser.
Do address the flash, I'd use the LiveView provided hooks for showing/hiding the "loading" state. The default is a top-of-the-page loading bar, but you can override it to show any UI you'd like, and this HTML should be rendered server side. This would work if your main view component is a LiveView, and it has Svelte components embedded.
A sigil should be possible! My example uses LiveComponent, but any element that can trigger the custom hook should work, and since that's just an element attribute, I don't see a reason that couldn't be coded as a sigil. I'll have to give it a try!
Hey Ryan, I've been working on a package that incoorporates this blogpost
github.com/woutdp/live_svelte
It's very early stages, there's still a bunch of things to do, but it's a working prototype!
It does have Server Side Rendering for Svelte! I was able to make it work by invoking Node from within the live component.
I intend to work on it more and flesh it out before releasing it to a more wide audience, and I also want to make a video to showcase some of the features.
Would love to have you involved in any way possible if you feel up for it and have the interest!
This is really cool! I hadn't yet seen LiveComponents using
NodeJS.call!like you are, didn't know that was possible.I'd love to help out! I see you already sketched out some planned issues on the repo. What's the best way to get involved?
Hi Ryan so happy to hear back from you! Any way you can help is definitely appreciated! You can comment on any issue and I can let you know if I already looked into it and what my findings were
Also if you think the API can be improved definitely up for refactoring a bit, might not be ideal yet.
For issues:
I'm looking into slots now, seeing if it's possible to pass a slot from the LiveComponent to Svelte, that would be really cool for things like Modals. But still struggling with it to make it work. In SSR you can pass raw html as a slot, but in the client you need to interact with $$slots which doesn't work for me at the moment
Another thing I was struggling with was
gotowhich didn't work for me, I saw that just writing it like this works for me: github.com/woutdp/live_svelte#live...Sounds good, I'll pull the project and play around with it! And if I can make some headway on slots, I can add some comments or open a PR.
I'm also really curious about the Svelte component when using Node on the server-side, I might try some profiling to see how that looks on the client.
Exciting stuff!
Fun! Thanks for the write up!
Thanks for reading!
I'm a SQL / DBA guy by trade - my company was just purchased and now in order to stay on I am now magically SQL/ DBA & Web Dev guy by trade : D
I have two weeks to get a SPA LIVE and I'm going to use your method, i'll let you know how it goes! Thank you! ( i think haha)
So how'd it go? Really curious if it was easy to pick up :)
I like Svelte and love phoenix. This can be a nice way to combine both.
But how this approach is better than using Inertia.js and Svelte with a Phoenix Backend?.
Thanks :)
The critical difference is the data exchange.
With Inertia, you still need to fetch data from the client (while also managing authentication), using some JS/HTTP library (fetch, axios). Basically your backend is a typical API or SSR, fetching data by polling or through user interaction or page reload.
With Svelte/LiveView, you get an authenticated web socket which lets you invoke actions on the backend by pushing messages from JS. This web socket is managed by LiveView, so you don't have to worry about setup/teardown/reconnect.
But the killer feature is that LiveView can push data changes from the server to the client over the socket, without the client requesting it, and Svelte will rerender the component automatically! Again, LiveView manages this state for you using the socket assigns. In real-world apps, not all data updates originate from a single user in their browser, so this creates a truly seamless app-like experience.
Mind blown!