Let's Make A Todo App Using Svelte 5 Runes
Вставка
- Опубліковано 27 лип 2024
- Let's explore and make a todo app using Svelte 5 runes to understand how magical they are.
🔴 Patreon: / joyofcode
𝕏 Twitter: / joyofcodedev
💬 Discord: / discord
🔥 Uses: www.joyofcode.xyz/uses
🔗 Todo App: www.sveltelab.dev/8au5gkb77nt...
🔗 Svelte 5 Template: www.sveltelab.dev/?t=five
🔖 Timestamps
0:00 Intro
0:56 Setup
1:38 Creating Todos
5:27 Adding Todos
8:40 Editing Todos
12:26 Toggle Todo Completion
13:51 Filtering Todos
21:23 Remaining Todos
22:19 Saving Todos To Local Storage
26:26 Outro
#joyofcode #sveltekit #svelte #runes
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!
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
And how beautiful this is, friend!!!
It was my first Svelte project and very fun!
You’re amazing man keep going!
i have some issues with ts and css choices in the video
but it explains svelte runes, so good
Very nice tutorial, well done!
Very very cooool svelte 5 with new syntax state. I like it... Thank you
Very nice ! 👍
wow! very impressive!
🎉🎉🎉🎉 i just love it
wow.. i love svelte.
Thanks for sharing.
You can use css grid to align items to start, center, end.
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
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.
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…
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 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?
how to setup package.json like you, when i start npm i svelte@next, i get only 1 dep
i decide it. npm create svelte@latest . (try beta svelte 5)
@@kaidstor_123 Unfortunately, that doesn't get you the latest version. Check the version in your package.json and you'll see. When I followed that, though, with 'npm install svelte@next', it upgraded svelte to "^5.0.0-next.110" (by the time you read this, it might be higher)
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
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.
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! 😄
Muchas gracias y a seguir adelante mi estimado
Gracias! 😄
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
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
🎉🔥🚀
14:20 getting into runes
Wow, Svelte just got a lot easier!
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.
Are there any reliable leaks on when to expect the Svelte version 5 at the latest?
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 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.
what font are you using?
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.
Thanks! but i miss the simplicity of the old svelte 😿
me too 😢
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.
What font is this?
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
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}`
why edit function? why not bind: ?
That only works if you runify the todo.
Bienvenidos a USA, desde Mexico
Hi, I want to switch from react to svelte, do you have courses?
I have a Svelte and SvelteKit playlist.
can we now do () => {} inside of $derived ?
I thought you could but it seems you have to invoke it.
You installed svelte@next, but what was installed was a sveltekit project !! 😕
😂
Why no usage of databinding?
You can runify the todo.
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 ?
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.
Being specific on the function parameters is not pedantic, is common sense
"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`.
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
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 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
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.
@@bear458ziif-s 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.
Vue much?
I Always Give good rating but This Time My Friend You Focused A Lot On css….👎🏻