process() — react Function Reference

Architecture documentation for the process() function in OutlineJsx.ts from the react codebase.

Function typescript BabelCompiler Optimization calls 3 called by 1

Entity Profile

BabelCompiler→ Optimization→ process() — react Function Reference

Dependency Diagram

graph TD
  a18f6e8c_d3ca_2ed1_585d_9032b57ecfe4["process()"]
  158befb1_050c_87d2_b4ec_54305bac5a4f["OutlineJsx.ts"]
  a18f6e8c_d3ca_2ed1_585d_9032b57ecfe4 -->|defined in| 158befb1_050c_87d2_b4ec_54305bac5a4f
  607124e3_c223_e210_7b0a_5f166993a9e2["outlineJsxImpl()"]
  607124e3_c223_e210_7b0a_5f166993a9e2 -->|calls| a18f6e8c_d3ca_2ed1_585d_9032b57ecfe4
  d88e3a28_acde_4a3d_a038_a77b8e6fdace["collectProps()"]
  a18f6e8c_d3ca_2ed1_585d_9032b57ecfe4 -->|calls| d88e3a28_acde_4a3d_a038_a77b8e6fdace
  4f0ce99a_8a69_a28c_c773_f27e4a7c167c["emitOutlinedJsx()"]
  a18f6e8c_d3ca_2ed1_585d_9032b57ecfe4 -->|calls| 4f0ce99a_8a69_a28c_c773_f27e4a7c167c
  c201bbda_dc3c_7b58_7ce0_7d61d25ef972["emitOutlinedFn()"]
  a18f6e8c_d3ca_2ed1_585d_9032b57ecfe4 -->|calls| c201bbda_dc3c_7b58_7ce0_7d61d25ef972
  style a18f6e8c_d3ca_2ed1_585d_9032b57ecfe4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

compiler/packages/babel-plugin-react-compiler/src/Optimization/OutlineJsx.ts lines 185–210

function process(
  fn: HIRFunction,
  jsx: Array<JsxInstruction>,
  globals: LoadGlobalMap,
): OutlinedResult | null {
  /**
   * In the future, add a check for backedge to outline jsx inside loops in a
   * top level component. For now, only outline jsx in callbacks.
   */
  if (fn.fnType === 'Component') {
    return null;
  }

  const props = collectProps(fn.env, jsx);
  if (!props) return null;

  const outlinedTag = fn.env.generateGloballyUniqueIdentifierName(null).value;
  const newInstrs = emitOutlinedJsx(fn.env, jsx, props, outlinedTag);
  if (!newInstrs) return null;

  const outlinedFn = emitOutlinedFn(fn.env, jsx, props, globals);
  if (!outlinedFn) return null;
  outlinedFn.id = outlinedTag;

  return {instrs: newInstrs, fn: outlinedFn};
}