O Bun suporta arquivos .jsx e .tsx nativamente. O transpilador interno do Bun converte sintaxe JSX para JavaScript puro antes da execução.

function Component(props: {message: string}) {
  return (
    <body>
      <h1 style={{color: 'red'}}>{props.message}</h1>
    </body>
  );
}

console.log(<Component message="Hello world!" />);

Configuração

O Bun lê seus arquivos de configuração tsconfig.json ou jsconfig.json para determinar como realizar a transformação JSX internamente. Para evitar usar qualquer um destes, as seguintes opções também podem ser definidas em bunfig.toml.

As seguintes opções de compilador são respeitadas.

jsx

Como construções JSX são transformadas em JavaScript puro internamente. A tabela abaixo lista os valores possíveis de jsx, junto com sua transpilação do seguinte componente JSX simples:

<Box width={5}>Hello</Box>

Opções do compilador	Saída 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/> O nome da variável jsxDEV é uma convenção usada pelo React. O sufixo DEV é uma maneira visível de indicar que o código se destina a uso em desenvolvimento. A versão de desenvolvimento do React é mais lenta e inclui verificações de validade adicionais e ferramentas de depuração.
json<br/>{<br/> "jsx": "preserve"<br/>}<br/>	tsx<br/>// JSX não é transpilado<br/>// "preserve" não é suportado pelo Bun atualmente<br/><Box width={5}>Hello</Box><br/>

jsxFactory

NOTE

**Nota** — Aplicável apenas quando `jsx` é `react`.

O nome da função usado para representar construções JSX. O valor padrão é "createElement". Isso é útil para bibliotecas como Preact que usam um nome de função diferente ("h").

Opções do compilador	Saída 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** — Aplicável apenas quando `jsx` é `react`.

O nome da função usado para representar fragmentos JSX como <>Hello</>; aplicável apenas quando jsx é react. O valor padrão é "Fragment".

Opções do compilador	Saída transpilada
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** — Aplicável apenas quando `jsx` é `react-jsx` ou `react-jsxdev`.

O módulo a partir do qual a função fábrica de componente (createElement, jsx, jsxDEV, etc) será importada. O valor padrão é "react". Isso normalmente será necessário ao usar uma biblioteca de componentes como Preact.

Opções do compilador	Saída transpilada
jsonc<br/>{<br/> "jsx": "react",<br/> // jsxImportSource não está definido<br/> // padrão para "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 anexado<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 estes valores podem ser definidos por arquivo usando pragmas. Um pragma é um comentário especial que define uma opção de compilador em um arquivo específico.

Pragma	Configuração 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

O Bun implementa logging especial para JSX para facilitar a depuração. Dado o seguinte arquivo:

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>,
);

O Bun irá formatar a árvore de componentes quando logada:

Prop punning

O runtime do Bun também suporta "prop punning" para JSX. Esta é uma sintaxe abreviada útil para atribuir uma variável a uma prop com o mesmo nome.

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

  // sem punning
  return <div className={className} />;
  // com punning
  return <div {className} />;
}