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.

Beginne mit dem Lesen von createJsxFactoryExpression() und createExpressionForJsxElement() in src/compiler/factory.ts und prüfe anschließend die zugehörigen Anforderungen in den Issues #15217, #32619 und #34547. Als erledigt gilt die Definition und Implementierung einer verallgemeinerten Möglichkeit zur Steuerung der JSX-Faktory-Ausgabe, einschließlich verschachtelter Komponentenargumente, ohne auf einen privaten Transformer angewiesen zu sein.