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} />;
}