Bun supporta i file .jsx e .tsx nativamente. Il transpiler interno di Bun converte la sintassi JSX in JavaScript vanilla prima dell'esecuzione.
function Component(props: {message: string}) {
return (
<body>
<h1 style={{color: 'red'}}>{props.message}</h1>
</body>
);
}
console.log(<Component message="Hello world!" />);Configurazione
Bun legge i tuoi file di configurazione tsconfig.json o jsconfig.json per determinare come eseguire la trasformazione JSX internamente. Per evitare di usare uno di questi, le seguenti opzioni possono anche essere definite in bunfig.toml.
Le seguenti opzioni del compilatore sono rispettate.
jsx
Come le costruzioni JSX vengono trasformate in JavaScript vanilla internamente. La tabella sotto elenca i possibili valori di jsx, insieme alla loro transpilazione del seguente semplice componente JSX:
<Box width={5}>Hello</Box>| Opzioni del compilatore | Output transpilato |
|---|---|
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/>Il nome della variabile jsxDEV è una convenzione usata da React. Il suffisso DEV è un modo visibile per indicare che il codice è destinato all'uso in sviluppo. La versione di sviluppo di React è più lenta e include controlli di validità aggiuntivi e strumenti di debug. |
json<br/>{<br/> "jsx": "preserve"<br/>}<br/> | tsx<br/>// JSX non viene transpilato<br/>// "preserve" non è supportato da Bun attualmente<br/><Box width={5}>Hello</Box><br/> |
jsxFactory
NOTE
**Nota** — Applicabile solo quando `jsx` è `react`.Il nome della funzione usato per rappresentare le costruzioni JSX. Il valore predefinito è "createElement". Questo è utile per librerie come Preact che usano un nome di funzione diverso ("h").
| Opzioni del compilatore | Output transpilato |
|---|---|
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
**Nota** — Applicabile solo quando `jsx` è `react`.Il nome della funzione usato per rappresentare i frammenti JSX come <>Hello</>; applicabile solo quando jsx è react. Il valore predefinito è "Fragment".
| Opzioni del compilatore | Output transpilato |
|---|---|
json<br/>{<br/> "jsx": "react",<br/> "jsxFactory": "myjsx",<br/> "jsxFragmentFactory": "MyFragment"<br/>}<br/> | tsx<br/>// input<br/><>Hello</>;<br/><br/>// output<br/>import { myjsx, MyFragment } from "react";<br/>myjsx(MyFragment, null, "Hello");<br/> |
jsxImportSource
NOTE
**Nota** — Applicabile solo quando `jsx` è `react-jsx` o `react-jsxdev`.Il modulo da cui la funzione factory del componente (createElement, jsx, jsxDEV, ecc) verrà importata. Il valore predefinito è "react". Questo sarà tipicamente necessario quando si usa una libreria di componenti come Preact.
| Opzioni del compilatore | Output transpilato |
|---|---|
jsonc<br/>{<br/> "jsx": "react",<br/> // jsxImportSource non è definito<br/> // default a "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 è automaticamente aggiunto<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/> |
Pragmi JSX
Tutti questi valori possono essere impostati su base per-file usando i pragmi. Un pragma è un commento speciale che imposta un'opzione del compilatore in un particolare file.
| Pragma | Configurazione equivalente |
|---|---|
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/> |
Logging
Bun implementa un logging speciale per JSX per rendere il debug più facile. Dato il seguente file:
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 stamperà in modo formattato l'albero dei componenti quando viene loggato:
Prop punning
Il runtime di Bun supporta anche il "prop punning" per JSX. Questa è una sintassi abbreviata utile per assegnare una variabile a una prop con lo stesso nome.
function Div(props: {className: string;}) {
const {className} = props;
// senza punning
return <div className={className} />;
// con punning
return <div {className} />;
}