Support JSX transformations with custom jsxFactory

Search Terms

jsx, jsxFactory, transformer

Suggestion

Allow tapping into the JSX generation process to control React.createElement output format when using --jsxFactory.

Specific cases requested (e.g. #15217, #32619) would also benefit from a generalized solution.

Use Cases

Emit component children as thunks

Useful to reactive frameworks which attach dependency tracking via the JSX component hierarchy.

The internal createJsxFactoryExpression() call LHS is controlled using the --jsxFactory compiler option:

// jsx
<div>
  <div>a</div>
  <div>b</div>
</div>

// current emit (jsxFactory: "h")
h('div', null, 
  h('div', null, 'a'), 
  h('div', null, 'b')
)

This produces a nested React.createElement()/h() chain which evaluates eagerly.

With (still synchronous) thunks, frameworks can track each component dependency as they traverse the tree, for fine-grained change detection:

// thunks (needs transformer)
h('div', null, () => [
  h('div', null, () => ['a']), 
  h('div', null, () => ['b'])
])

This requires recursively transforming the JSX emits to a signature of h() which accepts some args as a thunk.

I've written a hacky (#16607) transformer for this but had to extract most of the JSX-related internals from the TypeScript compiler, whereas making the change to createExpressionForJsxElement() is trivial:

const cs = argumentsList.slice(2);
const argThunk = ts.createArrowFunction(
    [],
    [],
    [],
    undefined,
    undefined,
    ts.createArrayLiteral(cs)
);
const thunkified = [...argumentsList.slice(0, 2), argThunk];

According to #34547, plans are already in motion to pass nested component args as arrays instead of varargs. Specifying the jsxFactory implies we are assuming control of the composition behavior; we should also control the function signature.

まず src/compiler/factory.ts の createJsxFactoryExpression() と createExpressionForJsxElement() を読み、続いて issue #15217、#32619、#34547 の関連要件を確認してください。ネストされたコンポーネントの引数を含め、プライベートな transformer に依存せずに JSX factory の出力を制御する一般化された方法を定義して実装できれば完了です。