Hey thanks for the quick response. No, I think it was just the default compiler. Despite removing that line it’s still giving me issues. Is there a repo/files that you can share so I can see the setup since you’re also using tailwind?
I do think you’re right that there’s another rebuild running but I’m not sure how else it would fire if the watcher isn’t there. Any ideas? This is probably due to how new I am to elixir and phoenix 
I think I managed to fix the issue - for some reason, the node path dependency wasn’t being loaded in the internal svonix esbuild plugin. I added a new release on github, v0.5.1, adding it to your project should fix your issue (make sure to remove the build.js file and run the mix action again so that it gets replaced with the new version from this new release, otherwise just copy it over directly from your deps/svonix/assets folder.
That does the trick!! Thank you so much for your help! I really appreciate how fast you are at fixing this
I’ll read this thread later, but only the title made me so much excited! 
Svelte and Phoenix are at the top of my favorites. Making both work together will be the next best thing happening to web development.
Hey, this is a really cool project, will try it out soon!
Though, what are the advantages of using Svelte in Phoenix when we have classic controllers or LiveView?
Thanks!
There seems quite a bit of overlap between Svelte and Alpinejs. Any feedback on using one vs another in Phoenix projects?
It really depends - I tend to reach for Svelte when I need a level of granularity in my interactivity that I feel is harder to achieve with LiveView (after all, there is an advantage to JS-based solutions in certain cases). Think games, heavy client-side stuff, etc. I also happen to like the way Svelte is written.
That said, LiveView is fantastic at what it does, and I don’t necessarily think it has to always be an either-or situation. What I like about the approach of this library is that it’s fairly low-headspace in terms of implementing a Svelte component here or there (but can scale to larger examples as well if necessary).
I’d suggest Alpine if all you need is some basic state management to happen in the client, in small doses, and don’t want to be bothered with writing JS.
I think the use case for something like Svonix is for more complex, interaction-heavy components that you might not want to implement in LiveView, as well as things you want to relegate to the client exclusively.
Oh, I see!
I guess I’ll use it whenever I need client-side code over server side.
Thanks!
So, I’m trying it out and I installed a component library called “carbon-components-svelte” just to have some free components to play around with the library.
And for some reason, it doesn’t work.
I’ve just did the npm install required and then added it to my file like this
<script>
import { CopyButton } from "carbon-components-svelte";
</script>
<CopyButton text="Carbon svelte" />
And nothing shows up on the screen (everything works without any component libraries etc.)
Is there a way to fix this? Thanks!
I haven’t tested the library with pre-built components, I’ll take a look at it.
My guess is that it’s something to do with the esbuild pipeline in build.js, and having to add a node-resolve plugin or something of the sort.
Are any errors thrown in the terminal?
No errors.
Hey, sorry but did you manage to fix the issue?
So I took a look at this just now - good news and bad news.
Good news: npm packages work just fine.
Bad news: Svelte component packages don’t work.
If you take a look at your browser console, you’ll see it’s throwing an error to do with reading an undefined $$ value. My best guess is that this is happening because carbon-components-svelte is a set of pre-compiled Svelte components that, upon being imported into our Svelte components, inadvertently results in duplicate versions of Svelte. The Svelte lib is stateful, and therefore this results in errors because having multiple copies of Svelte in one component is technically not allowed.
For those who might be interested, this only happens because of how (out of necessity), I’ve implemented the Svelte rendering pipeline. More information on these nuances is available in this fantastic answer to a stackoverflow question.
There might be a way around the issue you’re facing, but I’m really short on time for the near future - if you’re willing to give it a shot, please feel free to submit a pull request! Sorry I couldn’t be more helpful. I’ll amend the documentation to reflect this issue.
Thanks for the detailed answer! I can’t really do it but I hope someone else decides to fix it in the future.
Really good library, thanks for the effort you put in it!
This has a lot of potentials IMO. Making some of the things can be really powerful such as TipTap. However, I’m hitting some issues where the rendering doesn’t work when you trigger a modal. Any idea what could be the issue?
Loading directly to the modal works, but clicking to it doesn’t (when I click “new profile”)
Here’s the code context.
I think it has something to do with how do we mount the component on update?
From the Svonix docs – talking about how to include Svelte components in a template.
- Next, add a Svonix tag where desired (the tag name must match the filename of the component), and pass in the arguments you like:
lib/myapp_web/templates/page/index.html.heex
<%= Svonix.render "test", %{ name: "Nikolai" } %>
Is there any way to use slots with Svonix? Either out of the box or, possibly, in combination with Surface UI?
Although slot support is not working 100% of the time (see the caveats section in the readme as to why), LiveSvelte is something I’ve been developing recently.
Slot support is still very experimental and I’d suggest using props instead if you can!
© Copyright Elixir Forum | Terms | Privacy & Cookies
