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`

JSX 结构如何在内部转换为普通 JavaScript。下表列出了 jsx 的可能值，以及每个值如何转译这个 JSX 组件：

<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 }, "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 不会被转译<br/>// Bun 目前不支持 "preserve"<br/><Box width={5}>Hello</Box><br/>`

`jsxFactory`

仅在 jsx 为 react 时适用。

用于表示 JSX 结构的函数名。默认值为 "React.createElement"。为像 Preact 这样使用不同函数名（"h"）的库设置此选项。

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

`jsxFragmentFactory`

仅在 jsx 为 react 时适用。

用于表示 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`

仅在 jsx 为 react-jsx 或 react-jsxdev 时适用。

组件工厂函数（如 createElement、jsx 或 jsxDEV）导入来源的模块。默认值为 "react"。在使用 Preact 等组件库时通常需要设置此选项。

编译器选项	转译输出
`jsonc<br/>{<br/> "jsx": "react-jsx",<br/> // jsxImportSource 未定义<br/> // 默认为 "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-runtime 会自动追加<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 pragma

你可以通过 pragma（一种注释）在每个文件中设置这些值中的任何一个，从而在特定文件中设置编译器选项。

Pragma	等效配置
`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="街头赛车手和 Corona 爱好者" />
    <UserCard name="Jakob" bio="超级间谍和 Dom 的秘密兄弟" />
  </Stack>,
);

Bun 会美化打印组件树：

Prop 简写

Bun 运行时还支持 JSX 的”prop 简写”：一种将变量赋值给同名 prop 的简写方式。

react.tsx

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

  // 不使用简写
  return <div className={className} />;
  // 使用简写
  return <div {className} />;
}

开始入门

核心运行时

文件与模块系统

HTTP 服务器

网络通信

数据与存储

并发

进程与系统

互操作与工具

实用工具

标准与兼容性

贡献指南

配置

`jsx`

`jsxFactory`

`jsxFragmentFactory`

`jsxImportSource`

JSX pragma

日志输出

Prop 简写

​配置

​jsx

​jsxFactory

​jsxFragmentFactory

​jsxImportSource

​JSX pragma

​日志输出

​Prop 简写

配置

`jsx`

`jsxFactory`

`jsxFragmentFactory`

`jsxImportSource`

JSX pragma

日志输出

Prop 简写