Make Your Own Svelte Component Library

[@JoyofCodeDev]

🔴 Patreon: www.patreon.com/joyofcode 💬 Discord: joyofcode.xyz/invite

[@mumk]

Although I might not have time for Svelte videos, I wanted to express how brilliant the thumbnail is. It's so vibrant, vivacious and surreal.. good job for those awesome thumbnails! I enamored it.

[@JoyofCodeDev]

Thank you! 😄

[@chychywoohoo]

Probably just using midjourney

[@SarcevicAntonio]

Really awesome video as always! Remember, you can also have a default slot, so you don't have to wrap the content for example 😊👍

[@pineappleseltzer9450]

I get that the point is to teach us how to think about components (and it's awesome!), but in the case of accordions, you can also use the html tags details and summary, which builds in the open/close logic. I don't think you can animate the transition yet, though.

[@JoyofCodeDev]

That's a good point but this gives you more control.

[@henil0604]

great timing man! Just 10 hours ago i was thinking to ask you about this on discord 😅

[@すべてに興味を失う]

It could be nice to redo the same exercise with runes ^^

[@mr_clean575]

Agreed, we definitely need this ❤

[@ScriptRaccoon]

Very cool idea to implement it like this. The API is very nice to use, all the logic about IDs and selecting them is "hidden". Just one small suggestion: you didn't need the close class for the arrow. When the open class is removed, the transition is automatically played backwards.

[@JoyofCodeDev]

That's what I also thought and I tried it before but it doesn't work.

[@ScriptRaccoon]

​@@JoyofCodeDev It works when you put the transition property on the button, not just in the open class. Here is a REPL - I paste the code since links are not allowed. let rotated = false; rotated=!rotated} class:rotated> 🍓 button { transition: transform 100ms ease-in-out; border-radius: 50%; padding:0.5rem; } .rotated { transform: rotate(90deg); }

[@JoyofCodeDev]

@Script Raccoon Thank you for pointing out my mistake! 😄

[@leboyoyo]

Once Again, Areally great tuto! Will make a video covering Unit test for this kind of component for exemple?

[@JoyofCodeDev]

Yeah! 😄

[@justingolden21]

Awesome tutorial and it was neat to see those reference sites and learn about the context API in a very simple manner! It's "collapse" as someone pointed out lol, but it happens. I think to avoid the TS underlines, it might be best to not set the script type to TS until that part of the video. Also, you mentioned accidently typing single = instead of double/triple ===. When you read them outloud/think of them, read "=" as "is assigned to" and "==" as "is equal to" and "===" as "is strictly equal to" and then you'll never make the mistake ;) (I'm sure you know the difference, but it helps to change the voice inside your head as you read it lol)

[@JoyofCodeDev]

I type fast and ligatures make it even worse to find the problem. 😂

[@rahulxcr]

Thanks, this is really a great tutorial.

Great content! Thank you!

[@JoyofCodeDev]

You're welcome! 😊

[@justingolden21]

Maybe out of scope for this, but a follow up on publishing as a npm package would be awesome!

[@JoyofCodeDev]

I want to cover testing components and publishing in a future video.

[@すべてに興味を失う]

@@JoyofCodeDev this could be great 🥳

[@O1O1OO1]

Yes that would be great, publishing and tips on all the stuff to consider when using these components in vanilla JS projects vs Svelte Projects.

[@jadelily18]

would love to see this :D

[@TheMaxiviper117]

@34:12 how do you get the variable autocomplete?

[@JoyofCodeDev]

I'm using the CSS Var Complete extension but I should make a video on it.

[@HarrisonPage-wd3vz]

great work man

[@JoyofCodeDev]

Thank you! 😄

[@azag777]

Great content!

[@tomich20]

Thanks for the content . Question, I got lost at context stuff.. if you are using the store.. why not just send the data through it instead of all the context complex magic? Still don't understand it. Thanks again, and please teach us how to export the components so we can use it in plain html

[@JoyofCodeDev]

Using context is more suited for passing data between components while stores are great for managing global state.

[@Hugos68]

I think you meant 'collapse' instead of 'colapse', still great video non the less, always wondered about svelte fragments, also never used the context api but defenitely will after this video.

[@JoyofCodeDev]

Thank you! 😄

[@argonjs]

Awesome 🔥

[@namthanhnguyen2554]

Thank youuuu

[@lungarella-raffaele]

Anyone gets 'Cannot find module $lib/components/accrdion or its corresponding type declarations.`

[@casper5314]

sickkkkk

[@justingolden21]

HOW IS HE STILL NOT AT 10K SUBS? (also sorry for comment spam lol)

[@JoyofCodeDev]

It's close! 😄

[@justingolden21]

@@JoyofCodeDev Now get to 30k 😎

[@すべてに興味を失う]

34:40 you are ^^

[@aer1al0]

Next step: Exporting this as HTML Custom Web Elements to support framework agnostic components? 😅

[@O1O1OO1]

Yes please!! At lest vanilla JS components, since Custom Web Element support is currently a bit weak in Svelte

[@thederpykrafter]

why does the console show true for colapse? isnt it set to false? mine shows false lol

[@werrutkyupnext]

9:18 💀

[@DeviantFox]

Man... watching this and knowing svelte 5 is coming, this is going ot be out of date... Hopefully you make a new one when it's time.

[@nzaeroax]

where is the sample bro ?

[@JoyofCodeDev]

The post with the example is in the description.

[@greendsnow]

No HeadlessUI support, no Svelte. Also Vue 3.2 is faster than Svelte...

[@O1O1OO1]

HeadlessUI for Svelte seems getting traction again. And hey, that's not the purpose of this video. It's about building your own components ; )

[@Wurstfinger-rl1zi]

skill issue