大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

前言

2023 年 8 月 3 日，Astro 2.10 新版本的发布改进了之前的实验性视图转换支持。 此外，Astro 团队还发布了 Astro 3.0 的第一个早期测试版。

• 视图转换中的持久 UI
• 抢先体验 Astro 3.0

如果已经安装了 Astro，则可以通过在项目中运行升级命令（使用选择的包管理器）将其升级到 2.10：

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

此时会升级已安装的所有 @astrojs/* 集成和适配器！

视图转换中的持久 UI

Astro 的第一个版本的 <ViewTransition /> 路由器带来了页面之间的平滑过渡，但可能导致任何有状态的岛（islands）或元素被重新渲染。

在 2.10 中，Astro 向 API 添加了一个新的 transition:persist 指令来解决这个问题。使用此指令，开发者可以在转换到新页面时保留旧页面中 DOM 元素和岛的状态。

例如，要保持视频在页面导航中播放，请将 transition:persist 添加到元素：

<video controls="" autoplay="" transition:persist>
  <source
    src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4"
    type="video/mp4"
  />
</video>

此时， <video> 元素及其当前状态将转移至下一页（如果该页面上也存在视频）。

同样，此功能适用于任何客户端框架组件岛。 在下面的示例中，计数器的状态被保留并移动到新页面：

<Counter count={5} client:load transition:persist />

抢先体验 Astro 3.0

Astro 团队目前已经发布了 Astro 3.0 的第一个测试版，即astro@3.0.0-beta.0。 到目前为止，此版本主要包含弃用和删除非常旧的模式。 但是，开发者可能会遇到一些兼容性问题或重大更改。 但是值得注意的是，这个早期预览正在迅速变化。

一些值得注意的变化包括：

• 删除对 Node 16 的支持，Astro 和所有集成支持的最低版本现在是 v18.14.1。同时，Node 16 将于 2023 年 9 月 11 日弃用。
• 删除 getStaticPaths 结果的自动展平，现在可以使用 .flatMap 和 .flat 来处理。
• build.split 和 build.excludeMiddleware 配置选项弃用，并被适配器配置中的选项替换
• Sharp 现在是 astro:assets 使用的默认图像服务，但是 Squoosh 依然支持
• HTML 现在默认是压缩的。
• API 路由现在使用大写的方法名称，例如：导出函数 GET() ...
• 适配器可以告知 Astro 它们支持哪些功能，例如：每页分割入口点以及 Sharp / Squoosh 兼容性。
• 有关更改的完整列表，可以参考参文末资料。

本文总结

本文主要和大家介绍 Astro 2.10 新版本的发布，同时带着大家一起了解了 Astro 3.0 测试版本新功能。相信通过本文的阅读，大家对 Astro 2.10 会有一个初步的了解。

因为篇幅有限，关于 Astro 的更多用法和特性文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏，您的支持是我不断创作的动力。

参考资料

https://astro.build/blog/astro-2100/#persistent-ui-in-view-transitions

https://github.com/withastro/astro/blob/refs/heads/next/packages/astro/CHANGELOG.md#300-beta0

https://stackblitz.com/edit/github-stfdbe-ikkp2e?file=src%2Fpages%2Findex.astro

https://github.com/withastro/astro/pull/7714