JSX · 文档

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!" />);

配置

Bun 会读取你的 tsconfig.json 或 jsconfig.json，以确定如何在内部执行 JSX 转换。如果你不想使用其中任何一个，也可以在 bunfig.toml 中设置相同的选项。

Bun 支持以下编译器选项。

`jsx`

Bun 在内部如何将 JSX 结构转换为原生 JavaScript。下表列出了 jsx 的可能值，以及每种值如何转译此 JSX 组件：

TSX

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

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

`jsxFactory`

用于表示 JSX 构造的函数名称。默认值为 "React.createElement"。对于使用不同函数名称（"h"）的库（如 Preact），可以设置此选项。

编译器选项	转译后的输出
`json<br/>{<br/> "jsx": "react",<br/> "jsxFactory": "h"<br/>}<br/>`	`tsx<br/>h(Box, { width: 5 }, "Hello");<br/>`

`jsxFragmentFactory`

用于表示 JSX 片段（例如 <>Hello</>）的函数名称。默认值为 "React.Fragment"。

编译器选项	转译后的输出
`json<br/>{<br/> "jsx": "react",<br/> "jsxFactory": "myjsx",<br/> "jsxFragmentFactory": "MyFragment"<br/>}<br/>`	`tsx<br/>// 输入<br/><>Hello</>;<br/><br/>// 输出<br/>myjsx(MyFragment, null, "Hello");<br/>`

`jsxImportSource`

组件工厂函数（如 createElement、jsx 或 jsxDEV）导入自哪个模块。默认值为 "react"。使用 Preact 之类的组件库时通常需要此选项。

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

JSX 编译指令

你可以使用 编译指令 为每个文件单独设置这些值。编译指令是一条注释，用于在特定文件中设置编译器选项。

编译指令	等效配置
`ts<br/>// @jsx h<br/>`	`jsonc<br/>{<br/> "jsxFactory": "h",<br/>}<br/>`
`ts<br/>// @jsxFrag MyFragment<br/>`	`jsonc<br/>{<br/> "jsxFragmentFactory": "MyFragment",<br/>}<br/>`
`ts<br/>// @jsxImportSource preact<br/>`	`jsonc<br/>{<br/> "jsxImportSource": "preact",<br/>}<br/>`

日志记录

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 punning）

Bun 运行时也支持 JSX 中的“属性快速赋值”：这是一种将变量赋值给同名属性的简写方式。

react.tsx

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

  // 不使用快速赋值
  return <div className={className} />;
  // 使用快速赋值
  return <div {className} />;
}