Svelte

Svelte
Тип	JavaScript-фреймворк, открытое программное обеспечение, язык программирования, компилятор, веб-фреймворк и библиотека JavaScript
Разработчики	Rich Harris[3], Alan Faubert[3], Simon Holthausen[3], Dominic Gannaway[3], Tan Li Hau[3], Ben McCann[3] и Paolo Ricciuti[3]
Написана на	JavaScript[4] и TypeScript
Операционная система	кроссплатформенность
Первый выпуск	26 ноября 2016[1]
Последняя версия	5.38.3 (23 августа 2025)[2]
Репозиторий	github.com/sveltejs/svel…
Лицензия	лицензия MIT
Сайт	svelte.dev (англ.)
Медиафайлы на Викискладе

Svelte — свободный и открытый компонентный фронтенд-фреймворк^[5] и язык программирования^[6], созданный Ричем Харрисом и поддерживаемый основной командой Svelte^[7].

Svelte — не монолитная библиотека JavaScript, импортируемая приложениями. Вместо этого Svelte компилирует HTML-шаблоны в специализированный код, который напрямую манипулирует DOM, что позволяет уменьшить размер передаваемых файлов и повысить производительность на стороне клиента^[8]. Код приложения также обрабатывается компилятором, который вставляет вызовы для автоматического пересчёта данных^[5] и повторной отрисовки элементов пользовательского интерфейса при изменении данных, от которых они зависят^[9]. Это также позволяет избежать накладных расходов, связанных с промежуточными представлениями во время выполнения (runtime), такими как виртуальный DOM^[10], в отличие от традиционных фреймворков (таких как React и Vue.js), которые выполняют основную часть своей работы во время выполнения, то есть в браузере^{[8][9][7][11][5][10]}.

Сам компилятор написан на JavaScript^[12][11]. Его исходный код распространяется под лицензией MIT и размещён на GitHub^[11]. Среди сопоставимых фронтенд-библиотек Svelte имеет один из самых маленьких размеров итоговой сборки (bundle) — всего 2 КБ^[13].

Предшественником Svelte является Ractive.js, который Рич Харрис создал в 2013 году^[14].

Версия 1 Svelte была написана на JavaScript и выпущена 29 ноября 2016 года^[15]. Название «Svelte» (в пер. с англ. — «изящный», «стройный») было выбрано Ричем Харрисом и его коллегами из The Guardian^[15].

Версия 2 Svelte была выпущена 19 апреля 2018 года. В ней были исправлены ошибки, допущенные в предыдущей версии, например, двойные фигурные скобки были заменены на одинарные^[15].

Версия 3 Svelte была написана на TypeScript и выпущена 21 апреля 2019 года. В ней был переосмыслен подход к реактивности: компилятор стал отслеживать присваивания переменных «за кулисами»^[5].

Веб-фреймворк SvelteKit был анонсирован в октябре 2020 года и вошёл в стадию бета-тестирования в марте 2021 года^[16][17]. SvelteKit 1.0 был выпущен в декабре 2022 года после двух лет разработки^[18].

Версия 4 Svelte была выпущена 22 июня 2023 года. Это был релиз, направленный на поддержку, он стал меньше и быстрее третьей версии^[19]. В рамках этого релиза был проведён внутренний рефакторинг с TypeScript обратно на JavaScript с использованием аннотаций типов JSDoc^[12]. Это вызвало недоумение в сообществе разработчиков, на что ответил создатель Svelte Рич Харрис^[20][21].

Версия 5 Svelte была выпущена 19 октября 2024 года на Svelte Summit Fall 2024. Svelte 5 стал полной переработкой фреймворка, изменив ключевые концепции, такие как реактивность и переиспользование кода^[22]. Его основная особенность, руны (runes), переработала способ объявления и использования реактивного состояния. Руны — макросы, похожие на функции, которые используются для объявления реактивного состояния или кода, использующего реактивные состояния. Компилятор использует эти руны для обозначения значений, которые могут изменяться и от которых зависят другие состояния или DOM^[23]. Svelte 5 также представил сниппеты — переиспользуемые фрагменты кода, которые определяются один раз и могут использоваться в любом месте компонента^[24]. Изначально Svelte 5 был встречен неоднозначно из-за множества изменений и, как следствие, устаревания некоторых подходов, в основном из-за введения рун. Однако большая часть споров утихла после первоначального анонса рун и дальнейшей доработки Svelte 5^{[источник?]}.

Ключевые ранние участники команды Svelte: Conduitry присоединился с выходом Svelte 1, Тан Ли Хау — в 2019 году, а Бен МакКанн — в 2020 году^[15]. Рич Харрис и Саймон Хольтхаузен присоединились к компании Vercel для работы над Svelte на полную ставку в 2022 году^[25]. Доминик Ганнауэй перешёл в Vercel из основной команды React для работы над Svelte в 2023 году^[26].

Приложения и компоненты Svelte определяются в файлах с расширением `.svelte` — это HTML-файлы, расширенные синтаксисом шаблонов, основанным на JavaScript и похожим на JSX.

Основные возможности Svelte доступны через руны, которые синтаксически выглядят как функции, но используются компилятором как макросы. К ним относятся:

• Руна $state, используемая для объявления реактивного состояния
• Руна $derived, используемая для объявления реактивного состояния, производного от одного или нескольких других состояний
• Руна $effect, используемая для объявления кода, который перезапускается при изменении его зависимостей

Кроме того, синтаксис { JavaScript-код } можно использовать для вставки выражений в HTML-элементы и компоненты^[27], подобно шаблонным строкам в JavaScript. Этот синтаксис также может использоваться в атрибутах элементов для таких целей, как двусторонняя привязка данных, обработка событий и стилизация CSS. Пример приложения «Список дел», созданного на Svelte:

<script>
	let value = $state();
	const todos = $state([]);
	const all = $derived(todos.length);
	const done = $derived(todos.filter(todo => todo.done).length);

	function onsubmit(e) {
		e.preventDefault();
		todos.push({ text: value, done: false });
		e.target.reset();
	}
</script>

<span>Список дел</span>
<small>выполнено {done}/{all}</small><br />

{#each todos as { text, done }, index}
	<input type="checkbox" bind:checked={todos[index].done} id={text} />
	<label for={text} class:done>{text}</label>
	<button onclick={() => todos.splice(index, 1)}>Удалить</button>
	<br />
{/each}

<form {onsubmit}>
	<br />
	<label for="input">Добавить задачу</label>
	<br />
	<input type="text" name="input" bind:value />
</form>

<style>
	span {
		font-size: 20px;
		font-weight: bold;
	}

	.done {
		text-decoration-line: line-through;
	}
</style>

Разработчики Svelte создали SvelteKit как официальный способ создания проектов на Svelte. Это фреймворк в стиле Next.js, который значительно сокращает объём кода, отправляемого в браузер. Ранее разработчики создали Sapper, который был предшественником SvelteKit^[28].

Команда Svelte также поддерживает ряд интеграций для популярных программных проектов, включая интеграции для Vite, Rollup, Webpack, TypeScript, Visual Studio Code, инструментов разработчика Chrome, ESLint и Prettier^[29]. Ряд внешних проектов, таких как Storybook, также создали интеграции со Svelte и SvelteKit.

Vue.js смоделировал свой API и однофайловые компоненты по образцу Ractive.js, предшественника Svelte^[14].

Svelte получил широкое признание среди разработчиков. Он занял первые места в нескольких крупных опросах разработчиков, был назван самым «любимым» веб-фреймворком в опросе Stack Overflow 2021 года и фронтенд-фреймворком с самыми удовлетворёнными разработчиками в опросе State of JS 2020 года^[30][31].

Svelte был внедрён рядом крупных веб-компаний, включая The New York Times, Google, Apple, Spotify, Square, Yahoo!, ByteDance, Rakuten, Bloomberg, Reuters, IKEA, Facebook и Brave^[32][33][34].

Группа сообщества, известная как Svelte Society, проводит конференцию Svelte Summit, выпускает новостную рассылку о Svelte, ведёт подкаст и поддерживает каталог инструментов, компонентов и шаблонов для Svelte^[35].

• Библиотека JavaScript
• Сравнение JavaScript-фреймворков

• svelte.dev (англ.) — официальный сайт Svelte