Bun soporta archivos .jsx y .tsx fuera de la caja. El transpilador interno de Bun convierte la sintaxis JSX a JavaScript vanilla antes de la ejecución.
function Component(props: {message: string}) {
return (
<body>
<h1 style={{color: 'red'}}>{props.message}</h1>
</body>
);
}
console.log(<Component message="Hello world!" />);Configuración
Bun lee tus archivos de configuración tsconfig.json o jsconfig.json para determinar cómo realizar la transformación JSX internamente. Para evitar usar cualquiera de estos, las siguientes opciones también se pueden definir en bunfig.toml.
Las siguientes opciones del compilador son respetadas.
jsx
Cómo se transforman las construcciones JSX a JavaScript vanilla internamente. La tabla a continuación lista los posibles valores de jsx, junto con su transpilación del siguiente componente JSX simple:
<Box width={5}>Hello</Box>| Opciones del compilador | Salida transpilada |
|---|---|
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/>El nombre de variable jsxDEV es una convención usada por React. El sufijo DEV es una forma visible de indicar que el código está destinado para uso en desarrollo. La versión de desarrollo de React es más lenta e incluye verificaciones de validez adicionales y herramientas de depuración. |
json<br/>{<br/> "jsx": "preserve"<br/>}<br/> | tsx<br/>// JSX no se transpila<br/>// "preserve" no es soportado actualmente por Bun<br/><Box width={5}>Hello</Box><br/> |
jsxFactory
NOTE
**Nota** — Solo aplicable cuando `jsx` es `react`.El nombre de la función usado para representar construcciones JSX. El valor predeterminado es "createElement". Esto es útil para librerías como Preact que usan un nombre de función diferente ("h").
| Opciones del compilador | Salida transpilada |
|---|---|
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** — Solo aplicable cuando `jsx` es `react`.El nombre de la función usado para representar fragmentos JSX como <>Hello</>; solo aplicable cuando jsx es react. El valor predeterminado es "Fragment".
| Opciones del compilador | Salida transpilada |
|---|---|
json<br/>{<br/> "jsx": "react",<br/> "jsxFactory": "myjsx",<br/> "jsxFragmentFactory": "MyFragment"<br/>}<br/> | tsx<br/>// entrada<br/><>Hello</>;<br/><br/>// salida<br/>import { myjsx, MyFragment } from "react";<br/>myjsx(MyFragment, null, "Hello");<br/> |
jsxImportSource
NOTE
**Nota** — Solo aplicable cuando `jsx` es `react-jsx` o `react-jsxdev`.El módulo desde el cual se importará la función factoría del componente (createElement, jsx, jsxDEV, etc). El valor predeterminado es "react". Esto típicamente será necesario al usar una librería de componentes como Preact.
| Opciones del compilador | Salida transpilada |
|---|---|
jsonc<br/>{<br/> "jsx": "react",<br/> // jsxImportSource no está definido<br/> // predeterminado 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 se añade automáticamente<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/> |
Pragmas JSX
Todos estos valores se pueden establecer por archivo usando pragmas. Un pragma es un comentario especial que establece una opción del compilador en un archivo particular.
| Pragma | Configuración 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 logging especial para JSX para hacer la depuración más fácil. Dado el siguiente archivo:
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 mostrará el árbol de componentes de forma bonita cuando se loguea:
Prop Punning
El runtime de Bun también soporta "prop punning" para JSX. Esta es una sintaxis abreviada útil para asignar una variable a una prop con el mismo nombre.
function Div(props: {className: string;}) {
const {className} = props;
// sin punning
return <div className={className} />;
// con punning
return <div {className} />;
}