Astro 6.2 | Astro

Вышел Astro 6.2! Этот релиз приносит экспериментальный кастомный логгер со встроенным JSON-выводом — идеально для структурированного логирования и coding agents. Также новый API оптимизатора SVG, хелпер URL шрифтов и многое другое.

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

Оптимизатор SVG
Экспериментальный логгер
Экспериментально: getFontFileURL()
Astro v7 alpha
allowedHosts для preview-серверов
Опция "jsx" для compressHTML

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

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

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

SVG optimizer

Экспериментальная оптимизация SVG в Astro переработана: новая опция svgOptimizer заменяет прежний флаг svgo. Вместо прямой привязки к SVGO новый API вводит интерфейс SvgOptimizer, который может реализовать любая библиотека оптимизации. Astro поставляет встроенный svgoOptimizer() на основе SVGO, но теперь можно подключить альтернативы вроде OxVG.

import { defineConfig, svgoOptimizer } from "astro/config";

export default defineConfig({
  experimental: {
    svgOptimizer: svgoOptimizer()
  }
});

При включении все импортированные SVG, используемые как компоненты, оптимизируются на этапе сборки для меньшего размера и лучшей производительности. Можно передать объект конфигурации SVGO для настройки:

import { defineConfig, svgoOptimizer } from "astro/config";

export default defineConfig({
  experimental: {
    svgOptimizer: svgoOptimizer({
      plugins: ["preset-default", { name: "removeViewBox" }]
    })
  }
});

Если вы использовали experimental.svgo, обновите конфиг на новую опцию svgOptimizer.

Подробнее см. документацию экспериментальной оптимизации SVG.

Experimental Logger

Теперь можно управлять логгером Astro кастомными логгерами. В рамках экспериментальной функции Astro поставляет встроенные логгеры, например JSON-логгер. Если вы работаете с Astro через coding agents, структурированные логи определённо помогут workflow.

JSON logger

JSON-логирование можно включить через конфиг с experimental.logger или через CLI флагом --experimentalJson:

import { defineConfig, logHandlers } from "astro/config";

export default defineConfig({
  experimental: {
    logger: logHandlers.json()
  }
})

astro dev --experimentalJson
astro sync --experimentalJson
astro build --experimentalJson

Custom logger

Также можно создать свой логгер, реализовав нужный интерфейс:

import { defineConfig } from "astro/config";

export default defineConfig({
  experimental: {
    logger: {
      entrypoint: "@org/custom-logger"
    }
  }
})

import type { AstroLoggerDestination, AstroLoggerMessage } from "astro";
import { matchesLevel } from "astro/logger";

function customLogger(level = 'info'): AstroLoggerDestination {
  return {
    write(message: AstroLoggerMessage) {
      if (matchesLevel(message.level, level)) {
        // write message somewhere
      }
    }
  }
}

export default customLogger;

Подробнее о включении и использовании см. документацию Experimental Logger.

Полный обзор и обратная связь по экспериментальному API — в RFC Custom logger.

Experimental: `getFontFileURL()`

Теперь можно загружать данные файлов шрифтов при пререндеринге с помощью нового хелпера experimental_getFontFileURL(), экспортируемого из astro:assets. Это позволяет использовать шрифты Astro с инструментами вроде Satori для генерации Open Graph изображений на этапе сборки — раньше требовались обходные пути с недокументированными внутренними путями.

import type { APIRoute } from "astro";
import { fontData, experimental_getFontFileURL } from "astro:assets";
import satori from "satori";
import { html } from "satori-html";
import sharp from "sharp";

export const GET: APIRoute = async (context) => {
  const fontPath = fontData["--font-roboto"][0]?.src[0]?.url;

  if (fontPath === undefined) {
    throw new Error("Cannot find the font path.");
  }

  const url = experimental_getFontFileURL(fontPath, context.url);
  const data = await fetch(url).then((res) => res.arrayBuffer());

  const svg = await satori(
    html`<div style="color: black;">hello, world</div>`,
    {
      width: 600,
      height: 400,
      fonts: [
        {
          name: "Roboto",
          data,
          weight: 400,
          style: "normal",
        },
      ],
    },
  );

  const pngBuffer = await sharp(Buffer.from(svg))
    .resize(600, 400)
    .png()
    .toBuffer();

  return new Response(new Uint8Array(pngBuffer), {
    headers: { "Content-Type": "image/png" },
  });
};

Подробнее см. документацию Fonts API.

Astro v7 alpha

Началась работа над следующей мажорной версией Astro. Первая alpha Astro 7 включает два крупных изменения:

Vite 8 support

Astro 7 переходит на Vite 8 — последнюю мажорную версию инструмента сборки Astro. Это breaking change для интеграций и плагинов Astro, зависящих от внутренностей Vite, но большинство пользователей смогут обновиться без изменений в коде проекта.

Stable Rust compiler

Rust-компилятор Astro, ранее доступный как экспериментальный флаг (experimental.rustCompiler), теперь единственный компилятор по умолчанию в Astro 7. Rust-компилятор даёт значительно более быструю сборку по сравнению с прежним Go-компилятором. Флаг experimental.rustCompiler больше не нужен и может быть удалён из конфига.

Try it out

Alpha Astro 7 доступна для раннего тестирования:

npm install astro@alpha

Будем рады обратной связи! Сообщайте о проблемах на GitHub.

Other improvements

allowedHosts для preview-серверов: опция Astro server.allowedHosts теперь передаётся в preview-серверы адаптеров, позволяя контролировать принимаемые hostname при astro preview за reverse proxy или с кастомными локальными доменами. Для авторов адаптеров allowedHosts теперь доступен в объекте options, передаваемом в preview entrypoint. Подробнее см. справочник адаптеров.
Опция "jsx" для compressHTML: опция compressHTML теперь принимает значение "jsx", которое удаляет пробелы по правилам JSX, чтобы пробелы вели себя одинаково в .astro и .tsx. Многострочный текст с отступами схлопывается в одну строку с пробелами между словами, пробелы внутри <pre> сохраняются.