Mitosis

编写一次组件，编译到每个框架：

试试我们的 在线互动

目录

• 快速入门指南
• 例子
• 什么是Mitosis
• 深入的文档
• 为什么要使用Mitosis？
  • 设计系统维护者
  • 使用多个 Web 框架的团队
  • 构建 Web SDK 的团队
• 贡献
• 社区
• 相关项目

快速入门指南

安装

npm install @builder.io/mitosis-cli @builder.io/mitosis

设置 mitosis.config.js

module.exports = {
  files: 'src/**',
  targets: ['vue3', 'solid', 'svelte', 'react'],
};

查看我们的配置文档以了解如何设置 Mitosis 配置文件。

设置Typescript

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "@builder.io/mitosis"
  }
}

安装 ESLint 规则

安装我们的ESLint 插件以获得非常有用的规则来指导您构建 Mitosis 组件。

⚠️ 注意 ：我们强烈建议您设置所有 ESLint 规则，因为它们会指出 Mitosis 的一些限制并避免混淆。

创建一个组件

// src/components/MyComponent.lite.tsx
import { useStore } from '@builder.io/mitosis';

type Props = {
  message: string;
};

export default function MyBasicComponent(props: Props) {
  const state = useStore({
    name: 'Foo',
  });

  return (
    <div>
      {props.message || 'Hello'} {state.name}! I can run in React, Vue, Solid or Svelte!
    </div>
  );
}

建造

npm exec mitosis build

🎉您现在应该 output在所有 4 个框架中都有一个包含已编译组件的目录！

例子

以下是一些有关尝试Mitosis的有用资源：

• CKGrafico/papanasi : 在 Mitosis 中构建的与框架无关的 UI 库
• 我们的示例项目是学习如何使用 Mitosis 的一个很好的起点。
• 关于创建 Mitosis 项目的博文：https ://blog.logrocket.com/creating-reusable-components-mitosis-builder-io/

文档

好奇 Mitosis 代码如何在幕后工作，以及如何使用它？在我们的深入文档中了解更多信息。

为什么要使用Mitosis？

有丝分裂是一个非常强大和灵活的工具。到目前为止，我们已经确定了可以从中受益匪浅的 3 大类工程团队：

设计系统维护者

如果您是一个从一个 Web 框架开始的设计系统库的维护者，那么在为后续框架创建新版本时，您会感受到巨大的维护痛苦和重复。看看流行的 React 库Chakra UI ，看看维护者如何在感受到跨 React 和 Vue 库维护状态逻辑代码的痛苦之后决定创建Zag.js。Zag.js 专注于编写与框架无关的交互，而 Mitosis 则专注于编写特定于框架的组件。（PS：我们正在努力构建将这两者结合在一起的示例。待定！）

使用多个 Web 框架的团队

如果您是在不同框架中构建多个前端的团队/组织的一员，那么您就会知道，在所有前端之间协调您的设计系统以获得一致的体验和感觉绝对是一场噩梦。有丝分裂是消除此类问题的绝佳工具，因为它允许您在组件中定义一次设计并将它们部署到所有单独的前端。

构建 Web SDK 的团队

如果您的团队正在为直接集成到 Web 框架并涉及向最终用户提供组件的产品构建 SDK，那么 Mitosis非常适合您的团队。我们 Builder.io 的团队有这个确切的用例：我们的新一代 SDK是使用 Mitosis 构建的！我们的工程师在交货速度方面受到了销售团队的热烈赞扬，而且只需要一个开关翻转😉

XKCD怎么样

是的，我们都见过。但是，如果这对您来说是一个问题，那么您可能对有丝分裂的看法是错误的。Mitosis 不仅仅是另一个组件语法，它是一个前端编译器，类似于LLVM。一个包含许多编写组件的方式的工具链，并且将永远存在。有丝分裂定义了一个通用的中间表示，它允许我们编写组件一次然后编译到许多框架，就像 LLVM 让我们编写可以编译到任何指令集架构的代码一样。如果你这样看有丝分裂，你可能会更清楚地看到它的价值。

与 LLVM 类似，多种语法可以编译为 Mitotis。我们开箱即用的语法使用 JSX，但我们探索了其他语法，例如类似 Vue/Svelte 的语法。Builder.io发出 Mitosis IR，允许您将设计转换为任何受支持框架的代码。JSX 和 Builder.io 是编译器当前支持的前端，下面列出的框架是后端。

E2E测试状态

注意：此矩阵是通过编程生成的，不应手动编辑。

贡献

有兴趣贡献吗？前往开发人员文档，了解如何进行设置和开始！

准备就绪后，请查看我们的问题页面并获取您的第一个问题！

社区

• Mitosis Discord
• @Builderio

相关项目

• Figma 插件：通过 Mitosis 将 Figma 设计转换为高质量的 HTML、React、Vue、Svelte、Angular、Solid 等代码。
• Builder：用于 React、Vue、Angular 等的拖放页面构建器和 CMS。
• Qwik：一个开源框架，旨在实现最佳交互时间，专注于 HTML 的服务器端呈现的可恢复性，以及代码的细粒度延迟加载。
• Partytown：将资源密集型第三方脚本从主线程中重新定位到网络工作者中。🎉

用❤️由Builder.io