esbuild だと新しいJSXトランスフォームに対応できなそう

新しいJSXトランスフォームは若干引数が異なっています。

ReactDOM.render(<App/>, document.querySelector('#main'));
// ReactDOM.render(React.createElement(App, null), document.querySelector('#main'));

これが下のようになります。

ReactDOM.render(<App/>, document.querySelector('#main'));
// ReactDOM.render(_jsx(App, {}, null), document.querySelector('#main'));

第二引数が異なるようになってしまったので、単純な以下のようなことはできません。

$ npx esbuild src/*.tsx --bundle '--define:process.env.NODE_ENV="development"' --jsx-factory=_jsx --jsx-fragment=Fragment --inject:src/shim.ts --outdir=dist

引数の与え方が異なっているのですから、JSX ファクトリーをすり替えるだけでは当然うまくいきません。

現在の状況

そもそも、 import React from 'react';がなくしたいだけなら以下でもいけます。

// src/shim.ts
export * as React from 'react';

$ npx esbuild src/*.tsx --bundle '--define:process.env.NODE_ENV="development"' --inject:src/shim.ts --outdir=dist

ただ、これでは今回新しくJSXトランスフォームが導入された意義の半分も満たせていません。

現在はissueが立っており、そこで議論されている最中です。どうやらプラグインとしてのサポートとなりそうです。

esbuild はすぐに導入できてプレイグラウンドとしてかなり優秀なので、対応してくれることを祈っています。