Astro 4.8

Вышел Astro 4.8! В релизе — экспериментальная поддержка Astro Actions и request rewriting, улучшения производительности и многое другое.

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

• Экспериментально: Astro Actions
• Экспериментально: Request Rewriting
• Улучшения производительности
• Несколько маршрутов с одним entrypoint

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

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

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

Experimental: Astro Actions

В релизе — первый превью долгожданной функции: Astro Actions! Actions упрощают определение и вызов серверных функций с полной типобезопасностью из клиентского кода.

Для использования добавьте server build output и включите experimental.actions в конфиге Astro:

import { defineConfig } from "astro/config";

export default defineConfig({
  output: "hybrid", // or 'server'
  experimental: {
    actions: true,
  },
});

Затем определите actions в src/actions/index.ts через defineAction(). Actions принимают JSON или form-запросы, а handler получает типобезопасный ввод.

Больше не нужно приводить результаты formData.get() — Astro автоматически парсит form-запросы в объекты по Zod-схеме. Пример action подписки на рассылку:

import { defineAction, z } from "astro:actions";

export const server = {
  newsletter: defineAction({
    accept: "form",
    input: z.object({
      email: z.string().email(),
      receivePromo: z.boolean(),
    }),
    handler: async ({ email, receivePromo }) => {
      // call a mailing service, or store to a database
      return { success: true };
    },
  }),
};

Actions вызываются из любого клиентского компонента через объект actions из astro:actions. Можно передать типобезопасный объект (JSON) или FormData (при accept: 'form'). Также можно добавить getActionProps() для progressive enhancement:

import { actions, getActionProps } from "astro:actions";

export function Newsletter() {
  return (
    <form
      method="POST"
      onSubmit={async (e) => {
        e.preventDefault();
        const formData = new FormData(e.target as HTMLFormElement);
        const result = await actions.newsletter(formData);
      }}
    >
      <input {...getActionProps(actions.newsletter)} />
      <label htmlFor="email">Email</label>
      <input name="email" type="email" id="email" />

      <label htmlFor="receivePromo">Receive promotional emails</label>
      <input name="receivePromo" type="checkbox" id="receivePromo" checked />

      <button type="submit">Sign Up</button>
    </form>
  );
}

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

Experimental: Request Rewriting

Astro 4.8 добавляет экспериментальную поддержку request rewriting. Rewriting — маршрутизация, показывающая контент другой страницы при текущем URL. Полезно для контента по локации, устройству и другим условиям без отдельных URL. В других фреймворках это иногда называют «rerouting».

Включите experimental.rewriting в конфиге Astro:

import { defineConfig } from "astro/config";

export default defineConfig({
  experimental: {
    rewriting: true,
  },
});

На страницах и в endpoints доступен метод rewrite() на глобальном объекте Astro или в контексте:

---
if (!Astro.props.allowed) {
  return Astro.rewrite("/")
}
---

export function GET(ctx) {
  if (!ctx.locals.allowed) {
    return ctx.rewrite("/");
  }
}

В middleware можно передать параметр в next() с тем же типом, что у rewrite:

export function onRequest(ctx, next) {
  if (!ctx.cookies.get("allowed")) {
    return next("/");
  }
  return next();
}

Подробнее о rewriting: экспериментальная документация.

Performance improvements

Благодаря работе @bluwy в экосистеме JavaScript и в Astro, Astro стал быстрее! Релиз включает улучшения производительности — сокращение времени сборки и рендеринга.

В наших бенчмарках время сборки в отдельных случаях улучшилось до 20%. Ничего настраивать не нужно — просто обновитесь до Astro 4.8!

Ability to define multiple routes with the same entrypoint

Авторы интеграций обнаружили: при инъекции нескольких маршрутов с одним entrypoint через injectRoute при сборке последний маршрут перезаписывал предыдущие.

Проблема существовала с Astro 1.0, но благодаря @goulvenclech исправлена в Astro 4.8!

С растущим сообществом и новыми интеграциями важно, чтобы Astro был отличной платформой для разработки — это открывает путь к ещё большему числу интеграций!

Bug Fixes

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