Astro 4.2

Автор
Erika
Emanuele Stoppa
Matthew Phillips
Nate Moore
Bjorn Lu

Доступен Astro 4.2! В релизе — новые экспериментальные функции, улучшения правил доступности, возможность для remark-плагинов настраивать оптимизацию изображений в Markdown и многое другое.

Основные новинки:

Это первый релиз Astro, где почти все ключевые новинки — от сообщества; только одна — от core maintainer. Большая веха: Astro достаточно велик, чтобы у него было процветающее сообщество контрибьюторов. Спасибо всем, кто участвовал в релизе!

How to upgrade

Чтобы воспользоваться новинками, убедитесь, что у вас последняя версия Astro. Обновитесь до Astro 4.2 командой @astrojs/upgrade:

npx @astrojs/upgrade

или командой вашего менеджера пакетов:

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

(Experimental) Prerendering pages using the Speculation Rules API

Благодаря Ross Robino функция prefetch в Astro получила экспериментальную поддержку prerendering через Speculation Rules API (пока только Chromium). API позволяет prerender-ить страницы на клиенте и даже запускать client-side JavaScript на страницах, которые пользователь, вероятно, посетит следующими.

Добавьте в astro.config.mjs:

import { defineConfig } from 'astro/config';


// https://astro.build/config
export default defineConfig({
  prefetch: true,
  experimental: {
    clientPrerender: true,
  },
});

Учитываются существующие опции prefetch, но теперь на клиенте prerender-ятся все ссылки с атрибутом data-astro-prefetch. Для браузеров без поддержки Speculation Rules API есть встроенный fallback.

Также можно использовать свойство document.prerendering в <script> для проверки prerendering:

<script>
  if (document.prerendering) {
    // prerendering is enabled
  }
</script>

Подробнее: документация experimental.clientPrerender.

(Experimental) Reworked routing priority for injected routes

Раньше маршруты через injectRoute() получали наивысший приоритет и сопоставлялись раньше остальных. Это вызывало трудноотлаживаемые проблемы с неожиданным сопоставлением маршрутов.

Мы долго не меняли это поведение из-за рисков в системе маршрутизации. Благодаря Luiz Ferraz Astro 4.2 приносит экспериментальный флаг — основу для улучшенной системы маршрутизации по умолчанию!

С флагом injected routes через injectRoute() и редиректы следуют тому же порядку приоритета, что и файловые маршруты. Более стабильные и предсказуемые правила для всех маршрутов проекта.

Попробуйте будущее Astro — добавьте experimental.globalRoutePriority в astro.config.mjs:

import { defineConfig } from 'astro/config';


// https://astro.build/config
export default defineConfig({
  experimental: {
    globalRoutePriority: true,
  },
});

Также добавлено логирование коллизий маршрутов, когда два маршрута строят один URL.

Подробнее: документация experimental.globalRoutePriority.

New redirectToDefaultLocale config option

С появления интернационализации в Astro 4.0 часто просили отключить автоматический редирект корневого URL (/) на локаль по умолчанию при prefixDefaultLocale: true.

Теперь это возможно с опцией redirectToDefaultLocale:

import { defineConfig } from 'astro/config';


// https://astro.build/config
export default defineConfig({
  i18n:{
    defaultLocale: "en",
    locales: ["en", "fr"],
    routing: {
      prefixDefaultLocale: true,
     redirectToDefaultLocale: false
    }
  }
});

Редиректить или нет — решать вам. Опция включена по умолчанию.

Improved accessibility rules

Правила доступности в Astro Dev Toolbar с 4.0 стали точнее. Спасибо Oliver Speir за тщательное изучение WCAG! Ложные срабатывания в предыдущих релизах исправлены, дальнейшие улучшения в разработке.

Customizable image optimization in Markdown

Также от Oliver: remark-плагины теперь могут настраивать оптимизацию изображений в Markdown. Раньше каждое изображение через ![alt](src) использовало настройки Astro по умолчанию. Теперь плагины могут добавлять свойства к узлам image.

Пример плагина, устанавливающего width и height каждого изображения в 100:

import { visit } from "unist-util-visit";


export default function remarkPlugin() {
  return (tree) => {
    visit(tree, 'image', (node) => {
      node.data.hProperties = node.data.hProperties || {};
      node.data.hProperties.width = "100";
      node.data.hProperties.height = "100";
    });
  };
}

Пока только для Markdown; поддержка MDX планируется в будущем.

Bug Fixes

Как обычно, в релизе есть дополнительные исправления. Release notes.