What is the $: in Svelte?
Any top-level statement (i.e. not inside a block or a function) can be made reactive by prefixing it with the $: JS label syntax.
What svelte does is it grabs this $: statement and we can add a dynamic calculation based on some other value.
$: uppercaseName = name.toUpperCase();
Svelte will recalculate the value for us whenever the name changes.