Bun は .jsx および .tsx ファイルをすぐに使える状態でサポートしています。Bun の内部トランスパイラーは、実行前に JSX 構文をバニラ JavaScript に変換します。
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 で定義することもできます。
以下のコンパイラーオプションが尊重されます。
jsx
JSX 構成が内部的にバニラ JavaScript にどのように変換されるか。以下の表は、jsx の可能な値と、以下の単純な JSX コンポーネントのトランスパイルを示しています。
<Box width={5}>Hello</Box>| コンパイラーオプション | トランスパイルされた出力 |
|---|---|
json<br/>{<br/> "jsx": "react"<br/>}<br/> | tsx<br/>import { createElement } from "react";<br/>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/>// "preserve" は現在 Bun によってサポートされていません<br/><Box width={5}>Hello</Box><br/> |
jsxFactory
NOTE
**注** — `jsx` が `react` の場合にのみ適用されます。JSX 構成を表すために使用される関数名。デフォルト値は "createElement" です。これは、異なる関数名（"h"）を使用する Preact のようなライブラリで役立ちます。
| コンパイラーオプション | トランスパイルされた出力 |
|---|---|
json<br/>{<br/> "jsx": "react",<br/> "jsxFactory": "h"<br/>}<br/> | tsx<br/>import { h } from "react";<br/>h("Box", { width: 5 }, "Hello");<br/> |
jsxFragmentFactory
NOTE
**注** — `jsx` が `react` の場合にのみ適用されます。JSX フラグメント（例：<>Hello</>）を表すために使用される関数名。jsx が react の場合にのみ適用されます。デフォルト値は "Fragment" です。
| コンパイラーオプション | トランスパイルされた出力 |
|---|---|
json<br/>{<br/> "jsx": "react",<br/> "jsxFactory": "myjsx",<br/> "jsxFragmentFactory": "MyFragment"<br/>}<br/> | tsx<br/>// 入力<br/><>Hello</>;<br/><br/>// 出力<br/>import { myjsx, MyFragment } from "react";<br/>myjsx(MyFragment, null, "Hello");<br/> |
jsxImportSource
NOTE
**注** — `jsx` が `react-jsx` または `react-jsxdev` の場合にのみ適用されます。コンポーネントファクトリ関数（createElement、jsx、jsxDEV など）がインポートされるモジュール。デフォルト値は "react" です。これは、Preact のようなコンポーネントライブラリを使用するときに通常必要になります。
| コンパイラーオプション | トランスパイルされた出力 |
|---|---|
jsonc<br/>{<br/> "jsx": "react",<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 プラグマ
これらの値はすべて、プラグマ を使用してファイルごとに設定できます。プラグマは、特定のファイルでコンパイラーオプションを設定する特別なコメントです。
| プラグマ | 同等の設定 |
|---|---|
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 向けの特別なログを実装しています。以下のファイルが与えられた場合。
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 はコンポーネントツリーをきれいに表示します。
プロップの短縮形
Bun ランタイムは JSX の「プロップの短縮形（prop punning）」もサポートしています。これは、同じ名前のプロップに変数を割り当てるのに役立つ短縮構文です。
function Div(props: {className: string;}) {
const {className} = props;
// 短縮形なし
return <div className={className} />;
// 短縮形あり
return <div {className} />;
}