A Trick for Cleaner Svelte Components

When my pal Adrian first showed me this trick to make your Svelte components cleaner I was mindblown! I hope you find it useful as well!

📃 Topics Covered:
- Svelte UI
- Svelte Components
- Svelte UI Libraries
- Better Svelte Components
- Clean Svelte Components

[Huntabyte]

Note: I forgot to remove the loose `}` in the Card tag, so please ignore that... sorry!😅 I also know slots exist and they are good for fixed layout components, where each piece goes in it's place. That's not what this video is about :)

[EnricoSacchetti]

That's a cool trick, though there's the trade-off of sacrificing tree shaking for having one import line.

[nextwebai]

Thnx for sharing the video.

Personally I’d make Card just one component that is specifically designed to show a title, description, button name with a callback event when a button has clicked. Otherwise if you reuse your component, you have to make sure you have the other components also to make your card work.

[lebogang_nkoane]

Quite frankly, I like and prefer these short to the point videos on Svelte, sometimes I just need help with one atomic thing. Merci!

[mikle]

MeltUI looks amazing so far! I will 100% use it in my projects at work when it's at a later stage of development, really looking forward to it!

[KevinMacKenzie]

I know you are busy working on important stuff for us, so it makes me appreciate even more when you can squeeze in a video.

[andreas.soderlund]

Using let in a component has always been a blind spot for me, thanks for this eye-opener!

[paivagabriel]

Good to see you back, Hunter! I was missing your videos. Btw, another pretty good video, as usual. Try to use this new little trick and see how it works.

[sanjayatony]

thanks for the videos about Svelte you made from the beginning, really helps me

[JustMyTwoCentz]

Awesome ! Every time i see a svelte vid i fall in love all over again 😅



Any chance of contributing to meltUI ? Was using it and really love it so far

[jingle]

You can also import the title, description, button components into card component. Then import Card into App component and do <Card p={title, description, button:{...}} />, passing p down multiple component levels deep. As a convention, each component would need "export let p = {...}" being a vehicle to pass on or extend with whatever is needed. Also makes debugging very easy if you do "console.log('compName', p)" in each component

[naranyala_dev]

MeltUI it's really the next level

[mrnissendk]

deffintly gonna use that in my next svelte app ♥ thank you for showing

[TechBuddy_]

Cool Idea. I do a similar thing. I put all the components in a barrel file such that I can do Card.Title or Card.Button etc but this is a little simpler. Nice video ❤

[Valkinsenn]

Dude, this is _tremendous._ I'm gonna be using this _exclusively_ in my components from now on.

[eddiemcconkie]

Super cool trick! I tried refactoring a couple of my components and it worked great for the most part. It doesn't work with named slots though, unless you pass the components through the slot, but then you end up having to do something like this:
<SelectMenu let:Option>
<Option />
...
<Trigger slot="trigger" let:Trigger />
</SelectMenu>

Looks super weird, but it actually works. I think in this case though, I prefer just importing the Trigger component separately

[amdbest]

yo, i have been using svelte for 5 months now and i havent seen this before, this is actually sick

[adimardev]

we do have these in react, but this one is truly mind-blowingly genius. svelte is a very interesting framework I should say.

[stefanmichalsky-hirschberg]

This is so impressive, I wish I could use svelte at work.

[hnazmul]

ohh my god. I am really suprised. I didn't find any usecase of Let:Props .. but yeah. its a perfect use case of this. thank you huntabyte.