Svelte 5 Runes - How to talk to the compiler ft Rich Harris

Hey, I'm Sam from Prismic. I'm here today with Rich Harris. Rich, thanks for being here. Thanks for having me. So the big exciting thing this year is Svelte 5. And one of the biggest changes that we're talking about in Svelte 5 is the introduction of runes. So quickly, can you give us a sense of what are runes? Yeah, runes are how you talk to the compiler in Svelte. So the background of the word rune, a rune is, you know, in Norse mythology, it's like a magical

symbol that you can use to cast spells. And we're kind of using it in the same way. It's a magical symbol that you add to your code that tells the compiler that, oh, this thing here, this is a piece of reactive state, for example. And the compiler is able to take that and generate instructions in the compiled JavaScript that fulfill your wishes. And it's a little bit different from how reactivity works in some other frameworks where either you're re-rendering

everything all the time when state changes, or you're explicitly using signals with an API. And Svelte, the idea is that you're writing what feels like very idiomatic JavaScript, but you've added just this little touch of magic that makes things work reactively. And runes are magical in that they fulfill your wishes, but they are actually fairly intuitive and easy to understand what they're doing and what you can expect will happen. Cool. So can you walk

us through a little bit? What does a rune look like? And how can we use them? Yeah. So right now we're in the Svelte 5 preview. This is where you can go today to try Svelte 5 out without needing to download anything or install anything. For the record, I use this all the time. So in this repl, like on a daily basis. Yeah, me too, obviously. And in this code, so this is if you visit the website, this is the

example application that you see. It's a pretty uninspiring app, but it gets the point across. Hey, we all have had a need for a button where the number goes up when you click on it at some point or another. Right. So here we have our first rune, the state rune. Okay. And actually, if I get rid of this, then we're back in Svelte 4 mode and you'll see that the icon here just went out. The runes icon, this is not in runes mode. So does this mean that we have lost the interactivity? It does not. Okay. So by going back into Svelte 4 mode, we

opt back into Svelte 4 semantics. The thing continues to work. And this is really important because if you have an existing Svelte 4 app and you, or even Svelte 3 app, and you add Svelte 5, then your existing components will continue to work. You don't need to rewrite the entire thing in order for things to work. And for somebody who hasn't seen Svelte before, this is already quite magical. What's happening on line two here? On line two, we are declaring some local state. Okay. Count is just a variable and we can add

one to it. And anything that depends on count, which in this app is just this text inside the button will update accordingly. And in Svelte 5, we are a little bit more explicit about that because that idea, it feels really nice and a lot of people really love it, but you can only use it here. You can only use it at the top level of a component. You can't use it inside a function. You can't use it outside a .Svelte file. And in Svelte 5, we're

changing that. We're adding this concept called universal reactivity. And so the big difference is, in fact, you know what, I'm not even going to type it out. I'm just going to click the migrate button, which will take Svelte 4 code and turn it into Svelte 5 code. You'll see that the rings icon is lit up. And the only thing that changed is we turned that zero into $state zero. Okay. So $state is the ring. And this is an instruction to the compiler that says this is a piece of state and any assignments to that piece of state or modifications