传统的Web Components编写方式对SSR（服务器端渲染）不太友好。在这篇文章中，我将向您展示如何构建与 SSR 和任何 JavaScript 框架（Vue、React、Svelte、Solid、Brisa）或 Vanilla JS 配合使用的反应式 Web 组件。

• 介绍
• 使用 Brisa 编写 Web 组件
• 构建 Web 组件
• 在 Vanilla JS 项目中加载 Web 组件
• Web组件的SSR
• 告诉我更多关于 Brisa 的信息...请...
• Web 组件库创建者注意事项
• 例子
• 结论

介绍

我们将使用 Brisa Web 组件编译器。 Brisa 是一个 Web 框架，除了与 Next.js 或 Nuxt.js 等其他框架类似之外，还允许您构建与反应性信号、JSX 和 SSR 一起使用的反应式 Web 组件。

为此，您只需在编写 Web 组件时了解 Brisa 的语法即可。 Brisa 尚未公开，因为它目前处于 v0.1 路线图的 95.48%，但我们估计 1 个月内它将准备好发布，每个人都可以访问它。然而，即使它根本不公开，您也可以使用它来创建您自己的 Web 组件库。

使用 Brisa 编写 Web 组件

作为示例，我们将一如既往地编写一个计数器的 Web 组件，这是经典示例。

counter-wc.tsx

import type { WebContext } from "brisa";

export default function CounterWC(
  { start = 0, color = "#2cebcf" }: { start?: number; color?: string },
  { state, css }: WebContext,
) {
  const count = state(start);

  css`
    button {
      background-color: ${color};
      color: white;
      border: none;
      border-radius: 5px;
      padding: 10px;
      margin: 5px;
      cursor: pointer;
    }
    div {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  `;

  return (
    

       count.value  }> 
      {count.value}
       count.value--}>-
    
  );
}

Brisa 使用文件名来了解选择器，这里选择器将是 counter-wc。

TIP：虽然 Brisa 尚未公开，但您可以使用 TypeScript 类型来指导您如何编写 Web 组件。

在上面的示例中，状态用于创建信号，然后使用 .value 使其在 JSX 内具有反应性。 props 也是特殊信号，因为它们是只读的，所以不使用 .value 来使其更易于使用并更轻松地定义默认值，这是通过构建时优化完成的，类似于 React如果他们使用信号但相反。

CSS 模板文字允许它对颜色属性的反应性变化做出反应。此示例之外的 CSS 模板文字对于轻松制作反应式动画非常有用。重要的是要记住，Web 组件与 Shadow DOM 一起使用，因此 CSS 不会影响页面的其余部分。

构建 Web 组件

要构建Web组件，您需要运行以下命令：

brisa build -w counter-wc.tsx

该命令将生成2个文件：

[ wait ]  ? building your standalone components...
[ info ]
[ info ]   Standalone components:
[ info ]   - build/counter-wc.client.js (670.00 B)
[ info ]   - build/counter-wc.server.js (842.00 B)
[ info ]
[ info ]   ✨  Done in 42.20ms.

这些文件不是Web组件，它只是Web组件的渲染功能，在构建时优化为尽可能轻（出来的字节没有gzip）.

那么，我们如何加载Web组件呢？

在 Vanilla JS 项目中加载 Web 组件

为此，您需要使用 brisa/client 在 HTML 中添加 importmap，然后导入 counter-wc.client.js 文件：

这里只有渲染部分会被移植到每个 Web 组件文件中，而它们都将使用导入映射中定义的相同 Brisa 包装器，该包装器负责使用信号和 Shadow DOM 创建 Web 组件。

Web组件的SSR

借助 Declarative Shadow DOM，现在可以完成 Web 组件的 SSR。 counter-wc.server.js 文件已经使用此行为进行了编译，因此您只需将其导入到您的服务器上并在 HTML 中呈现它并使其适应您的服务器框架。

这是一个使用 Bun.js 或 Node.js 而不使用 JSX 的示例：

ssr.js

import { renderToString } from "brisa/server";
import { jsx } from "brisa/jsx-runtime";
import CustomCounter from "counter-wc/server";

const html = `


    
    
    
    
    
    
    
    
        ${await renderToString(jsx(CustomCounter, { start: 10 }))}
    

`;

console.log(html);

然后运行bun run ssr.js，您将看到使用声明式 Shadow DOM 渲染的 Web 组件的 HTML。

告诉我更多关于布里萨的事……拜托……

这些 Web 组件库与 Brisa 的集成是通过配置文件完成的：

import type { WebComponentIntegrations } from "brisa";

export default {
  "custom-counter": {
    client: "./path/to/web-component.client.js",
    server: "./path/to/web-component.server.js",
    types: "./path/to/web-component.types.d.ts",
  },
} satisfies WebComponentIntegrations;

这样，SSR和TypeScript类型就会自动集成到你的项目中。您可以在任何服务器组件或另一个 Web 组件中使用该 Web 组件。

如果您有兴趣了解更多信息，我邀请您订阅 Brisa 时事通讯，以接收有关 Brisa 的最新消息和更新。我们预计到九月底即可准备好发布。

Web 组件库创建者注意事项

我们鼓励您尝试 Brisa 创建您自己的 Web 组件库。如果您添加“Brisa 制造”徽章，我们将在 Brisa 页面上添加指向您的图书馆的链接。

例子

如果您想查看我们在本文中解释的计数器示例的 GitHub 存储库，您可以查看并将其用作您自己创作的参考：

• https://github.com/aralroca/counter-wc

结论

在这篇文章中，我们了解了如何构建与 SSR 以及任何 JavaScript 框架或 Vanilla JS 配合使用的反应式 Web 组件。我们已经使用 Brisa 构建了 Web 组件，并且了解了如何将其加载到 Vanilla JS 项目中以及如何使用它进行 SSR。

我希望您喜欢这篇文章并且您学到了新的东西。如果您有任何疑问，请随时在下面的评论中询问我。我很乐意为您提供帮助。

祝您编码愉快，享受夏天剩下的时光！ ??