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.

Commencez par lire createJsxFactoryExpression() et createExpressionForJsxElement() dans src/compiler/factory.ts, puis examinez les exigences associées dans les issues #15217, #32619 et #34547. Le travail est considéré comme terminé lorsqu’une manière généralisée de contrôler la sortie de la factory JSX, y compris les arguments de composants imbriqués, est définie et implémentée sans dépendre d’un transformer privé.