Astro 4.9 发布了!此版本包含期待已久的容器 API、稳定的实验性功能等。这是一个小巧而强大的版本!
完整版本亮点包括
要升级现有项目,请使用自动化的 @astrojs/upgrade
CLI 工具。或者,通过运行包管理器的升级命令来手动升级
# Recommended:npx @astrojs/upgrade
# Manual:npm install astro@latestpnpm upgrade astro --latestyarn upgrade astro --latest
实验性功能:容器 API
Astro 4.9 首次展示了期待已久的容器 API。此 API 允许您在 Astro 应用程序外部渲染 Astro 组件。这类似于您如何使用 react-dom/server
等库在服务器上渲染 React 组件,或使用 preact-render-to-string
渲染 Preact 组件。
以下是使用容器 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 带来的可能性是无限的,但这只是第一步。我们在此阶段的主要重点是使其更容易在由 Vite 提供支持的测试框架(例如 Vitest)中渲染 Astro 组件。
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');});
要开始使用 Vitest 测试 Astro 组件,我们创建了一个新示例,您可以查看该示例,或直接使用它创建一个新项目
npm create astro@latest -- --template container-with-vitest
我们的测试指南也已更新,包含有关如何使用容器 API 进行测试的更多信息。测试所有内容!
要了解有关容器 API 及其使用方法的更多信息,请查阅容器 API 文档。要就此实验性且正在开发中的功能提供反馈,请访问容器 API RFC。
支持 React 19
React 19 的第一个发布候选版本已经发布,Astro 已为此做好准备。我们为 React 集成添加了对 React 19 的完整支持,并为 Astro Actions 增加了一些额外功能。
要在 Astro 项目中使用 React 19,请遵循 React 19 beta 版安装指南。这解锁了 React 的新表单动作功能,允许您从 <form>
调用 Actions,并在组件中跟踪“pending”和“result”值。
此示例使用一个名为 like()
的 Astro Action,它接受一个 postId
并返回点赞数。使用 React 19,您可以将此 action 传递给 useActionState()
hook 来跟踪结果。应用 experimental_withState()
函数以自动应用渐进增强信息
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> );}
您还可以使用 experimental_getActionState()
从您的 action handler
访问由 useActionState()
存储的状态。请参阅 CHANGELOG 以获取使用示例。
如果您不需要跟踪状态,您也可以将 Astro Actions 直接应用于任何 React <form>
上的 action
属性。这也会应用渐进增强信息
import { actions } from 'astro:actions';
export function SignOut() { return ( <form action={actions.signOut}> <button>Sign Out</button> </form> );}
要了解有关 Astro Actions 的更多信息,并就此实验性 API 提供反馈,请查阅Astro Actions RFC。
稳定的实验性功能
此版本稳定了 CSRF 保护(在Astro 4.6中引入)和 i18n 域名支持(在Astro 4.3中引入)功能。现在无需在 Astro 配置中启用 experimental.csrfProtection
和 experimental.i18nDomains
选项即可使用这些功能。
experimental.security.csrfProtection
选项已被移除,取而代之的是新的 security.checkOrigin
选项。要启用跨站请求伪造保护,请在您的 Astro 配置中将 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, },});
有关这些功能的更多信息,请分别参阅 Astro 文档的安全和i18n 域名部分。
错误修复
正如所料,Astro 4.9 包含了更多未在此帖子中提及的错误修复和较小改进!查看完整的发布说明以了解更多信息!