Bun unterstützt .jsx- und .tsx-Dateien out of the box. Buns interner Transpiler konvertiert JSX-Syntax vor der Ausführung in Vanilla-JavaScript.
function Component(props: {message: string}) {
return (
<body>
<h1 style={{color: 'red'}}>{props.message}</h1>
</body>
);
}
console.log(<Component message="Hello world!" />);Konfiguration
Bun liest Ihre tsconfig.json- oder jsconfig.json-Konfigurationsdateien, um zu bestimmen, wie die JSX-Transformation intern durchgeführt wird. Um die Verwendung einer dieser Dateien zu vermeiden, können die folgenden Optionen auch in bunfig.toml definiert werden.
Die folgenden Compiler-Optionen werden berücksichtigt.
jsx
Wie JSX-Konstrukte intern in Vanilla-JavaScript transformiert werden. Die folgende Tabelle listet die möglichen Werte von jsx auf, zusammen mit ihrer Transpilierung der folgenden einfachen JSX-Komponente:
<Box width={5}>Hello</Box>| Compiler-Optionen | Transpilierte Ausgabe |
|---|---|
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/>Der Variablenname jsxDEV ist eine Konvention, die von React verwendet wird. Das DEV-Suffix ist eine sichtbare Möglichkeit anzugeben, dass der Code für die Entwicklung vorgesehen ist. Die Entwicklungsversion von React ist langsamer und enthält zusätzliche Gültigkeitsprüfungen und Debugging-Tools. |
json<br/>{<br/> "jsx": "preserve"<br/>}<br/> | tsx<br/>// JSX wird nicht transpiliert<br/>// "preserve" wird derzeit von Bun nicht unterstützt<br/><Box width={5}>Hello</Box><br/> |
jsxFactory
NOTE
**Hinweis** — Nur anwendbar, wenn `jsx` auf `react` gesetzt ist.Der Funktionsname, der zur Darstellung von JSX-Konstrukten verwendet wird. Der Standardwert ist "createElement". Dies ist nützlich für Bibliotheken wie Preact, die einen anderen Funktionsnamen ("h") verwenden.
| Compiler-Optionen | Transpilierte Ausgabe |
|---|---|
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
**Hinweis** — Nur anwendbar, wenn `jsx` auf `react` gesetzt ist.Der Funktionsname, der zur Darstellung von JSX-Fragmenten wie <>Hello</> verwendet wird; nur anwendbar, wenn jsx auf react gesetzt ist. Der Standardwert ist "Fragment".
| Compiler-Optionen | Transpilierte Ausgabe |
|---|---|
json<br/>{<br/> "jsx": "react",<br/> "jsxFactory": "myjsx",<br/> "jsxFragmentFactory": "MyFragment"<br/>}<br/> | tsx<br/>// Eingabe<br/><>Hello</>;<br/><br/>// Ausgabe<br/>import { myjsx, MyFragment } from "react";<br/>myjsx(MyFragment, null, "Hello");<br/> |
jsxImportSource
NOTE
**Hinweis** — Nur anwendbar, wenn `jsx` auf `react-jsx` oder `react-jsxdev` gesetzt ist.Das Modul, aus dem die Komponenten-Factory-Funktion (createElement, jsx, jsxDEV usw.) importiert wird. Der Standardwert ist "react". Dies ist in der Regel erforderlich, wenn eine Komponentenbibliothek wie Preact verwendet wird.
| Compiler-Optionen | Transpilierte Ausgabe |
|---|---|
jsonc<br/>{<br/> "jsx": "react",<br/> // jsxImportSource ist nicht definiert<br/> // Standardwert ist "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 wird automatisch angehängt<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
Alle diese Werte können dateibasiert mit Pragmas festgelegt werden. Ein Pragma ist ein spezieller Kommentar, der eine Compiler-Option in einer bestimmten Datei festlegt.
| Pragma | Äquivalente Konfiguration |
|---|---|
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/> |
Protokollierung
Bun implementiert eine spezielle Protokollierung für JSX, um das Debuggen zu erleichtern. Gegeben die folgende Datei:
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 gibt den Komponentenbaum beim Protokollieren hübsch gedruckt aus:
Prop Punning
Die Bun-Laufzeit unterstützt auch "Prop Punning" für JSX. Dies ist eine Kurzschreibweise, die nützlich ist, um eine Variable einer Prop mit demselben Namen zuzuweisen.
function Div(props: {className: string;}) {
const {className} = props;
// ohne Punning
return <div className={className} />;
// mit Punning
return <div {className} />;
}