✳flâneur — a map of the web's best reading

Old vs new • Docs • Svelte 5 preview

svelte-5-preview.vercel.app · 212 words · saved by 1 readers

This page intends to give a broad overview of how code written using runes looks compared to code not using them. You will see that for most simple tasks that only involve a single component it will actually not look much different. For more complex logic, runes simplify things. The $state, $derived and $effect runes replace magic let declarations, $: x = ... and $: { ... }. In non-runes mode, dependencies of $: statements are tracked at compile time. a and b changing will only cause sum to be recalculated because the expression — add(a, b) — refers to those values. In runes mode, dependencies are tracked at run time. sum will be recalculated whenever a or b change, whether they are passed in to the add function or accessed via closure. This results in more maintainable, refactorable code. Conversely, suppose you — for some reason — wanted to recalculate sum when a changes, but not when b changes. In non-runes mode, we 'hide' the dependency from the compiler by excluding it from the $:

Overview • Svelte Docs Skip to main content Tutorial Packages Playground Blog On this page Svelte is a framework for building user interfaces on the web. It uses a compiler to turn declarative components written in HTML, CSS and JavaScript... App < script > function greet () { alert ( 'Welcome to Svelte!' ); } </ script > < button onclick = {greet}>click me</ button > < style > button { font-size : 2 em ; } </ style > < script lang = "ts" > function greet () { alert ( 'Welcome to Svelte!' ); } </ script > < button onclick = {greet}>click me</ b

Explore this link on the map →

related reading