Astro 4.1

作者
Erika
Emanuele Stoppa
Matthew Phillips
Nate Moore
Bjorn Lu

假期短暂休整后，我们带着 Astro 的新版本回来了！Astro 4.1 包含多项错误修复和改进。由于大家都在逐步恢复工作状态，本次发布的版本比以往要小一些，但我们都非常高兴能重回 Astro 的开发工作，并为 2024 年制定了一些激动人心的计划！

亮点包括

为了利用最新功能，请确保您正在运行最新版本的 Astro。您可以通过运行 @astrojs/upgrade 命令升级到 Astro 4.1。

npx @astrojs/upgrade

或者通过运行您的包管理器的升级命令

npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest

新增辅助功能审计规则

我们为开发工具栏新增了两项审计规则。现在您将收到以下警告：

  • 不支持的 ARIA 属性
  • ARIA 角色所需的缺失属性

这两项规则都有助于确保页面上的元素具有正确且有效的 ARIA 角色。

client:visible 指令扩展

client:visible 指令现在接受 rootMargin 选项，该选项允许您指定视口周围的边距来计算可见性。这使得组件在接近视口时即可进行水合（hydration），而无需等到完全可见。

<!-- Load component when it's within 200px away from entering the viewport -->
<Component client:visible={{rootMargin: "200px"}} />

现在，在设置和获取 Cookie 时，可以通过新的 encode 和 decode 函数自定义 Cookie 的编码/解码方式。

例如，在将 URL 作为 Cookie 的一部分添加时，您可以通过 encodeURIComponent 绕过默认编码

---
import { encodeCookieValue } from './cookies';
Astro.cookies.set('url', Astro.url.toString(), {
  // Override the default encoding so that URI components are not encoded
  encode: (value) => encodeCookieValue(value),
});
---

之后，您也可以通过同样的方式解码 URL。

---
import { decodeCookieValue } from './cookies';
const url = Astro.cookies.get('url', {
  decode: (value) => decodeCookieValue(value),
});
---

错误修复

此版本还包含其他错误修复。请查看发行说明了解更多信息。