Sveltex. Small library to easily render Svelte component inside Phoenix

I really enjoy creating component using Svelte. Therefore I started to sprinkle some of my Phoenix app project with it. This way I can keep the routing, authentication, and all still handled by phoenix app and only use Javascript component when it fit.

Inspired by http://reactphoenix.com I made similar library to easily render Svelte component inside Phoenix.

The goal is to easily create .svelte component, save it under /assets/js/svelte/ and anywhere inside my template I can call <%= Sveltex.render "component-name", %{props-name: "value:} %>

I thought it might help someone else tinkering with Svelte as well.

13 Likes

Cool! So… It’s time to Svelte(x)! :grinning:
https://github.com/virkillz/sveltex

5 Likes

Hello,

Sorry if it’s an obvious question but I just want a confirmation.
This package is not a server side rendering package, right?

And if I understand correctly it replaces a call to a Svelte component from usually another Svelte component, like so:

#inside the template part of a Svelte component e.g. App.svelte
<Test/>

to a call to be done directly in a regular Phoenix View/Template, like so:

# inside an .html.eex template
<%= Sveltex.render "test", %{name: "virkillz"}>

Did I correctly understand?

Yes. Correct!

1 Like

@virkillz This is really cool. I’ve incorporated it in my application and it works, but passing my form errors into a svelte component doesn’t work due to Jason not being able to convert the form structure to JSON. Have you encountered this issue?

Update for 1.6.x with esbuild would be highly appreciated