Svelte 5: Speed, Simplicity & Size

What what What's going on? No. I'm I'm trying to be animated because of the it's gonna be on video now. Although, should we do a little bit of faces first?

Going good. Pretty stoked to be here. I've been fussing with my mic and everything. Have we even like, should we introduce Sanity, or or what what

some of our new features with these these things. And, like so it's to it's released. Like, right, like, are we able to update our site to Svelte five? I know we updated to SvelteKit 2,

To you don't have to really know what a signal is. You just you still have to know what a variable is. Right? Like, we're not moving to set state.

To Right? We're still using mutable variables. So if I make a a state and it's an array, I can still use to push and slice in all my mutating values just fine in its its reactive variables? Correct.

and then I need to, like, to derive some values. Right? Like, I need to I think in some spots, I think Wes filter an array, depending on on the values. And it it was always a little bit funky Wes you have to, like, sometimes wrap, like, do the dollar sign, colon, and then wrap a whole block Totally. Inside of that and then and reach outside and update another state variable.

To This derived is really nice because you can say, like, okay. Like, it's not a new piece of state, but you should be watching, to internally what your pieces of state are doing. And I actually went through not the Svelte state, signals, but I went through the PREACT signals.

So if you are ever wanna read a fantastic I don't know. It's probably 800 lines of code or or 500 lines of code. To go look at the preact signals. It's not our only react thing. It can be used with vanilla JavaScript, and it's a single to a single file for the entire library, and how they detect whether variables inside of to a derived function, our change is really interesting.

It's essentially just watching for variables that change, and then it says, oh, to something inside of me changed, I must then update my derived value. Yeah. Yeah. In, like, view, they're called, like, computed variables.

Sorry. I just looked at the example before you even explain it, and I was like, this is I could if you go back to the 1st episode on Svelte,

To That greatly simplifies it. That's gonna be really handy for like, if you have, like, a presentational component and then you have, like, the actual, like, a component that does your functionality, often, you find yourself passing hot potatoeing it just from the presentational component down to the functional component, it, and you're rewriting it many times. I found that really frustrating to do, and this will allow you just to to spread them all down. That's something we have been able to do in React for a long time. Will, I have a question. You might not you might not know the answer to this. Is that, to, is class going to be involved in those props? That's one thing that always drove me crazy is you can't pass, like, to a class from a custom component down to the the div unless you name it something like Klaz with a z. Oh, man. To That is not something I know, but I can actually test really, really quickly here. I'll I'll explain why I want this. To so often, I'll build a custom component in Svelte, and I wanna slap a class on it, because to I want to style it in a certain way, and you're kind of crossing the, like, style boundary there. Where you specify find the class, that's sort of done in, like, maybe that's done in your page layout, and your page styles will be applied there. And then you go inside of your component, and to And any styles that you write inside of that component will then be applied. And it I guess Svelte doesn't know that you to use a specific class, and it's being passed in. But I I do find that really frustrating because I often just wanna oh, I'm using this component, but to It's like a a different version of it, and and you find yourself just, like, reimplementing the whole class structure. Like, you make a a prop called to is big or, card layout or something like that, and it's just like, classes do this already. Yeah. So I in the preview,

To Yeah. Okay. But if you if you destructure it with a Wes, like, you collect them all with dot dot dot, it's probably not in there. Hey?

to Let me actually try that. Because it's not a prop. It's a HTML attribute. To I don't know how they would be able to do, like, the they they tree shake your CSS. So in Svelte, if you don't if you have a class to That is not used in a component, and it has a bunch of CSS associated with it, Svelte doesn't it just throws that CSS out. Right? It's unused. To and it, like, it has to be statically analyzed. So if the class is written in a different file, I don't know how they would figure that out. And to maybe I'm just, like, not doing it right, but I always found that to be a bit of a pain. So I may able to pass class as a prop with rest,

like a document dot whatever inside of there. Which Or an entire client side library. To

to Use isomorphic effect for server side content or you you know, the the if you try to throw a document anywhere in a React component like that, it's going to complain unless, of course, you're doing these new client side components. Yeah. Someone might be asking, like like, what's to who cares about how big your server side functions Yarn? Your bundles are on the server side. Right? Like, doesn't really matter, does it? To No. And the answer ESLint actually does matter. Now that we're going a lot more to, like, serverless and, edge functions, to the smaller they are, the faster they will be parsed and sort of boot up. And, also, there's there's a hard limit to how much code you can put to in a serverless function, edge function, and you you do end up butting up against them. Especially, sometimes, you you have these little libraries where you don't expect them to be huge. And in the next potluck, we have a a question exactly on that JS to things that accidentally don't get tree shooken,

So an effect would probably be handy if you were watching like, let's say you have a name variable, to, and somebody types into a text box and and changes their name, you might want to write an effect that then updates that value in the database whenever they type on it. Is that maybe an example of when you'd use an effect? To

Okay. Just Wes this code variables change so it's not derived. Like, you're not figuring out new state.

you know, when something when some state changes doing something when some state changes, you probably wanna use derived. Right? Kind of like a at event listener it for a piece of state when you wanna have a side effect. You wanna you wanna send some data elsewhere. You wanna log something or maybe not even log. We'll talk about the next one. To Yeah. But it makes sense. One of the ways that Svelte's different from React is that you're con you're more frequently working with the DOM itself. To And so I think useEffect

that's something I use quite a bit JS you throw a console log in, like, the right before your your render.

And if you want it to rerun when the values change because you wanna see what the actual updated values look like, it seems like usually, I would think like, oh, yeah. Just

To Yeah. I know. It's getting there. But, like okay. So now I'm building components with multiple props. It. But then if I want multiple in a file, then I gotta, like, I gotta move it from multiple props to this, like, weird object. It's not a weird object. To just a object, but alright. I'll take it because I certainly hated having to put things in in a separate file when it's to especially with an if else. Like, you have the same component, and you wanna render you wanna render it this way if if this is the case, and this way if it's the case. And, to oh, I need to render this in 2 spots. Now I have to put this whole thing in a separate file.

And I bet I don't know if this is the case. I don't see anything, but I bet you can infer the types it from the props object.

So you could just, say, like, you could use TypeScript's partial to type of props.

I bet I bet that would work. So you're not, like, doing a whole bunch of typing. You could say, like, alright. Well, this this function is taking a partial or, to, pick. You're you're picking these 2 props out of all the props that were passed in, so I don't think it it'd be as bad as I'm thinking. To You're you're not going to have to individually type those props JS far as I know. Oh. That get passed into the yeah. And let me even double check that with my, to with my code base right now. Right now, it's not possible to add types to snippets, and the parameters, this is something we hope to address before we ship Svelte five. To Okay. Because it's you're essentially just making a function. Right? So you JS a function. Yeah. Would have to type the function itself. Right? Otherwise, it don't know what to pass it or to or what the type of the data is coming in. Yeah. That tracks. Okay. Cool.

Makes sense. I was just about to ask, to can you pass can you export a snippet, from a file? But if you're doing that, you probably should just make a a component. Right? Yes. Probably.

situations there. Kinda like that, though.

To and Yeah. What I see here stood out or what? Yeah. I just I kinda like the the syntax of it. I never liked the fact that on click was not camel cased. To Yeah. I know. I get it too. It's just like a on blah blah blah. Right? Yeah. Especially, like, if you have custom events. And I just asked them about this. Yeah. This custom events. I'm also seeing here the to the the pipe to prevent default is gone forever.

features that they've been rolling out are just JavaScript.

Right? All of Yeah. Yeah. Yeah. Yeah. They're all JavaScript.

To then Node they're getting rid of the custom syntax, and they're getting rid of some of the magic.

What's the

you know, essentially get the next to tick in Svelte. It can be useful in context in which you just want to wait a frame. You know? Yeah. Like, you wanna put something at the end of the event loop. So I have a to I have a package that is incredibly popular called wait. That's essentially a promise that resolves after it. Over many seconds, you pass it in, and I use it all time for just wait 0. And Scott says, hey. You don't need that.

that is rerunning every single time the name changes.

And we also to need another variable inside of that effect, but that variable updates too often. Right? So Yes. You say, okay. Like, to you still pass the data in, but don't rerun me when, I'm when that variable changes. Only rerun me when the the rest of the tracked values are. Dead on. That's nice. I could I could see that, like oh, I have a good example.

Mouse x and mouse y. To right? Like, you do need the mouse x and mouse y, but don't rerun every single time Oh, yeah. Someone moves the mouse. You know?

shockingly fast. Yeah. I'll say that. Looking. To What's what is faster on this benchmark than Svelte five? So Solid is just beside it, above it. To vanilla.

Js. 1,000,000. Js

backwards compat with the older APIs? Is it is that it stuff gonna stick around, or is it gonna be a big, like, no. You gotta move all your stuff over in one good Yeah. Big go? Almost nothing is, like, removed from Svelte. Wes Svelte 5. So

Sweet. I I think this looks to Very, very simple. Like, it's I feel like I understand it. You know? Not I've I've built a couple things in Svelte. We built obviously built the syntax website in Svelte, and I feel like I know it pretty well, but,