JSX – 运行时 | Bun 文档

Bun 开箱即用支持 .jsx 和 .tsx 文件。Bun 的内部转译器在执行前将 JSX 语法转换为纯 JavaScript。

react.tsx
function Component(props: {message: string}) {
  return (
    <body>
      <h1 style={{color: 'red'}}>{props.message}</h1>
    </body>
  );
}

console.log(<Component message="Hello world!" />);

Configuration

Bun 读取您的 tsconfig.json 或 jsconfig.json 配置文件来确定如何在内部执行 JSX 转换。为了避免使用这些文件，以下选项也可以在 bunfig.toml 中定义。

以下编译器选项受到尊重。

`jsx`

JSX 结构在内部如何转换为纯 JavaScript。下表列出了 jsx 的可能值，以及它们对以下简单 JSX 组件的转译结果。

<Box width={5}>Hello</Box>

编译器选项	转译输出
`{ "jsx": "react" }`	`import { createElement } from "react"; createElement("Box", { width: 5 }, "Hello");`
`{ "jsx": "react-jsx" }`	`import { jsx } from "react/jsx-runtime"; jsx("Box", { width: 5 }, "Hello");`
`{ "jsx": "react-jsxdev" }`	`import { jsxDEV } from "react/jsx-dev-runtime"; jsxDEV( "Box", { width: 5, children: "Hello" }, undefined, false, undefined, this, );` 变量名 `jsxDEV` 是 React 使用的一种约定。`DEV` 后缀是表示代码用于开发目的的可见方式。开发版本的 React 速度较慢，并包含额外的有效性检查和调试工具。
`{ "jsx": "preserve" }`	`// JSX is not transpiled // "preserve" is not supported by Bun currently <Box width={5}>Hello</Box>`

`jsxFactory`

注意 — 仅当 jsx 为 react 时适用。

用于表示 JSX 构造的函数名称。默认值为 "createElement"。这对于像 Preact 这样使用不同函数名 ("h") 的库非常有用。

编译器选项	转译输出
`{ "jsx": "react", "jsxFactory": "h" }`	`import { h } from "react"; h("Box", { width: 5 }, "Hello");`

`jsxFragmentFactory`

注意 — 仅当 jsx 为 react 时适用。

用于表示 JSX 片段（如 <>Hello</>）的函数名称；仅当 jsx 为 react 时适用。默认值为 "Fragment"。

编译器选项	转译输出
`{ "jsx": "react", "jsxFactory": "myjsx", "jsxFragmentFactory": "MyFragment" }`	`// input <>Hello</>; // output import { myjsx, MyFragment } from "react"; myjsx(MyFragment, null, "Hello");`

`jsxImportSource`

注意 — 仅当 jsx 为 react-jsx 或 react-jsxdev 时适用。

导入组件工厂函数（`createElement`、`jsx`、`jsxDEV` 等）的模块。默认值为 `"react"`。当使用 Preact 等组件库时，通常需要此项。

编译器选项转译输出

编译器选项	转译输出
`{ "jsx": "react", // jsxImportSource is not defined // default to "react" }`	`import { jsx } from "react/jsx-runtime"; jsx("Box", { width: 5, children: "Hello" });`
`{ "jsx": "react-jsx", "jsxImportSource": "preact", }`	`import { jsx } from "preact/jsx-runtime"; jsx("Box", { width: 5, children: "Hello" });`
`{ "jsx": "react-jsxdev", "jsxImportSource": "preact", }`	`// /jsx-runtime is automatically appended import { jsxDEV } from "preact/jsx-dev-runtime"; jsxDEV( "Box", { width: 5, children: "Hello" }, undefined, false, undefined, this, );`

{
  "jsx": "react",
  // jsxImportSource is not defined
  // default to "react"
}

import { jsx } from "react/jsx-runtime";
jsx("Box", { width: 5, children: "Hello" });

{
  "jsx": "react-jsx",
  "jsxImportSource": "preact",
}

import { jsx } from "preact/jsx-runtime";
jsx("Box", { width: 5, children: "Hello" });

{
  "jsx": "react-jsxdev",
  "jsxImportSource": "preact",
}

// /jsx-runtime is automatically appended
import { jsxDEV } from "preact/jsx-dev-runtime";
jsxDEV(
  "Box",
  { width: 5, children: "Hello" },
  undefined,
  false,
  undefined,
  this,
);

`jsxSideEffects`

默认情况下，Bun 将 JSX 表达式标记为 `/* @__PURE__ */`，以便在打包时如果它们未被使用（称为“死代码消除”或“tree shaking”），可以将其删除。将 `jsxSideEffects` 设置为 `true` 以防止此行为。

编译器选项转译输出

编译器选项	转译输出
`{ "jsx": "react", // jsxSideEffects is false by default }`	`// JSX expressions are marked as pure /* @__PURE__ */ React.createElement("div", null, "Hello");`
`{ "jsx": "react", "jsxSideEffects": true, }`	`// JSX expressions are not marked as pure React.createElement("div", null, "Hello");`
`{ "jsx": "react-jsx", "jsxSideEffects": true, }`	`// Automatic runtime also respects jsxSideEffects jsx("div", { children: "Hello" });`

{
  "jsx": "react",
  // jsxSideEffects is false by default
}

// JSX expressions are marked as pure
/* @__PURE__ */ React.createElement("div", null, "Hello");

{
  "jsx": "react",
  "jsxSideEffects": true,
}

// JSX expressions are not marked as pure
React.createElement("div", null, "Hello");

{
  "jsx": "react-jsx",
  "jsxSideEffects": true,
}

// Automatic runtime also respects jsxSideEffects
jsx("div", { children: "Hello" });

此选项也可作为 CLI 标志使用。

bun build --jsx-side-effects

JSX Pragma

所有这些值都可以通过pragma按文件设置。pragma 是一个特殊注释，用于在特定文件中设置编译器选项。

Pragma	等效配置
`// @jsx h`	`{ "jsxFactory": "h", }`
`// @jsxFrag MyFragment`	`{ "jsxFragmentFactory": "MyFragment", }`
`// @jsxImportSource preact`	`{ "jsxImportSource": "preact", }`

日志

Bun 实现了 JSX 的特殊日志记录，以方便调试。给定以下文件

index.tsx
import { Stack, UserCard } from "./components";

console.log(
  <Stack>
    <UserCard name="Dom" bio="Street racer and Corona lover" />
    <UserCard name="Jakob" bio="Super spy and Dom's secret brother" />
  </Stack>
);

Bun 将在记录时美观地打印组件树

Prop 简写

Bun 运行时还支持 JSX 的“prop 简写”。这是一种简写语法，用于将变量赋值给同名 prop。

function Div(props: {className: string;}) {
  const {className} = props;

  // without punning
  return <div className={className} />;
  // with punning
  return <div {className} />;
}