Svelte

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

Первая версия Svelte была написана на JavaScript и вышла 29 ноября 2016 года; название Svelte выбрал Рич Харрис и его коллеги в редакции The Guardian.

Вторая версия вышла 19 апреля 2018 года; разработчики устранили ряд недочётов предыдущей редакции, например, заменив двойные фигурные скобки на одиночные.

Третья версия, написанная на TypeScript, была выпущена 21 апреля 2019 года и представила новую модель реактивности, где компилятор прозрачно отслеживает присваивания^[5].

В октябре 2020 года был анонсирован фреймворк SvelteKit, а в марте 2021 года — открыт бета-доступ^[12]. Релиз SvelteKit 1.0 состоялся в декабре 2022 года^[13].

Версия 4 появилась 22 июня 2023 года как обслуживание, отличаясь меньшим размером и большей скоростью по сравнению с третьей^[14]. Существенной частью стало внутреннее переписывание с TypeScript обратно на JavaScript с типизацией через JSDoc^[9], что вызвало дискуссии среди разработчиков^[15][16].

Пятая версия Svelte была представлена 19 октября 2024 года на конференции Svelte Summit Fall 2024 — выпуск произошёл публично с участием команды и Рича Харриса. Svelte 5 — переработка архитектуры фреймворка с изменением ключевых концепций реактивности и повторного использования кода^[17]. Главное нововведение — руны (runes), особый синтаксис объявления реактивных состояний и связанного кода, которые помогают компилятору отслеживать связи между состояниями и DOM^[18]. В Svelte 5 также реализованы сниппеты — повторно используемые фрагменты кода внутри компонентов^[19].

На том же саммите в 2024 году Бен МакКанн анонсировал официальную Svelte CLI под именем sv в npm^[20].

В начале 2025 года команда представила Asynchronous Svelte — экспериментальный набор возможностей асинхронной реактивности с использованием выражений await^[21]; на август 2025 года эта возможность доступна через экспериментальную опцию компилятора^[22]. Параллельно был представлен механизм удалённых функций (remote functions) для RPC во фреймворке SvelteKit^[23].

Ключевые ранние участники проекта: Conduitry с момента выпуска первой версии, Tan Li Hau с 2019 года, Ben McCann — с 2020 года. В 2022 году Рич Харрис и Саймон Холтхаузен присоединились к Vercel для работы над Svelte на постоянной основе^[24]. В 2023 году к ним присоединился Доминик Ганнавей из команды React^[25].

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

Ключевые возможности Svelte реализованы через руны (runes): синтаксические элементы, выглядящие как вызовы функций, но используемые компилятором как макросы:

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

Синтаксис { ... } позволяет выводить значения JavaScript прямо в шаблоне элементов и компонентов^[26], аналогично интерполяции в JavaScript. Такой синтаксис также применяется в атрибутах элементов — для двустороннего связывания данных, обработки событий и задания CSS-стилей.

Ниже приведён пример To-do списка на 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>Todo List</span>
<small>completed {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)}>Remove</button>
	<br />
{/each}

<form {onsubmit}>
	<br />
	<label for="input">Add todo</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^[27].

Разработчики Svelte поддерживают ряд интеграций с популярными программными инструментами и экосистемами: Vite, Rollup, Webpack, TypeScript, VS Code, Chrome DevTools, ESLint, Prettier^[28]. Также внешние проекты, такие как Storybook, реализуют интеграции с Svelte и SvelteKit.

Vue.js во многом заимствовал принципы API и концепцию однокомпонентных файлов у Ractive.js — предшественника Svelte^[11].

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

В 2024 году Svelte вновь вошёл в число наиболее положительно оцениваемых frontend-фреймворков по результатам State of JS^[31]. Согласно опросу Stack Overflow 2024 года, 73 % разработчиков, работавших с Svelte, хотят продолжить его использовать; команда Stack Overflow применила Svelte для создания сайта с результатами опроса^[32].

Svelte был принят рядом крупных интернет-компаний: The New York Times, Google, Apple, Spotify, Radio France, Square, Yahoo!, ByteDance, Rakuten, Bloomberg, Reuters, IKEA, Facebook, Logitech, Brave^{[33][34][35][36]}.

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