Astro 4.15

Вышел Astro 4.15! В релизе стабилизированы Astro Actions — наше решение для полностью типобезопасных серверных функций. Также: поддержка libSQL remotes в Astro DB, новая опция timeout для client:idle и многое другое.

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

• Стабильно: Astro Actions
• Rewrites для i18n fallbacks
• libSQL remotes в @astrojs/db
• Опция timeout в client:idle
• Swap-хелперы для кастомизации ViewTransitions

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

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

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

Stable: Astro Actions

Astro Actions вышли из экспериментального статуса и готовы помогать строить ваш backend.

Actions берут на себя типобезопасный data fetching, парсинг JSON и валидацию ввода — значительно меньше boilerplate, чем с API endpoint.

// Before
export const POST = ({ request }) => {
  const contentType = request.headers.get('Content-Type');
  if (contentType !== 'application/json') return new Response('Unsupported body', { status: 415 });

  const json = await request.json();
  const input = z.object({ email: z.string().email() }).safeParse(json);
  if (!input.success) return new Response(JSON.stringify(input.error), { status: 400 });
  // ...50 more lines
 }

// After
defineAction({
  input: z.object({ email: z.string().email() }),
  handler: ({ name }) => { /* ... */ },
})

Actions вызываются из клиентских компонентов и HTML-форм. Гибкость для React, Svelte, script tags или обычных Astro-компонентов. Пример вызова newsletter action и рендеринга результата в Astro-компоненте:

---
import { actions } from 'astro:actions';

const result = Astro.getActionResult(actions.newsletter);
---

{result && !result.error && <p>Thanks for signing up!</p>}

<form method="POST" action={actions.newsletter}>
  <input type="email" name="email" />
  <button>Sign up</button>
</form>

Подробнее и примеры: новое руководство по Actions.

Rewrites in i18n fallbacks

В i18n-маршрутизацию добавлена опция для контроля fallbacks — теперь можно указать rewrite (ответ 200 с сервера) или redirect (текущее поведение по умолчанию).

Система fallbacks определяет, какой контент используется для локали, когда контент в локали пользователя недоступен. Пример конфигурации:

import { defineConfig } from "astro/config"
export default defineConfig({
  i18n: {
    defaultLocale: "en",
    locales: ["es", "en", "fr"],
    fallback: {
      fr: "es"
    },
    routing: {
      fallbackType: "rewrite"
    }
  }
})

Подробнее: обновлённая документация по fallbacks в i18n.

libSQL remotes in Astro DB

Теперь можно указать сервер libSQL как remote для @astrojs/db. Это позволяет self-host libSQL вместо Astro DB с Astro Studio. Работает с любым поддерживаемым протоколом libSQL.

Установите переменные окружения:

• ASTRO_DB_REMOTE_URL: URL подключения к libSQL-серверу.
• ASTRO_DB_APP_TOKEN: токен аутентификации libSQL-сервера.

Функция позволяет подключаться к libSQL в production и использовать команды деплоя и push (миграции) Astro DB. Спасибо Fryuni!

Подробнее: руководство по Astro DB.

Timeout option in client:idle

Директива client:idle загружает Astro Island когда CPU пользователя простаивает. Под капотом — requestIdleCallback.

В Astro 4.15 можно задать timeout — гидратация гарантированно произойдёт в указанный срок. Полезно для приоритета компонента среди других idle-компонентов.

{/* Component loads after a maximum wait of 500ms */}
<Counter id="client-idle-timeout" {...someProps} client:idle={{ timeout: 500 }}>
  <h1>Hello, client:idle={'{{timeout: 500}}'}!</h1>
</Counter>

Спасибо ph1p!

Swap helpers for ViewTransitions

Роутер <ViewTransitions /> даёт UX SPA при DX MPA — загружает страницы при навигации и подменяет контент. Иногда нужен больший контроль над swap — через переопределение в событии astro:before-swap.

В Astro 4.15 встроенные swap-функции экспортируются из astro:transitions/client. Можно использовать части стандартного поведения Astro и добавлять свою логику:

<script>
import { swapFunctions } from 'astro:transitions/client';

document.addEventListener('astro:before-swap', (e) => {
  e.swap = () => swapMainOnly(e.newDocument);
});

function swapMainOnly(doc: Document) {
  swapFunctions.deselectScripts(doc);
  swapFunctions.swapRootAttributes(doc);
  swapFunctions.swapHeadElements(doc);
  const restoreFocusFunction = swapFunctions.saveFocus();
  const newMain = doc.querySelector('main');
  const oldMain = document.querySelector('main');
  if (newMain && oldMain) {
    swapFunctions.swapBodyElement(newMain, oldMain);
  } else {
    swapFunctions.swapBodyElement(doc.body, document.body);
  }
  restoreFocusFunction();
}
<script>

Подробнее: создание собственной swap-функции. Поделитесь тем, что создадите!

Спасибо martrapp!

Bug Fixes and Special Thanks

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

Спасибо Sarah Rainsberger (@sarah11918), Yan (@yanthomasdev), Bjorn Lu (@bluwy), Emanuele Stoppa (@ematipico), Chris Swithinbank (@delucis) и всем остальным контрибьюторам релиза.