Astro 3.2

Автор
Matthew Phillips
Martin Trapp
Chris Swithinbank

Вышел Astro 3.2 с улучшениями view transitions и интеграций:

Чтобы воспользоваться новыми возможностями view transitions, установите последнюю версию Astro. Обновиться до Astro 3.2:

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

Теперь можно настроить отдельные ссылки так, чтобы при навигации не добавлялась новая запись в историю браузера. Добавьте атрибут data-astro-history="replace" к любому <a>, и Astro использует history.replaceState. Удобно для меньшего числа кликов «назад» или чтобы не возвращать на страницы вроде подтверждения формы.

<a href="/toggle" data-astro-history="replace">Toggle me</a>

JavaScript Navigation API

Теперь можно запускать навигацию из клиентского JavaScript через API navigate(). Раньше переходы происходили только по клику на якорные ссылки. С новым API вы полностью контролируете момент навигации.

import { navigate } from 'astro:transitions/client';


// Navigate to the selected option automatically.
document.querySelector('select').onchange = (ev) => {
  let href = ev.target.value;
  navigate(href);
};

Также доступен контроль стека истории через опцию history — как у атрибута data-astro-history:

import { navigate } from 'astro:transitions/client';


navigate(href, {
  history: 'replace'
});

Route Announcer

Роутер View Transitions теперь объявляет маршруты. При переходах в классическом MPA вспомогательные технологии озвучивают заголовок страницы после загрузки. При клиентской маршрутизации это не происходит автоматически, и пользователи этих технологий не узнают о смене страницы.

Route announcer view transitions запускается после astro:page-load и ищет <title> страницы. Если не найден — fallback на первый <h1> или pathname. Рекомендуем всегда включать <title> на каждой странице для доступности.

Подробнее о доступности — в документации View Transitions.

Dynamically Added Integrations

Интеграции теперь могут динамически добавлять и настраивать другие интеграции при setup. Это позволяет авторам умнее объединять интеграции для пользователей.

В примере кастомная интеграция проверяет, настроен ли уже @astrojs/sitemap. Если нет — добавляет sitemap-интеграцию Astro с нужными опциями:

import sitemap from '@astrojs/sitemap';
import type { AstroIntegration } from 'astro';


const MyIntegration = (): AstroIntegration => {
  return {
    name: 'my-integration',


    'astro:config:setup': ({ config, updateConfig }) => {
      // Look for sitemap in user-configured integrations.
      const userSitemap = config.integrations.find(
        ({ name }) => name === '@astrojs/sitemap'
      );


      if (!userSitemap) {
        // If sitemap wasn't found, add it.
        updateConfig({
          integrations: [sitemap({ /* opts */ })],
        });
      }
    },
  };
};

More

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