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.
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.
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
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
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%!
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?
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)
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.
Thanks so much! It's really useful! Out of curiosity, is there somewhere these are officially called "spells" or is it something you have come up with?
Can you please make tutorial how to do svelte 5 runes to handle object cross whole application, like global state ? Where by any time i can get a current value or values..
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
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
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.
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.
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
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 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
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.
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.
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.
I cannot make it work, I just get this error: errors.js:155 Uncaught (in promise) Svelte error: effect_orphan `$effect` can only be used inside an effect (e.g. during component initialisation)
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 };
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 😀
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.
@@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
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
HOW BEAUTIFUL IS THIS FRIENDS!
I'll be keeping this for when Svelte 5 becomes stable 🔥
It's already stable! 😄
@@JoyofCodeDev well, omw to try it out 😄
the release candidate is out
@@JoyofCodeDev it's hard when another basic library not upgraded yet. sonner, shadcn, bits-ui it still cannot be used
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.
look guys how beatiful is this! 😊 This is top phrase
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.
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
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
Can anyone recommend a good test setup for testing Svelte runes reactivity?
Beautiful!
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%!
quite interested in the custom "use" function, aka hook or composition, thanks for the inspiration
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?
you could show nothing
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)
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.
i think you can use the {#await} block
Thanks so much! It's really useful! Out of curiosity, is there somewhere these are officially called "spells" or is it something you have come up with?
I made it up
Can you please make tutorial how to do svelte 5 runes to handle object cross whole application, like global state ? Where by any time i can get a current value or values..
if you pass an object to `$state` like `$state({ theme: 'dark' })` it's global when you export it
Great video!
Pretty beautiful
Thanks!
thank you! 🙏
You're awesome !!!
5:06 Why does the effect rune run inside a function definition?
you can use it anywhere
@@JoyofCodeDev anywhere in `\.svelte(\.(ts|js))?` files **
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
you should be fine
Magicccc🎉🎉🎉🎉🎉🎉🎉
Reminds me of RuneScape 😅
the name for runes was inspired by some VR game Ragnarock
Runes remind me of DOOM
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.
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?
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
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.
is it me, or it looks like hooks?
that's a limiting way to think about runes because runes are just reactive primitives you can use to do whatever you want
@@JoyofCodeDev so you are saying that hooks are not reactive primitives you can use to do whatever you want?
react is not even reactive
What do we keep adding new terminology. Runes, spells … it stupid
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.
You are out of the loop, the names are similar but they don't work the same at all
why not
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
no one said that
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.
`any` is fine
I agree that 'any' should be avoided when ever possible imo, but he even removes the 'any's later on and uses generics
@@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
For this simple example I don't think it matters that much, he could just use JS.
“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
I think it has to do with closures but I'm not sure since it was a concern early in the development of runes
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.
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.
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.
Awesome vid. It's crazy how it's excatly how you define composable in vue ;D
It looks like simple Java for frontend
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.
I cannot make it work, I just get this error:
errors.js:155 Uncaught (in promise) Svelte error: effect_orphan
`$effect` can only be used inside an effect (e.g. during component initialisation)
Hey, would you guys be interested in a visual scripting tool to built sveltekit applications ?
I'd love to see $props and in some future videos relating to svelte5
#snippets, $props and $bindable not a fan.
@@baxalasse I think I'll grow to like them, just need experience and to see what some others are doing to idea generate.
I will also miss the component constructor
I really don’t understand how any of this can be considered magic when even Angular 1 had all this in 2009
Angular 1 had reactivity?
Great stuff! When is the potion class? :D
ordinary wizarding levels exams are just around the corner
Nice video! In this case, we could do this in a regular TS file since runes are not used in there, right?
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
};
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 😀
Jason and Yamel ❤
Yaaaaa hoooo 🎉🎉🎉🎉🎉
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.
you don't have to think about it
i could feel typescript would be a problem. too much unnecessary type check
what do you mean "too much unnecessary type check"?
cause I barely saw any type usage in this video, other than the generic function
@@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
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
I love the new `$props` rune
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
I don't miss it 😄
@@JoyofCodeDev you didnt answer my question about how to render children / slot ☹️
@@AlanDanielx Yes you use the children prop and then the {@render children}, if i remember correctly
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!
I might consider it
So needlessly over-engineered...
okay
I wouldn't call this over-engineered
Thanks!
thank you! 🙏