Astro 4.15 现已发布!此版本稳定了 Astro Actions——我们提供完全类型安全后端函数的解决方案。此外,还包括:Astro DB 中对 libSQL 远程连接的支持,client:idle
的新超时选项等等。
此版本包括以下亮点
- 稳定版:Astro Actions
- 为 i18n 回退使用重写
- @astrojs/db 中的 libSQL 远程连接
- client:idle 中的超时选项
- ViewTransitions 自定义交换辅助函数可用
要升级现有项目,请使用自动化的 @astrojs/upgrade
CLI 工具。或者,通过运行包管理器的升级命令来手动升级
# Recommended:npx @astrojs/upgrade
# Manual:npm install astro@latestpnpm upgrade astro --latestyarn upgrade astro --latest
稳定版:Astro Actions
Astro Actions 已结束实验阶段,可用于构建您的下一个后端。
Actions 为您处理类型安全的数据获取、JSON 解析和输入验证。与使用 API 端点相比,这显著减少了所需的样板代码量。
// Beforeexport 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 }
// AfterdefineAction({ input: z.object({ email: z.string().email() }), handler: ({ name }) => { /* ... */ },})
Actions 可以从客户端组件和 HTML 表单调用。这使您能够灵活地使用任何技术构建应用程序,例如 React、Svelte、脚本标签或纯 Astro 组件。此示例调用一个通讯订阅 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 指南。
i18n 回退中的重写
已为国际化 (i18n) 路由添加了一个新选项,可以更好地控制回退处理方式。您现在可以指定回退是导致重写(服务器返回 200
响应)还是重定向(当前默认值)。
i18n 中的回退系统允许您定义当用户语言环境中没有相应内容时,特定区域设置使用哪个内容。例如,您的配置可能如下所示:
import { defineConfig } from "astro/config"export default defineConfig({ i18n: { defaultLocale: "en", locales: ["es", "en", "fr"], fallback: { fr: "es" }, routing: { fallbackType: "rewrite" } }})
有关此新功能的更多信息,请参阅我们关于 i18n 中处理回退的修订文档。
Astro DB 中的 libSQL 远程连接
您现在可以将 libSQL 服务器实例指定为 @astrojs/db
的远程连接。这使您可以自行托管 libSQL 服务器,作为将 Astro DB 与 Astro Studio 结合使用的替代方案。此选项适用于任何受支持的 libSQL 协议。
要使用此功能,请设置以下环境变量:
ASTRO_DB_REMOTE_URL
:您的 libSQL 服务器连接 URL。ASTRO_DB_APP_TOKEN
:您的 libSQL 服务器身份验证令牌。
启用此功能后,您可以在生产环境中连接到 libSQL 服务器,并且可以使用 Astro DB 部署和推送(迁移)命令与 libSQL 实例。感谢Fryuni为此出色的贡献!
有关在 Astro DB 中使用 libSQL 服务器的更多信息,请访问我们的 Astro DB 指南。
client:idle
中的超时选项
client:idle
指令用于在用户 CPU 空闲(没有其他 JavaScript 正在执行)时加载一个Astro Island。在底层,此功能依赖于浏览器的requestIdleCallback功能。
在 Astro 4.15 中,您现在可以指定一个 timeout
属性,它将触发水合作用,以确保您的元素在指定时间范围内可交互。这对于为可能与其他空闲组件竞争的组件添加优先级很有用。
{/* 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为此贡献。
ViewTransitions 的交换辅助函数
Astro 的 <ViewTransitions />
路由器在保持 Astro 多页面应用 (MPA) 开发体验 (DX) 的同时,为您提供单页面应用 (SPA) 的用户体验 (UX)。它通过在导航时获取页面并为客户端路由交换内容来实现此目的。在某些情况下,您可能希望更好地控制交换的工作方式,这可以通过在astro:before-swap
事件中重写交换来完成。
在 Astro 4.15 中,内置的交换函数现在从 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>
查看文档以获取更多关于构建您自己的自定义交换函数的信息,并务必与我们分享您的作品!
感谢martrapp为此贡献。
错误修复和特别鸣谢
一如既往,Astro 4.15 包含了更多本次博文未能提及的错误修复和小型改进!请查看完整的发行说明以了解更多信息。
感谢Sarah Rainsberger (@sarah11918)、Yan (@yanthomasdev)、Bjorn Lu (@bluwy)、Emanuele Stoppa (@ematipico)、Chris Swithinbank (@delucis)以及所有为本次发布做出贡献的人。