Astro 5.17 | Astro

Astro 5.17: настраиваемое размещение dev toolbar, async-парсинг файлов, partitioned cookies и новые улучшения оптимизации изображений.

Что нового в этом релизе:

Настройка размещения dev toolbar
Async-парсинг в loader file()
Поддержка partitioned cookies
Цвет фона для трансформаций изображений
Выбор kernel Sharp для ресайза изображений
Опция retainBody для loader glob()

Чтобы обновить существующий проект, используйте CLI @astrojs/upgrade. Или обновите вручную:

# Рекомендуется:
npx @astrojs/upgrade

# Вручную:
npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest

Dev toolbar теперь поддерживает проектную опцию placement — дефолтная позиция для всей команды и окружений.

Раньше размещение только через UI, настройки в localStorage — каждый настраивал вручную, настройки терялись при очистке браузера. Сайты с нижними UI-элементами (чат, cookie banner) не могли избежать конфликтов.

export default defineConfig({
  devToolbar: {
    placement: 'bottom-left',
  },
});

Конфигурация — проектный дефолт, но UI-переопределение разработчиков сохраняется.

Подробнее — в руководстве по dev toolbar.

Спасибо Tony Narlock!

Async parsing in the `file()` loader

Опция parser() в loader file() теперь поддерживает async-функции — сложные пайплайны обработки данных.

Можно выполнять асинхронные операции при загрузке данных из файла — дополнительные fetch, API-вызовы:

import { defineCollection } from 'astro:content';
import { file } from 'astro/loaders';

const data = defineCollection({
  loader: file('src/data/products.json', {
    parser: async (text) => {
      const products = JSON.parse(text);

      // Fetch additional data asynchronously
      const enrichedProducts = await Promise.all(
        products.map(async (product) => {
          const details = await fetchProductDetails(product.id);
          return { ...product, ...details };
        })
      );

      return enrichedProducts;
    },
  }),
});

Синхронные parser продолжают работать без изменений.

Спасибо Patrick Arlt!

Partitioned cookies support

Astro поддерживает partitioned cookies через опцию partitioned в Astro.cookies.set() — лучший контроль приватности во встроенных контекстах.

Partitioned cookies — часть Privacy Sandbox: cookies изолированы по top-level сайту. Полезно при встраивании Astro в iframe:

---
// Set a partitioned cookie
Astro.cookies.set('session', sessionId, {
  partitioned: true,
  secure: true, // Required for partitioned cookies
  sameSite: 'none', // Typically used with partitioned cookies
});
---

При partitioned: true cookie привязан к partition top-level сайта — меньше кросс-сайтового трекинга, функциональность во встроенных сценариях сохраняется.

Подробнее — в разделе cookies в Astro.

Спасибо John Mortlock!

Background color for image transformations

Новое свойство background при трансформациях изображений — цвет фона при конвертации в форматы без прозрачности.

Раньше JPEG получал чёрный фон. Теперь любой цвет в CSS-синтаксисе:

---
import { Image } from 'astro:assets';
import myImage from './my-image.png';
---

<!-- Use a white background when converting to JPEG -->
<Image src={myImage} format="jpeg" background="white" alt="Product" />

<!-- Or use any CSS color syntax -->
<Image src={myImage} format="jpeg" background="rgb(248 250 252)" alt="Hero" />
<Image src={myImage} format="jpeg" background="#f8fafc" alt="Banner" />

То же в getImage():

import { getImage } from 'astro:assets';
import heroImage from './hero.png';

const optimizedImage = await getImage({
  src: heroImage,
  format: 'jpeg',
  background: 'white',
});

Все опции трансформаций — в руководстве по изображениям.

Спасибо Julien Cayzac!

Sharp kernel selection for image resizing

Сервис Sharp поддерживает алгоритм kernel ресайза через опцию kernel — тонкий контроль качества.

По умолчанию lanczos3 для уменьшения. Разные kernel дают разные результаты:

export default defineConfig({
  image: {
    service: {
      entrypoint: 'astro/assets/services/sharp',
      config: {
        kernel: 'mks2021'
      }
    }
  }
})

Конфигурация для всех изображений сайта; per-image пока недоступна.

См. документацию Sharp resize.

Спасибо Mark Ignacio!

`retainBody` option for `glob()` loader

Loader glob() получил опцию retainBody для уменьшения размера data store — полезно для больших коллекций.

По умолчанию Astro хранит сырое тело каждого файла в entry.body плюс rendered HTML. Для очень больших коллекций это сильно увеличивает deployed data store.

import { defineCollection } from 'astro:content';
import { glob } from 'astro/loaders';

const blog = defineCollection({
  loader: glob({
    pattern: '**/*.md',
    base: './src/content/blog',
    retainBody: false
  }),
});