Crafting Magical Spells Using Svelte's Powerful Reactivity

Abstract and reuse reactive logic across files and components with Svelte runes.
🔴 Patreon: / joyofcode
𝕏 Twitter: / joyofcodedev
💬 Discord: / discord
🔥 Uses: www.joyofcode.xyz/uses
🔖 Timestamps
0:00 Intro
0:35 Persisting State Using Local Storage
3:06 Creating A Reusable Local Storage Function
4:35 Moving The Code Outside The Component
5:27 Improving The User Experience With Types
6:34 Creating A Reusable Local Storage Class
9:35 Adding Types To The Local Storage Class
10:23 Using A Factory Function
10:54 Using Get And Set Methods
13:41 Outro
#joyofcode #sveltekit #svelte

[@ondrejjcizek]

HOW BEAUTIFUL IS THIS FRIENDS!

[@forno_nicolas]

That title and thumbnail! 💯 Man thanks A LOT for all the content

[@DeviantFox]

I'm soooooo excited that we're getting Svelte5 content again. This was also fantastic because it was a very realistic and useful sample case.

[@ukrainetoday960]

look guys how beatiful is this! 😊 This is top phrase

[@ErolAbz]

Great video!

[@Dhalucario]

I find it so weird that Svelte 5 isnt released yet. It feels like people talk more about 5 than about 4 to a point where I tried to use 5's features in 4's codebase.

[@cubondemais]

It's because Svelte 5 is the king of cohesion compared to Svelte 3 and 4 AND it also has signals, so the hype is massive. We're just anxiously waiting to have Svelte 5 production ready to start slowly porting our codebases to remove all our bad code that's working around Svelte's design flaws, like the inability to spread callbacks or bad dependency detection with reactive statements

[@BboyKeny]

The first release candidate was released and it's believed that the syntax won't be changed as it is now. It means it's the right time to learn it before v1 with side projects

[@mylastore]

Certainly! Here's a refined version: At last, I've been inquiring about how to swap out a Store in the favorites of Runes. Despite scouring through the documentation, I couldn't find any explanation on how to do so. Gracias señor 😀

[@04055802]

You're awesome !!!

[@novaotp]

I'll be keeping this for when Svelte 5 becomes stable 🔥

[@JoyofCodeDev]

It's already stable! 😄

[@novaotp]

@@JoyofCodeDev well, omw to try it out 😄

[@JoyofCodeDev]

the release candidate is out

[@ariefnurandono9917]

@@JoyofCodeDev it's hard when another basic library not upgraded yet. sonner, shadcn, bits-ui it still cannot be used

[@cedricol]

We don't really know whether it's stable, it hasn't been "in the wild" for very long. I'll wait until we actually know. But I'm exited about it. Heard a lot of good things from people who switched a while ago.

[@naranyala_dev]

quite interested in the custom "use" function, aka hook or composition, thanks for the inspiration

[@colinhowells]

Pretty beautiful

[@joshuamartin2974]

Thanks!

[@JoyofCodeDev]

thank you! 🙏

[@tomm5765]

Can anyone recommend a good test setup for testing Svelte runes reactivity?

[@SilvestreVivo]

Nice video! In this case, we could do this in a regular TS file since runes are not used in there, right?

[@tom400iq6ft]

“a class is more performant because a function is more expensive” … huh? can you link a source on this, this statement differs from my expectation

[@JoyofCodeDev]

I think it has to do with closures but I'm not sure since it was a concern early in the development of runes

[@antoniobennett6338]

If I remember correctly it’s because for some reason V8 optimizes the heck out of classes. I know Dominic has raised this with the V8 team. Classes are also faster in the context of runes because they aren’t proxied like objects.

[@maninalift]

I had to think about this for a moment but i realised that every time you create a closure, it will basically keep a copy of the function. On the other hand an instance of a class will just hold your values and point to the prototype which holds the definition of the function. That's not based on any deep understanding of javascript mind you. I could be wrong. EDIT: a quick look into it suggests my thought was in fact correct.

[@mikuhl]

I think its mainly how each function has a new resource location, but if its in a class multiple instances of a class can share the same resource location for a function.

[@emersonbarros6815]

Muito feliz de acompanhar mais uma encarnação do rap cru! Muito progresso pra vocês! Não sei se for pra todos, mas o áudio me incomodou em certos momentos, as vozes pareciam muito distantes do microfone e não dava pra entender bem o que foi falado. Com esse ajuste a qualidade técnica vai ficar em 110%!

[@eduardstefan6833]

Great stuff! When is the potion class? :D

[@JoyofCodeDev]

ordinary wizarding levels exams are just around the corner

[@tomm5765]

Does an effect hold a weak reference to the signal? If the signal should be garbage collected will the effect be freed? Or does the effect need to be manually destroyed somehow.

[@JoyofCodeDev]

you don't have to think about it

[@BhideSvelte]

Yaaaaa hoooo 🎉🎉🎉🎉🎉

[@DeviantFox]

I'd love to see $props and in some future videos relating to svelte5

[@baxalasse]

#snippets, $props and $bindable not a fan.

[@DeviantFox]

@@baxalasse I think I'll grow to like them, just need experience and to see what some others are doing to idea generate.

[@baxalasse]

I will also miss the component constructor

[@winterqq1270]

I like the { value } approach instead of getters and setter, but I wonder should I worry about the performance? i'm sure I heard Rich saying that proxies are not the most performant

[@JoyofCodeDev]

you should be fine

[@mylastore]

I've developed a Rune function designed to serve as a store, and now I'm pondering how to effectively set the track and retrieve the stored value on a separate file. The track is an object containing track info, like title, duration, etc. function trackState(value) { let track = $state(value); return { get track() { return track}, set track(value) { track = value } } } export { trackState };

[@johnmishell234]

After a refresh it first shows a 0 and with a slight delay it updates the value to what is inside localstorage. Is there a way to immediately show the localstorage value?

[@JoyofCodeDev]

you could show nothing

[@arjix8738]

there is a way, granted I know nothing about svelte but it should be along the lines of const count = $state(JSON.parse(localStorage.getItem('count') || "{count:0}")?.count || 0)

[@sproott1498]

Thing is that local storage is only available in the browser, whereas in SvelteKit, the page is prerendered on the server. You would have to use a cookie instead (these are sent to the server with each request) and use that during the server render.

[@phoneywheeze9959]

i think you can use the {#await} block

[@koenv85]

It looks like simple Java for frontend

[@BhideSvelte]

Magicccc🎉🎉🎉🎉🎉🎉🎉

[@delfin7743]

Jason and Yamel ❤

[@johnmishell234]

5:06 Why does the effect rune run inside a function definition?

[@JoyofCodeDev]

you can use it anywhere

[@portalteam5832]

@@JoyofCodeDev anywhere in `\.svelte(\.(ts|js))?` files **

[@user-zy4yh8iw1f]

Hey, would you guys be interested in a visual scripting tool to built sveltekit applications ?

[@AlanDanielx]

Now, The Most important Think That You should Teach Us Is About the props, i’m hatting that system along with the way to render the old . Please

[@JoyofCodeDev]

I love the new `$props` rune

[@AlanDanielx]

You now have to specify an interface for types with $props() which is not as good, Now i have a question to you, how to render the children, it seems i have to specify children as part of props, isnt it? Also.. using runes wont allow you to use on:click|preventDefault

[@JoyofCodeDev]

I don't miss it 😄

[@AlanDanielx]

@@JoyofCodeDev you didnt answer my question about how to render children / slot ☹️

[@TheVertical92]

@@AlanDanielx Yes you use the children prop and then the {@render children}, if i remember correctly

[@SoulaORyvall]

I really don’t understand how any of this can be considered magic when even Angular 1 had all this in 2009

[@kelmag13]

Bless us with a video benchmarking the difference between class and closure stores. It seems unintuitive that classes would be faster… Let’s find out!

[@JoyofCodeDev]

I might consider it

[@AlanDanielx]

Reminds me of RuneScape 😅

[@JoyofCodeDev]

the name for runes was inspired by some VR game Ragnarock

[@Dhalucario]

Runes remind me of DOOM

[@ionutale1950]

is it me, or it looks like hooks?

[@JoyofCodeDev]

that's a limiting way to think about runes because runes are just reactive primitives you can use to do whatever you want

[@arjix8738]

@@JoyofCodeDev so you are saying that hooks are not reactive primitives you can use to do whatever you want?

[@JoyofCodeDev]

react is not even reactive

[@zummon]

i could feel typescript would be a problem. too much unnecessary type check

[@arjix8738]

what do you mean "too much unnecessary type check"? cause I barely saw any type usage in this video, other than the generic function

[@zummon]

@@arjix8738 when just add something new you need to specify more types, in the end would end up to be any type. for me i feel when i code i need to make it simple to clear up something and add more another things. just share my thinking, maybe future typescript would be useful for me one day

[@Danielo515]

Classes don't make you write any better code, that is ridiculous. Any method can be a function and you will have exactly the same code split. What classes do is depend on their this context, that you can very easily get dettached from, which will result in runtime errors and no compiler will warn you about that

[@JoyofCodeDev]

no one said that

[@krisnrg]

What do we keep adding new terminology. Runes, spells … it stupid

[@fyfoh]

I agree. And it looks like we're converging back to React-looking code. And the effect stuff- maybe I'm out of the loop, but I thought there was onMount.

[@levicoderman]

You are out of the loop, the names are similar but they don't work the same at all

[@JoyofCodeDev]

why not

[@PaulSebastianM]

Using `any` is a sign of bad design. Instead of proliferating your codebase with uses of any, sending the message to other developers that this is a good thing to do, use `unknown` instead. This way new developers learning from you will not get bad habits like we are seeing for decades now due to poor documentation and blog posts.

[@JoyofCodeDev]

`any` is fine

[@TVDaJa]

I agree that 'any' should be avoided when ever possible imo, but he even removes the 'any's later on and uses generics

[@arjix8738]

@@JoyofCodeDev any is fine when I am the one using it but when I go help a coworker with her code and the entire codebase is using any, lying to typescript with fake types, it is sickening if someone does not know when to use any, they shouldn't use it at all, unknown is the better alternative

[@neociber24]

For this simple example I don't think it matters that much, he could just use JS.

[@ba8e]

So needlessly over-engineered...

[@JoyofCodeDev]

okay

[@arjix8738]

I wouldn't call this over-engineered

[@joloppo]

I am still going to miss the svelte 4 `let count = 0;` Why can't we just have this, maybe opt in. It is so nice for isolated, simple ui components.

[@isaacdruin]

Pretty sure you still can? I haven't had time to watch the whole video, but doesn't he just talk about storing the state through page reloads?

[@jayc413]

Svelte 4 would still be valid when svelte 5 is released but by svelte 6,7 etc they will slowly deprecated some functionality if I'm remembering correctly

[@ThatDereKid]

Svelte 5 syntax is much better. Once Svelte 4 syntax is deprecated, 'let count = 0' will work just how you would expect it to in JS (non-reactive, not component state), but 'let count = $state(0)' will be reactive, and the syntax clearly identifies it as such. The opt-in reactivity is a part of what makes Svelte so much easier to debug than say, React, and the new syntax achieves this in an even better and clearer way.

[@herkulano]

Thanks!

[@JoyofCodeDev]

thank you! 🙏