Bun prend en charge les fichiers .jsx et .tsx nativement. Le transpileur interne de Bun convertit la syntaxe JSX en JavaScript vanilla avant l'exécution.
function Component(props: {message: string}) {
return (
<body>
<h1 style={{color: 'red'}}>{props.message}</h1>
</body>
);
}
console.log(<Component message="Bonjour le monde !" />);Configuration
Bun lit vos fichiers de configuration tsconfig.json ou jsconfig.json pour déterminer comment effectuer la transformation JSX en interne. Pour éviter d'utiliser l'un ou l'autre, les options suivantes peuvent également être définies dans bunfig.toml.
Les options de compilateur suivantes sont respectées.
jsx
Comment les constructions JSX sont transformées en JavaScript vanilla en interne. Le tableau ci-dessous liste les valeurs possibles de jsx, ainsi que leur transpilation du composant simple JSX suivant :
<Box width={5}>Bonjour</Box>| Options du compilateur | Sortie transpilée |
|---|---|
json<br/>{<br/> "jsx": "react"<br/>}<br/> | tsx<br/>import { createElement } from "react";<br/>createElement("Box", { width: 5 }, "Bonjour");<br/> |
json<br/>{<br/> "jsx": "react-jsx"<br/>}<br/> | tsx<br/>import { jsx } from "react/jsx-runtime";<br/>jsx("Box", { width: 5 }, "Bonjour");<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: "Bonjour" },<br/> undefined,<br/> false,<br/> undefined,<br/> this,<br/>);<br/>Le nom de variable jsxDEV est une convention utilisée par React. Le suffixe DEV est un moyen visible d'indiquer que le code est destiné à être utilisé en développement. La version de développement de React est plus lente et inclut des vérifications de validité supplémentaires et des outils de débogage. |
json<br/>{<br/> "jsx": "preserve"<br/>}<br/> | tsx<br/>// JSX n'est pas transpilé<br/>// "preserve" n'est pas pris en charge par Bun actuellement<br/><Box width={5}>Bonjour</Box><br/> |
jsxFactory
NOTE
**Note** — Applicable uniquement lorsque `jsx` est `react`.Le nom de fonction utilisé pour représenter les constructions JSX. La valeur par défaut est "createElement". Ceci est utile pour les bibliothèques comme Preact qui utilisent un nom de fonction différent ("h").
| Options du compilateur | Sortie transpilée |
|---|---|
json<br/>{<br/> "jsx": "react",<br/> "jsxFactory": "h"<br/>}<br/> | tsx<br/>import { h } from "react";<br/>h("Box", { width: 5 }, "Bonjour");<br/> |
jsxFragmentFactory
NOTE
**Note** — Applicable uniquement lorsque `jsx` est `react`.Le nom de fonction utilisé pour représenter les fragments JSX tels que <>Bonjour</> ; applicable uniquement lorsque jsx est react. La valeur par défaut est "Fragment".
| Options du compilateur | Sortie transpilée |
|---|---|
json<br/>{<br/> "jsx": "react",<br/> "jsxFactory": "myjsx",<br/> "jsxFragmentFactory": "MyFragment"<br/>}<br/> | tsx<br/>// entrée<br/><>Bonjour</>;<br/><br/>// sortie<br/>import { myjsx, MyFragment } from "react";<br/>myjsx(MyFragment, null, "Bonjour");<br/> |
jsxImportSource
NOTE
**Note** — Applicable uniquement lorsque `jsx` est `react-jsx` ou `react-jsxdev`.Le module à partir duquel la fonction factory de composant (createElement, jsx, jsxDEV, etc.) sera importée. La valeur par défaut est "react". Cela sera généralement nécessaire lors de l'utilisation d'une bibliothèque de composants comme Preact.
| Options du compilateur | Sortie transpilée |
|---|---|
jsonc<br/>{<br/> "jsx": "react",<br/> // jsxImportSource n'est pas défini<br/> // par défaut "react"<br/>}<br/> | tsx<br/>import { jsx } from "react/jsx-runtime";<br/>jsx("Box", { width: 5, children: "Bonjour" });<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: "Bonjour" });<br/> |
jsonc<br/>{<br/> "jsx": "react-jsxdev",<br/> "jsxImportSource": "preact",<br/>}<br/> | tsx<br/>// /jsx-runtime est automatiquement ajouté<br/>import { jsxDEV } from "preact/jsx-dev-runtime";<br/>jsxDEV(<br/> "Box",<br/> { width: 5, children: "Bonjour" },<br/> undefined,<br/> false,<br/> undefined,<br/> this,<br/>);<br/> |
Pragme JSX
Toutes ces valeurs peuvent être définies fichier par fichier en utilisant des pragmes. Un pragme est un commentaire spécial qui définit une option de compilateur dans un fichier particulier.
| Pragme | Configuration équivalente |
|---|---|
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/> |
Journalisation
Bun implémente une journalisation spéciale pour JSX pour faciliter le débogage. Étant donné le fichier suivant :
import { Stack, UserCard } from "./components";
console.log(
<Stack>
<UserCard name="Dom" bio="Coureur de rue et amoureux de Corona" />
<UserCard name="Jakob" bio="Super espion et frère secret de Dom" />
</Stack>,
);Bun affichera joliment l'arborescence des composants lors de la journalisation :
Prop punning
Le runtime Bun prend également en charge le "prop punning" pour JSX. Il s'agit d'une syntaxe abrégée utile pour assigner une variable à une prop avec le même nom.
function Div(props: {className: string;}) {
const {className} = props;
// sans punning
return <div className={className} />;
// avec punning
return <div {className} />;
}