Svelte 5: Speed, Simplicity & Size

in, like, the right before your your render.

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, and then I need to, like,

I love all of that. Next up is snippets. That can actually be the 4th s to in the the 5 s's that we were talking about. Speed, simplicity, size Scott. 5. Snippets, and Scott. There we go. Scott with Scott on the top. To Yes. I love that.

they type on it. Is that maybe an example of when you'd use an effect? just beside it, above it. To vanilla.

Maybe.

you might want to write an effect that then updates that value in the database

to Or I'll just say updated or Sanity five version,

Yeah. I'm gonna tell you what. Effect pretty much replaces any time you would think about doing dollar sign, colon, to a block.

to Changing state, to The 1st video episode of Syntax. Now you may have seen some prior episodes being popped up. We we decided to just take some of our to Bos episodes of the past couple of months. Let me just throw them up. And those those weren't actually recorded as being a, quote, unquote, video podcast. So you know, really enjoying the experience.

rune. And, actually, I'm sorry. Before we get off effect, you can actually do nest effects too, which to It's kind of blowing my mind right Node. Okay. And I have it yeah. So in in Rich's example, he showed, like, both the initialization

To Correct. In fact, that's a that's a a a thing they want you to know is that, like,

if if you're thinking about

script as well as, like, the listening TypeScript for a Canvas drawing app.

which is actually way better than a console log to Because it gives you context. It says, oh, this was an updated event. So in your console, say, component or

To

but it made sense.

good,

it seems like usually, I would think like, oh, yeah. Just 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

To or an entire client side library. In their demo, they were doing, like, a Canvas style thing. And the reason why that rules to is because if you've ever worked in React, in a server side rendered context, you'll know that you can't use useEffect. You have to use I can make this available to anybody who wants to. I'm just working in the Svelte REPL here. So interesting enough. To Next one is going to be the effect, In Svelte before, you could do state by just having a variable, or you had a writable to To Which is fine because if you need more arguments passed in, you just pass them in as an object. So not really anything crazy or different there.

I I'm here to say it does not feel like React because to I think the things that feel yucky about the React are the, past snippets are way more powerful than slots were. To I think we still need to see some code examples of about what that looks like considering slots are used throughout SvelteKit and all sorts of stuff. So, you know, who knows what that is, but to Slots will probably eventually be, removed in favor of snippets.

to to Likewise, if you're introducing any code into your

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

yeah. It kinda feels like React, doesn't it? And dependency array and maybe not necessarily knowing what's going to set it off. With to Svelte special and that is a good thing in my mind to Because it's way more predictable. Another cool thing about the effect is that it's removed entirely from server side rendered Node, so your to Server side bundle is smaller, to I am getting unexpected to situation.

To And and and I think it does not feel like React because, one, you still get that variable of mutating reactivity.

And because it is to Signals

You have a derived value that's, to your state times two, that derive will always be in sync with the state value. If you update that state value, derive will update as well. To that's a really nice way of doing things, I think. We have that on a couple Scott on the Syntax website where we take our state,

based.

You get, like, fine grain reactivity in, like, let's let's say you have an object full of a bunch of props. You can go in and reactively update just, like, one of those values. Right? I could not understand the export thing of the Svelte component. So to sorry. Go ahead. Yeah. And you're right. And not only can were were you, like, the type of person who'd be like, I don't I don't get this export const props, which is how you did props before, But, again, these are gonna be small learning experiences that people inside of your if you wanna remove something, you use the un to track function. And that's it's kind of like a reverse dependency array. Right? Oh, so But only if you want it. Let me let me think about, like, how that might to might work. So you have an effect

You end up getting a lot of benefits overall in terms of this fine grain reactivity.

Alright.

That makes more sense, I think. And, Now granted there could be some new stuff specifically around animations, To And it does feel like you're aligning with But in reality, again, it just to

to syntax, to And this is episode number 7/23. We're gonna be talking all about Svelte five, what you need to know, what's important, to what the big picture stuff is and and what it's all about. And you know what? chilled out a little bit on the snippets and moved things into actual components as the application has grown, to But I think that's a good indication of how you'll probably end up using this stuff. Right? Because oftentimes, when you are prototyping, you're just trying to throw something down. You're trying to throw it down, get it working, and then maybe as the application grows and you see, oh, wait. I actually need to use this component elsewhere.

not much is going to change for you. We're not going to be describing things that you're seeing on screen.

you could break your code. You know what to Breaks code writing code. And if you write code at all, well, you have an opportunity to have a bug slip in there. And more than just bug tracking, I think this goes right along with to Some of the messages of Svelte 5.

Welcome, everybody. This is officially

to You know, what you're serving up to your users at any given point. So check it out JS century.i0forward/

Svelte five. Wes, to give you some background here, To

Yeah.

fussing with my mic and everything. Have we even like, should we introduce Sanity, or or what what And if you want it to rerun when the values change because you wanna see what the actual updated values look like, that's something I use quite a bit JS you throw a console log is card layout or something like that, and it's just like, classes do this already. Yeah. So I in the preview, 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? Going good. Pretty stoked to be here. I've been reimplementing

You wanna be tracking that speed in the size of your code base,

Welcome to Syntax on this.

To based on what the event was that caused this thing to change. So it it is essentially a reactive console log, gives you a lot of context, and there's, like, more freedom in here Wes there's even a callback. You can throw in a debugger statement in there. If you're if you're the type of, person who loves use the debugger. It works really, really well in that context as well. Oh, I like that as well. That's again, Now we have this in Spectrum,

Node do we introduce Randy? Maybe we should introduce him on the potluck episode Deno this is a hasty. To Randy, you're just gonna have to sit in the shadows for 1 more episode, and then we can introduce you into the next one.

to And give it a try today.

to Welcome, Wes. How's it going? It functions one way, and once you get used to it, it's very, very nice in many ways. You also have this derived rune where you can essentially track to a run to have a derived value. Let's say you have a state value that's 2.

Let's just leave all of this in. Okay? Welcome people look at this and they say, nothing official there.

a little bit of faces first?

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

if you're pulling syntax

or a readable. You had lots of ways of doing state. In Svelte five, state is being done through the dollar sign state to Rune. You create a state, and then you can update it, reactively within a component. You can create, to bigger, better global stores outside of components You use it in an effect, to from your your end bundle. Right? So that's that's something to think about. Speed, it's very, very fast. I've included the benchmarks here. To The Svelte team did want me to let you know that, like, these benchmarks smaller.

just fine in its its reactive variables? Correct.

values To it from the props object.

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 Yes. Awesome. And that's really the benefit of this stuff is is when people ask me very frequently, hey. It looks kind of like React.

and have them use the exact same APIs, which was one of the problems before with Svelte to was that to React or any of these other frameworks. It it blows them out of the water, so it's unlike React, Svelte isn't just a function that runs, console log would only run once unless you did the to Dollar sign, colon, console log, which was obnoxious,

annoying bugs here and there. And many of that stuff is to Like, when I'm working in Svelte five, I'm thinking, man, that player code's gonna be great to refactor. It's going to feel awesome to use, using this new state route. To they're based they're based on signals, which is something that you don't have to worry about. They're under the hood. Oh, that's actually kinda nice.

state outside of your component, now you're using different APIs than if you're working with state locally in your component. That was always a bit funky. Bit funky.

To And another thing is that, like, big custom stores become way easier to reason about and work in. So, like, you'll know that to We have a big old custom store for our audio player, which many of you have noticed occasionally causes,

To I've been finding but for the most part, to You can take a look at runes today in the previews to an effect and put a console log inside of there. But this is even 1 step further because I realized that's something that is super common. To Pretty cool. And and that's you know, a lot of these things, I think, at first glance, you could say, ah, maybe this feels like you're adding more complexity. But in the end, I think every single thing here to Adds to the simplicity of of Svelte because there now becomes one way of doing things, and that way is both some time with it, I really truly see their vision, and it all feels Yeah. More simplistic in the end. To I do have my code base that I'm working on too if you wanna see how I'm using this. Don't judge the code. A lot of this is scratchy stuff, To And simplicity in these APIs, what it's doing is it's essentially taking out a lot of the places in Svelte where it felt like

To And then just yesterday, I got to talk with the Svelte five team a little bit about well, the Svelte five. The Svelte team a little bit about Svelte five and, to you know, where it's at and and what's going to change. So I feel like I have some pretty good info here.

Big picture here is that most of the APIs in to 5 are finalized.

the, pain points. I've been, To So that's good news for anybody who's looking to adopt this stuff. That said, I'm running an app in production with this stuff right now using the next version of it, and to That's not a smart idea. But if you're like me, sometimes you forego smart ideas to do funny things. Yeah. Yeah.

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

features that they've been rolling out

custom syntax, 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 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,

the simplicity.

What's the

and they're getting rid of some of the magic.

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

To In my conversation with the Svelte team, that was, like, one of the because it they mentioned it very clearly in the docs that the prevent default is gone. To And I had to ask just because I wanted to, like, truly make sure that it was gone.

are just JavaScript.

And they might even export those from Svelte. You know? It seems like It's not the it's not the same. But yeah. To all of these new variable updated, the the framework shouldn't be the bottleneck ever. That's not going to be your bottleneck.

to, To, so pass it in, but don't rerun. Yeah. Those those are nice little performance enhancing one. And there are several things that I didn't mention, like to state dot frozen or effect dot pre, effect dot active, effect dot root. There are

To then Node they're getting rid of the

The way they see it is that you can just do a wrapper function around it, to very good, to are going to get passed, and there's there's most likely going to be errors in your Versus Node that says says, hey. Don't do that. Do this instead. To next is dollar sign props, this stuff seems very, very simple and very approachable, so I'm pretty stoked about it. Yeah. I think when I first saw it, I was concerned. To and then just like most things with the Svelte team, after spending And so that that's it. You don't have to worry about infinite loops. You don't have to worry about dependency arrays. To Another really neat rune here is the inspect to, can can actually really bloat your, your end bundle. Yeah. So the cool thing about effect here is, again, it functions kind of like the React use effect in which it runs to When something has changed. Now what does it run when does it run? It's it's not about component rerenders in Svelte. We're not, like, thinking about a function recalling itself like you do in React. To You're thinking more or Wes, is the stuff that's used inside of here, You know, a lot of the runes kind of videos that people have been showing about them show, like, situations where, you know, when you console log something, your state can kind of get out of sync because of to Perhaps, like, it's in a closure or you're doing some you know, you're just trying to understand what this variable is at any given time. And I personally to Like, the magic symbol. It's it's the rune. Right? It's it's the symbol that indicates, hey. There's something interesting going on here. To And it really tackles Svelte five is about 3 things. It's about speed, simplicity, and size, to Which tracks that it's s. Svelte team, if you wanna use the fact that Svelte 5 is speed, we could come up with 2 more s's to If you want, and then you could have 5 things Node start right away. Triangle.

because 2, Wes props in Svelte were reared before. If you wanted to get the rest of the props maybe weren't exported. You did this dollar sign dollar sign props. Now you just use the spread operator like you would in normal JavaScript.

then I gotta, like, I gotta move it from multiple props to this, like, weird object. It's not a weird object. To

attribute

to type of props.

Perhaps to Svelte syntax Node just becomes the straight up

can you export a snippet,

from a file?

Another cool thing about snippets is they can be passed as props. To So you could have, like, a wrapper component, and you could throw a snippet as a prop and then access that inside of the component itself. To And the neat thing about this is it kind of replaces the need for to There may have been 1 or more ways to do things and, like, really nail it down to, like, here's the way in which you do things now, to Which is great, in terms of simplicity. Yeah. Alright. Let's hear it. I wanna know what all these features are because to We've got the syntax site, and I'm sure, I would love to implement To And so a lot of this is, like, aligning with browser APIs, and you saw that with SvelteKit a little bit. Right? Their usage of, progressively enhancing forms. You're aligning to With real HTML APIs, you're just enhancing them further.

situations there. Kinda like that, though.

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 slap a class on it,

I bet

say, like, you could use TypeScript's partial

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.

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,

Next step is events, Let me,

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

So I'll take it. I think in practice, you'll like it. Okay. To I've I've been using it pretty gratuitously, throughout my app. And in fact, at one point, I think I had, like, 4 snippets in 1 file, and to It was really easy to reason about in that regard. I have since, I have been cranking on a real world app. To I've mentioned it a couple times on here. It says habit tracking app. That part's not important. The important part is is that to I've been getting my hands real dirty with Svelte five. I've been using just about as many of the APIs as I can in a real world context.

I know. I love that. Let me let me tell you.

that exists within the browser. Right? So you're now getting to, again, align yourself to With the browser, no more fancy naming I Node. There there becomes a whole thing there, right, where at at what point does it become a component? And if you look at my code base to Over time, you can see that most of my snippets did become components once I needed more out of them.

Makes sense. I was just about to ask, to can you pass

to I will turn it into an actual component.

slots

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.

edge functions, to the smaller

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

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 to Very, very simple. Like, it's

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 To Right? We're still using mutable variables. So if I make a a state and it's an array,

Svelte doesn't it just throws that CSS out. Right? It's unused. To and it, like, it has to be statically Okay. Just Wes this code variables change so it's not derived. Like, you're not figuring out new state.

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

and

because So you could just, it I guess Svelte doesn't know

to I want to style it in a certain way,

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, to And any styles that you write inside of that component will then be applied. And 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, whether

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,

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 and, 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? analyzed. So if the class is written 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.

do, like, the 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,

oh, I'm using this component, but

keyword class when I try to do that. That doesn't mean necessarily that that's the way it will be. I that's a great to thing that I think, they want it to feel like magic, but they don't want it to feel unpredictable.

HTML attribute. To I don't know how they would be able to

or,

is class going to be involved in those props? That's one thing that always drove me crazy is

I love that for me to be included in this Vault 5 release. Snippets

this is something that I know Wes has been asking for for a long time. People in React land love to have multiple components per file. Like, maybe you're just breaking out a singular to section of a component that gets looped around. You don't wanna have to create a whole new file, a whole new component just to do that, the whole rigmarole of exporting and passing props. To Now you have snippets, which are essentially, you're defining a section of code that can be reused as a snippet, and then you call it like a function using the at render keyword.

even than to You should take all of these benchmarks with a grain of Scott, but even taking them with a grain of salt, There are some things where you have to do getters inside of, like, big old custom stores. To That will be a learning experience for some folks. You cannot export a primitive state. So if you do export const, there are situations where you become in rooms mode where things don't work anymore.

Going to be other things. So we're approaching a situation here with many frameworks, whether that is Solid or Svelte, where the framework is not the bottleneck. It's that fast. To suspected

normal use cases that are Scott, like, benchmark specific use cases. Right? Like, in real world use cases, you're gonna notice the speed. But they also said

My thoughts overall,

to This stuff kicks ass.

is really the only one that I've heard of on this list. To Right. Wes impressive. It's impressive. It's super duper fast. And they wanted me to let you know that it's faster

I do like it a lot in usage. I think, you know, there is maybe a little bit of a learning curve, but I found myself to Wishing that I was working in these Svelte APIs when I was working on some of the writable bugs that I was having.

release, like I said. Hopefully, we're gonna see an RC sometime before March. Could be around March. Who knows? To

native vanilla JS speeds all around. And compared to which I think this is the Node, the rune effect that, to

to is approaching

shockingly fast. Yeah. I'll say that. Looking. To What's what is faster on this benchmark 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.

are you know, some people optimize their demos for these benchmarks, and, therefore, There will be a code mod of some kind as well to help you update. To Who knows what that looks like, but it could probably be taking care of a lot of the easy stuff for you, like changing props to be the props room. Who knows?

Js. 1,000,000. Js

Svelte is going to be particularly useful when working with the DOM itself.

is 55%

you would then lose even that much more code on click, and that's the same with all events for Svelte components. They all just become to The on whatever

than Svelte five? So Solid is

and my output

next 35 To So it will allow you to migrate 1 component at a time. And, again, hopefully, with that Node mod, eases some of the pain if you have a lot of components to that you're working with. But, yeah, you can do incremental adoption. You could say, oh, all my new components are gonna use this stuff or whatever, to Or you can do it all in 1 fell swoop.

So that How? Seems like a pretty huge win. To I I think they just removed a lot of the stuff from Svelte at least. Rid of it. Just got rid of it. Yeah. So that that's one of the big things they wanted to emphasize is that, to your code probably will be well, not probably. It will be smaller if you use these new APIs. Okay? And in the eventual are are basically ESLint components. To To You Node, I I would imagine that you're gonna get to release candidate phase here shortly.

like oh, I have a good example.

And we also

nuanced

to need another variable inside of that effect, But if you're doing that, you probably should just make a a component. Right? Yes. Probably.

cases because, let me tell you, I built a whole app with user accounts and Database, and and I've I haven't had to use these ones. So for the most part, these are things that only advanced users are gonna wanna dive into and not stuff you're gonna need to think about too much. To So let's talk about the last benefits of this before I give my final thoughts.

that

rerunning every single time the name changes.

Here's a post from Reddit. I migrated a 100 and 47 components, to easy and very, very fast. So

to But it removes something from being treated as a dependency. Because remember, in Svelte, you don't have to have the dependency array. To But let's say your effect is running too often because something is updating

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,

in my mind, and this is not from the Svelte team, by the way, that a lot of this is is my thoughts.

To My impression's that

The the big to That is a state, and that state value is just a string that will not be reactive.

to a single file for the entire library, and how they detect the whole class structure. Like, you make a a prop called to is big

to a derived function, our change is really interesting.

wanna read a fantastic

So if you are ever

variables inside of

and it's a single

of dates and derived dates and getters and setters and more complex stuff. It. So check it out. Beautiful. Alright. Thanks, everyone, for tuning in. We'll catch you later. Peace. Peace.

again,

I have found

Sweet. I I think this looks

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, component and then you have, like, the actual, like, a component whenever I can still use to push and slice in all my mutating 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, exactly on that JS to things that accidentally don't get tree shooken, that does your functionality,

most of this time, I'm removing code. To My code feels easier to write, and there there's less foot guns, I think. There's less, like, weird special circumstances.

to But, there's there's some, like, real world examples. Like, in mine, I have, like, a global state store, Last little bit here are 2 new built in functions. There's a few, to built in functions to Svelte. Like, tick is one that, we've used before to This kind of leads you on because Next is inspect, which is kind of like console log, to But you'll know that because

to That's referenced inside of that effect. That effect will need to rerun.

need to be updated or, you know, when something happens, when something changes to And that seems to work if you use the rest, but you cannot destructure class. Oops. But it is collected it in the rest. It is collected in the rest, and I was able to even output it into a template.

to derive some values. Right? Like, I need to I think in some spots, I think Wes filter an array, to It's like a a different version of it, and and you find yourself just, like,

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.

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.

A triangle. Speed, simplicity, and size. And you'll see this pop up in a lot of ways throughout the course of this. To Speed, it's very fast, like, very, very fast size. Bundles are very, very small. We will talk more about that.

a release candidate is some is coming sometime in the next it's going to be faster in Yeah.

To Well, ruins kind of, like, takes that idea and and defines, like, alright. We have the dollar sign, and that's going to be considered,

It may even be alpha. I'll let you know it's in the next flag. It's under the next flag. To Now I suspect the way they the way they're describing it is I think it's like to Magic, not magical or something. I believe that was the saying. I yeah. We're like which, you know, you're doing all the time, you're probably gonna wanna ensure that you have error and exception handling tracking because, hey, if you introduce anything, or the docs and have a pretty good idea of what to The end result will look like once this stuff is released.

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

To Yeah. Alright. So what are runes? Tell me. I'm dying to know here. Yeah. Okay. Well, a rune kind of refers to the idea that in Svelte you know how Wes patiently had, like, some weird magic symbols in Svelte. You had the dollar sign to indicate reactivity. Right? Yeah. And sometimes you did double dollar signs to get rest props.

month and a half.

just a couple days ago. To This is not released. It's still in beta.

2,

a couple of big areas. 1, state.

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

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 to Let me actually try that. Because it's not a prop. It's a

to Basically, you you say Smaller output.

out of an object equals props.

let, and then you destructure your values Like, who knows if this happens or not? But in the eventual situation where signals get added to the browser, to Tolinski here that you're not going to need to get into in 99% which is great. Svelte can be smart enough to say, hey. We know this is only going to run on a side effect. To When something else happens, you can run. So what that means, Wes, is since it's removed from your server side code, you could throw, to This is going to be the format going forward here, and you may see some tweaks along the way. And what we're gonna be doing here don't fret for all you to Audio listeners out there, To The reason why this rules is that, 1, you can do all of the types for all of your props at once. You don't have to type each prop individually. To So you can pass types in. That solves a lot of issues.

and this is the new way of doing props.

variable application, To You know, perhaps in the future, if we are talking about code, we'll be showing some code, but we're not gonna speak about it any differently than we are currently. So effect essentially just replaces the dollar sign, colon, block syntax,

So you have to throw that in an object or a custom store. Something you could do with writables that you can't do anymore.

To This is something that I think works really well. I've I've been using it quite a bit.

to don't always hit those. But when I do hit those issues, they are kind of confusing. Like, why is this value not what I'm expecting it to be? To And I think a lot of what this state variable or state run does, besides just giving you one way to do state, is it makes working with state more reliable to And generally more flexible.

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.

To so has that built in. Yeah. And it's great. It's one of my favorite APIs. I use it all the time, when I need it. But now there's 2 new ones called on to what's the Svelte six endgame here? You know? The Svelte six endgame, I think, is more of a focus on this,

to Track and unstate. Unstate just removes reactivity from a state variable, something that if you wanted to, like, really dive into maybe some perf there, you have something that you don't update. You can unstate it. And untrack, I think, is actually kind of interesting.

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

I feel like the state's way more Predictable, easier to reason about. It does not feel like react if that's your concern. The word effect does not make it react. To There's a lot of, like, really svelte y things about, this overall. You can also try today the preview app. I'll have a link to that in the show notes if you wanna just your hands dirty with some of this Vercel. What about we should ping the Svelte team about. Because, when I was talking to them yesterday, they wanted to know about all these little weird to things that you could think about. Yeah. And, that's a good one. I don't think you actually are able to destructure the word class to because class is a res it's a reserve word, and that's why React has class name, unfortunately.