What is the $: syntax in Svelte?

Answer

The $: prefix (reactive statement) is Svelte's syntax for reactive declarations and statements. It runs whenever its dependencies change. Reactive declaration: $: doubled = count * 2; — creates a variable doubled that is always count * 2, automatically updated when count changes. Reactive statement: $: console.log('count changed:', count); — runs the statement when count changes, similar to a useEffect watching count in React. Reactive block: $: { console.log(a); console.log(b); } — runs whenever a or b changes. Svelte's compiler analyzes dependencies automatically — you don't declare them explicitly. The $: syntax is valid JavaScript (a labeled statement) that Svelte intercepts and transforms during compilation.