emitOutlinedJsx() — react Function Reference

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

Function typescript BabelCompiler Optimization calls 3 called by 1

Entity Profile

BabelCompiler→ Optimization→ emitOutlinedJsx() — react Function Reference

Dependency Diagram

graph TD
  4f0ce99a_8a69_a28c_c773_f27e4a7c167c["emitOutlinedJsx()"]
  158befb1_050c_87d2_b4ec_54305bac5a4f["OutlineJsx.ts"]
  4f0ce99a_8a69_a28c_c773_f27e4a7c167c -->|defined in| 158befb1_050c_87d2_b4ec_54305bac5a4f
  a18f6e8c_d3ca_2ed1_585d_9032b57ecfe4["process()"]
  a18f6e8c_d3ca_2ed1_585d_9032b57ecfe4 -->|calls| 4f0ce99a_8a69_a28c_c773_f27e4a7c167c
  d0270ab6_a621_bd55_a1b9_a5cad8b406b2["makeInstructionId()"]
  4f0ce99a_8a69_a28c_c773_f27e4a7c167c -->|calls| d0270ab6_a621_bd55_a1b9_a5cad8b406b2
  49446ae1_b830_9411_8258_1139d21b314b["createTemporaryPlace()"]
  4f0ce99a_8a69_a28c_c773_f27e4a7c167c -->|calls| 49446ae1_b830_9411_8258_1139d21b314b
  a7ddd29d_1b90_49b2_fa66_2f273856b02a["promoteTemporaryJsxTag()"]
  4f0ce99a_8a69_a28c_c773_f27e4a7c167c -->|calls| a7ddd29d_1b90_49b2_fa66_2f273856b02a
  style 4f0ce99a_8a69_a28c_c773_f27e4a7c167c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

compiler/packages/babel-plugin-react-compiler/src/Optimization/OutlineJsx.ts lines 275–319

function emitOutlinedJsx(
  env: Environment,
  instructions: Array<Instruction>,
  outlinedProps: Array<OutlinedJsxAttribute>,
  outlinedTag: string,
): Array<Instruction> {
  const props: Array<JsxAttribute> = outlinedProps.map(p => ({
    kind: 'JsxAttribute',
    name: p.newName,
    place: p.place,
  }));

  const loadJsx: Instruction = {
    id: makeInstructionId(0),
    loc: GeneratedSource,
    lvalue: createTemporaryPlace(env, GeneratedSource),
    value: {
      kind: 'LoadGlobal',
      binding: {
        kind: 'ModuleLocal',
        name: outlinedTag,
      },
      loc: GeneratedSource,
    },
    effects: null,
  };
  promoteTemporaryJsxTag(loadJsx.lvalue.identifier);
  const jsxExpr: Instruction = {
    id: makeInstructionId(0),
    loc: GeneratedSource,
    lvalue: instructions.at(-1)!.lvalue,
    value: {
      kind: 'JsxExpression',
      tag: {...loadJsx.lvalue},
      props,
      children: null,
      loc: GeneratedSource,
      openingLoc: GeneratedSource,
      closingLoc: GeneratedSource,
    },
    effects: null,
  };

  return [loadJsx, jsxExpr];
}