A Trick for Cleaner Svelte Components
Вставка
- Опубліковано 7 вер 2024
- 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!
Modern SaaS w/ SvelteKit, Stripe, & Supabase is now live! hbyt.us/modern...
Checkout Melt UI: github.com/mel...
If you find my content useful and want to support the channel, consider contributing a coffee ☕: hbyt.us/coffee
🚀 Become a channel member: hbyt.us/join
💬 Discord: hbyt.us/discord
🐦 Twitter: hbyt.us/twitter
🖥️ Setup Stuff: hbyt.us/gear
📃 Topics Covered:
- Svelte UI
- Svelte Components
- Svelte UI Libraries
- Better Svelte Components
- Clean Svelte Components
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 :)
Why did it not complain about that loose closing curly?
@@thedevminerI honestly have no idea 😂
@@Huntabyte If you look during yuour video to the bottom you have a warniung that says something like ` was created with unknown prop '}'`. So maygbe it just assumed it was a prop?
I think the compiler first checks for a "{" to start the js context, but having a stray } wouldn't error because that's technically valid in html, as prety much any token is valid if we don't include the special characters like "", "=", "/" etc. So I guess that's why it doesn't error and amusingly we could have a property named as "}" because of that I guess. Not that we should.
yeah man! i love you! great content!
That's a cool trick, though there's the trade-off of sacrificing tree shaking for having one import line.
Yeah I suppose I should have mentioned that it should be used with components where you are _always_ going to use at least the minimum that you're passing. In this example always using the title, description, and button! Thanks for pointing that out!
Hey dude I don't understand what you want to say 😢
@@Huntabyte Could you explain the difference between this and a layout file in sveltekit?
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.
Quite frankly, I like and prefer these short to the point videos on Svelte, sometimes I just need help with one atomic thing. Merci!
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!
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.
Thanks Kevin! I’ve appreciated your support since the early days!
Using let in a component has always been a blind spot for me, thanks for this eye-opener!
I’ve been finding all sorts of good use cases for it lately, maybe a video idea to showcase some use cases!
I had a hard time with it for a while. Then I just realized it's just passing a variable in the other direction. So we export let someVar; in a component and get the info from the outside. And we can let:someVar to "pass" a component variable back up to the parent. It only clicked for me a little bit ago and it opened up some doors, for sure.
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.
Thanks for taking the time to comment! I have some good ideas for upcoming videos so expect some more little tips/tricks like this!
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 ❤
Thank you!
What do you mean like a barrel file? Can you explain?
@@AlanDanielx it is a simple typescript module file in which you export your components. This article on medium might help: klauskpm/do-a-barrel-export-aa5b79b76b05
You can also import the title, description, button components into card component. Then import Card into App component and do , 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
MeltUI it's really the next level
yo, i have been using svelte for 5 months now and i havent seen this before, this is actually sick
One of my favorite channels ❤
Thank you Guillaume!
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:
...
Looks super weird, but it actually works. I think in this case though, I prefer just importing the Trigger component separately
Oh woah that is weird lol yeah definitely not the best use for every case but a cool trick nonetheless!
Dude, this is _tremendous._ I'm gonna be using this _exclusively_ in my components from now on.
This is so impressive, I wish I could use svelte at work.
deffintly gonna use that in my next svelte app ♥ thank you for showing
thanks for the videos about Svelte you made from the beginning, really helps me
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.
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
dude, this really is great
we do have these in react, but this one is truly mind-blowingly genius. svelte is a very interesting framework I should say.
Thanks!
Woah! Thanks a ton Jason, I greatly appreciate that!
Neat way to create components indeed.
This is pretty cool, thanks!
Nice, i like your videos, i will try Melt UI.
That's amazing! Thanks for sharing
This is a really cool trick. Thanks.
Superb Svelte content! thank you
Pretty neat trick! Thankyou, anyway good luck with your headless lib!!
I decided to go start learning Svelte(Kit) over React because of its minimalistic approach. Is it useful for me to go over your videos from the last year about Svelte even though v.4 wasn't released during those? Also, I just checked out several Svelte UI libraries and Melt UI is my favorite, it looks very polished, really looking forward to see more of it :)
Definitely! v4 introduced very little big changes! Checkout Joy of Code's videos for Svelte/Kit, he has some great progressive series going from 0 to hero!
@@Huntabyte Oh yea I discovered his channel today also. Thanks for the recommendation! Can't wait to build something. I've been doing research for weeks lol.
WHAT? Nice one, thanks.
I was considering exporting component parts in a card object. But this might be nicer. Although other people need to know c is exposed through let:
🔥
unite!
But why would you make a title and a description their own component? This is really stretching the single responsibility principle. Why not just keep it simple and just use the card component?
never saw `let` used like that in svelte; what is this?
It’s a way to pass properties to arbitrary children of a component! Maybe I’ll make a video going into it a bit more!
@@Huntabyte that would be awesome. thanks.
Wow a useful video for once. thanks
interesting trick.. will use it.. thanks
You're welcome!
Great video, i try Melt UI but the example on Github did not work plus there was no documentation available so could not go deeper into this, but great content keep it up :)
Ah we gotta update the readme. Docs are still a work in progress but we have some examples on melt-ui.com/docs that you can look at to get a better idea!
Nice!
mindblowing
I still get kinda confused about how to use and understand slots
How you have a video for that? If not, can you make one explaining everything about slots?
You got it!
I prefer import * as Card from “components/Card”, you can export all from that main module that’s all.
Why people create components like CartTitle? Doesnt this create huge amount of useless components and big fragmentation? Cant you just create a inside the card and that's it? I guess its for styling, but then you could do
"So it might be good if you are writing a library, since you have no idea how it will get used." - right on the 💰, this is really the most practical application for this method!
Or if you are writing a design system
I’ve been trying to decide for a while and was standing strongly on a slots only side, but when it came to building more complex components - named slots make it harder, styling is a real problem.
I feel like this approach, of exposing child components has the best attributes of both approaches: good enough dx/customizability.
this is great
Thank you @Huntabyte for this tips, can you tell me why are you prefer sveltekit over nextjs ?
That could get lengthy - but in short, I believe React consists of too many solutions to problems they introduced that it isn't straightforward and isn't as enjoyable to write. Additionally, I like the idea of the frontend framework having a compiler!
@huntabyte does this work with svelte 5 snippets and $props?
Hey @Huntabyte, your videos are great! Im currently trying to convince other people in the office to use svelte over nuxt in our internal cms application , im currently thinking of creating a sample application that showcases everything that svelte can offer (love superforms, updating states simply, api routes , how the page data being passed) is there a chance that you have an already made codebase so that i can use to feature it or like play with around. Also would love to hear your thoughts on how to organize third party npms, do you create different folders in lib and export functions. Thanks for the videos!
I have a few codebases on my github which uses a few of those, one is for my course github.com/huntabyte/modern-saas
Nice trick !
Mind blown 😲
hey, can you make a video on how to make sveltekit pwa app?
Yes man, Svelte is full of Eastern Eggs LOL
Hi, as a beginner in Javascript/Svelte/Melt-UI I find it kinda hard to implement Melt-UI into a project. How do I implement it correctly? Do I make reusable components? If so how do I make them work with each other. e.g. how do I make a tooltip for a checkbox? Is it possible to make a video on this?
very neat!
How will this work in Svelte 5?
Nice one
This should be added to shadcn-svelte
It will be with the upcoming overhaul/migration to melt! Soon enough!
@@Huntabyte looking forward to that!
This is neat!
As far as I understand why you should have buttons, links, etc. as reusable components (as you may want to have a concise layout across pages), I don't understand why you overengineered such a simple component as a card. In most cases, you don't have to create separate components for text, titles, etc. It not only makes the code a mess but also much more complex, which is something you should avoid.
You could simply include everything inside the card.svelte. In my personal opinion, the file structure should be as clean as the code, without pointless components and scripts. But yeah, I get that you may want to keep a concise layout across your page, and you may want to apply some fancy text styling to each of your paragraphs - I get it, really. But it doesn't justify a component with just a in it. You could just create a simple CSS class, import it globally in global.css so each page would have access to it (if you wish not to import it to every individual component). Or you don't even have to create classes, just apply the styles globally to each tag under or , etc.
My point is, if you train yourself to keep things simple and maintainable, you won't regret it later on. It is always simpler to edit global.css styles than searching for a specific text component across hundreds of them. Of course, you can always overwrite styling from your global.css inside your +layout or +page.svelte - it is still a 20x simpler, easier, and more maintainable approach.
I'd just like to point out that I am not a professional Svelte (or any, in fact) developer. I have some knowledge, and I wouldn't call myself a 'pro'. I just do it as my hobby. You are very welcome to discuss it in the comments - I would love to hear your opinion (as a pro dev, whether you agree or not). Perhaps there is something I don't understand or see, please lighten me then.
Thanks
I've never even seen the let directive in the docs or tutorial
It’s tucked away that’s for sure!
Any way to make the imports lazy?
I haven't looked into it but I'd be interested in knowing how if so!
Ithink we can do this in vue i'm not sure
Does it scale well ?
Nifty
i'm not quite sure whats happening :O
this is cheat that i need!
"better" is quite subjective, here. I think this actually complicates the UI code, and makes the naming more abstract, which is never good.
Neat
Why should you not use this style when there are many components?
This is neat but I feel like sacrifices a lot of readability and simplicity. It kinda makes my grugg brain hurt
The beauty of svelte is that you can choose whatever approach best fits you!
you don't need a component for the button in most cases. In svelte we are ussulay use HTML and more high level components.
at 3:20, on line 6, is the `}` just before the `>` a new thing ?
No. I think he forgot removing it
Whoops! Can't believe I didn't catch that, yes definitely forgot to remove it!
@@Huntabyte do you edit your videos ?
@@TechBuddy_ I do! Which is why I'm surprised I didn't catch it!
@@Huntabyte It happened to me soooo many times as well. I had to re render and re send clients' videos again which is a pain lol 😂. I atleast had the option to re render but you don't on UA-cam 😆
Why not use 1 single component and just use props or named slots for the different sections?
I answered that in another comment, slots are only good if you know how the subcomponents will be used/where they will be positioned!
I don't see the appeal here, I wouldn't have designed the card component like that to begin with.
And with React we would've simply passed the components as props, so it isn't a new pattern. This actually makes Svelte take more effort to write, requiring you too package and dump components as properties.
You have a mistake in the lesson. To work with the component object from the Card, in the Card component itself, you need to specify " ,
...", otherwise you specify that the work will be with unpacked components "... - otherwise there will be errors!
The frustrating part is styling the component where you're composing (using) it. Im a svelte user but the one thing a miss about react is the ability to pass styles through so easily
cool
noice
great, time to refactor again... 😅
Hahaha the vicious refactor cycle never ends!
'Promo sm'
Why use this instead of slots?
Gives more control at the call site
Edit: slots go into places decided at the time of declaring the component but with this approach the user can put the components wherever they want that is the difference
Let's say I wanted to have a button at the top and a button at the bottom, how would I accomplish that using a single slot?
@@Huntabyte you wouldn’t. You would have a slot for each button (if I understood you correctly)
@@abdel17 Exactly, which would require you defining the layout of the card beforehand. The method demonstrated in this video gives more flexibility. I could have 55 buttons inside the card if I wanted to and could place them wherever.
@@Huntabyte ooooh I got it now thanks!
Bad trick
why not just use slots ?!!! 🤔
I find this a really unintuitive way to define and use slots...
They aren’t slots 🤦🏻♂️
// ./Card/index.js
import C from './Card.svelte'
import Description from './CardDescription.svelte'
let Card = C
Card.Description = Description
export default Card
...
import Card from './Card' // a folder