Svelte — это простой и удобный в использовании фреймворк, а последние изменения должны сделать его еще проще.

В июне 2023 года Svelte анонсировала свой последний стабильный выпуск версии 4. Обновление Svelte 4 — это, прежде всего, отладочная версия Svelte 3, направленная на то, чтобы подготовить почву для выпуска следующего поколения Svelte под названием Svelte 5.

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

1. Изящный редизайн сайта

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

На сайте Svelte теперь есть расширенный REPL, который позволяет вам экспериментировать с кодом Svelte прямо в браузере.

Кроме того, все ссылки на учебные пособия по Svelte теперь указывают на новый опыт учащихся Svelte, в то время как старые учебные пособия доступны для пользователей Safari 16.3 и более ранних версий.

instagram viewer

2. Локальные переходы по умолчанию

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

Обычно переход воспроизводится, когда вы уничтожаете родительский блок. Вы можете переопределить это поведение с помощью |местный модификатор. Это приводит к тому, что переход выполняется только тогда, когда вы уничтожаете блок, содержащий целевой компонент. В Svelte 4 это |местный модификатор установлен по умолчанию для переходов.

В приведенном ниже фрагменте слайд-переход локально добавлен к див элемент:

 {элемент}

3. Улучшенная поддержка веб-компонентов

Svelte всегда продвигал возможность повторного использования и ремонтопригодность, поэтому он постоянно поддерживает веб-компоненты. Веб-компоненты позволяют создавать повторно используемые пользовательские HTML-элементы с внедренными стилями и поведением.

Svelte 4 меняет способ создания веб-компонентов, устраняя ошибки и несоответствия. Эти изменения включают в себя:

  • Экспорт создает свойство компонента, делая его доступным для потребителей компонентов.
  • Задания являются реактивными. Чтобы изменить состояние компонента и запустить повторный рендеринг, назначьте его локально объявленной переменной.
  • Использовать $ символ в начале оператора, чтобы пометить его как реактивный оператор. Реактивные операторы запускаются после другого кода скрипта и до рендеринга разметки компонента при каждом изменении зависимых значений.
  • При создании объектов магазина ставьте перед магазином префикс $ разрешить реактивный доступ к значению.
  • Установка атрибута контекста тега скрипта в модуль заставляет сценарий запускаться один раз при первой оценке модуля, а не для каждого экземпляра компонента.

4. Переход от TypeScript к JSDoc

JSDoc — это инструмент документирования, который поддерживает добавление аннотаций типов и комментариев к кодам JavaScript.

Учитывая, что JSDoc обманом заставляет разработчиков документировать свои коды, эта миграция направлена ​​на то, чтобы побудить больше разработчиков Svelte выработать привычку должным образом документировать свои коды. Адекватно документированная кодовая база JavaScrpt практически не требует проверки типов.

Если вы новичок в TypeScript, вам следует изучите TypeScript и узнайте, почему разработчики предпочитают его.

Переход на Svelte 4

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

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