Thanks for this video! I think I've found a subtle bug playing around with the todo app in Sveltelab. If you add several todos, then check off a few of them, then use the active or completed filter, and then try to edit or toggle a todo, the wrong todo will have changed when you go back to the all filter. This is because the index of the filtered todo which is being edited or toggled does not correspond to the index in the unfiltered todo list. There's a few ways to fix this which would be a good exercise as well!
Thank you! Every time I watch one of your videos I learn more than I expected. This time it was switch statements and how to generate UUIDs and also I understood better how to use Svelte class directive. Please continue making these videos, they make the life of newbies like me easier!
10:00 I think the reason you like it (and that was my gut reaction too) is that it's cleaner. It's cleaner because it's 1) more consistent and 2) keeps the js logic out of the html and has each thing in their own section
You can use runes outside Svelte components like stores. For that you're going to have a `.svelte.ts` file, so it can be optimized by the compiler. I don't know if that's working yet.
I am very confused. I was assuming that frameworks like Svelte and Vue (not React for sure) allowed us to remove the event.target.value boilerplate code from our event handlers, namely by using bindings. Is this feature gone in Svelte 5 or what is the reason the bindings didn't appear in the video? Also, what is the advantage of using Svelte 5 in this specific Todo app? The video didn't explain this. I can achieve exactly the same with Svelte 3 and less code. In the end, it is claimed that the code is much easier to reason about - why?
Beautiful tutorial. Little surprised you didn't demonstrate fine grained reactivity using runes for the todo values. So that values can be updated without reassigning the list. That's the best feature of runes imo.
The reason I didn't runify the todo is because you would have to runify the todos again from local storage which is more advanced and it would sour people on runes because it's not ergonomic until Svelte comes up with a primitive to make it easier.
Good question, I had to double check this is in my code. `{remaining()} remaining` since the `remaining` function is used in the template then the its re-evaluated when its dependencies changes. Since `remaining` has dependency on `todos` when `todos` is changed then `remaining` is updated. I originally thought it was necessary to use a derived. Matia uses a derived `filteredTodos` but he could have also just used the function in the each `{#each filterTodos() as todo, index}`
I thought that signals could track changes to reactive data however they were made, but the fact that we still need to assign a value to trigger reactivity (meaning just a todos.push(...) won't work) makes me think that it's still the compiler the one triggering the reactive update am I wrong?
Signals wrap a value with a getter and setter, the getter is used to track users of a value, the setter is used to track when to update users. "Reactivity" occurs when the setter is called and all the getters are called with the new value. If an object or array is just mutated and not re-assigned then the setter is never called. Actually, tracking mutations is something the compiler could have improved upon over signals, I am not sure why they haven't, maybe because its hard to track exactly every type of mutation.
This is really a step back from react To find which effect runs on mount you have to read the code, in react you can just peek at the dependancy array You didn't derive remaining but derived filter todos, why?
nice video, but when i try to put the function filterTodos like in the video i get a error: cannot acces filterTodos before initialization. is there something what got changed in the last month?
Ne znam što se dogodilo s mojim komentarom pa ću pokušati ponovo (c/p). Odličan kao i uvijek! 👏 Pratim tvoj kanal i pogledam skoro svaki video iako uopće ne koristim Svelte u svom radnom okruženju. Jedan mali savjet oko stiliziranja inputa odnosno preklapanja elemenata unutar nekog kontejnera za koji si koristio "old school" trik s position: relative/absolute. Za isti efekt možeš iskoristiti display: grid na kontejner elementu te grid-area na elementima unutar njega. Znam da nisam sada apsolutno ništa objasnio no bit će ti jasnije kada pročitaš kratak članak autora Stefan Judis naslova "CSS Grid can be used to stack elements" u kojem možeš naći i odličan video koji vizualno objašnjava korake potrebne za željeni efekt. Živio!
Nice stuff, as always! Can you explain why the first effect block only runs on mount? Is it because todos gets assigned and isn't on the right side? First thought was that both effect blocks get run each time todos gets updated.
I really like your videos teaching me good lessons. Thank you for hard working😁 There is one question I want to ask. is there a reason that you don't use getter and setter with todo in todos?
I didn't runify the todo because you would have to runify the todos again from local storage and I'd rather wait to see how Svelte solves this problem instead of confusing people.
I am facing an issue implementing routing. I get 404 not found with href and javascript error(Uncaught Error: Invalid status code) when i use redirect. Any suggestions how to tackle this in svelte 5 ?
something must have changed between next 4 and current next 22 because now the filtering is not working reliably if at least one todo is marked as completed
man you're a svelte god but please don't take shortcuts by using stuff like bang as you are sometimes exposing first timers to svelte. i know it's not a typescript tutorial but a minute to do something the right way will go a long way.
Why even use typescript if we are ignoring it's features by having so much type casting and type assertion? Would JavaScript with jsdocs not be more suitable?
I used to be all for Svelte but, since runes were announced, everything seems to have a gotcha, a more verbose way to do stuff that has already been solved elsewhere simpler or something just weird for the sake of "future less headache" so i am not sure anymore
@@phene-449 So replacing stores makes up for the rest of the "oh well this doesnt quite wok like every other signal implementation, you need to workaround it with x"?. The point of runes was to bring state powers to every scope posible, but we have to use verbose javascript to do so, Rich as great as he is, proposes Classes, this is not a fix, is just that it turns out that classes are LESS verbose than returning a simple function. What even is the appeal of Svelte if i need to keep in mind this lot of gotchas just because they are ALL IN on this mental model. Vue, Qwik, Solid and NOW even Angular already solved signals in a more elegant way, even if with larger scale projects they maybe harder to scale, complicating things with gotchas everywhere is just a headache to begin with. People that dont use React run from it exactly because it has so many framework especific funcionality that they just go crazy, and now, just because maybe when my codebase is that of one BIG app, i may avoid a few lines and more debuggeable at the cost of everything being more verbose? Sorry but no, Svelte is not svelte-like anymore.
@@davidjesus8629 I look at runes as a reactive primitive that replaces both `let` based reactivity and stores, and its more consistent for those two use cases. Yes there is a big gotcha with runes not leaving scope, so requiring get/set or classes, but that is a single gotcha compared to the many gotchas of `let` reactivity and stores.
Runes are more svelte-like that other signals implementation, they act the same way as `let` reactive variables. Imagine the uproar if svelte was changed to use `.value` or function calling to access the signal instead.
I think people is scared of Rich removing stores or simple reactivity, but in the end is just another tool that you can use when you find yourself against an apparent easy but really hard problem.
A very small nit, regarding your `remaining()` - this could have also been set as a `$derived()`, thus becoming an observable as well. `let remaining = $derived(todos.filter(({data:{done}})=>!done).length);` and, in your markup, `{remaining}` Great intro to runes, and really eye-opening. Thank you for this!
I definitely didn't forget to include how to remove a todo and did it on purpose to give you homework.
Thank you!
Lol it's not a bug, it's a (lack of) feature!
Thanks for this video! I think I've found a subtle bug playing around with the todo app in Sveltelab. If you add several todos, then check off a few of them, then use the active or completed filter, and then try to edit or toggle a todo, the wrong todo will have changed when you go back to the all filter. This is because the index of the filtered todo which is being edited or toggled does not correspond to the index in the unfiltered todo list. There's a few ways to fix this which would be a good exercise as well!
Hey Joy of Code! Big fan. Keep up the great work and excited to see more Svelte 5 stuff.
Thank you! Every time I watch one of your videos I learn more than I expected. This time it was switch statements and how to generate UUIDs and also I understood better how to use Svelte class directive. Please continue making these videos, they make the life of newbies like me easier!
And how beautiful this is, friend!!!
I love the amount of things I learn from your videos besides the main topic.
Amazing work like always, thanks for the quick videos on svelte 5
It was my first Svelte project and very fun!
Very very cooool svelte 5 with new syntax state. I like it... Thank you
i have some issues with ts and css choices in the video
but it explains svelte runes, so good
Very nice tutorial, well done!
10:00 I think the reason you like it (and that was my gut reaction too) is that it's cleaner. It's cleaner because it's 1) more consistent and 2) keeps the js logic out of the html and has each thing in their own section
You also can't use TypeScript in the template yet.
You’re amazing man keep going!
How could we refactor this code to separate the component logic to a new file? Are runes available outside svelte components?
You can use runes outside Svelte components like stores. For that you're going to have a `.svelte.ts` file, so it can be optimized by the compiler. I don't know if that's working yet.
@@JoyofCodeDev He not work in my side
Muchas gracias y a seguir adelante mi estimado
Gracias! 😄
14:20 getting into runes
Thanks for sharing.
You can use css grid to align items to start, center, end.
I am very confused. I was assuming that frameworks like Svelte and Vue (not React for sure) allowed us to remove the event.target.value boilerplate code from our event handlers, namely by using bindings. Is this feature gone in Svelte 5 or what is the reason the bindings didn't appear in the video?
Also, what is the advantage of using Svelte 5 in this specific Todo app? The video didn't explain this. I can achieve exactly the same with Svelte 3 and less code.
In the end, it is claimed that the code is much easier to reason about - why?
You can runify the todo for fine-grained reactivity and use the `bind:` directive.
wow.. i love svelte.
Thank you for this video! Is it also possible to bind the checked attribute to the done property in your todos array? Like: bind:checked…
Using index for edit todo is a bug after introducing a derived state
Yes, it should be using some sort of ID of todo or it might be index of filteredTodos
Very nice ! 👍
Are there any reliable leaks on when to expect the Svelte version 5 at the latest?
Beautiful tutorial. Little surprised you didn't demonstrate fine grained reactivity using runes for the todo values. So that values can be updated without reassigning the list. That's the best feature of runes imo.
The reason I didn't runify the todo is because you would have to runify the todos again from local storage which is more advanced and it would sour people on runes because it's not ergonomic until Svelte comes up with a primitive to make it easier.
Classes
🎉🎉🎉🎉 i just love it
21:40 How does the remaining function update each time todos are changed?
Good question, I had to double check this is in my code.
`{remaining()} remaining` since the `remaining` function is used in the template then the its re-evaluated when its dependencies changes. Since `remaining` has dependency on `todos` when `todos` is changed then `remaining` is updated.
I originally thought it was necessary to use a derived. Matia uses a derived `filteredTodos` but he could have also just used the function in the each `{#each filterTodos() as todo, index}`
I thought that signals could track changes to reactive data however they were made, but the fact that we still need to assign a value to trigger reactivity (meaning just a todos.push(...) won't work) makes me think that it's still the compiler the one triggering the reactive update
am I wrong?
Signals wrap a value with a getter and setter, the getter is used to track users of a value, the setter is used to track when to update users. "Reactivity" occurs when the setter is called and all the getters are called with the new value. If an object or array is just mutated and not re-assigned then the setter is never called. Actually, tracking mutations is something the compiler could have improved upon over signals, I am not sure why they haven't, maybe because its hard to track exactly every type of mutation.
why edit function? why not bind: ?
That only works if you runify the todo.
This is really a step back from react
To find which effect runs on mount you have to read the code, in react you can just peek at the dependancy array
You didn't derive remaining but derived filter todos, why?
do you have a repo for the project? I can't get it to work on sveltelab, and just installing open-props from npm didn't seem to work
nice video, but when i try to put the function filterTodos like in the video i get a error: cannot acces filterTodos before initialization. is there something what got changed in the last month?
Congrats and thanks Matia! Just one stupid question: which color theme do you use in your vscode? 😅
You can find what I use in the description.
why didn't you mark remaining as a derived value?
what font are you using?
Ne znam što se dogodilo s mojim komentarom pa ću pokušati ponovo (c/p).
Odličan kao i uvijek! 👏
Pratim tvoj kanal i pogledam skoro svaki video iako uopće ne koristim Svelte u svom radnom okruženju.
Jedan mali savjet oko stiliziranja inputa odnosno preklapanja elemenata unutar nekog kontejnera za koji si koristio "old school" trik s position: relative/absolute. Za isti efekt možeš iskoristiti display: grid na kontejner elementu te grid-area na elementima unutar njega. Znam da nisam sada apsolutno ništa objasnio no bit će ti jasnije kada pročitaš kratak članak autora Stefan Judis naslova "CSS Grid can be used to stack elements" u kojem možeš naći i odličan video koji vizualno objašnjava korake potrebne za željeni efekt.
Živio!
wow! very impressive!
Nice stuff, as always!
Can you explain why the first effect block only runs on mount?
Is it because todos gets assigned and isn't on the right side? First thought was that both effect blocks get run each time todos gets updated.
That's right! 😄
I really like your videos teaching me good lessons. Thank you for hard working😁
There is one question I want to ask.
is there a reason that you don't use getter and setter with todo in todos?
I didn't runify the todo because you would have to runify the todos again from local storage and I'd rather wait to see how Svelte solves this problem instead of confusing people.
Thanks! but i miss the simplicity of the old svelte 😿
me too 😢
Why no usage of databinding?
You can runify the todo.
Wow, Svelte just got a lot easier!
What font is this?
Great video, where are the styles coming from?
I know we are skipping over it, but it def looks nice, is it a framework?
I use Open Props and the styles come from `+layout.svelte` if you look at the example in the description.
You installed svelte@next, but what was installed was a sveltekit project !! 😕
😂
Using data-index={i} and filtered produce a bug where checking an item in 'active' or 'completed' filter make it update wrong item.
Edit have that bug too. I think using bind is much more simpler, no toggle, edit boilerplate functions and don't produce those bugs.
Hi, I want to switch from react to svelte, do you have courses?
I have a Svelte and SvelteKit playlist.
when i download latest, i still get "svelte": "^4.2.15"
It's not latest, it's `svelte@next`.
@@JoyofCodeDev thanks
I am facing an issue implementing routing. I get 404 not found with href and javascript error(Uncaught Error: Invalid status code) when i use redirect. Any suggestions how to tackle this in svelte 5 ?
can we now do () => {} inside of $derived ?
I thought you could but it seems you have to invoke it.
🎉🔥🚀
something must have changed between next 4 and current next 22 because now the filtering is not working reliably if at least one todo is marked as completed
Bienvenidos a USA, desde Mexico
"We still use reassignment in Svelte 5"... isn't the new reactivity system supposed to do away with that? 🤔
You would have to use something like `setState`.
It became closer to Vue and React. That isn’t a bad thing.
Svelte 5 syntax gives me heartache. It is so sad they runed Svelte. It was a joy learning Svelte 4.
@@ozgurNYit is necessary. They took all of the complexity on themselfs.
KDE mouse but GTK themed browser... Interesting, I wonder what's going on
the power of theming
Being specific on the function parameters is not pedantic, is common sense
Svelte 5: Because Svelte 4 was too easy 🙃
you're emotionally attached to a JavaScript framework
Challenge: this guy makes a bad video
Challenge Level: *literally fucking impossible*
I do a lot of research. 😂
man you're a svelte god but please don't take shortcuts by using stuff like bang as you are sometimes exposing first timers to svelte.
i know it's not a typescript tutorial but a minute to do something the right way will go a long way.
Why even use typescript if we are ignoring it's features by having so much type casting and type assertion? Would JavaScript with jsdocs not be more suitable?
I used to be all for Svelte but, since runes were announced, everything seems to have a gotcha, a more verbose way to do stuff that has already been solved elsewhere simpler or something just weird for the sake of "future less headache" so i am not sure anymore
I think exactly the same, Svelte lost it's true killing feature: simplicity
@@The6DAZ6 not sure why exactly you think it's not simple. it's easier with runes than it was before.
@@phene-449 So replacing stores makes up for the rest of the "oh well this doesnt quite wok like every other signal implementation, you need to workaround it with x"?. The point of runes was to bring state powers to every scope posible, but we have to use verbose javascript to do so, Rich as great as he is, proposes Classes, this is not a fix, is just that it turns out that classes are LESS verbose than returning a simple function. What even is the appeal of Svelte if i need to keep in mind this lot of gotchas just because they are ALL IN on this mental model. Vue, Qwik, Solid and NOW even Angular already solved signals in a more elegant way, even if with larger scale projects they maybe harder to scale, complicating things with gotchas everywhere is just a headache to begin with. People that dont use React run from it exactly because it has so many framework especific funcionality that they just go crazy, and now, just because maybe when my codebase is that of one BIG app, i may avoid a few lines and more debuggeable at the cost of everything being more verbose? Sorry but no, Svelte is not svelte-like anymore.
@@davidjesus8629 I look at runes as a reactive primitive that replaces both `let` based reactivity and stores, and its more consistent for those two use cases. Yes there is a big gotcha with runes not leaving scope, so requiring get/set or classes, but that is a single gotcha compared to the many gotchas of `let` reactivity and stores.
Runes are more svelte-like that other signals implementation, they act the same way as `let` reactive variables. Imagine the uproar if svelte was changed to use `.value` or function calling to access the signal instead.
I think people is scared of Rich removing stores or simple reactivity, but in the end is just another tool that you can use when you find yourself against an apparent easy but really hard problem.
Rich, isnt going to delete regular stores, nor we think that
Vue much?
I Always Give good rating but This Time My Friend You Focused A Lot On css….👎🏻
A very small nit, regarding your `remaining()` - this could have also been set as a `$derived()`, thus becoming an observable as well.
`let remaining = $derived(todos.filter(({data:{done}})=>!done).length);` and, in your markup, `{remaining}`
Great intro to runes, and really eye-opening. Thank you for this!
Yeah! 😄
@@JoyofCodeDev just realized my filter in there is horribly obfuscated, sorry about that lol