Svelte 5 er ferdig – med runer, nye nettsider og nytt CLI-verktøy

Deploye på en lørdag? Det var nettopp hva Svelte-skaper Rich Harris gjorde da han lanserte Svelte 5.0 denne helgen.

Svelte 5 og SvelteKit har fått nye, felles nettsider. 📸: Skjermbilde, Svelte
Svelte 5 og SvelteKit har fått nye, felles nettsider. 📸: Skjermbilde, Svelte Vis mer

Det er ikke bare Next.js som nettopp har kommet i ny versjon de siste dagene.

På lørdag under en virtuell Svelte Summit-konferanse ble den ferdige versjonen av Svelte 5 lansert, etter å ha vært tilgjengelig i en RC-versjon (Release Candidate) siden mai.

Lanseringen ble gjort av Svelte-skaperen Rich Harris og utviklerteamet som merget inn pull request #13701 live under Svelte Summit.

I den nye versjonen har Svelte-teamet rettet en del bugs siden RC-versjonen kom ut, slik at Svelte 5 nå regnes for å være klart for å kunne brukes i produksjon.

Den største endringen: Runer

Den antagelig aller største nyheten i Svelte 5 er Runer, som ble introdusert allerede i september 2023 da nyheten om Svelte 5 først kom. Men det skulle altså ta over ett år før den endelige 5.0-versjonen så dagens lys.

Runer er kort fortalt en ny måte å håndtere reaktivitet på i Svelte-apper, basert på signals.

Runene begynner på $ og ser ut som funksjoner:

let message = $state('hello');

Det finnes flere ulike runer, som $state, $derived, $effect, og så videre. Hvis vi tar $state-runen som eksempel, så lar den deg lage en reaktiv tilstand, som betyr at brukergrensesnittet i appen din vil oppdatere seg når verdien endrer seg:

<script>
	let count = $state(0);
</script>

<button onclick={() => count++}>
	clicks: {count}
</button>

Men i motsetning til for eksempel React, så er det ikke noe API du må interagere med for å endre tilstand (som i React, der du ville skrevet noe slikt som const [state, setState] = useState(initialState), og så bruke setState for å endre variabelen state).

I Svelte 5 kan du bare si at en variabel skal være en $state-rune med en bestemt verdi, så kan du oppdatere variabelen som om den er en hvilken som helst annen variabel.

Nytt nettsted

Tidligere har det vært ganske forvirrende at Svelte og SvelteKit-rammeverket har hatt to ulike nettsteder, selv om SvelteKit er den måten Svelte-teamet anbefaler å bygge Svelte-applikasjoner på.

Derfor har Svelte nå lansert en ny nettside der du finner alt på ett sted – inkludert dokumentasjon for både Svelte og SvelteKit.

Med ett felles nettsted kan du nå søke på tvers i dokumentasjon for både Svelte og SvelteKit.
Med ett felles nettsted kan du nå søke på tvers i dokumentasjon for både Svelte og SvelteKit. Vis mer

Du finner den nye nettsiden på https://svelte.dev/

Nytt CLI-verktøy

Svelte har flere ulike CLI-verktøy for å for eksempel opprette en Svelte-app, legge til funksjonalitet eller migrere kode fra én versjon til en annen.

I helgen lanserte Svelte ett felles CLI-verktøy for alle oppgaver – "sv". Med sv har Svelte-teamet slått sammen create-svelte og svelte-add, slik at du nå kan skrive for eksempel:

npx sv create
npx sv add
npx sv migrate

Eller hvis du vil migrere til Svelte 5:

npx sv migrate svelte-5

En av nyhetene i sv er at CLI-verktøyet kan brukes til å legge til vanlige avhengigheter for deg når du oppretter et nytt Svelte-prosjekt – og også etter at prosjektet er opprettet. Det kan være for eksempel Tailwind CSS, ESLint, Prettier, Drizzle, Vitest, Storybook og mye annet. Det skal også komme integrasjoner mot blant annet Supabase.

Rich Harris har lagt ut en bloggpost om Svelte 5-lanseringen, med mer om hva som er nytt her.

Du kan se hele helgens Svelte Summit under: