Бета-релиз Astro 4.0

Автор
Matthew Phillips

Сегодня мы выпустили первую бета Astro 4! Смелые могут установить бета, изучить черновик документации по обновлению и сообщать о багах в Astro discord.

What to expect in Astro 4

Мы выпускаем Astro 4, чтобы оставаться актуальными с Vite — нашим внутренним инструментом сборки. Astro 4 включает последнюю версию Vite 5, выпущенную в прошлом месяце.

Vite 5 — тоже небольшой major, поэтому большинство проектов обновятся на Astro 4 с минимальными изменениями кода, если вообще с какими-либо.

Кроме того, в Astro 4 мы планируем вывести из экспериментального статуса некоторые функции, над которыми работали последние месяцы. Следите за новостями!

Trying out the beta

Попробуйте бета в существующем приложении через новый пакет @astrojs/upgrade. CLI автоматически установит нужную версию Astro и все официальные интеграции.

npx @astrojs/upgrade beta
pnpm dlx @astrojs/upgrade beta
yarn dlx @astrojs/upgrade beta

Или установите astro@beta вручную. Не забудьте обновить все установленные интеграции @astrojs/*!

npm install astro@beta
pnpm install astro@beta
yarn install astro@beta

Для нового проекта:

npm create astro@latest -- --ref next

Замените на ваш менеджер пакетов. Руководство по обновлению ещё не завершено, но основные изменения уже в pull request руководства по обновлению Astro 4.0. Также следите за связанным issue со всеми breaking changes.

Astro 3.6

Недавно мы также выпустили Astro 3.6 с новыми событиями в роутере <ViewTransitions /> и fallback для prefetch при ограниченном трафике.

View Transition events

Astro 3.6 добавляет три новых события в lifecycle роутера <ViewTransitions />:

astro:before-preparation выполняется сразу перед шагом preparation, где загружается контент новой страницы. Можно переопределить загрузку — например, показать спиннер.

astro:after-preparation выполняется после загрузки контента. Можно остановить спиннер, если он был добавлен в astro:before-preparation.

astro:before-swap выполняется сразу перед шагом swap, где контент старой страницы заменяется новым. Событие включает свойство event.newDocument — Document, который можно изменять. Например, установить class names тёмной темы при хранении предпочтений в localStorage.

Смотрите демо с возможностями новых событий и документацию обо всех пяти lifecycle events.

Prefetch fallback

Раньше при медленном соединении или включённом data saver prefetch полностью отключался. В 3.6 стратегия изменена на tap: prefetch при начале клика по ссылке, до отпускания. Небольшой head start на загрузку следующей страницы — только когда пользователь, вероятно, собирается кликнуть.

Bug Fixes

В релизе есть дополнительные исправления. Release notes.