The Svelte 5 Migration Guide

[@JoyofCodeDev]

Svelte 4 legacy docs: v4.svelte.dev/

[@StephenFosterUK]

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 ;)

[@kvetoslavnovak423]

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.

[@jonellwood9212]

If the Svelte Team does not hire you, they are crazy. Your videos are one of two devs that are my go to for Svelte stuff. I love your stuff, and the way you present it. Thank you for putting this content out.

[@WhatNameHere]

Who’s the second guy

[@JoyofCodeDev]

I need answers

[@pookiepats]

i can never finish this dude's video because of all the breaks he takes to polish Rich's knob, like dude - have some of your own opinions otherwise it just comes off as cheap and not authentic. He was glazing Svelte 3 and 4 for all the things Svelte 5 changed and now he's doing it again ffs please name the other guy I would like to check him out too

[@vyntrixdev]

50 Minutes peak content!!!

[@arunkumarTdr]

Dude 🎉 , Thank you ❤❤❤

[@jazza231]

The Svelte Cinematic Universe

[@armantgold]

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.

[@SoloElROY]

🤯

[@JoyofCodeDev]

here's the pull request I made: github.com/mattcroat/joy-of-code/pull/179.

[@ba8e]

Needs more actually, actually.

[@abtix]

I was in the middle of doing this literally just now, this was perfect timing.

[@a7mdbest15]

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.

[@JoyofCodeDev]

I hope you got it sorted 😄

[@firstname-lastname]

this video is a pure gold, thanks!!!

[@kmaximoff]

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]

you can use `get/set` or `$effect` for side effects like I show in the last example

[@kmaximoff]

@@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 ?

[@JoyofCodeDev]

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.

[@kmaximoff]

@@JoyofCodeDev thank you!!🙏

[@kvetoslavnovak423]

§effect() doesn’t run on server

[@すべてに興味を失う]

Maybe you could replace all your @media rules with @container rules :D Here for exemple : 27:20

[@JoyofCodeDev]

yeah I should try it

[@rasyasejati]

thank god the legacy is still supported

[@good-dev-student]

Thanks 🎉❤

[@guzidev]

How can I event bubble?! 😢

[@ozgurNY]

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.

[@babakfp]

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.

[@tranquangthang8897]

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

[@babakfp]

@@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.

[@babakfp]

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. """

[@babakfp]

Broooooooooooooooooooooooooooooooooo, I sent 3 comments and none of them show up here. WTF is wrong with KZbin... This should be f***ing illegal

[@babakfp]

I can't send the link here. Go reproduce it yourself. This trash platform hides/deletes comments for no reason.

[@dei8bit]

Let's GOOOO!!!!!!!!!!!!!!!!!!!!

[@DoctorMandible]

This got really into the weeds

[@ok-alarm]

💯

[@noob-qk7mo]

lets go

[@JoyofCodeDev]

👏