Runes in Svelte 5

[jamestagal]

Hi all,
Just wanted to add a few links from today's Svelte news on some upcoming changes. Svelte 5 refines how reactivity works with Runes.

Introducing runes Svelte.dev

Component party - Svelte 4 vs Svelte 5

Ben

[jamestagal]

hi all,
Just posting a nice and concise overview video (with examples) of proposed changes in Svelte 5 from Joy of Code.
What's New In Svelte 5? (Runes, Events, And Snippets)

Ben

[jamestagal]

Hi all,

I just wanted to share a recent video from Rich Harris at a recent Svelte Summit talk on Svelte 5 being in the release candidate with some significate changes and improvements coming soon.

https://www.youtube.com/watch?v=xCeYmdukOKI

Quick summary:
For users = "Apps built with Svelte 5 will be smaller, more robust, faster and more scalable."
For devs =

1. Reactivity is enhanced with Runes ($state, $effect & $derived)
2. Slots get replaced with Snippets and Render tags - use them within or between components as props
3. Events on:click is replaced with onclick (no colon)
4. Component events - no need to use createEventDispatcher can just use props $props
5. Native support for TypeScript i.e. inside your template
6. Classes - not sure what these are
7. Style tags get an upgrade - can use CSS nesting syntax
8. Easier to create global styles with a :global block

There is a tool you can try out to automate migration https://svelte-5-preview.vercel.app/
Also see this announcement on their blog. https://svelte.dev/blog/svelte-5-release-candidate

Hope that is useful.

Ben