JSX

O transformador Oxc transforma JSX.

Uso geral

import { transform } from "oxc-transform";

const result = await transform("App.jsx", sourceCode, {
  jsx: {
    runtime: "automatic", // ou "classic"
    development: false, // ou true
    throwIfNamespace: true, // ou false
    pure: true, // ou false
    importSource: "react",
    pragma: "React.createElement",
    pragmaFrag: "React.Fragment",
    refresh: false, // veja abaixo
  },
  // Ao transformar TSX:
  typescript: {
    jsxPragma: "React.createElement", // mesmo valor que `jsx.pragma`
    jsxPragmaFrag: "React.Fragment", // mesmo valor que `jsx.pragmaFrag`
  },
});

Defina também jsx: 'preserve' para desativar a transformação de JSX.

Há suporte a comentários pragma de JSX, como no Babel e no esbuild; úteis para configurar JSX por arquivo.

Onde pragmas são lidos

O Oxc só considera comentários antes da primeira declaração do arquivo. Pragmas dentro de funções, classes ou depois de qualquer declaração são ignorados.

// @jsx h  ← ✅ reconhecido (antes da primeira declaração)

import { h } from "preact";

// @jsx React.createElement  ← ❌ ignorado (depois da primeira declaração)
function App() {
  return <div />;
}

Comportamento alinhado a TypeScript e SWC (só leading comments). Babel e esbuild percorrem todos os comentários (o último vence).

Runtime

Por padrão usa-se o runtime automático, introduzido no React 17+, injetando os import necessários.

Runtime clássico: jsx.runtime: "classic".

Por pragma: // @jsxRuntime classic ou // @jsxRuntime automatic.

Opções comuns aos dois runtimes

Modo desenvolvimento

Por padrão, transformações específicas de dev estão desligadas. jsx.development: true para ligar.

Tags com namespace XML

Por padrão, erro ao usar nomes com namespace XML (ex.: <foo:bar />). JSX permite, mas o JSX do React ainda não. jsx.throwIfNamespace: false para permitir.

Anotação pura

Por padrão, elementos JSX recebem anotações puras. Se não quiser remover elementos não usados, jsx.pure: false.

Opções do runtime automático

Import source

Origem das funções auxiliares de JSX (padrão "react"). Exemplo com Preact — jsx.importSource: "preact" pode injetar:

import { createElement } from "preact";
import { Fragment, jsxDEV } from "preact/jsx-dev-runtime";
import { Fragment, jsx, jsxs } from "preact/jsx-runtime";

Pragma: // @jsxImportSource preact.

Opções do runtime clássico

Pragma

Função para transformar expressões JSX — nome qualificado (React.createElement) ou identificador (createElement). No esbuild é jsxFactory.

Pragma: // @jsx createElement.

Pragma Fragment

Função para fragmentos — nome de tag válido. No esbuild é jsxFragment.

Pragma: // @jsxFrag Fragment.

React Refresh

React Refresh (Fast Refresh) permite hot reload de componentes em desenvolvimento.

Uso

import { transform } from "oxc-transform";

const result = await transform("App.jsx", sourceCode, {
  jsx: {
    development: true,
    refresh: true,
    // ou...
    // refresh: {
    //   refreshReg: "$RefreshReg$",
    //   refreshSig: "$RefreshSig$",
    //   emitFullSignatures: true,
    // },
  },
});

Opções

Opção	Tipo	Padrão	Descrição
refreshReg	string	"$RefreshReg$"	Nome da função que registra componentes para refresh
refreshSig	string	"$RefreshSig$"	Nome da função que cria assinaturas de refresh
emitFullSignatures	boolean	false	Emitir assinaturas completas para melhor depuração