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

Svelte 5 introduces a new concept called Runes that basically allow you to use magical symbols that influence the Svelte compiler.
We brought Rich Harris, the creator of Svelte, to the Prismic Studio to show us how you can use runes in your next Svelte project.
🔗 Try Svelte & Prismic in a 3D Portfolio website project:
• Create a Creative Port...
🔗 Build a dark modern website with Sveltekit and GSAP
• Build an Animated Webs...
---
As a developer, you should build websites using your favorite Jamstack framework.
Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
---
#svelte5 #runes

[@nyashachiroro2531]

The fact that the code produced by the Svelte compiler is actually somewhat readable and understandable is impressive, especially compared to what's produced when other libraries are transpiled.

[@rbnzdave]

actually react maps work really well if you dont use .jsx as an extension. if you use .js, chrome at least shows the original code nicely, have found it hates me when i leave as jsx before transpiling.

[@ndykhng]

​@@rbnzdave OP's point is the transpiled code looks nice (the resulting .js), not just the code that you write (.jsx)

[@avwie132]

Why would I care how the compiled code looks?

[@Hugos68]

@@avwie132 The compiled code reflects the simplicity of svelte 5. The compiler merely adds boilerplate, not as much magic as svelte 4. Which is great for debugging.

[@dand4485]

@@avwie132 Asking why the transpiled code matters, guess you've never had to debug anything?

[@DavidHust]

Rich is a beast. He's been doing these same interviews for about a year, and he's still excited to show it off.

[@b1mind]

Really enjoyed this deep dive into the compiler. Excited about Svelte5!!

[@everythingisfine9988]

Upgrading Svelte 4 👉 5 and everything still works. That's such a *BIG* win for svelte. The only major technical advantage React had was seamless upgrades and Svelte just achieved that 🏆

[@Ripstikerpro]

The ability to use classes as stores is such a nice improvement, I love it

[@WebJeda]

Svelte is the only framework that sparked joy for me ✨

[@TrostCodes]

Svelte Summer is just so so good!

[@adriablancafort]

I love svelte 5! Can't wait

[@ymi_yugy3133]

The svelte repl is amazing. It's my go to place whenever I need to try some web related thing

[@registro_pedagogico]

Svelte es mi framework favorito, estoy ansioso de que salga la versión estable

[@DamonMedekMusic]

Wow, what a rockstar.

[@dei8bit]

Que hermosura svelte ♥

[@justadevlog1667]

Ok i lost my mind for second when i saw bind: in action Holly that's insane

[@m_raez]

Since Runes are still Runtime-Reactivity, you can easily build an API to your liking using them as primitives

[@DomskiPlays]

Yoooooo lets go. I love Svelte 5 the only thing I hate is how destructuring loses reactivity which was super confusing at first

[@Antonio-fo4fl]

You can use the $derived rune to preserve reactivity of destructured values. Ofc read only though

[@TheStickofWar]

​@@Antonio-fo4fl it would be strange and cause extreme problems if derived values in any framework could affect what they were derived from. Think of them as pure functions only

[@Antonio-fo4fl]

@@TheStickofWar did you not see where I said the derived destructured values ofc would be read only?

[@DomskiPlays]

@@Antonio-fo4fl I know but often I want to destructure a stateful prop and bind to it and the only way to do it is with xyz.item :/

[@maloxi1472]

He was simply pointing out why that had to be the case

[@danielrincodev]

hipe! 🧡

[@robotempire]

@16:32 I suppose $.source is a "source" of reactive signals, while $.proxy is proxying the array primitive which contains sources? So the thing produced by $.proxy is like a signal controller, maybe? I reckon any iterable object would be compiled down to a proxy or something like this? interesting conversation all around regardless

[@robotempire]

@20:34 seems like maybe i wasn't too far off wrt proxies being controllers in some sense

[@everythingisfine9988]

I use jsDocs + default function parameters (when possible) & raw-dog everything else ✌️

[@figloalds]

11:44 yo what's this undocumented sorcery he just did there? Wow 👏 I love to have learned this

[@Hugos68]

Anything inside markup between {} is an expression, so any type of js, console.log included. And since that {} block depends on a reactive variable it will rerun. You should use $inspect for this though.

[@2manasama]

it's minute 6, Rune spawn ^_^

[@Animadroids]

Runes Bloody Runes

[@Lemmy4555]

You don't have to use a class, you can also just write a function that returns an object where the fields are the fields of the class, and you can also expose methods that can use this.foo to access the fields of the object itself, for simple use cases it's less verbose than classes

[@mixed_nuts]

There's a reason he uses a class. Mainly for performance.

[@abdel17]

classes in Svelte are less verbose actually class Todo { text = $state(""); done = $state(false); constructor(initial) { this.text = initial; } } function createTodo(initial) { let text = $state(initial); let done = $state(false); return { get text() { return text }, set text(v) { text = v }, get done() { return done }, set done(v) { done = v }, }; }

[@Lemmy4555]

@@abdel17 mmmh i see, yeah i assumed that classes and objects worked the same because they do in regular js, but here svelte is doing something special for classes, weird in my opinion. However you can always return the plain object and wrapt in in $state later but then: function createTest(initial) { return { text: initial, setText(v) { this.text = v } }; } let todo = $state(createTest('hello')) {todo.text} todo.setText('ola')}> clicks

[@Sammi84]

​​@@Lemmy4555that looks redundant and actually does less than when you just pass an object directly to &state, because it doesn't do proxying.

[@Lemmy4555]

it does proxy, i checked, looks like svelte 5 wraps into proxies everything that is not a primitive value, so function calls are wrapped into proxies. eg: function createTest(initial) { return '' } let todo = $state(createTest('test')) //becomes function createTest(initial) { return ''; } let todo = $.source($.proxy(createTest('test')));