JSX

Трансформер Oxc поддерживает преобразование JSX.

Общее использование

import { transform } from "oxc-transform";

const result = await transform("App.jsx", sourceCode, {
  jsx: {
    runtime: "automatic", // or "classic"
    development: false, // or true
    throwIfNamespace: true, // or false
    pure: true, // or false
    importSource: "react",
    pragma: "React.createElement",
    pragmaFrag: "React.Fragment",
    refresh: false, // see below
  },
  // When transforming TSX files:
  typescript: {
    jsxPragma: "React.createElement", // same value with `jsx.pragma`
    jsxPragmaFrag: "React.Fragment", // same value with `jsx.pragmaFrag`
  },
});

Также можно задать jsx: 'preserve', чтобы отключить преобразование JSX.

Поддерживаются pragma-комментарии JSX, как в Babel и esbuild. Они позволяют настраивать JSX по файлам.

Где ищутся pragma-комментарии

Oxc обрабатывает комментарии только до первого оператора в файле. Комментарии внутри функций, классов или после любого оператора игнорируются.

// @jsx h  ← ✅ This pragma is recognized (before first statement)

import { h } from "preact";

// @jsx React.createElement  ← ❌ This pragma is ignored (after first statement)
function App() {
  return <div />;
}

Так же ведут себя TypeScript и SWC. У Babel и esbuild pragma ищутся во всех комментариях файла (побеждает последняя).

Runtime

По умолчанию используется automatic runtime, появившийся в React 17+. Нужные import подставляются автоматически.

Classic runtime включается опцией jsx.runtime: "classic".

Через pragma: // @jsxRuntime classic или // @jsxRuntime automatic.

Общие опции для обоих runtime

Режим разработки

По умолчанию специфичные для dev преобразования выключены. Включить их можно jsx.development: true.

XML-имена с пространством имён

По умолчанию при тегах вида <foo:bar baz:qux="foobar" /> выдаётся ошибка: формально JSX это допускает, но React такие теги не поддерживает. Разрешить можно jsx.throwIfNamespace: false.

Аннотации pure

По умолчанию элементы JSX помечаются pure-аннотациями (выражения можно удалять, если результат не используется). Если элементы нужно сохранять, отключите jsx.pure: false.

Опции только для automatic runtime

Источник импорта

Задаёт модуль для хелперов JSX; по умолчанию "react".

Например, для Preact: jsx.importSource: "preact" — могут быть вставлены такие импорты:

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

Pragma: // @jsxImportSource preact.

Опции только для classic runtime

Pragma (фабрика JSX)

Имя функции для преобразования JSX — квалифицированное имя (React.createElement) или идентификатор (createElement). В esbuild это jsxFactory.

Pragma: // @jsx createElement.

Pragma для фрагментов

Имя для фрагментов JSX — допустимое имя тега. В esbuild — jsxFragment.

Pragma: // @jsxFrag Fragment.

React Refresh

React Refresh (Fast Refresh) даёт горячую перезагрузку компонентов в разработке.

Использование

Включите преобразование опцией jsx.refresh:

import { transform } from "oxc-transform";

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

Параметры

Параметр	Тип	По умолчанию	Описание
refreshReg	string	"$RefreshReg$"	Имя функции регистрации компонентов для refresh
refreshSig	string	"$RefreshSig$"	Имя функции создания сигнатур для refresh
emitFullSignatures	boolean	false	Полные сигнатуры для удобной отладки