Svelte 5: Introducing Runes... with Rich Harris

All right, friends, gather round, and let's talk about Svelte 5. A lot of you know that we've been hard at work on the next version of Svelte for a while now. And in this video, I'm going to share a preview of some of the new stuff, and hopefully get you all as excited about it as we are. Before we do that, I want to talk about Svelte today. We like Svelte. We're proud of Svelte, and all of the love that it gets in developer surveys and so on. We think it's the best way to build most web apps. But there are some undeniable pain points that you've probably encountered

and which are difficult to fix with Svelte's current design. Let's look at a simple component that we might write today. We're declaring a count variable and using its value inside our template. Every time we update its value inside the event handler, the page automatically updates. Very cool, very easy to learn, because there's no API, we're just using the language. If I wanna add a derived value, I can do that with $labelled = count * 2 and that will be updated whenever count changes.

There's a little gotcha here though. Because Svelte doesn't want to run this code until it's sure that there are no other changes to take account of, it won't recalculate doubled until right before the DOM is updated. So if, for example, you log the values inside the increment function, you'll see that they get out of sync. Another gotcha is that the dependency tracking happens at compile time. What I mean by that is that the compiler looks at this expression on the right, this count times two, and

understands that the value of double is dependent on the value of count. But what if we refactor our code by having a double count function? The compiler can no longer see the dependency, which means that double will never be updated. This makes it a little hard to refactor code out of dollar label statements, which means that they tend to attract complexity. Now let's imagine that we want to encapsulate this logic so that it can be reused. Perhaps you wanna have multiple counters on the page. Might try wrapping it in a create counter function like this

but this completely changes the meaning of the code. It no longer behaves the same way because it's no longer at the top level of the component. The let no longer becomes magically reactive and this dollar label has no special meaning at all. This is just an assignment to an undeclared variable. So at this point, we have to use a completely different mechanism. We have to use a custom store. First, we import writable from svelte/store, and then we create a writable store inside create counter

so that we can steal its subscribe and update functions. If an object has a subscribe method, then it's a store. So we can return that from our function along with increment. But increment can't just assign directly to count anymore. We need to use this update function with a callback produces a new value from the old value. And I'm not even going to get into how we would implement doubled here. Once we've done all that, we can create a counter object. Update the event handler. And reference the store value by prefixing it with a dollar.

And now our counter works again in a reusable form. Now, I'm speed running large chunks of of the Svelte tutorial here, and I'm zeroing in on problematic things, but I think you get the idea. There is room for improvement. Let's take another example, a to-do list. In this demo, we have an each block with some bindings. When we toggle these checkboxes,

we recalculate this remaining to-do expression down here. I've added some logging so that we can see when it gets called. Notice that when I change the text of a to-do, it recalculates that remaining count, and you can see the count tick up in the console in the bottom right. The way that this all works is that when you update a value inside an each block, Svelte will jump through some hoops to figure out what underlying