Astro 4.15

作者
Matthew Phillips
Erika
Ben Holmes

Astro 4.15 现已发布!此版本稳定了 Astro Actions——我们提供完全类型安全后端函数的解决方案。此外,还包括:Astro DB 中对 libSQL 远程连接的支持,client:idle 的新超时选项等等。

此版本包括以下亮点

要升级现有项目,请使用自动化的 @astrojs/upgrade CLI 工具。或者,通过运行包管理器的升级命令来手动升级

# Recommended:
npx @astrojs/upgrade
# Manual:
npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest

稳定版:Astro Actions

Astro Actions 已结束实验阶段,可用于构建您的下一个后端。

Actions 为您处理类型安全的数据获取、JSON 解析和输入验证。与使用 API 端点相比,这显著减少了所需的样板代码量。

// 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、脚本标签或纯 Astro 组件。此示例调用一个通讯订阅 Action,并使用 Astro 组件渲染结果。

src/pages/newsletter.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)以及所有为本次发布做出贡献的人。