Astro 2.9 | Astro

Вышел Astro 2.9 с экспериментальной поддержкой view transitions, конфигурацией redirects и улучшенным бандлингом скриптов.

View Transitions (experimental)
Redirects
Hoisted script optimization

Если Astro уже установлен, обновитесь до 2.9:

npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest

Заодно обновите установленные интеграции и адаптеры @astrojs/*!

View Transitions (experimental)

Смотрите объяснение View Transitions от Ben Holmes.

Astro поддерживает view transitions через <ViewTransitions /> и директиву transition:animate. Плавные переходы, раньше требовавшие клиентской маршрутизации, без отказа от простоты MPA.

Включите view transitions в Astro 2.9 экспериментальным флагом в конфиге:

import { defineConfig } from 'astro/config';

export default defineConfig({
  experimental: {
    viewTransitions: true,
  },
});

<ViewTransitions />

Компонент-роутер для переходов между страницами. Добавьте в <head> каждой страницы, где переходы должны происходить на клиенте без полной перезагрузки браузера.

Для всего приложения (SPA mode) добавьте компонент в общий layout, затрагивающий <head> каждой страницы.

CommonHead.astro

---
import { ViewTransitions } from 'astro:transitions';
---

<meta charset="utf-8" />
<title>{Astro.props.title}</title>
<ViewTransitions />

С одним этим изменением приложение маршрутизируется полностью на клиенте. Затем добавляйте переходы к элементам через transition:animate.

Animations

Добавьте transition:animate к любому элементу для встроенных анимаций Astro.

<header transition:animate="slide"></header>

Анимация slide заставит <header> въезжать слева и уезжать вправо при уходе со страницы.

Можно кастомизировать любые CSS-свойства анимации, например duration:

---
import { slide } from 'astro:transition';
---

<header transition:animate={slide({ duration: 200 })}></header>

Continue learning

Подробнее — в документации client-side routing.

Redirects

Опция redirects больше не экспериментальна! Если вы использовали experimental redirects, уберите флаг:

import { defineConfig } from 'astro/config';

export default defineConfig({
  experimental: {
    redirects: true,
  }
});

Если ждали стабилизации — можно безопасно использовать redirects. См. документацию по redirects.

В конфигурации добавьте карту старых и новых путей:

import { defineConfig } from 'astro/config';

export default defineConfig({
  redirects: {
    '/old-page': '/new-page'
  }
});

Hoisted script optimization

Статический анализ Astro для определения, какие <script> бандлить вместе, стал умнее!

Astro создаёт бандлы, оптимизирующие использование скриптов между страницами, и помещает их в head для ранней загрузки. Ограничение: нельзя было динамически использовать hoisted scripts. При re-export компонентов каждая страница получала один большой бандл, даже если не все скрипты нужны.

Теперь статический анализ учитывает реальные импорты.

Например, Astro раньше бандлил <script> из <Tab> и <Accordion> для библиотеки с re-export:

@matthewp/my-astro-lib

export { default as Tabs } from './Tabs.astro';
export { default as Accordion } from './Accordion.astro';

Теперь, если страница использует только один компонент, Astro отправит только нужный скрипт. Страница только с <Accordion> не получит скрипты <Tab>:

---
import { Accordion } from '@matthewp/my-astro-lib';
---

Вы увидите более эффективную работу с типичным паттерном re-export библиотек.

Спасибо Ottomated за эту функцию.

В релизе также исправления и функции интеграций. См. release notes.