Monday | 15 APR 2024
[ previous ]
[ next ]

Working on Svelte Components

Date: 2022-03-14

Now that I have some experience working with svelte, I'm going to make a component library. The first 2 components I tackled was the pagination and table components. This was because I did a coding with mosh course where he made those components in react and so I could follow the core ideas there and put a svelte spin on it.

For the most part it was pretty straightforward to follow but the two biggest differences was the dispatching of events. React makes it much easier to pass through events whereas svelte seems to require using the createdispatchevent function and then sending a message back. The other thing react does well but really its jsx is that it can write jsx components directly in the javascript and that can then sit inside an object dynamically. In svelte you can do the same thing but you need to split the component and props apart and then also use a special svelte component that can take a dynamic component name and props.

It's not a big pain but it is something to be aware of. One more thing that is a bit of a pain is that react lets you conditional stuff in functions because they can return jsx but in svelte I used the template language itself to do conditional rendering. I much prefer embedding that logic in functions but I'm not sure if svelte has that functionality.

I really wish there was a video tutorial set that went over components as I think that would be great. The ability to generate components that should really be part and parcel with html would be great. This is something that the creator alpinejs created but that is specific to alpinejs and alpinejs is a bit too different for me to use with svelte.