0:00

Welcome to Syntax today. We got

0:02

a show for you on Svelt

0:04

5. Svelt 5. Svelt 5 has

0:06

been out for how long, Scott?

0:08

A couple months now? Yeah. Yeah, maybe

0:10

by the time you're listening to

0:12

this a couple months. Yeah. Okay.

0:15

And there is a couple new

0:17

primitives, couple new ways to sort

0:19

of approach state and effects and

0:21

whatnot and some kind of new

0:24

features. Scott, you did. a video

0:26

on the syntax YouTube channel, right?

0:28

And CJ's done a couple. Yeah,

0:31

I did a, actually, you know

0:33

what, it's funny, it's my first

0:35

long form tutorial since Level Up

0:38

tutorials became syntax on YouTube. And

0:40

yeah, it's like a two and a

0:42

half hour long tutorial on, you know,

0:44

getting up and running with Sfelt, especially

0:47

if you've never used Sfelt or coming

0:49

from React. I do a lot of

0:51

like, in React, you do it like

0:54

this. So yeah, it's a good. base

0:56

understanding of all of these APIs. And

0:58

I've been working in Selt Five since,

1:01

man, the first alpha, the first time

1:03

I could get my hands on it

1:05

since I'm a Selt ambassador. I've been

1:07

in the discords and I've been giving

1:10

this stuff a go and testing the

1:12

new APIs out as they've come, pretty

1:14

much as they come. So yeah. It's

1:16

pretty nifty. I'm a big fan of

1:18

how all this works. And we thought,

1:20

let's do like an audio episode

1:23

running through the different features of

1:25

what Sevelte 5 has. But let's

1:27

talk about century. If you are

1:29

upgrading to Sevel 5, like we

1:31

did on the Syntax website, you're

1:33

probably. or maybe going to hit

1:36

some issues where you break something,

1:38

especially as a pretty big website,

1:40

right? And Century is going to

1:42

be there to figure out when

1:44

those things go awry, whether it's

1:46

a database query that has run

1:49

away on you, or whether it's

1:51

a syntax error that when somebody

1:53

clicks a button, it breaks or

1:55

rage clicks, things like that. So

1:57

check it out for your web.

2:00

you definitely want this before

2:02

things go wrong, not

2:04

after sentry .io forward/syntax. Yeah.

2:06

Cool. Yeah, let's get into

2:09

it. First and foremost,

2:11

Svelte5. What is new? I

2:13

think the headline feature

2:15

for Svelte5 in terms of what

2:17

people may have seen the

2:19

most is the runes, R

2:21

-U -N -E -S runes, which the

2:23

word runes here is basically

2:25

just referring to the fact

2:27

that Svelte is using a

2:30

symbol, which is the dollar

2:32

sign to indicate some bit

2:34

of unique functionality. So anytime

2:36

you see the dollar

2:38

sign before a word, you

2:40

know that that is

2:42

some Svelte specific code here,

2:44

whether that is state

2:46

or props or even effects

2:48

or things like that.

2:50

I didn't know that. Yeah.

2:53

Yeah. And it's funny because a

2:55

rune is like a, I believe

2:57

it's a Norse thing. A thing. A

2:59

mark or letter of mysterious or

3:01

magic significance, I would say. Maybe

3:05

a little bit of both.

3:07

Yeah. Yeah. Maybe a little

3:09

bit of both. And it's

3:11

definitely there to give you

3:13

an indication that something is

3:15

happening here. And part of

3:17

the thing that comes about

3:19

with these runes, and we'll

3:22

talk about each of them

3:24

individually here, is that specifically in

3:26

Svelte previous versions, reactivity, variables,

3:28

state, those types of things

3:30

were done in a couple

3:32

of ways. Inside of Svelte

3:34

components, any variable defined in

3:36

the past was a reactive

3:39

variable, no matter what you

3:41

did. That's inside of a

3:43

component. Now outside of a

3:45

component, you have to

3:47

use a writable or a readable.

3:49

You have to use one of

3:51

these reactive state features. a data

3:53

store. Correct. Yeah. And so because

3:55

of that, there was always this

3:57

disconnect of how you did state. within

4:00

a component versus potentially how

4:02

you did it outside of a

4:04

component and it led to

4:06

maybe some confusion about what you used,

4:08

when and where. And so this felt

4:10

teams idea sometimes of, and I don't

4:12

wanna say simplicity, but the idea of

4:14

being able to quickly read and parse

4:16

things is that you should have like

4:18

one way of doing things, right? And

4:20

so the fact that there's these multiple

4:22

ways of doing things here, I think,

4:24

I don't know for certain here, I

4:27

don't wanna speak for them, but I

4:29

think that in the past has been

4:31

something that they've wanted to move away

4:33

from, right? Specifically, even with like SvelteKit

4:35

file -based routing, they felt like because

4:37

the routing, there were so many

4:39

different ways to do routing with

4:41

the file -based routing, once they

4:43

stuck to only folders or routes,

4:45

then that was like, that is

4:47

the only way to do it.

4:50

So now within Svelte5, we have

4:52

the dollar sign state and that

4:54

is the way that you create

4:56

reactive state within Svelte5. So now

4:58

when you create a normal variable

5:00

inside of a Svelte component, it's

5:02

not reactive. Now, I think this

5:04

changes controversial for a number of

5:06

reasons. People really liked the simplicity of

5:08

creating a variable and having that

5:11

be reactive. I personally really liked

5:13

it. I made a meme about

5:15

it and posted that on Twitter.

5:17

So the fact that that's gone,

5:19

I think upset some people. But

5:21

in practice, creating a dollar sign

5:23

state as a ruin for reactive

5:25

state, it just makes things more

5:28

clear what's going on. And on

5:30

top of that, I think this

5:32

topic will keep coming up whether

5:34

or not people are feeling like

5:36

it's overly complex, but the state

5:38

when you have a state creation

5:40

of a state, just like you

5:42

did inside of Svelte4 or Svelte3,

5:45

you still mutate that state. We're

5:47

not doing a set state, get

5:49

state feature like you might have

5:51

in React. You create a variable

5:53

with the state rune, that variable

5:55

is reactive. You mutate it, it

5:57

updates, right? So all the... way

5:59

down too. So like, like if

6:01

you have an object with six

6:03

properties on it and you want

6:05

to update one of those properties

6:07

on the object, you don't have

6:09

to like make a copy of

6:12

it and then update the one

6:14

property and then call set state.

6:16

Like no, you just say like

6:18

person.age equals 70 and wherever that

6:20

object has been used or that property's

6:22

been used and it just re -renders

6:24

and updates it. So I very much

6:26

like that part of Svelte and

6:28

I wasn't bummed to see that like,

6:30

oh, now if you want to

6:32

have reactive state, you have to declare

6:34

it with the dollar sign state

6:36

instead of simply just making a

6:38

variable, not a big deal. At least

6:40

I don't think so. Yes.

6:43

And so when you create a

6:45

state that way and you're accessing

6:47

it, you're accessing a proxy of

6:49

the state, which I also think

6:51

can trip people up because let's

6:53

say you're using state as a

6:55

default value to create other state. You

6:58

can't really do that because it's a

7:00

proxy. So you have to use a

7:02

different rune, which is I believe a

7:04

state.snapshot. Let me even confirm that because

7:07

this rune's name has changed a few

7:09

times. That is the rough thing about,

7:11

you know, getting onto something in an

7:13

alpha is that the names of things

7:15

change so frequently that like now I'm

7:17

like, oh, what is the name? I

7:19

believe it is state.snapshot. So you use

7:21

state.snapshot to grab a snapshot of that

7:23

state at that moment instead of accessing

7:25

the proxy itself. Proxy is another thing

7:28

that I didn't use that much really before

7:30

Svelte 5. You use them where you

7:32

have to. But the fact that your

7:34

state is all in a proxy now

7:36

for me is like something that I've

7:38

had to get used to. Oh, yeah,

7:40

because if you, well, maybe

7:42

answer this, if you console log an

7:44

object that is state, it's not

7:46

actually the object. It's what's

7:48

called a proxy and in

7:51

JavaScript a proxy will intercept

7:53

getters and setters on an

7:55

object so that it can

7:57

do the getting and setting for

7:59

you with some logic, right? And

8:01

if you want just the raw

8:03

object of the raw data, which

8:05

sometimes you want to like send

8:07

that to an API, or sometimes

8:09

you want to throw it into

8:12

something external, you can convert that.

8:14

We have the same thing in

8:16

MongoDB, where like you have a

8:18

document and document both has the

8:20

data, but it also has all

8:22

the methods on it for working

8:24

with it, right? And sometimes you

8:26

just want to convert that to

8:28

just a raw object, right? And

8:30

there was like a 2JSON method

8:32

very similar to this. Yes. Yeah.

8:35

So that is something you have

8:37

to you have to get used

8:39

to a little bit. But for

8:41

the most part, it makes it

8:43

really nice. Now you can also

8:45

create reactive state in a more

8:47

complex way where you can create

8:49

a function that then contains runes

8:51

and those runes may be state,

8:53

right? So you can create a

8:55

function that creates an object that

8:58

has these runes. But then you

9:00

have to write getters and setters

9:02

for that to be able to

9:04

get and set the state within

9:06

that object. Because of the getters

9:08

and setters being like a lot

9:10

of extra code, this felt community

9:12

is kind of largely moving to

9:14

class -based state for like deeply complex

9:16

state objects, which I've you know,

9:18

when I initially posted this question

9:21

to the syntax GitHub discussions, like

9:23

should we use classes or functions

9:25

for this for state? CJ was

9:27

initially like, don't use classes. But

9:29

when I showed him the side

9:31

by side, here's what it looks

9:33

like. He was like, oh, no

9:35

way. Yeah, class is way better.

9:37

It's less code. It feels nice.

9:39

It works really well. self -contained.

9:42

Yeah. Yeah. I like the class

9:44

syntax quite a bit for that,

9:46

especially when you have different getters

9:48

setters. And maybe explain like why

9:50

would you want to build something

9:52

that has its own getters and

9:54

setters? And often the case with

9:56

that is you want to validate

9:58

data before it's being set as

10:00

simple example might be somebody sends

10:02

a string and you want to convert

10:05

that to a number, right? That's a nice

10:07

API to be able to just simply set

10:09

a string and you can parse it out

10:11

to a number and then actually set or

10:13

you might want to log all of the

10:15

changes internally, you know, like at

10:17

this time you changed this

10:19

value from six to seven and

10:22

then 30 minutes later you changed

10:24

it from seven to eight. You

10:26

could do that all in a

10:28

state with getters and

10:30

setters. Yeah, and a

10:32

lot of times, you know, I think about

10:34

like the audio player on the syntax

10:37

side. There's a lot of stuff in there

10:39

and you want to have specific methods

10:41

to, you know, when I click, you

10:43

know, player .play with

10:45

an mp3, a lot of stuff needs

10:47

to happen and it's nice to

10:50

encapsulate all of that inside of some

10:52

kind of like state object where

10:54

that state object or class is keeping

10:56

track of all of the things

10:58

and accessing the instance of this state

11:00

itself. Or even like something like

11:02

player .currentTime equals 36 seconds. Then

11:05

you could say, oh, well, I

11:07

need to do several things. Maybe we

11:10

have analytics that the user jumped

11:12

ahead. Maybe we want to update some

11:14

UI. Like there's several things that

11:16

might want to happen when you do

11:18

that and it's nice to just

11:20

keep the simple, this is just a

11:22

JavaScript object and I'm updating properties

11:24

and all the logic of what happens

11:27

is contained inside of that store.

11:29

Is it called a store or now

11:31

is it just called a state? People

11:34

call it a store. I think

11:36

that's just kind of a

11:38

generic term. It's not specifically a

11:40

store in their documentation, but

11:42

you know, I think anything that

11:44

stores data, you could consider

11:46

a store. Another new rune here

11:48

for state specifically is called

11:50

derived. Now, deriving state is a

11:52

concept that many people are

11:54

familiar in view. I believe it's

11:56

called computed state, but basically

11:58

the idea of the derived state

12:00

is that you have state

12:02

that the value is dependent on

12:04

another state value. So let's

12:06

say you have a shopping cart

12:08

full of products, they have

12:10

prices and that is in state,

12:12

right? You add something, that

12:14

shopping cart changes. The derived

12:17

state might be the total

12:19

or maybe even like subtotal or those

12:21

things where what you're actually doing is

12:23

deriving the one state value based

12:25

on the other one. When one changes,

12:27

this one also changes. And that's

12:29

what you use derived for. When

12:31

A changes, B should also change.

12:33

And a lot of people might wanna

12:36

do this in like an effect,

12:38

right? Or like in React, like a

12:40

use effect. When this dependency changes,

12:42

do this. But in this, you can

12:44

just specifically use the derived to

12:46

do that. If you need more complex

12:48

functionality, like more than just a simple

12:50

expression, there is derived .by, which takes a

12:53

function. And inside of that function, you can

12:55

do your advanced things like a reduce

12:57

of all of the things inside of your

12:59

shopping cart to get that value, to

13:01

then keep that value to be reactive. So

13:03

derived and derived by are two ruins

13:05

that I think they have been taking a

13:07

little bit of getting used to for

13:10

people because they'll often reach for effect. And

13:12

so there's like been a common line

13:14

from the Svelte team is like, hey, if

13:16

you're reaching for effect, maybe think about

13:18

can you use derived first before

13:20

you go down that path? Yeah,

13:23

if there's like a

13:25

saying is don't store what you

13:27

can calculate. And that kind of

13:29

comes from like the database community

13:31

where like, if you have somebody's

13:33

first name and you have somebody's

13:35

last name in two columns, don't

13:37

make a third column called full

13:40

name because then when somebody updates

13:42

their name, now you're playing hot

13:44

potato trying to update two different

13:46

spots. So just store what you

13:48

need and then derive

13:50

what you want from the rest

13:52

of that. And that's not always

13:54

the best use case for databases.

13:56

Sometimes it does make sense to

13:58

simply just store both pieces

14:00

because it's faster to query,

14:03

but in the case of a

14:05

reactive application, it often makes

14:07

sense to simply just store the

14:09

pieces you need, like prices,

14:11

and then derive what it is

14:13

you need, like a total

14:16

added up entirely. Yeah. Yeah. And

14:18

specifically, you know, one of

14:20

the big use cases too, we'll

14:22

talk about effects in just

14:24

a second. But if you're trying

14:26

to update a state value

14:28

inside of an effect, that is

14:31

like a big red flag

14:33

that you should probably be using

14:35

derived. Yes. Yeah. You don't

14:37

want to be maintaining two separate

14:39

pieces of state and having

14:41

to remember. So I updated Adam

14:43

Argel's Gradient .Style. This is the

14:46

best website in the world

14:48

for generating CSS gradients, especially with

14:50

all the new features that

14:52

we have in CSS color and

14:54

radial gradients and Kona gradients.

14:56

And it was on like a

14:59

old version of Svelte and

15:01

Svelte kit. And I had, I

15:03

upgraded the whole thing. And

15:05

it actually, the, the upgrade thing

15:07

pointed out some issues where

15:09

there was a function that returned

15:11

a value. So it was

15:14

like, but it was not a

15:16

pure function, meaning it was

15:18

going outside and also updating an

15:20

external store. I think it

15:22

was like the color picker. And

15:24

then what had happened is

15:27

there was two spots in the

15:29

application that were holding the

15:31

current color and they had to

15:33

be kept in sync whenever

15:35

you did it. And like that

15:37

was, it was causing issues,

15:39

right? So that's a perfect use

15:42

case for, for a drive.

15:44

You should not have that information

15:46

stored in two spots. Totally.

15:48

Yeah. And let's get into effect

15:50

here. Now, effect is essentially

15:52

the same as what you'd have

15:54

use effect in react in,

15:57

in a, in a broad sense,

15:59

where basically this runs when

16:01

things change, right? The difference between

16:03

react and Svelte in many,

16:05

many ways. not just this way, is that because Selt

16:07

is a compiler, it can understand your code in a different

16:10

way, right? So because Selt is a compiler, you can use

16:12

an effect, and the effect will automatically

16:14

track what's inside of

16:16

your effect, and it knows that

16:19

if these things change, then this

16:21

needs to rerun. That doesn't... So

16:23

it kind of inverts the the

16:25

the react model right where the

16:27

react model is I need to

16:30

tell you explicitly which things were

16:32

tracking where Sfeld says we're tracking

16:34

every reactive variable inside of here

16:36

and There is an option to

16:39

not track specific variables if you

16:41

want to untrack things but For the

16:43

most part, I find myself not really

16:45

needing that that often. And for the,

16:48

you know, even with react, people say

16:50

not to use use effect that much.

16:52

In effect is probably the same way.

16:55

Now there's times when you do need

16:57

to use effect. When something changes,

16:59

you need your application to react in

17:01

that way, you use effect. So dollar

17:04

sign effect is just takes... a function

17:06

and the return of that function is

17:08

the cleanup so it runs when the

17:11

components destroy it. And just like

17:13

Reactland, this replaces for the

17:15

most part the on-mount, on-destroy

17:17

life cycle methods and we

17:19

move to just this effect

17:21

where effect will run, you

17:23

know, on-mount and on-destruct. Now

17:25

there's also this effect dot

17:27

pre. Now, effect.pre, it says

17:30

you may need to run code

17:32

before the DOM updates, and then

17:34

you can use effect.pre. Otherwise, the

17:36

DOM updates, then effect runs, right?

17:38

And again, I think this is

17:41

like pretty familiar with how people

17:43

use this stuff. I do use

17:45

effect.pre, sometimes if I'm like building

17:47

a... Like an off-off guard system, right? Like when

17:50

my component's loading, I want to check the

17:52

state of authentication. I don't want the dom

17:54

to render. I don't want the dom to

17:56

even touch that. If it hits that effect,

17:58

I want it to check to see... the

18:00

authentication state before it does anything. And

18:02

so that's what I would use,

18:04

auth .effect .prefor. Some use cases

18:06

for when you might want to

18:08

use an effect is what we

18:10

call them side effects in programming,

18:12

meaning that you need to go

18:14

off and do something elsewhere. So

18:17

for example, if you need

18:19

to write to Canvas when a

18:21

value changes, in the past

18:23

I've done, if you need to

18:25

update the title tag of the

18:28

browser, you could use

18:30

an effect, although most

18:32

things now have title tags

18:34

built in. If you need

18:36

to send stats off to a

18:38

third party API, either

18:40

when something loads or when

18:42

something changes. So for

18:44

example, if you're watching a

18:46

course and the current

18:48

time changes, you may want

18:51

to sync that data

18:53

to an external service or

18:55

API that tracks where you

18:57

are in that specific video. And

18:59

if that's the case, I would

19:01

probably listen for changes on

19:03

that data, which is like

19:05

video .currentTime, that might be

19:07

a store. And then every single time

19:09

that changes, it runs that effect

19:11

and you can put a fetch request

19:14

in there or something like that,

19:16

which would go off and update the

19:18

external API. Yeah,

19:20

what's interesting to us is that you

19:22

can do like nested effects, which man,

19:24

there's, let me tell you, there's some

19:26

like weird things in effect that I

19:28

truly do not understand. And maybe it's just

19:30

I haven't had the use case for

19:32

them, like having a nested effect or

19:34

another one is effect .tracking. Let me

19:36

read you effect .tracking, which I've read, I

19:38

cannot tell you how many times I've

19:40

read the docs, people explain this to

19:42

me, code, I've done it all. And

19:44

I still don't get it for some

19:46

reason. I have a mental block with

19:48

this one. It's like, remember when like

19:50

Redux first came out, I was just

19:52

like, I don't get any of this

19:54

until I like really got it. So

19:56

I'm sure it's like something I just

19:58

need to hit. before it makes

20:01

any sense to me. But effect .tracking

20:03

is a rune that tells you

20:05

whether or not the code is

20:07

running inside of a tracking context.

20:09

And their demo just shows running

20:11

effect .tracking outside of an effect

20:13

and it returns false. Running effect .tracking

20:15

inside of an effect returns true.

20:17

Okay, sure, yeah. I need to

20:19

spend some time with this one

20:21

because I'm sure there's a valid

20:23

use case for it, but. Yeah,

20:25

hold on, let me do quick

20:27

read of it. Oh,

20:30

I see. I see

20:32

the idea here

20:34

is that if it is

20:37

being tracked, meaning that like, will

20:39

this ever rerun? Will it ever rerun?

20:41

Like, if you put it just

20:43

inside the script tag at the top

20:45

of a spelt tag thing, that

20:47

only runs once when

20:49

the component is parsed, right?

20:51

But if it's inside of

20:54

either inside of a

20:56

template or if it's inside of

20:58

an actual effect, then you

21:00

know that that code is

21:02

being tracked for changes and may

21:04

rerun at a certain point.

21:06

need that? So why would you

21:08

need that? That is

21:11

a great question.

21:13

too dumb for hook. also do not

21:15

know. Or for this, I just called it

21:17

a hook. I'm so sorry it's spelt,

21:20

folks. This spelt nightmare is referring to these

21:22

things as hooks. No, I'm too dumb

21:24

for this run. I think a lot of

21:26

these things are like, if

21:28

you are building an app absolutely

21:30

from scratch with spelt and you're

21:33

doing absolutely everything the spelt way, then

21:35

you're not going to hit

21:37

these things. But like actual

21:39

applications are, oh, we have

21:41

this third party charting library

21:44

that works in a certain

21:46

way. And when you're trying

21:48

to like cross that bridge

21:50

from declarative code that is

21:52

spelt to imperative code, which

21:54

is a lot of JavaScript

21:56

libraries that you may have,

21:58

sometimes there's oddities. you

22:00

need to do things imperatively inside

22:02

of, inside of Svelt, there's

22:04

all these little escape hatches and

22:07

I'm assuming that this is one of

22:09

them. Yeah, yeah, for sure. There's a number

22:11

of other little things like effect at

22:13

root or whatever, but basically what they

22:15

say is effect is escape, is an

22:17

escape hatch, and if you need it

22:19

you can go deeper with it. Now

22:21

another room that there is now existing

22:24

is props. Props in Selt have long

22:26

been one of those things, I think

22:28

that trips up new people, because in

22:30

Selt 4 and Selt 3, you had

22:32

to export a variable to have it

22:34

be a prop, which I think even

22:36

felt weird for me. I think the

22:38

explanation I got for it made it make

22:40

more sense, but it still felt weird doing

22:42

that. And now. That's gone now. Now

22:45

we have a dollar sign props.

22:47

And dollar sign props essentially returns

22:49

an object of all of your

22:51

props. So you can destructure your

22:53

props from here. Meaning that typescript

22:55

for this has gotten both easier

22:57

and maybe a little bit more

22:59

verbose sometimes because the... The type

23:01

inference was a little bit better

23:03

with the export props because it

23:05

could infer some types a little

23:07

bit easier. But with dollar sign

23:09

props, you now type it just

23:11

like any normal type script code,

23:13

right? It's an object. You just type

23:15

it as if it, you know, we're an object.

23:17

And so because this is an

23:19

object, you can have default values

23:22

for fallback values. You can define

23:24

something as being optional with. with

23:26

type script, you can do

23:28

spread props, really arrest props.

23:30

You know, when it's like

23:32

spread arrest, I always mess

23:34

that up. I don't know

23:36

if you do, when you

23:38

spread versus rest. You spread

23:40

into a function or you

23:42

spread into, basically when you're

23:44

putting something into an object

23:46

or an array or into

23:48

a function, that is a

23:51

spread. But when you are

23:53

collecting data, that is a

23:55

rest. Yes. Correct. So that that's cool.

23:57

You can do that a lot easier now. There used

23:59

to be some like weird dollar sign, dollar

24:01

sign, rest, props, syntax that was

24:03

just like, it felt like they truly

24:05

just like, we gotta do this somehow,

24:08

you know? So now it makes way

24:10

more sense, yeah. This is nice where

24:12

you can collect them all, right? Previously

24:14

you had to know ahead of time

24:17

what they all were, in this you

24:19

can. simply just use dollar sign dot

24:21

props, which is helpful when you're doing

24:23

like wrapper components that simply just need

24:25

to pass down all of the props.

24:28

I remember I had to use that

24:30

double dollar sign somewhere on the syntax

24:32

website. You just collect them all and

24:34

then pass them along. It was it

24:36

was kind of weird. And the export

24:39

thing always tripped me up too because

24:41

you were exporting and then two lines

24:43

later, if you can use it, but like,

24:45

I'm not. Export is for files. different

24:47

parts of the file. It was one of those

24:49

things that you just like, we're like, I guess

24:51

this is just how it is, right? Yeah. You

24:53

get used to it, you don't even see it

24:56

anymore. But, yeah. Yeah, so that's how you

24:58

do props now. So the cool thing

25:00

about state in Selt, just like view

25:02

and I believe angular, I know angular

25:05

one at least, you could bind state

25:07

to an input. Bind stating in general,

25:09

you can bind state to a div

25:11

and get access to that div, like

25:14

you would like a ref in react

25:16

or something. But if you're binding state

25:18

to an input. Sometimes you want that

25:21

input to be nested in another component.

25:23

And so in the past, you always

25:25

just exported that prop and you bound

25:28

it and if you updated the

25:30

state in a child component, it

25:32

updated the state upwards, which is great.

25:34

But you want more control over that.

25:36

So what they did is they introduced

25:38

a bindable ruin, which basically says, hey,

25:41

if this state needs to be...

25:43

passed back up to the component,

25:45

then inside of your props declaration,

25:47

you have to say that this

25:49

particular prop is equal to bindable,

25:51

and then you give it a

25:53

default value. Because that makes it

25:55

more explicit to say, hey, when

25:57

I bind this variable, I want

25:59

to. to pass upwards, which is nice.

26:01

Again, it just adds a little bit

26:03

of clarity. I think that this, along

26:05

with other things is like something that,

26:07

you know, detractors of the new salt

26:10

stuff would say, we're having to do

26:12

more, right? To do the same amount

26:14

of stuff, but it does make it

26:16

a lot more clear for sure. But

26:18

the, the idea with that is if

26:20

you have a prop coming into a

26:22

component, you don't necessarily know if that

26:24

variable or prop being passed in

26:26

is like bound to a state

26:28

somewhere up the tree, or if it's

26:30

just like a, like a variable somebody

26:32

passed in as a prop, right? Yeah.

26:34

Okay. It just makes it more clear.

26:36

I mean, the functionality is the same

26:39

as the way it used to work

26:41

without bindable. But now it's, it's so

26:43

that if you, you pass something in,

26:45

you're binding it in, not explicitly bindable.

26:47

So yeah. Well, that's still better than

26:49

react state. Cause in react, you have

26:51

to pass the actual state itself and

26:53

the update or function if you do

26:55

want to, to update that thing. So

26:57

yeah, I'm, I'm, I like it. Yeah. I

26:59

don't, I don't mind it. Certainly I don't mind

27:01

it. And you, you only bind state so

27:03

much. I mean, obviously you do inside of

27:05

a form inputs a lot. Again, I bind

27:08

state to, uh, divs if I want to

27:10

access to that, not just divs, but, um,

27:12

elements, if I want to access to that element

27:14

specifically. And another new

27:16

rune here is the inspect

27:18

rune, which, uh, inspect low key

27:20

really, really cool. Now inspect

27:22

is basically a console log replacement,

27:24

but it's for reactive variables.

27:26

The reason why this is cool is

27:28

that unlike react, a

27:30

view component or a spelt components

27:32

don't rerun top to bottom when something

27:34

changes, right? A react component is

27:36

a function. Something changes that function reruns

27:38

that has its strengths and it

27:40

has its weaknesses, right? Uh, the fact

27:43

that it's rerunning every time in

27:45

spelt is variables are tracking. And if

27:47

a variable changes, then either the

27:49

effect that that variable is used in

27:51

or the template code that reruns,

27:53

but the rest of the stuff doesn't

27:55

rerun. And because of that, you

27:57

can't just put a console log on

27:59

a. variable and actually have it

28:01

console log every single time something

28:03

changes because you know that code's

28:06

not rerunning. So they came up

28:08

with a dollar sign inspect. Now

28:10

the coolest thing about dollar sign

28:12

inspect is you pass it a

28:14

reactive variable and it doesn't just

28:16

tell you, it doesn't just log

28:18

out the value. It will say in

28:21

it. and then the value, and then

28:23

it'll say update and then the value.

28:25

So you can tell if this is

28:27

the initialized value or the updated value

28:29

of that variable, which becomes really handy

28:31

when you're trying to debug, when is

28:33

this getting set, how is this getting

28:35

set? Oh, this is actually coming in

28:37

as an empty array instead of a

28:39

populated array. That's either something wrong or

28:41

now I have to check to make

28:43

sure that those variables actually exist in

28:45

the template code. And it's nice. There's

28:47

also inspect with, which basically allows you

28:49

to have a a callback function,

28:52

and that way you can throw

28:54

debugger statements in there. You can

28:56

have a little bit more control

28:59

over it. I pretty much never

29:01

use Inspect.with, but then again, I

29:03

basically never use the debugger because

29:06

I'm a low-level developer. Can you

29:08

use Inspect with it derived? Because

29:10

I see like that'd be kind

29:13

of nice to just watch for

29:15

changes of... Like, for example, if you're

29:18

trying to track the currently focused

29:20

element or something like that and

29:22

you're keeping that in-state, then you

29:24

could simply just watch when it changes.

29:27

So it's not just for state, it's

29:29

also for derived state. Yes, it's for

29:31

any reactive value, even nested reacted value.

29:33

So let's say you have, you created

29:36

your class state object and their state

29:38

or derived inside of that, you can

29:40

inspect those as well and get those

29:43

outputting. It's nice. Now, it's a little

29:45

annoying that you can't just do console

29:47

log, but I get it. In the

29:50

past, we used to do this by

29:52

doing dollar sign, colon console log to

29:54

make console log a reactive statement.

29:56

This actually is nicer because you

29:58

do get that. little v.s.

30:00

code extension called Sfelt. Selt5

30:03

wrap or inspect wrap or something. I'll

30:05

post a link to it in this

30:07

that binds command I to just wrap

30:10

the currently highlighted variable in a dollar

30:12

sign inspect. That way you don't have

30:14

to type it out every time. So

30:16

that's something a little shorthand I gave

30:19

for myself. There's also a room called

30:21

host which is for custom elements or

30:23

web components. So if you are having

30:25

your Selt code being output as web

30:28

components because that's something you can do.

30:30

The host ruin. Let's see, provides

30:32

access to the host element. Pretty

30:34

straightforward. I've never used it.

30:36

I've never output my myself components

30:39

as web components, but you can do

30:41

it. So, yeah. Next one we have

30:43

here is snippets. This is something that

30:45

has been on my grownless for a

30:48

while, which is you're not able to

30:50

define more than one component in a

30:52

file. And you still can't do that,

30:55

but. my use case for defining more

30:57

than one component in a file is

30:59

often I'll I'll loop over something and

31:02

I'll want to put the like let's

31:04

say you have a list of items

31:06

and you'll have an ordered list and

31:08

then you loop over each item and

31:10

then you render out a list list

31:13

list item for each of those right

31:15

often I'll want to put that in

31:17

its own like like just above right

31:19

just so I can put it in

31:21

its own thing and and the big

31:24

use case I have there is often

31:26

all I want to like create a

31:28

couple quick variables before I template it

31:30

because it gets a little bit fuzzy

31:33

and it's not enough to make its

31:35

own component and its own

31:37

file but it's enough to want to

31:39

have to do it separately and now

31:42

we have this idea called snippets where

31:44

you can define reusable pieces of

31:46

markup or of template and

31:49

You can pass it arguments, you

31:51

can type them, and it's

31:53

pretty nice. Yeah, and because

31:55

of how snippets work, they

31:58

also replace slots within. Now

32:00

a slot was kind of how they

32:02

did children. You would have a slot.

32:04

You could have a name slot and

32:07

then you could have named children. But

32:09

now inside of components, children is like

32:11

react. It is the word children. So

32:13

you can use children and children are

32:16

now. considered a snippet, meaning that you

32:18

can actually create, in the same way

32:20

you had name slots, you could have

32:22

named snippet areas that allow you to,

32:25

you know, put things as children inside

32:27

of different parts. Now, I don't, you

32:29

know, the syntax is fine. I think

32:31

it's nice to be able to do

32:33

this. I largely am still creating single

32:36

file components. There is times like certainly

32:38

where I'm creating snippets, list items and

32:40

those types of things to make it

32:42

easier. you know a lot of times

32:44

when I am creating a little thing

32:46

like that I want an individual item

32:48

to have its own maybe its own

32:50

function or its own you know

32:52

functionality in there and then I'll reach

32:55

a single file component gets a little

32:57

bit easier but to render any of

32:59

these things you use a template tag

33:01

at render and then you render the

33:03

snippet name so if you pass children

33:05

it's at render children yeah yeah you

33:07

still can't create variables inside of a

33:09

snippet though right like if you want it

33:11

to Create a variable

33:13

before you go ahead and

33:15

render something. That's not something No

33:18

can do with this as you can

33:20

use only contain markup You can use

33:22

the at-cons template tag. Yeah, it's it's

33:25

not it's not great. Yeah, I agree

33:27

Yeah, I agree. Yeah, I know I

33:29

was talking to a bunch of people

33:32

at the conference last week and they're

33:34

like like what don't you like about

33:36

Svelton I was like that at cons

33:38

is killing me I know you can

33:41

the reason why for people who don't

33:43

know at cons allows you to define

33:45

a variable in a template tag inside

33:47

of your template but it's only

33:50

allowed as the immediate child of

33:52

an if each or snippet oh you can

33:54

use it as an immediate child of

33:56

a snippet okay yeah okay but yeah

33:58

yeah and also you cannot a

34:00

snippet, which makes sense. I think.

34:02

You just make a new component

34:04

at that point. Yeah, that's

34:06

true. Just the overhead to

34:08

having to find all the props

34:11

and everything is kind of

34:13

annoying to make it a

34:15

separate component. Yes, it is annoying.

34:17

You know, it'd be nice to just

34:19

like one click encapsulate as component, turn

34:21

into component or something. Another new change

34:23

here, beyond snippets, I do find snippets

34:26

to be handy. Like you said, it's

34:28

nice to be able to create a

34:30

component without having to make a new

34:32

file. But another new change is that

34:34

the events before in Sfeld used to

34:36

always be like on, colon, colon, and

34:39

then the event name, right? And now

34:41

there's no colon anymore. So on, colon

34:43

click is now just on. click even

34:45

with custom events. You create a custom

34:47

event, it's just on custom event name.

34:49

And this is really nice for a

34:52

number of reasons, but one of the

34:54

things that I take advantage of is

34:56

in Sfelt, let's say you have an attribute

34:58

or a prop on something that the prop

35:00

is the same name as the thing you're

35:02

the variable you're passing into it. So for

35:05

instance, if you have a function named on

35:07

click, in react lane, you'd have to do

35:09

on. on click. I've even forgot what it

35:11

is in react now. On click equals curly

35:13

brackets, on click. Right. In Sfeld, it's just

35:15

curly brackets, on click. So you're just basically

35:17

saying, hey, the on click is a thing

35:19

named on click. And that works for all

35:22

props in general. But it's nice for these

35:24

functions, especially if you have a small component.

35:26

It has one function. That function is a

35:28

click function. Yeah, just say on click. The name of

35:30

the function. The name of the function. That's on click.

35:32

That shorthand. That's one of my wish. That's one of

35:34

my wish list. That's one of my wish list. One

35:36

of my wish list. One of my wish list. all

35:39

the time. You have like type

35:41

equals type and name equals name

35:43

you know like you just

35:45

repeating yourself over and over

35:47

again and it's nice to be

35:49

able to do it. Yeah. So

35:52

is that why they they took

35:54

the on colon click? Because I

35:56

kind of like the syntax of

35:58

that I guess it's. not very

36:00

JavaScripty though. Yeah. Yeah.

36:03

I think it's to

36:05

get HTML and the side effect here

36:07

is that you can just do

36:09

it like this. Another thing too is

36:11

that like now events can be passed

36:13

in as props before events you

36:15

had to do like a custom event

36:17

dispatcher. Now you just pass a

36:19

function down in as a prop of

36:21

that prop is named on click.

36:23

Then you just the prop on click

36:25

goes directly on the button on

36:27

click. And again, it's just like feels

36:29

really, really nice that way. Sarah.

36:31

Let's talk about this one. The Sarah

36:33

font on the website. So they

36:35

rich Harris is always known for for

36:37

being a bit of a contrarian. And

36:40

a lot of the times he's

36:42

he's right. Meaning that like he's used

36:45

JS doc instead of TypeScript, vete

36:47

underscores instead of whatever vete instead of

36:49

webpack. But I got one wrong. They

36:51

were on snowpack first and then he

36:53

made the choice to go to vete.

36:55

And that was like a big try.

36:57

I actually talked to him about that

36:59

in our interview. And it was like

37:01

how hard was that to make that

37:04

call knowing that like people are going

37:06

to be writing think pieces and opinion

37:08

pieces about. Oh, yeah. Yeah, bet. I

37:10

don't write. He got one wrong. And

37:12

that is the spell entire spell website.

37:14

Now Sarah font like I like

37:16

Microsoft Word document from 2003.

37:19

I'm agreeable. And maybe that's it is

37:21

I'm just too much of a fanboy

37:24

to see that. I'll just say, Hey,

37:26

I like it. I like the Sarah

37:28

font, man. You know what? Everybody thing

37:30

that bugs me the most about the

37:32

web these days is that every single

37:34

site looks like Versailles and nothing against

37:36

Versailles. Their site looks very nice. Everything

37:38

looks like that. And it's also boring.

37:40

Every single doc site looks like docusaurus.

37:42

And you look at and you're like,

37:44

All right, docusaurus, which is fine. It works.

37:46

It's predictable. But I am bored,

37:48

man. So like if I see

37:50

somebody taking any sort of chance

37:52

with just just simply by using

37:54

a Sarah font, I am

37:56

not going to complain about that the amount of

37:58

people that are like That sucks. It's

38:01

like who cares man? Yeah, who

38:03

cares? It's really like I care.

38:05

Yeah, just go on the website

38:07

and change the SK font family

38:09

body variable to mono space

38:12

Looks way better. Well, here's

38:14

here's even an easier thing Wes

38:16

you go to the doc site and

38:18

you click on the little a in

38:21

the top right and it makes the

38:23

body font into a sans sale.

38:25

Oh Okay I had enough people complaining

38:27

about it that they had to add

38:30

it. Stop my whining. Yeah. I don't

38:32

have any beef with it. I'm going

38:34

to be honest. And so many people

38:36

complain about it that maybe I'm just

38:38

being contrary. Sarah code is

38:40

weird. I understand Sarah for

38:43

like paragraph text. I understand

38:45

Sarah for headings. That's totally

38:47

fine. But the sidebar has all

38:49

of the like the ruins and

38:51

template syntax is in. Like no one's

38:53

coding in a Sarah font. Yeah, so

38:56

folks, if you want to make one

38:58

change to this, make any piece of

39:00

code that's in the sidebar into a

39:02

mono space font. I think that solves

39:05

it for me. Yeah, because the code

39:07

samples are in a mono space font.

39:09

Right. And the paragraph tags are fine

39:12

in that. I think even the nav

39:14

at some point was in Sarah. Is

39:16

that true? I don't know, honestly. I've

39:18

changed the logo. If you care that

39:20

much, change the Selt logo to be

39:23

Sarafont. You know, make a Times New

39:25

Roman. Times New Roman, yeah. Georgia. Georgia.

39:27

Georgia, by the way, was the font

39:29

that I used for everything back when

39:32

there was like six fonts that you

39:34

could choose from. Oh, I was a

39:36

Verdana all day long. Yeah. I was

39:38

a Georgia man. Yeah. Was that a

39:41

slight? No, no, I could just see

39:43

it. I could just picture it. Yeah.

39:45

I don't know. That's my new. Georgia.

39:48

Yeah. Georgia was pretty nice.

39:50

I, my new thing, when

39:52

people tell me something like

39:54

I would use verdana, you

39:56

just say, explains a lot.

39:58

Yeah, you know? Yeah, I know.

40:01

One more thing here is, before we

40:03

get into some other stuff, is performance.

40:05

Man, one of the big changes

40:07

that they made a lot of

40:10

the stuff is to make, felt

40:12

better, faster, smaller, all of those

40:14

things. And I think it's even

40:16

like setting up for future improvements.

40:19

Like the fact that the state

40:21

is signal-based is that if... the

40:23

browser eventually gets signals or JavaScript

40:25

gets signals, they'll be able to

40:27

eliminate a portion of their code.

40:30

So they're kind of thinking ahead

40:32

because I do think that's inevitable,

40:34

right? But as far as like

40:36

even bundle sizes go, Ben McCann

40:39

posted a really great post showing

40:41

the same project in Selt 3

40:43

was GZipped 987 KBs, and Selt

40:45

4 was 418 KBs. So that's

40:48

a massive change. And then in

40:50

Selt 5. 244 KBs. So yes,

40:52

so the same site went

40:54

from 98 to 418

40:57

to 244, just with

40:59

library improvements. So yeah, pretty

41:01

sick. That's, that's really

41:04

nice. And does this,

41:06

this website also shows it

41:08

in all these other

41:10

frameworks as well? So that's,

41:12

that was from the tweet

41:15

that I had posted in

41:17

the show notes. Have you ever

41:19

seen this? This is Crosest. Crosest. I'm

41:21

so sorry, Crosest. This Croses-Jas Benchmarks table

41:24

is pretty massive. If you want to

41:26

get any like ability to read this,

41:28

you kind of have to click which

41:30

frameworks, but then even that is like

41:32

a massive table. You just deselect all

41:35

and then select the ones you want.

41:37

For the most part. Selt is

41:39

very very fast on these things.

41:41

So if we're looking at libraries

41:43

that it's competing with in terms

41:45

of the one that you might

41:47

want to look at is the

41:49

weighted geometric mean, which is the

41:51

second from the bottom, you can

41:53

see it's like a 1.02 for

41:55

vanilla, vanilla, or vanilla j. S

41:57

is 1.05, right, in terms of

41:59

the. duration in milliseconds, where Svelte

42:01

5 is 1 .13, which is

42:03

great for Svelte, considering the

42:06

only things that people typically use

42:08

that are near it would

42:10

be like solid JS is a

42:12

little bit faster at 1 .1

42:14

million .js, shockingly 1 .09, but

42:17

then you have to scroll pretty

42:19

far before you get to

42:21

other things that people are using.

42:23

I remember Inferno JS was

42:25

supposed to be very fast 1

42:27

.15, Svelte

42:30

in classic mode 1 .16. The million

42:32

JS react implementation is insanely fast.

42:34

Even faster than Svelte. It is,

42:36

and that's crazy to me. I

42:38

don't know what the caveats there

42:40

are if they're any. View vapor

42:42

is 1 .26, so quite a

42:44

bit further back, and then like

42:46

man you got to keep scrolling.

42:48

Hold on, let's go all the

42:50

way to the side. Blazer

42:53

wasm 8. Blazer wasm

42:55

is 8. Sauron

42:58

Alpine 2

43:00

.83, and

43:03

of course this is just, this

43:06

is what is

43:09

measuring fast? Like

43:11

what does that even mean? So

43:13

there's all these number of tables here.

43:15

So create rows, replace all rows,

43:17

partial updates, select rows, swap rows, remove

43:19

rows, create many rows. And this

43:21

is rendering? Yes, and

43:23

then so the very, the second

43:25

to last one is a weighted mean

43:28

of all of those. So you

43:30

can see that like, yeah. So

43:32

it's definitely, I don't

43:34

know where React with hooks is

43:36

in here, but it's quite a bit

43:38

faster, considerably faster. And then the other

43:40

ones on here are like memory allocation,

43:43

or transferred size in first byte or

43:45

first paint. So there's, this table is

43:47

definitely worth spending some time on if

43:49

you want to see. But the long

43:51

and short of it is that

43:53

Svelta is approaching vanilla JS speeds, as

43:55

is million JS, as is solid JS.

43:57

So these things are getting very fast. And

44:00

that's good for all of us,

44:02

especially when the upgrade path is

44:04

running a migration assistant in getting

44:06

a smaller bundle Yeah, no kidding.

44:08

It's just just comes for free.

44:10

I just say that I just

44:12

said that Alpine

44:14

JS was Like

44:16

on the on the slower end

44:18

That doesn't really make sense to

44:20

compare that because people aren't building

44:22

a Their entire

44:25

website in Alpine JS. They're they're just

44:27

sprinkling it on where they need

44:29

it, right? And this is this is

44:31

this is doing apples to apples the

44:33

entire website word. Yeah, totally So definitely

44:35

worth spending some time and looking at

44:37

but again, it's not the end. I'll

44:39

be all in in in fact You

44:41

know largely what determines the performance of

44:43

your site is Images and crazy stuff

44:45

that you're writing. So yeah But so

44:47

I will say gives you less foot

44:50

guns in that regard where with react

44:52

because the component reruns every single time

44:54

You have to worry about yeah, hey,

44:56

what is actually running when this component

44:58

reruns where it's felt? It's so what is

45:00

changing when this variable changes? Aiden

45:02

by we had him on the

45:04

podcast. He's a creator of million

45:06

JS million JS is a like

45:08

rendering What's like

45:10

a react rendering optimizer? Where it

45:12

does kind of the same

45:15

things as felt where it figures

45:17

out What needs to

45:19

update rather than re -rendering the

45:21

whole thing and he's working on

45:23

this tool called react scan that

45:25

basically just like visualizes which components

45:27

are re -rendering and It's

45:30

it's amazing. He's goes on like

45:32

github and Pinterest and like lots

45:34

of very large websites and They're

45:37

all the whole website or is

45:39

Rerendering every single time you scroll

45:41

or something ridiculous like that and

45:43

it's it's not because the developers

45:45

behind it are bad It's just

45:47

like it's just like a foot

45:49

gun You know and in the

45:51

almost always the solution to these

45:54

is just wrap a memo around

45:56

it And the rack compiler is

45:58

going to fix that but it's

46:00

it's at a point now where

46:02

it's like yeah, like do it

46:04

for us because yeah, even highly paid devs that some of

46:06

these big companies are not realizing that it could potentially be an

46:09

issue. I think a lot of the stuff is like, well,

46:11

nobody, nobody noticed that that

46:13

was slow for like 10

46:15

years until you built this tool.

46:17

But there's other flip side to it

46:19

of like, you don't have those foot

46:22

guns, inst felt at all. Yeah. And

46:24

hey, you know, I think React is

46:26

realizing that there's a lot of benefits

46:28

to using a compiler like Solid and

46:31

Selt considering there is now a react

46:33

compiler. There was a lot of talk

46:35

about the react compiler at react summit.

46:37

So it's definitely seems like

46:39

it's obviously a good direction to go

46:42

in. But that brings me I guess

46:44

to a bigger point that Selt community

46:46

has been arguing over is Selt becoming

46:48

react. You'll see a lot of posts

46:51

on the Selt read it about stuff

46:53

like this. And I do think it's

46:55

largely because they chose the word. Well,

46:57

one, it's because you don't have reactive

47:00

variables anymore, but two, they chose the

47:02

word effect. I think, I think simply

47:04

choosing the word effect makes people say,

47:06

hey, react's got that word. That's react.

47:08

Everything has that, that signals has,

47:11

like signals has the idea of

47:13

an effect in it. I think

47:15

it's just that. Yeah. Because in

47:17

reality, the things that are still,

47:19

the reason why you picked felt,

47:21

it's still. Simple and that's not

47:24

like a great word to use,

47:26

but the compiler is still giving

47:28

you a lot of good magic. The

47:30

state is still mutated. You don't

47:32

have to do the whole set

47:35

state, get state thing, and effects

47:37

are automatically tracked. So... you know,

47:39

it's the same way we did

47:41

reactive statements and felt it's now

47:43

just a little bit more clear

47:46

and it's a little bit more

47:48

dialed in right now. We don't

47:50

have on mount on destroy whatever

47:52

and reactive statements. We just have

47:55

reactive statements named effect. So

47:57

in my opinion, you know, this stuff

47:59

is that might look a little

48:01

bit more react -ish, but that's only

48:03

surface level. Once you get deeper than

48:05

that, it's still the concepts, the core

48:08

concepts of Svelte have not really been

48:10

rethought that much. All right, I

48:12

have some synonyms for effect for you. You get

48:14

to choose what the new API is called.

48:16

Give it to me. Consequence,

48:19

that's a good idea because like they say,

48:21

ah, you probably shouldn't use the effect if you

48:23

don't know what you're doing, right? Like this

48:26

could have consequences. Ramification,

48:29

repercussion, conclusion,

48:31

not really

48:33

outcome. Sequel,

48:38

reaction, I think

48:40

I like ramification. I like ramification, you

48:42

know what it could even be like

48:44

reactive, right? This is a reactive area

48:46

of code. Does not matter to me.

48:49

It could be just the dollar sign

48:51

for all I care, but dollar sign

48:53

with a callback function instead of just

48:55

dollar sign colon to me reads better

48:57

and a little bit more control. agree,

48:59

especially for like multi -line things where you

49:01

had to do that weird like dollar

49:03

colon open up a block, that was

49:05

odd. Exactly, it was odd. And I

49:08

think a lot of the stuff makes

49:10

it less odd and maybe it being

49:12

more JavaScripty means that it looks

49:14

a little bit more react, but for

49:16

the most part Svelte's special sauce

49:18

is still there folks. There's nothing stopping

49:20

that. Let's talk about the migration

49:22

really quick here. I know you had

49:24

mentioned you did a migration I

49:26

migrated syntax. three. Yes, you ran three

49:28

migrations. Let me tell you, I've

49:30

ran a number of migrations whether that

49:32

is from the beta of Svelte

49:34

kit to the final release of Svelte

49:36

kit. From Svelte three to Svelte

49:38

four, Svelte four to Svelte five nobody

49:40

does migrations like the Svelte team.

49:42

I don't know, honestly

49:44

I don't know which individuals are the

49:47

ones who are making this so

49:49

good, the shout out to the entire

49:51

team because I ran the Svelte migration

49:53

assistant on the syntax website

49:55

which is not a tiny code

49:57

base by any means and

49:59

what I ended up having

50:01

to touch like 10 files afterwards just to clean up some

50:04

things and it told me which files. It's not like,

50:06

all right, figure it out, there's things

50:08

broken. It's like, here are the things

50:11

that you need to look at. All

50:13

right, I looked at them, swap some

50:15

stuff, made some choices, and bingo, bango,

50:17

I completed the migration in less than

50:20

like an hour, which is kind of

50:22

an absurd. statement. I've never I'm a

50:24

refactor guy. I've never refactored a code

50:27

base that large in an hour that

50:29

easily. So a shout out to this

50:31

felt team, the migration assistant. Yeah, it

50:34

worked really well. Yeah. And like I

50:36

ran it where I so I upgraded Selt

50:38

3 to 4, then Selt Kit 1 to

50:40

2, and then Selt 4 to 5.

50:42

And I'm I must have spent maybe

50:44

12 and a half minutes fixing a

50:47

couple little effects. And the things

50:49

that I fixed were actually like a

50:51

bug in the not a bug but

50:53

like a bad practice in the thing

50:55

where it was like updating a store

50:58

as part of a pure function

51:00

and it like uncovered in an

51:02

actual issue so I was amazed

51:04

at how well that actually worked

51:06

yeah almost to a point where

51:08

like I had to actually go

51:10

into the code and read it because

51:12

the code looks significantly different than than

51:15

it did before and If I'm gonna

51:17

have to jump into that at some

51:19

point, I have to understand what's going

51:21

on here. Yeah, I don't know what

51:23

their, I mean, I get that they

51:26

have their tools, but the fact that

51:28

it is so painless. or at least

51:30

it works so well when you know

51:32

that there is such a wide variety

51:35

of potential code bases and things. It's

51:37

pretty amazing. So shout out to anybody

51:39

who worked on the migration assistant worked

51:41

really well. A big thing here is

51:44

I guess what's next first felt. I

51:46

had to when I interviewed Rich at

51:48

J.S. Nation again, I asked him very

51:50

specifically. All right, we

51:53

just have massive release like What's

51:55

next? Is it Falkit 3 or what

51:57

is next? And he told me that

51:59

the they're going to be releasing

52:01

a ton of little things over

52:03

this whole Christmas break time area,

52:06

where what do they call it,

52:08

like an advent or something? I

52:10

don't know if he specifically used

52:12

the word advent, I'm trying to

52:14

remember in my brain, but he's basically

52:16

saying that they're going to release a

52:18

ton of little features here and there as

52:20

these weeks go on, and one of

52:22

which they've already announced is error boundaries, so

52:24

you're gonna have easy error boundaries. He

52:27

said that's something that people have been asking

52:29

for for a long time, but they put

52:31

off because they felt like it would

52:33

be like a more difficult project, and then

52:35

somebody just knocked it out in like

52:37

no time, and they're like, oh wait, never

52:39

mind, it's actually really nice and easy.

52:41

So error boundaries are coming, I think they

52:43

want to do context better.

52:45

Context largely works the same

52:47

as it does in React

52:49

without providers, but you have to

52:51

type whenever you retrieve context. So it

52:53

often feels like you're throwing your data

52:55

in a black hole, and then you're

52:57

retrieving it and casting types onto it. So

52:59

like some kind of like more type

53:02

safe context API would be really nice. I

53:04

honestly, I don't think you need context as often

53:06

as you do in React because you

53:09

can simply just import and export stores,

53:11

right? A lot of what people are

53:13

using context for is because they like

53:15

with React State, you can't just export

53:17

an import state like that unless you

53:19

create your own custom effect to hold

53:21

it. Yeah, well, I think there

53:23

are certainly some use cases specifically

53:25

when you get into server side

53:27

rendering and you want to make

53:30

sure that if you create state

53:32

that has sensitive data on the

53:34

server side or something like that,

53:36

that could be spread amongst users.

53:38

So you do have to I

53:40

guess be a little bit careful.

53:42

So context, I do use context

53:44

somewhat most the time I am

53:46

creating state in that way, but

53:48

yeah, there's also talk of potentially

53:50

like class helpers, like new things

53:52

where you could have more advanced

53:54

syntax for toggling and changing

53:56

a bunch of classes. I

53:58

know specifically like tailwind folks

54:00

really ask for this. kind of

54:02

stuff because they got a lot of classes over in

54:04

tailwind land so you got to have a means of

54:06

toggling a whole bunch of them beyond a bunch of

54:09

ifs still active in active class or

54:11

yeah what even like active class or

54:13

whatever is now super easy it's already

54:16

super easy and felt because you can

54:18

do there is already like a shorthand

54:20

for toggling one variable but it's when

54:23

you have like or toggling one

54:25

class when you have like eight

54:27

classes you want to toggle. Again,

54:29

it gets a little bit rougher.

54:31

You have to do a whole

54:33

bunch of things. I think that

54:36

is a pain again, specifically for

54:38

Till and folks. But either way,

54:40

I think by the time you're

54:42

hearing this, there will be, you

54:45

know, into December and we're going

54:47

to start to see little stuff

54:49

trickle out here and there, and

54:51

it's going to be really super

54:54

exciting. like right now it's felt

54:56

kit must fetch at a page

54:58

level and pass into components and

55:01

like it doesn't that doesn't make

55:03

sense to me because everything is

55:05

is so component based I'd rather

55:07

just fetch the data in the component

55:09

and the page to figure out what

55:11

it needs. Yeah, I don't. I didn't

55:14

ask him about that and I should

55:16

have. I will because that is one

55:18

of my things too. I want like

55:21

islands and I want data fetching at

55:23

a component level. Like those types of

55:25

things for me are the things that

55:28

I would really like to have. Yeah,

55:30

actions at a component level. Yes, I

55:32

would like all of that stuff. So

55:35

hopefully, yeah, we'll see, I'll have to

55:37

ping in this felt channel about that

55:39

stuff. What do you want to see

55:41

in Selt 5 and beyond? What do

55:44

you want to see in the next

55:46

version? What do you want to see

55:48

in Seltkit? Are you using it? Are

55:51

you not using it? Why aren't

55:53

you using it? Why aren't you

55:55

using it? Too much magic, not

55:57

enough magic. Do you think it's

55:59

becoming a...