Эта статья — перевод оригинальной статьи «Svelte 5 is alive».

Также я веду телеграм канал «Frontend по‑флотски», где рассказываю про интересные вещи из мира разработки интерфейсов.

Вступление

После почти 18 месяцев разработки, включающей тысячи коммитов от десятков участников, Svelte 5 наконец-то стабилен.

Это самый значительный релиз в истории проекта. Svelte 5 - это полная переработка: ваши приложения станут быстрее, меньше и надежнее. Вы сможете писать более последовательный и идиоматичный код. Новичкам в фреймворке предстоит изучить меньше материала.

Несмотря на это, Svelte почти полностью совместим с Svelte 4 - для большинства пользователей первоначальное обновление будет совершенно беспроблемным:

{
	"devDependencies": {
		"@sveltejs/vite-plugin-svelte": "^3.0.0",
		"svelte": "^4",
		"@sveltejs/vite-plugin-svelte": "^4.0.0",
		"svelte": "^5",
		// …
	}
}

Что такое Svelte?

Svelte - это фреймворк для создания пользовательских интерфейсов. Он использует компилятор для преобразования декларативного компонентного кода, основанного на HTML, CSS и JavaScript, в жестко оптимизированный JavaScript.

Поскольку компилятор переносит большую часть работы из браузера в npm run build, приложения Svelte получаются маленькими и быстрыми. Но помимо этого, Svelte создан, чтобы быть приятным и интуитивно понятным способом создания приложений: в нем приоритет отдается тому, чтобы делать дело.

Команда, стоящая за Svelte, также поддерживает SvelteKit, фреймворк для приложений, который управляет маршрутизацией, загрузкой данных, рендерингом на стороне сервера и всеми остальными деталями, необходимыми для создания современных веб-сайтов и приложений.

Что изменилось и почему?

Во-первых, мы переделали наш сайт. Подробнее об этом вы можете прочитать здесь.

Что касается самого Svelte, то сначала мы расскажем о причинах. Мы не любители перемен ради перемен - на самом деле Svelte изменился меньше, чем любой другой крупный фреймворк в период с 2019 года (когда мы запустили Svelte 3) по настоящее время, а это целая эпоха в разработке фронт-энда. И людям действительно нравится Svelte 3 и 4 - он регулярно занимает верхние строчки в опросах разработчиков о степени удовлетворенности.

Поэтому, когда мы вносим изменения, мы не делаем это легкомысленно.

По мере того как все больше людей создавали все более крупные приложения с помощью Svelte, ограничения некоторых наших первоначальных проектных решений стали становиться все более очевидными. Например, в Svelte 4 реактивность полностью зависит от компилятора. Если вы измените одно свойство реактивного объекта в Svelte 4, весь объект будет аннулирован, потому что это все, что компилятор может сделать в реальности. Тем временем другие фреймворки перешли на тонкую реактивность, основанную на сигналах, что позволило Svelte значительно превзойти по производительности.

Кроме того, компоновка компонентов в Svelte 4 менее удобна, чем должна быть, в основном потому, что в ней обработчики событий и "содержимое слотов" рассматриваются как отдельные концепции, отличные от props, которые передаются компонентам. Это связано с тем, что в 2019 году казалось вероятным, что веб-компоненты станут основным механизмом распространения компонентов, и мы хотели быть готовыми к этому. Это было нашей ошибкой.

И хотя конструкция $: для реактивного повторного запуска операторов - это очень красивый трюк, он оказался палкой в наших колёсах. В ней смешаны две концепции (производное состояние и побочные эффекты), которые на самом деле должны быть разделены, а поскольку зависимости определяются при компиляции утверждения (а не при его выполнении), она не поддается рефакторингу и становится магнитом для сложностей.

Svelte 5 устраняет эти несоответствия и вытаскивает палки из колёс. Он вводит руны, явный механизм для (среди прочего) объявления реактивного состояния:

let count = 0;
let count = $state(0);

Взаимодействие с состоянием не изменилось: в Svelte - в отличие от других фреймворков - count - это просто число, а не функция, или объект со свойством value, или что-то, что может быть изменено только с помощью соответствующего setCount:

function increment() {
	count += 1;
	console.log({ count });
}

Руны можно использовать в модулях .svelte.js и .svelte.ts в дополнение к компонентам .svelte, что означает, что вы можете создавать многократно используемую реактивную логику с помощью единого механизма.

Обработчики событий теперь являются такими же props, как и все остальные, что позволяет, например, узнать, поставил ли пользователь вашего компонента определенный обработчик событий (что может быть полезно для избежания дорогостоящей работы по настройке), или распространить произвольные обработчики событий на некоторый элемент - вещи, которые особенно важны для авторов библиотек.

А механизм slot для передачи содержимого между компонентами (вместе с запутанным синтаксисом let: и <svelte:frafment>) был заменен на {#snippet ...}, гораздо более мощный инструмент.

Помимо этих изменений, есть еще множество улучшений: встроенная поддержка TypeScript (больше никаких препроцессоров!), множество исправлений ошибок, а также улучшение производительности и масштабируемости по всем направлениям.

Как мне обновиться?

Если вы сейчас используете Svelte 3, начните с перехода на Svelte 4.

Там вы можете обновить package.json, чтобы использовать самую новую версию svelte и вспомогательные зависимости, например vite-plugin-svelte.

Не обязательно сразу обновлять компоненты - почти во всех случаях ваше приложение будет работать как раньше (разве что быстрее). Но мы рекомендуем начать миграцию компонентов для использования нового синтаксиса и возможностей. Вы можете перенести все приложение с помощью команды npx sv migrate svelte-5, или - если вы используете VS Code с расширением Svelte - вы можете переносить компоненты по одному, выбрав "Migrate Component to Svelte 5 Syntax" в палитре команд.

Svelte имеет большую и надежную экосистему библиотек компонентов, которые вы можете использовать в своих приложениях, таких как shadcn-svelte, Skeleton и Flowbite Svelte. Но вам не нужно ждать, пока эти библиотеки обновятся до Svelte 5, чтобы обновить свое собственное приложение.

Со временем поддержка синтаксиса Svelte 4 будет прекращена, но это произойдет нескоро, и у вас будет достаточно предупреждений.

Более подробную информацию вы найдете в подробном руководстве по миграции Svelte 5.

Наш новый CLI

Вместе с новой версией Svelte у нас появился новый интерфейс командной строки (CLI), sv. О нем вы можете узнать из анонса в блоге.

Что дальше?

В ближайшем будущем мы планируем выпустить новую версию SvelteKit, которая будет использовать преимущества новых функций Svelte 5. Пока же вы можете использовать Svelte 5 с SvelteKit уже сегодня, а npx sv create создаст новый проект SvelteKit с установленным в нем Svelte 5.

После этого у нас есть целый список идей, которые мы хотим реализовать в самом Svelte. Этот релиз - основа для многих улучшений, которые было бы невозможно создать на базе Svelte 4, и нам не терпится засучить рукава.