Great to see someone take us through the migration by first reading the docs, then running migrate and then upgrading stuff. I mean I struggled to read the docs on your screen as you enabled "sans serif" of course as I'm used to the Serif now ;)
Big thank you for this video.t Tying auto migration script some days ago was a bummer for me having all the same issues as you show in this video. Glad to see all the manual work that has to be done, which is not a little TBO.
I migrated my system to svelte-5 using the cli and it went down xD, i think ill need a time its not that easy for everyone, I appreciate the video though thank you, very helpful.
Actually quite interesting and actually felt like Svelte 5 might actually be showing up other JS frameworks for a change actually. Actually just wish you actually made the actual code available actually for study purposes. Actually hard sometimes with just a video to actually see the extent of the actual implementation. But still actually really cool how Svelte 5 actually works.
Hey thank you for a video, about to watch right on time. I am mostly struggling to understand best arch pattern for data loading and putting it in a global state. Before this used to be done in Stores, now we have options to do it with svelte.ts. Do you have examples how can we update svelte.ts and load data from DB, or when svelte.ts updates we push data back to DB?
@@JoyofCodeDev but I believe you could run stores in server side or in +page.server.ts can we do the same with runes? Ps. Is there a right way: functions / classes to use for preferences in your example ?
Using stores on the server was always discouraged unless you know what you're doing, so I would say the same is true for runes - you can get the data from the server and then update the store. It doesn't matter if you use functions or classes, and you also don't have to use accessors and can use functions instead, but I think `.value` is nicer than `.value()`. Classes provide a nicer developer experience since Svelte creates the `get/set` methods for you, but you always have control over it. You can learn more here: svelte.dev/docs/kit/state-management.
Pass a callback as a PROP from the Parent to its immediate Child. Make your Child component invoke the callback function instead of using dispatch() for Custom Events. However, if you want your Child component to bubble DOM Events, then use the same technique: pass a callback instead of event forwarding and invoke it. Note that if there are other components between the Parent and the Child in the hierarchy, you can use Context.
What do you really mean it worked just as fine for me I can use $state in a .svelte.ts file and the compiler can track its changes like the whole purpose of rune is pretty much to solve this issue
@@tranquangthang8897 Create it in a `.svelte.js` file and import it in a `.svelte` file. Use a button to add to it, and you will get an error saying (... ... import...). I forgot the error message. It doesn't work. You need to create an object instead. Like `$state({ value: 0 })`, and do it like `count.value` lol. Their playground doesn't work for me right now, so I can't send you a URL to reproduce it easily.
F*ck this garbage platform. It didn't send my first reply. Here is the second try. """ Create it in a `.svelte.js` file and import it in a `.svelte` file. Use a button to add to it, and you will get an error saying (... ... import...). I forgot the error message. It doesn't work. You need to create an object instead. Like `$state({ value: 0 })`, and do it like `count.value` lol. Their playground doesn't work for me right now, so I can't send you a URL to reproduce it easily. """
![🔴 ฟุตบอลแชมป์กีฬา 7HD แชมเปียน คัพ 2024 [รอบ 8 ทีมสุดท้าย] - ช่วงเช้า](http://i.ytimg.com/vi/bXFWzzy4UJw/mqdefault.jpg)
Svelte 4 legacy docs: v4.svelte.dev/
Great to see someone take us through the migration by first reading the docs, then running migrate and then upgrading stuff.
I mean I struggled to read the docs on your screen as you enabled "sans serif" of course as I'm used to the Serif now ;)
Big thank you for this video.t Tying auto migration script some days ago was a bummer for me having all the same issues as you show in this video. Glad to see all the manual work that has to be done, which is not a little TBO.
I was in the middle of doing this literally just now, this was perfect timing.
this video is a pure gold, thanks!!!
I migrated my system to svelte-5 using the cli and it went down xD, i think ill need a time its not that easy for everyone, I appreciate the video though thank you, very helpful.
50 Minutes peak content!!!
Dude 🎉 , Thank you ❤❤❤
Actually quite interesting and actually felt like Svelte 5 might actually be showing up other JS frameworks for a change actually. Actually just wish you actually made the actual code available actually for study purposes. Actually hard sometimes with just a video to actually see the extent of the actual implementation. But still actually really cool how Svelte 5 actually works.
🤯
here's the pull request I made: github.com/mattcroat/joy-of-code/pull/179.
The Svelte Cinematic Universe
Let's GOOOO!!!!!!!!!!!!!!!!!!!!
Hey thank you for a video, about to watch right on time.
I am mostly struggling to understand best arch pattern for data loading and putting it in a global state. Before this used to be done in Stores, now we have options to do it with svelte.ts.
Do you have examples how can we update svelte.ts and load data from DB, or when svelte.ts updates we push data back to DB?
you can use `get/set` or `$effect` for side effects like I show in the last example
@@JoyofCodeDev but I believe you could run stores in server side or in +page.server.ts can we do the same with runes?
Ps. Is there a right way: functions / classes to use for preferences in your example ?
Using stores on the server was always discouraged unless you know what you're doing, so I would say the same is true for runes - you can get the data from the server and then update the store.
It doesn't matter if you use functions or classes, and you also don't have to use accessors and can use functions instead, but I think `.value` is nicer than `.value()`.
Classes provide a nicer developer experience since Svelte creates the `get/set` methods for you, but you always have control over it.
You can learn more here: svelte.dev/docs/kit/state-management.
@@JoyofCodeDev thank you!!🙏
§effect() doesn’t run on server
💯
Maybe you could replace all your @media rules with @container rules :D Here for exemple : 27:20
yeah I should try it
This got really into the weeds
How can I event bubble?! 😢
Pass a callback as a PROP from the Parent to its immediate Child. Make your Child component invoke the callback function instead of using dispatch() for Custom Events. However, if you want your Child component to bubble DOM Events, then use the same technique: pass a callback instead of event forwarding and invoke it. Note that if there are other components between the Parent and the Child in the hierarchy, you can use Context.
8:30 It's not possible to put that reactive variable in a .svelte.ts file, and no one talks about how stupid it is.
What do you really mean it worked just as fine for me I can use $state in a .svelte.ts file and the compiler can track its changes like the whole purpose of rune is pretty much to solve this issue
@@tranquangthang8897 Create it in a `.svelte.js` file and import it in a `.svelte` file. Use a button to add to it, and you will get an error saying (... ... import...). I forgot the error message. It doesn't work. You need to create an object instead. Like `$state({ value: 0 })`, and do it like `count.value` lol. Their playground doesn't work for me right now, so I can't send you a URL to reproduce it easily.
F*ck this garbage platform. It didn't send my first reply. Here is the second try.
"""
Create it in a `.svelte.js` file and import it in a `.svelte` file. Use a button to add to it, and you will get an error saying (... ... import...). I forgot the error message. It doesn't work. You need to create an object instead. Like `$state({ value: 0 })`, and do it like `count.value` lol. Their playground doesn't work for me right now, so I can't send you a URL to reproduce it easily.
"""
Broooooooooooooooooooooooooooooooooo, I sent 3 comments and none of them show up here. WTF is wrong with TH-cam... This should be f***ing illegal
I can't send the link here. Go reproduce it yourself. This trash platform hides/deletes comments for no reason.