Svelte 5's Secret Weapon: Classes + Context

In this video, we'll start with some basic markup and bring it to life using Svelte 5 Runes and other new Svelte 5 APIs. Specifically, we'll be creating a "Toaster" component along with its state that will enable us to push toast notifications from anywhere in our app.
If you enjoy this type of content, please let me know, and I'll gladly create more!
Global State Video: • Global Stores Are Dang...
Starting Code: github.com/huntabyte/svelte-5...
Final Code: github.com/huntabyte/svelte-5...
📁 GitHub: hj.run/github
🌐 Personal Site: hj.run
🚀 Modern SaaS Course: hbyt.us/modern-saas
💬 Discord: hj.run/discord
🐦 X/Twitter: hj.run/x
🖥️ Setup Stuff: hj.run/uses
📃 Topics Covered:
- Svelte 5 Runes
- Svelte 5 $state
- Svelte 5 $effect
- Svelte 5 $derived
- Svelte 5 reactivity
- Svelte 5 classes
- Svelte 5 context
- Svelte context API
- Svelte global state
- Svelte class state
- Svelte reactive classes

[@Huntabyte]

If you're wondering, why not just use a global store and import it into all of your components? Watch this video: kzbin.info/www/bejne/e6qnh2iOgcuUnck

[@ivo9578]

Is there any reason to use stores at all after state has been implemented in svelte5? love your videos!

[@laztheripper]

export const state = writable([]); then you just set it client side by checking if (browser) beforehand. this replaces everything you said, and it's way simpler.

[@roycrippen9617]

You've recently come onto my radar in a big way. I had been using shadcn-svelte and bits-ui for months at work and got recommended a video or two of yours and realized I recognized your online alias. Thanks for everything you do for the svelte community. The stuff that you make is great and makes developing svelte applications even more enjoyable.

[@Huntabyte]

Hey I appreciate the kind words! Awesome to hear you get to use shadcn-svelte and bits at work!

[@adriansanchezr.8508]

While the frontend community keeps moving towards functional components, there's still a bunch of use cases where classes are better suited for, and this is one of them! Great explanation, keep it up! 👏🏻

[@ofeenee]

The video’s pace is just perfect! 👌🏼 Well put, well explained, and well done. Thank you so much for making it and sharing it with the community. 🙏

[@cmdeckermusic]

Wow, what a helpful tutorial! I learned so much about Svelte 5 contexts and why you might prefer to set them up with classes. Keep 'em coming!

[@Huntabyte]

Glad it was helpful!

[@markasena]

Loving these types of content man! more please!

[@kakaique2000]

Impossible to not fall in love with svelte runes, feels like writing natural javascript but with reactivity and performance

[@yunmulu1659]

What I needed right now. Thanks!

[@zeroows]

Thank you, please keep them coming

[@edwardmanhattan6517]

i know you frequently do live, but i was worried when you didnt drop any videos for months, now when you do it's bangers after bangers 🔥🔥

[@Huntabyte]

The Svelte 5 API being unstable was killing my motivation as I wasn't sure what stuff was gonna be relevant months from then. Now that it's stable I feel much more comfortable!

[@MadeInJack]

@@Huntabyte Great to hear, happy to watch your future content! Tips and tricks about Svelte 5 help me a lot!

[@greendsnow]

He was busy with developing the best svelte UI library(s)

[@alexlatess]

I needed exactly this ! Thx !

[@user-lj4lo7cx7m]

Lets go!!

[@Nukhtarov]

Awesome. Thanks!

[@BhideSvelte]

this type of content really keeps me attach...to svelte, really appreciate your work 😍😍

[@PropelWebDev]

immediately liked. love the consistency of high quality videos! 😊

[@Huntabyte]

Thank you!

[@johnwu8916]

Thanks! This is super helpful.

[@michaelpotter9006]

Excellent video. Thanks!

[@Huntabyte]

You're welcome! Glad you enjoyed it!

[@axeloehrli1148]

Awesome video!

[@lasal7820]

Awesome!

[@Loui3Hunna]

Love it!

[@user-krnujdp]

Great video, wow!

[@MrBaster38]

Very good video!

amazing content like always Hunter

[@Huntabyte]

Thank you!

[@fev4]

great tip on how to handle the global context

[@cengytech497]

Svelte 5 is a beeeast 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥, thanks for informative tutorial

[@couragic]

I can’t believe I’m still not subscribed to this channel 😮 FIXED

[@good-dev-student]

thank you

[@good-dev-student]

❤❤❤❤❤❤❤❤❤

[@RyoukenDofus]

Nice tutorials ! How about to make a toast showing a loading state when a form is posted and when the reponse is fullfileld show the result? I implemented it using svelte-sooner but 50% of the time it shows a wrong result :c

[@mikejohneviota9293]

I actually use that!! its OVAAAA POWAAAA

[@BonBaisers]

As a senior architect, I will be always amazed how javascript community will always try to avoid a pattern that is easy to learn, efficient and SOLID : dependency injection. We all figured it out long time ago, but still another framework trying to reinvent the weel.

[@JackoCribbo]

DI and error handling leave me perplexed too, it’s not necessarily a resistance to OOP/SOLID related as functional solutions seem to be snubbed just the same.

[@imho7992]

Welp new huntabyte vid, time to refactor! 😂

[@Huntabyte]

😂

[@ratsock]

Does this mean going forward in svelte5 we shouldn’t be using stores in general if runes can extend beyond direct svelte components?

[@Hugos68]

Yes, you probably want to stay away from stores unless you have a specific reason to use them. Runes are more performant and more flexible

[@kylerjohnson988]

To add to Hugo’s already great answer, Runes also provide a consistent reactive model whether you’re in a component or outside of it.

[@genshian]

I dont get why you switched from Next.js to Svelte. You mentioned, to keep things more based in javascript to render out the charts, but I don't understand how Svelte really makes that much easier when you can do that in React. Mostly curious, because I like the separation of js vs. the jsx aspects and if the js is too large I'd just move it into a hook. I guess, I dont know enough about Svelte though.

[@tririfandani1876]

Any specific reason why you use Symbol instead of just regular string in context?

[@Huntabyte]

It's guaranteed to not conflict with any other context in the tree (potentially set by a library that I don't own)

[@denverjamesduran2750]

Hi may I know why not just create a store that multiple components can access? Like just importing the store and mutating it. Whats the difference?

[@Huntabyte]

See the video linked in the description about global stores. In a nutshell, if you're building an SPA it's fine. If you're doing any SSR, there is risk of leakage between different users since it is a single object on the server.

[@denverjamesduran2750]

@@Huntabyte thanks a lot for answering. So that's why I get errors like sharing state in server etc even tho I dont have state in my server files Im gonna watch ur video thanks again youre the best!

[@karolus__]

Why not a toasts store? What is the main advantage using state + context instead of store?

[@Huntabyte]

See the video linked in the description. In a nutshell, if you're building an SPA it's fine. If you're doing any SSR, there is risk of leakage between different users since it is a single object on the server.

[@karolus__]

@@Huntabyte interesting! so in context of SSR writable() is long-lived variable on the server even if it's not defined in *.server.ts file and you have to wrap it in context or use $state in svelte 5, I wonder how many people wrapped session in writable store in SvelteKit... 😵‍💫

[@afish5581]

Helllo, just started with Svelte and worked through the tutorial. There is one chapter about props which does not recommend $props due to performance issues. Since you used them, how big of an issue is it really? Coming from React + TS I prefer the syntax used in this video but I am hesitant to use it.

[@Huntabyte]

The docs you're referring to are the Svelte 4 docs, which talks about `$$props`, not the single `$props` rune in Svelte 5

[@afish5581]

Oh 😮 I see. Thx for clarification ❤

[@omomer3506]

Hunter you have been missed

[@sledgex9]

Why call onDestroy() and clear the Map? Won't the Map be cleared/garbage collected after the class instance gets garbage collected/destroyed? PS: I am mainly a C++ dev, so not too good with object lifetimes in the JS world.

[@Huntabyte]

You are probably right on that one. The GC should handle that. Sometimes I get too paranoid and end up taking the trash out myself 😂

[@MennoB-sk8tv]

Wouldn’t it be cleaner to only use gettoaststate and there check if there is one in the context and otherwise put one in and return it

[@Huntabyte]

This could certainly be done, it depends on if that behavior would be expected or not! In this case, the context needs to be initialized in the layout so that the `` has access to it. I'd rather it fail and throw then silently fail and not know why I have multiple separate toast states floating around!

[@theether5993]

[@gageracer]

After learning Context for svelte another friend had an issue with sharing data on his react project so I was like "let's use react context!". Oh boy its not as straightforward as it is in svelte at all. We could not hook it up and gave up on it.

[@ppcamps]

I'm with mixed feelings about this svelte 5. It's looking like a lot with React ( I hate react ) But the content is great, btw

[@Danielo515]

Having a folder for components, a folder for types, a folder for green things is not going to scale

remember this is just an example to showcase the power of svelte5 runes + context, is only to teach on that, not on project folder structure or scalability

[@Huntabyte]

^

[@good-dev-student]

4 days no new knowledge Master 😢?!

[@gageracer]

I love this method and been using it. But I have one issue that I cannot replicate with sveltelab cause it only gives that error on dev mode: When I get the toasts and then pass it as a prop in an each block as `bindable()` to the child, I get an error saying I should use binding lol. It works fine but the error makes me thing I did something wrong. [svelte] ownership_invalid_binding src/lib/components/ContainerSum.svelte passed a value to src/lib/components/Container.svelte with `bind:`, but the value is owned by src/routes/+layout.svelte. Consider creating a binding between src/routes/+layout.svelte and src/lib/components/ContainerSum.svelte

[@edwardspresume]

for the setTimeout cleanup, would something like this suffice constructor() { onDestroy(() => { this.toasts.forEach((toast) => { clearTimeout(toast.timeoutId); }); }); } addToast(title: string, message: string, durationMS = 5000) { const id = crypto.randomUUID(); const timeoutId = setTimeout(() => { this.removeToast(id); }, durationMS); this.toasts.push({ id, title, message, timeoutId }); } removeToast(id: string) { const toast = this.toasts.find((t) => t.id === id); if (toast) { clearTimeout(toast.timeoutId); } this.toasts = this.toasts.filter((toast) => toast.id !== id); }

[@AB-gx5zj]

Great video, thanks!