Bun

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.jsonjsconfig.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

注意 — 僅在 jsxreact 時適用。

用於表示 JSX 建構子的函式名稱。預設值為 "createElement"。這對於像 Preact 這樣使用不同函式名稱("h")的函式庫很有用。

編譯器選項轉譯輸出
{
  "jsx": "react",
  "jsxFactory": "h"
}
import { h } from "react";
h("Box", { width: 5 }, "Hello");

jsxFragmentFactory

注意 — 僅在 jsxreact 時適用。

用於表示 JSX 片段(例如 <>Hello</>)的函式名稱;僅在 jsxreact 時適用。預設值為 "Fragment"

編譯器選項轉譯輸出
{
  "jsx": "react",
  "jsxFactory": "myjsx",
  "jsxFragmentFactory": "MyFragment"
}
// input
<>Hello</>;

// output
import { myjsx, MyFragment } from "react";
myjsx(MyFragment, null, "Hello");

jsxImportSource

注意 — 僅在 jsxreact-jsxreact-jsxdev 時適用。

將從中匯入元件工廠函式(createElementjsxjsxDEV 等)的模組。預設值為 "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 註解

所有這些值都可以使用*註解*在每個檔案的基礎上設定。註解是一種特殊的註解,用於在特定檔案中設定編譯器選項。

註解等效設定
// @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 會在記錄時以美觀的方式列印元件樹狀結構。

屬性簡寫

Bun 執行時環境也支援 JSX 的「屬性簡寫」。這是一種簡寫語法,適用於將變數指派給同名的屬性。

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

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