Astro 4.8

作者
Erika
Emanuele Stoppa
Matthew Phillips
Nate Moore
Bjorn Lu
Sarah Rainsberger

Astro 4.8 现已发布！此版本包括对 Astro actions 和请求重写的实验性支持、性能改进等。

完整版本亮点包括

要升级现有项目，请使用自动化的 @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 使您能够轻松地从客户端代码中定义和调用具有完整类型安全的后端函数。

要使用此功能，请添加服务器构建输出并在您的 Astro 配置中启用 experimental.actions 选项

import { defineConfig } from "astro/config";


export default defineConfig({
  output: "hybrid", // or 'server'
  experimental: {
    actions: true,
  },
});

然后，使用 defineAction() 在 src/actions/index.ts 文件中定义 actions。您可以定义接受 JSON 或表单请求的 actions，并且 handler 函数将使用您的类型安全输入进行调用。

此外，不再需要对 formData.get() 结果进行类型转换。Astro 将使用您的 Zod schema 自动将表单请求解析为对象。以下是订阅时事通讯 action 的示例：

src/actions/index.ts
import { defineAction, z } from "astro:actions";


export const server = {
  newsletter: defineAction({
    accept: "form",
    input: z.object({
      email: z.string().email(),
      receivePromo: z.boolean(),
    }),
    handler: async ({ email, receivePromo }) => {
      // call a mailing service, or store to a database
      return { success: true };
    },
  }),
};

您可以从任何客户端组件中使用 astro:actions 中的 actions 对象调用 actions。在使用 JSON 时可以传递一个类型安全的 JavaScript 对象，或者在使用 accept: 'form' 时传递一个 FormData 对象。您还可以添加 getActionProps() 以实现渐进增强

src/components/Newsletter.tsx
import { actions, getActionProps } from "astro:actions";


export function Newsletter() {
  return (
    <form
      method="POST"
      onSubmit={async (e) => {
        e.preventDefault();
        const formData = new FormData(e.target as HTMLFormElement);
        const result = await actions.newsletter(formData);
      }}
    >
      <input {...getActionProps(actions.newsletter)} />
      <label htmlFor="email">Email</label>
      <input name="email" type="email" id="email" />


      <label htmlFor="receivePromo">Receive promotional emails</label>
      <input name="receivePromo" type="checkbox" id="receivePromo" checked />


      <button type="submit">Sign Up</button>
    </form>
  );
}

有关 Astro actions 的更多信息，请访问实验性 actions 文档。

实验性功能：请求重写

Astro 4.8 引入了对请求重写的实验性支持。重写是一项路由功能，允许您从当前 URL 显示不同页面的内容。这对于根据用户的位置、设备或其他条件自定义内容非常有用，而无需使用多个不同的 URL。此功能在其他框架中有时也称为“重新路由”。

要启用此功能，请在您的 Astro 配置中设置 experimental.rewriting 选项

import { defineConfig } from "astro/config";


export default defineConfig({
  experimental: {
    rewriting: true,
  },
});

从您的页面和端点中，您随后可以访问 Astro 全局对象或上下文对象上的 rewrite() 方法

---
if (!Astro.props.allowed) {
  return Astro.rewrite("/")
}
---
export function GET(ctx) {
  if (!ctx.locals.allowed) {
    return ctx.rewrite("/");
  }
}

此功能还可以在中间件中使用，通过向 next() 方法传递与 rewrite 方法类型相同的参数。

export function onRequest(ctx, next) {
  if (!ctx.cookies.get("allowed")) {
    return next("/");
  }
  return next();
}

有关重写的更多信息，请访问实验性重写文档。

性能改进

感谢 @bluwy 在 JavaScript 生态系统和 Astro 本身近期所做的努力，Astro 比以往任何时候都更快了！此版本包含多项性能改进，全面缩短了构建和渲染时间。

在我们自己的基准测试中，我们观察到在特定情况下构建时间提高了高达 20%。无需任何更改即可利用这些改进——只需升级到 Astro 4.8，即可享受更快的构建！

能够为同一入口点定义多个路由

Astro 集成开发者发现，尝试使用 injectRoute 函数注入多个具有相同入口点的路由时，会在构建时导致意外行为，即最后注入的路由会覆盖之前的路由。

这个问题自近两年前 (Astro 1.0) 引入 injectRoute 函数以来一直存在，但感谢 @goulvenclech 的贡献，它现在终于在 Astro 4.8 中得到了修复！

凭借我们蓬勃发展的开发者社区和不断涌现的新集成，对我们而言，Astro 作为一个优秀的构建平台至关重要，我们很高兴这为未来更多集成铺平了道路！

错误修复

没错，Astro 4.8 还包含了更多本文未能提及的错误修复和小型改进！请查看完整的发行说明以了解更多信息。