Fresh 1.2 – 欢迎全职维护者、岛屿间共享状态、有限的 npm 支持等功能

自我们推出 Fresh 1.0以来，这已将近一年。Fresh 1.0 是一款现代的、Deno 优先的、边缘原生的全栈 Web 框架。它融合了工具领域的现代发展和渐进式增强，使用服务器端即时渲染和通过岛屿架构（islands）进行的客户端 Hydration。Fresh 默认向客户端发送 0KB 的 JavaScript。自去年以来，Fresh 取得了巨大的增长，成为 GitHub 上最受欢迎的前端项目之一。

然而，有一个问题一直存在——Fresh 是否真的是 Deno 团队承诺维护的项目？ 当您问及此事时，我们总是回答“是的！”，但现实情况更为复杂。我们在四月伊始，Fresh 仓库中就有超过 60 个未处理（且未经审查）的拉取请求——我们未能达到您对 Deno 运行时项目所习惯的维护水平。这很大程度上归结于我没有足够的时间专注于 Fresh。

我们在去年底就看到了这一迹象——因此我们开始寻找能够接替我成为 Fresh 主要维护者的人选。长话短说，我们找到了。我非常高兴地宣布，Marvin Hagemeister 已加入 Deno 公司，并将全职领导 Fresh 项目。 如果您还不认识 Marvin：他是 Preact 的维护者、Preact DevTools 的开发者，也是 JavaScript 生态系统的加速者（就在今年，他将 npm scripts 的开销从 400 毫秒加速到 22 毫秒！）。如果还没有关注他，请关注他。

Fresh 的未来比以往任何时候都更加光明。在接下来的几个月里，您可以期待在可用性、功能、性能和项目维护方面取得重大改进。我们仍在制定未来的确切路线图，一旦准备就绪，我们将分享。

接下来，让我们深入了解 Fresh 1.2 的亮点功能

• 在岛屿属性中传递 Signals、Uint8Array 和循环数据
• 将 JSX 传递给岛屿，并在岛屿中嵌套其他岛屿
• 对 npm: 标识符的有限支持
• 支持自定义 HEAD 处理程序
• HandlerContext.render 的状态和头部覆盖
• ./islands 文件夹中的子目录
• 异步插件渲染
• Fresh 项目的简化测试

要创建一个新的 Fresh 项目，请运行

$ deno run -A -r https://fresh.deno.dev my-app

要将您的项目更新到最新版本的 Fresh，请在项目根目录运行更新脚本

$ deno run -A -r https://fresh.deno.dev/update .

还没有安装 Deno？立即安装。

在岛屿属性中传递 Signals、Uint8Array 和循环数据

Fresh 设计的核心是岛屿（islands）：即在服务器和客户端都渲染的独立组件。（Fresh 中的所有其他 JSX 都只在服务器上渲染。）为了便于在执行初始服务器渲染后“恢复”客户端渲染，用户可以将 props 传递给岛屿，就像他们可以对所有其他组件一样。

从今天起，除了所有现有的 JSON 可序列化值外，用户还可以将循环对象、Uint8Array 或 Preact Signals 传递给岛屿。这解锁了一系列新的用例，例如将相同的信号传递给多个岛屿，并使用该信号在这些岛屿之间共享状态。

// routes/index.tsx
import { useSignal } from "@preact/signals";
import Header from "../islands/Header.tsx";
import AddToCart from "../islands/AddToCart.tsx";

export default function Page() {
  const cart = useSignal<string[]>([]);
  return (
    <div>
      <Header cart={cart} />
      <div>
        <h1>Lemon</h1>
        <p>A very fresh fruit.</p>
        <AddToCart cart={cart} id="lemon" />
      </div>
    </div>
  );
}

// islands/Header.tsx
import { Signal } from "@preact/signals";

export default function Header(props: { cart: Signal<string[]> }) {
  return (
    <header>
      <span>Fruit Store</span>
      <button>Open cart ({props.cart.value.length})</button>
    </header>
  );
}

// islands/AddToCart.tsx
import { Signal } from "@preact/signals";

export default function AddToCart(props: {
  cart: Signal<string[]>;
  id: string;
}) {
  function add() {
    props.cart.value = [...props.cart.value, id];
  }
  return <button onClick={add}>Add to cart</button>;
}

到目前为止，传递给岛屿的 props 必须是 JSON 可序列化的，以便它们可以在服务器上序列化，通过 HTTP 发送到客户端，并在浏览器中反序列化。这种 JSON 序列化意味着许多类型的对象无法序列化：例如循环结构、Uint8Array 或 Preact Signals。

将 JSX 传递给岛屿，并在岛屿中嵌套其他岛屿

更进一步，我们增加了对向岛屿传递 JSX 子级的支持。如果您愿意，它们甚至可以相互嵌套。这允许您以最适合您的应用程序的方式混合动态和静态部分。

// file: /route/index.tsx
import MyIsland from "../islands/my-island.tsx";

export default function Home() {
  return (
    <MyIsland>
      <p>This text is rendered on the server</p>
    </MyIsland>
  );
}

在浏览器中，我们仅凭 HTML 就可以推断出 <p> 元素被作为子级传递给了 MyIsland。这使得您的网站保持精简和轻量，因为除了我们无论如何都需要渲染的 HTML 之外，我们不需要任何额外的信息。

同样，我们现在会检测您何时将一个岛屿嵌套在另一个岛屿中。每当发生这种情况时，我们都会将内部岛屿视为标准 Preact 组件。

// file: /route/index.tsx
import MyIsland from "../islands/my-island.tsx";
import OtherIsland from "../islands/other-island.tsx";

export default function Home() {
  return (
    <MyIsland>
      <OtherIsland>
        <p>This text is rendered on the server</p>
      </OtherIsland>
    </MyIsland>
  );
}

将来，我们希望尝试更多地允许嵌套岛屿惰性初始化。敬请期待！

如果您对内部实现细节感兴趣，我们建议您查看使其成为可能的相关拉取请求：https://github.com/denoland/fresh/pull/1285 。

对 npm: 标识符的有限支持

Fresh 现在支持导入 npm: 包，包括在服务器渲染期间和岛屿中使用。使用 npm: 标识符不需要本地 node_modules/ 文件夹——就像您在 Deno 中习惯的那样。

// routes/api/is_number.tsx
import isNumber from "npm:is-number";

export const handler = {
  async GET(req) {
    const input = await req.json();
    return Response.json(isNumber(input));
  },
};

请注意，Deno Deploy 目前不支持 npm: 标识符，因此在将 Fresh 应用程序部署到 Deno Deploy 时无法使用。您可以期待 Deno Deploy 很快就会支持 npm: 标识符。目前，您可以在将 Fresh 部署到 VPS 或通过 Docker 部署到 Fly.io 等服务时使用 npm: 标识符。

支持自定义 HEAD 处理程序

现在可以在路由中为 HEAD 请求声明处理程序。以前，路由对 HEAD 请求使用默认的 GET 处理程序实现，省略了响应体。这种行为仍然有效，但可以通过为 HEAD 请求传递自定义函数来覆盖。

// routes/files/:id.tsx
export const handler = {
  async HEAD(_req, ctx) {
    const headers = await fileHeaders(ctx.params.id);
    return new Response(null, { headers });
  },
  async GET(_req, ctx) {
    const headers = await fileHeaders(ctx.params.id);
    const body = await fileBody(ctx.params.id);
    return new Response(body, { headers });
  },
};

感谢 Kamil Ogórek 的贡献。

HandlerContext.render 的状态和头部覆盖

现在可以设置通过 ctx.render 创建的 Response 的状态和头部信息——例如，如果您想用状态码 400 响应一个 HTML 页面，您现在可以这样做：

// routes/index.ts
export const handler = {
  async GET(req, ctx) {
    const url = new URL(req.url);
    const user = url.searchParams.get("user");
    if (!user) {
      return ctx.render(null, {
        status: 400,
        headers: { "x-error": "missing user" },
      });
    }
    return ctx.render(user);
  },
};

./islands 文件夹中的子目录

以前，所有岛屿都必须直接在 ./islands 目录内的文件中声明。现在，它们可以包含在 ./islands 目录内的文件夹中。

// Always valid:
// islands/Counter.tsx
// islands/add_to_cart.tsx

// Newly valid:
// islands/cart/add.tsx
// islands/header/AccountPicker.tsx

感谢 Asher Gomez 添加此功能。

异步插件渲染

Fresh 支持插件，插件可以自定义页面的渲染方式。例如，Twind 插件从渲染的页面中提取 Tailwind CSS 类并为这些类生成 CSS 样式表。

到目前为止，这些“渲染钩子”必须是同步的。然而，一些用例（例如使用 UnoCSS）需要异步“渲染钩子”。现在，Fresh 支持 renderAsync 钩子。

有关使用 renderAsync 钩子的信息，请参阅文档：https://fresh.deno.dev/docs/concepts/plugins#hook-renderasync。

感谢 Tom 将此功能添加到 Fresh。

Fresh 项目的简化测试

$fresh/server.ts 现在导出一个新的 createHandler 函数，可用于从您的 Fresh manifest 创建一个可用于测试的处理程序函数。

import { createHandler } from "$fresh/server.ts";
import manifest from "../fresh.gen.ts";
import { assert, assertEquals } from "$std/testing/asserts.ts";

Deno.test("/ serves HTML", async () => {
  const handler = await createHandler(manifest);

  const resp = await handler(new Request("http://127.0.0.1/"));
  assertEquals(resp.status, 200);
  assertEquals(resp.headers.get("content-type"), "text/html; charset=utf-8");
});

欲了解更多关于为 Fresh 项目编写测试的信息，请查阅文档：https://fresh.deno.dev/docs/examples/writing-tests

感谢 Octo8080X 简化了测试。

接下来

很高兴能有一位全职维护者来改进和发展 Fresh。一如既往，如果您有任何问题，请通过 Discord 告知我们。

不要错过任何更新 — 在 Twitter 上关注我们！