Astro 4.9

Вышел Astro 4.9! В этом релизе — долгожданный Container API, стабилизированные экспериментальные функции и многое другое. Небольшой, но мощный релиз!

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

• Экспериментально: Container API
• Поддержка React 19 для Astro Actions
• Стабилизированные экспериментальные функции

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

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

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

Experimental: Container API

Astro 4.9 представляет первый взгляд на долгожданный Container API. Этот API позволяет рендерить Astro-компоненты вне Astro-приложения — аналогично тому, как React-компоненты рендерятся на сервере через react-dom/server, или Preact-компоненты через preact-render-to-string.

Пример использования Container API для рендеринга Astro-компонента в строку:

import { experimental_AstroContainer as AstroContainer } from 'astro/container';
import Component from './components/Component.astro';

const container = await AstroContainer.create();
console.log(await container.renderToString(Component));

Возможности API безграничны, но это лишь первый шаг. Сейчас мы сосредоточены на том, чтобы упростить рендеринг Astro-компонентов в тестовых фреймворках на Vite, таких как Vitest.

import { experimental_AstroContainer as AstroContainer } from 'astro/container';
import { expect, test } from 'vitest';
import Card from '../src/components/Card.astro';

test('Card with slots', async () => {
  const container = await AstroContainer.create();
  const result = await container.renderToString(Card, {
    slots: {
      default: 'Card content',
    },
  });

  expect(result).toContain('This is a card');
  expect(result).toContain('Card content');
});

Чтобы начать тестировать Astro-компоненты с Vitest, мы подготовили новый пример, который можно изучить, или создать проект напрямую:

npm create astro@latest -- --template container-with-vitest

Руководство по тестированию также обновлено с подробностями об использовании Container API. Тестируйте всё!

Подробнее о Container API: документация. Обратная связь по экспериментальной функции: Container API RFC.

React 19 support

Вышел первый release candidate React 19, и Astro готов. Мы добавили полную поддержку React 19 в интеграцию React с дополнительными возможностями для Astro Actions.

Чтобы использовать React 19 в Astro-проекте, следуйте руководству по установке React 19 beta. Это открывает новую функцию form actions в React — вызов Actions из <form> и отслеживание состояний «pending» и «result» в компонентах.

Пример с Astro Action like(), принимающим postId и возвращающим число лайков. В React 19 action можно передать в хук useActionState() для отслеживания результата. Функция experimental_withState() автоматически добавляет информацию для progressive enhancement:

import { actions } from 'astro:actions';
import { useActionState } from 'react';
import { experimental_withState } from '@astrojs/react/actions';

export function Like({ postId }: { postId: string }) {
  const [state, action, pending] = useActionState(
    experimental_withState(actions.like),
    0, // initial likes
  );

  return (
    <form action={action}>
      <input type="hidden" name="postId" value={postId} />
      <button disabled={pending}>{state} ❤️</button>
    </form>
  );
}

Состояние из useActionState() также доступно в handler action через experimental_getActionState(). Примеры в CHANGELOG.

Если отслеживание состояния не нужно, Astro Actions можно применить напрямую к свойству action любой React-<form>. Progressive enhancement тоже применится:

import { actions } from 'astro:actions';

export function SignOut() {
  return (
    <form action={actions.signOut}>
      <button>Sign Out</button>
    </form>
  );
}

Подробнее об Astro Actions и обратная связь по экспериментальному API: Astro Actions RFC.

Stabilized experimental features

В этом релизе стабилизированы CSRF-защита (появилась в Astro 4.6) и поддержка i18n-доменов (появилась в Astro 4.3). Больше не нужно включать experimental.csrfProtection и experimental.i18nDomains в конфиге Astro.

Опция experimental.security.csrfProtection удалена в пользу security.checkOrigin. Для защиты от CSRF установите security.checkOrigin: true и удалите experimental.security.csrfProtection, если она была включена:

import { defineConfig } from "astro/config";

export default defineConfig({
  security: {
    checkOrigin: true
  }
  experimental: {
    security: {
      csrfProtection: {
        origin: true
      }
    }
  },
});

Для i18n-доменов конфигурацию можно оставить как есть, только без experimental.i18nDomains:

import { defineConfig } from "astro/config";

export default defineConfig({
  site: "https://example.com",
  output: "server",
  adapter: node({
    mode: 'standalone',
  }),
  i18n: {
    defaultLocale: "en",
    locales: ["en", "fr", "pt-br", "es"],
    prefixDefaultLocale: false,
    domains: {
      fr: "https://fr.example.com",
      es: "https://example.es",
    },
  },
  experimental: {
    i18nDomains: true,
  },
});

Подробнее: разделы security и i18n domains в документации Astro.

Bug Fixes

Как обычно, Astro 4.9 включает исправления и небольшие улучшения, не вошедшие в этот пост! Полные release notes.