Svelte Runer

Svelte 5 introduserer "Runer". Dette er magiske symboler som forteller Svelte når data automatisk skal oppdateres.

OBS: Runer brukes kun når:

$state
- Vi har en variabel som er knyttet til brukergrensesnittet og skal endre verdi.
- Vi har en variabel som brukes til å regne ut en annen variabel som skal vises i brukergrensesnittet.
$derived
- Vi har en variabel som er avhengig av andre variabler.
- Denne variabelen skal vises i brukergrensesnittet.

1. Data Verdenen (Logikk)

Her definerer vi reglene. Legg merke til de magiske symbolene $state og $derived.

let bredde = $state(10);
 let hoyde = $state(5);
 
 // Regnes ut automatisk!
 let areal = $derived(bredde * hoyde); 
 // Resultat: 50

Endre Bredde:

Endre Høyde:

UI-en "reagerer" på endringene i logikken. Svelte oppdaterer kun det som trengs.

Bredde: 10 x Høyde: 5

Rektangel 🟦

$state(verdi): Når denne verdien endres (utenfor bruk av :bind siden dette er en toveis oppdatering allerde), vil alt som bruker den oppdateres. (Tilsvarer "Variabel" fra forrige side, men nå eksplisitt "reaktiv").
$derived(logikk): En verdi som avhenger av andre. Du kan ikke sette den direkte, den regnes ut automatisk basert på statsene den bruker. (F.eks. Areal = Bredde * Høyde).
Reaktivitet: Evnen til å reagere på endring. Endre tall -> UI oppdateres.
Rune (Symbol): Spesielle funksjoner i Svelte 5 som starter med $. De gir koden "magiske" egenskaper.
Avhengighet: Når en verdi (Areal) trenger en annen verdi (Bredde) for å eksistere.