Svelte

Svelte

Logo programu
Autor	Rich Harris
Pierwsze wydanie	29 listopada 2016; około 9 lat temu
Aktualna wersja stabilna	5.38.3 (23 sierpnia 2025) [±]
Język programowania	TypeScript
Platforma sprzętowa	wieloplatformowy
Rodzaj	kompilator
Licencja	MIT
Strona internetowa

Svelte – darmowy, otwarty front-endowy kompilator, wykorzystywany do tworzenia interfejsów graficznych aplikacji internetowych. Został stworzony przez Richa Harrisa^[1].

Aplikacje skompilowane przy pomocy Svelte nie zawierają w sobie bibliotek, tylko wygenerowany kod JavaScript^[2] – skutkuje to w zredukowaniu ich rozmiaru, jak i zwiększeniu ich wydajności. W przeciwieństwie do popularnych frameworków JavaScript, Svelte nie wykorzystuje pośrednich rozwiązań, takich jak wirtualny obiektowy model dokumentu, co przyczynia się do mniejszych wymagań aplikacji internetowych stworzonych przy pomocy tego rozwiązania^[3]. Sam kompilator napisany jest w języku JavaScript, a jego kod źródłowy dostępny jest na licencji MIT na serwisie GitHub^[4].

Poprzednikiem Svelte jest Ractive.js, poprzedni projekt Richa Harrisa^[5]. Pierwsza wersja Svelte napisana została w języku JavaScript, a do publicznego użytku trafiła 29 listopada 2016. 19 kwietnia 2018 wydana została druga wersja kompilatora, która wprowadziła nowy syntaks szablonów, nowy sposób aktualizowania stanu strony i zgodność z ES2015. Trzecią aktualizację kompilator otrzymał w kwietniu 2019, a w lipcu 2020 został przepisany w języku TypeScript ^[6].

Wersja Svelte 5 została wydana w październiku 2024 ^[7]. Stanowi ona gruntowne przepisanie frameworka, wprowadzając istotne zmiany w zakresie reaktywności i ponownego użycia kodu. Najważniejszą nowością tej wersji jest wprowadzenie run (ang. runes) - uniwersalnego mechanizmu reaktywności. Runy to prymitywy umożliwiające jawne deklarowanie reaktywnego stanu i interakcję z nim.

let count = 0; // było
let count = $state(0); // stało się

Wraz z wydaniem Svelte 5 wprowadzono również nowy interfejs wiersza poleceń (CLI) dostępny pod nazwą pakietu sv w repozytorium npm ^[8]. Służy on do tworzenia, rozszerzania i aktualizowania projektów Svelte.

Aplikacje i komponenty zdefiniowane są w plikach „.svelte”, które rozszerzone są o składnię szablonów podobną do JSX. Svelte wykorzystuje natywną składnię instrukcji JavaScript z etykietą $:, aby oznaczyć zmienne reaktywne. Zmienne najwyższego poziomu stają się stanem komponentu, a wyeksportowane zmienne stają się właściwościami, które otrzymuje komponent.

<script>
    let a = 1;
    $: b = a * 2;
</script>

<p>{a} * 2 = {b}</p>

<button on:click={() => a = a + 1}>Licz</button>

Vue.js swoją składnie bazuje na tej z Ractive.js, który jest poprzednikiem Svelte.^{[potrzebny przypis]}

Na potrzeby budowania aplikacji Svelte stworzony został framework SvelteKit^[9].

Osoby zajmujące się rozwojem Svelte opracowały liczne projekty integrujące rozwiązania takie jak Vite, Rollup, Webpack, TypeScript, VS Code i więcej^[10].

Svelte cieszy się największym uznaniem swoich użytkowników spośród wszystkich front-endowych technologii, jednak przegrywa w popularności z frameworkami takimi jak React, Vue czy Angular^[11].

Svelte został przyjęty przez wiele znanych firm, w tym The New York Times, Apple, Spotify, Bloomberg, Reuters, IKEA i Facebook^[12][13][14].