JSX

Oxc のトランスフォーマーは、JSX の変換をサポートしています。

一般的な使い方

import { transform } from "oxc-transform";

const result = await transform("App.jsx", sourceCode, {
  jsx: {
    runtime: "automatic", // または "classic"
    development: false, // または true
    throwIfNamespace: true, // または false
    pure: true, // または false
    importSource: "react",
    pragma: "React.createElement",
    pragmaFrag: "React.Fragment",
    refresh: false, // 以下を参照
  },
  // TSX ファイルを変換する場合:
  typescript: {
    jsxPragma: "React.createElement", // `jsx.pragma` と同じ値
    jsxPragmaFrag: "React.Fragment", // `jsx.pragmaFrag` と同じ値
  },
});

また、jsx: 'preserve' を設定することで、JSX の変換を無効にすることもできます。

Oxc トランスフォーマーは、Babel や esbuild と同様に、JSX プラグマコメントもサポートしています。プラグマコメントは、ファイルごとに JSX オプションを設定する際に便利です。

ランタイム

デフォルトでは、自動ランタイム変換が使用されます。この変換は React 17+ で導入されました。この変換は、必要な import 文を自動的に挿入します。

jsx.runtime オプションを "classic" に設定することで、クラシックランタイム変換を使用することもできます。

// @jsxRuntime classic / // @jsxRuntime automatic が、プラグマコメント経由での設定方法です。

両方のランタイム共通のオプション

開発用変換

デフォルトでは、開発向けの特別な変換は無効になっています。jsx.development オプションを true に設定することで有効化できます。

XML 名前空間タグ名

デフォルトでは、XML 名前空間タグ名（例：<foo:bar baz:qux="foobar" />）が使用された場合、エラーがスローされます。ただし、JSX 標準ではこれを受け入れていますが、現時点では React がこれに対応していないため、デフォルトでは禁止されています。これを許可したい場合は、jsx.throwIfNamespace オプションを false に設定します。

パワー注釈

デフォルトでは、JSX 要素にパワーアノテーションが付加されます。パワーアノテーションとは、戻り値が使われない場合に安全に削除できる式をマークするアノテーションコメントです。ただし、もし JSX 要素を保持したいためであれば、これは望ましくない場合があります。この機能を無効にするには、jsx.pure オプションを false に設定します。

自動ランタイム固有のオプション

インポート元

このオプションは、JSX ヘルパー関数のインポート元を指定します。デフォルト値は "react" です。

たとえば、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";

// @jsxImportSource preact が、プラグマコメント経由での設定方法です。

クラシックランタイム固有のオプション

プラグマ

このオプションは、JSX 式を変換する際に使用する関数名を指定します。修飾名（例：React.createElement）または識別子（例：createElement）である必要があります。esbuild ではこのオプションは jsxFactory と呼ばれます。

// @jsx createElement が、プラグマコメント経由での設定方法です。

プラグマ フラグメント

このオプションは、JSX フラグメントを変換する際に使用する関数名を指定します。有効な JSX タグ名でなければなりません。esbuild ではこのオプションは jsxFragment と呼ばれます。

// @jsxFrag Fragment が、プラグマコメント経由での設定方法です。

React Refresh

React Refresh（別名：React Fast Refresh）は、開発中の React コンポーネントに対してホットリロード機能を提供します。

使用方法

React Refresh 変換を有効にするには、jsx.refresh オプションを設定します：

import { transform } from "oxc-transform";

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

設定オプション

オプション	型	デフォルト	説明
refreshReg	string	"$RefreshReg$"	リフレッシュ用にコンポーネントを登録する関数の名前
refreshSig	string	"$RefreshSig$"	リフレッシュ用の署名を作成する関数の名前
emitFullSignatures	boolean	false	デバッグをより良くするために完全な署名を出力するかどうか