Astro 3.3 | Astro

Вышел Astro 3.3 с новым экспериментальным компонентом <Picture />, улучшенной совместимостью подсветки синтаксиса, package provenance и рядом улучшений качества жизни.

New <Picture /> component
Syntax Highlighting improvements
Package Provenance
Quality of Life Improvements

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

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

Picture Component

Когда мы анонсировали Better Images in Astro со встроенной оптимизацией изображений, мы поделились новым видением работы с картинками. В 3.0 мы убрали старую image-интеграцию вместе с функциями, которыми вы пользовались. Мы решили построить лучше — с более сильной историей изображений, которая только начиналась.

После подробного RFC и самого популярного PR в истории Astro мы с радостью представляем встроенный компонент <Picture />!

Новый экспериментальный <Picture /> генерирует элемент <picture> с несколькими <source>.

Пример ниже использует свойство formats для <source> в каждом указанном формате:

---
import { Picture } from 'astro:assets';
import myImage from './my-image.jpg';
---

<Picture src={myImage} formats={['avif', 'webp']} alt="My super image in multiple formats!" />

Код выше генерирует следующий HTML, и браузер выбирает лучшее изображение:

<picture>
  <source srcset="..." type="image/avif" />
  <source srcset="..." type="image/webp" />
  <img src="..." alt="My super image in multiple formats!" />
</picture>

Picture принимает те же props, что и Image, включая новые densities и widths.

`srcset` support

Помимо <Picture />, в Image и getImage() добавлены densities и widths.

Они генерируют атрибут srcset по абсолютным ширинам в пикселях (например [300, 600, 900]) или дескрипторам плотности (например ["2x"] или [1.5, 2]).

---
import { Image } from 'astro';
import myImage from './my-image.jpg';
---

<Image src={myImage} width={myImage.width / 2} densities={[1.5, 2]} alt="My cool image" />

<img
  src="/_astro/my_image.hash.webp"
  srcset="/_astro/my_image.hash.webp 1.5x, /_astro/my_image.hash.webp 2x"
  alt="My cool image"
/>

Syntax Highlighting

Мы мигрировали внутреннюю библиотеку подсветки с shiki на shikiji — ESM-альтернативу, упрощающую бандлинг и поддержку.

Новых опций и изменений в авторинге code blocks нет.

Для большинства проектов рефакторинг прозрачен, но у shikiji есть потенциально breaking change. Поскольку shikiji стремится к меньшей разметке, цветовые стили добавляются к pre или code, а не к span токена. Например:

До:

<code class="astro-code" style="background-color: #24292e">
  <pre>
    <span class="line" style="color: #e1e4e8">my code</span>
  </pre>
</code>

После:

<code class="astro-code" style="background-color: #24292e; color: #e1e4e8">
  <pre>
    <span class="line">my code<span>
  </pre>
</code>

На цвета это не влияет — span наследует цвет от родителя, но если вы полагаетесь на конкретную разметку HTML, проверьте сайт после обновления.

Package Provenance

NPM, реестр пакетов Astro, ввёл опциональные provenance attestations для безопасности цепочки поставок. Они позволяют проверять, где и как собраны пакеты.

С Astro 3.3 пакет astro и все интеграции @astrojs/ публикуются с provenance statement. Если вы поддерживаете интеграцию Astro, рекомендуем включить provenance при публикации.

Quality of Life Improvements

В релизе также исправления и улучшения. См. release notes.