outlineJsxImpl() — react Function Reference

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

Function typescript BabelCompiler Optimization calls 4 called by 1

Entity Profile

BabelCompiler→ Optimization→ outlineJsxImpl() — react Function Reference

Dependency Diagram

graph TD
  607124e3_c223_e210_7b0a_5f166993a9e2["outlineJsxImpl()"]
  158befb1_050c_87d2_b4ec_54305bac5a4f["OutlineJsx.ts"]
  607124e3_c223_e210_7b0a_5f166993a9e2 -->|defined in| 158befb1_050c_87d2_b4ec_54305bac5a4f
  b28bf5c0_8e84_1e6c_e20a_a5d9e0737eca["outlineJSX()"]
  b28bf5c0_8e84_1e6c_e20a_a5d9e0737eca -->|calls| 607124e3_c223_e210_7b0a_5f166993a9e2
  a18f6e8c_d3ca_2ed1_585d_9032b57ecfe4["process()"]
  607124e3_c223_e210_7b0a_5f166993a9e2 -->|calls| a18f6e8c_d3ca_2ed1_585d_9032b57ecfe4
  53244187_914c_cc90_5880_7bfc1fc9c0bb["push()"]
  607124e3_c223_e210_7b0a_5f166993a9e2 -->|calls| 53244187_914c_cc90_5880_7bfc1fc9c0bb
  d7fde76c_4fd9_feb3_299b_798689f05bc6["assertExhaustive()"]
  607124e3_c223_e210_7b0a_5f166993a9e2 -->|calls| d7fde76c_4fd9_feb3_299b_798689f05bc6
  e6e7641a_0356_e256_1ee6_a60705f7edfe["deadCodeElimination()"]
  607124e3_c223_e210_7b0a_5f166993a9e2 -->|calls| e6e7641a_0356_e256_1ee6_a60705f7edfe
  style 607124e3_c223_e210_7b0a_5f166993a9e2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

compiler/packages/babel-plugin-react-compiler/src/Optimization/OutlineJsx.ts lines 52–178

function outlineJsxImpl(
  fn: HIRFunction,
  outlinedFns: Array<HIRFunction>,
): void {
  const globals: LoadGlobalMap = new Map();

  function processAndOutlineJSX(
    state: State,
    rewriteInstr: Map<InstructionId, Array<Instruction>>,
  ): void {
    if (state.jsx.length <= 1) {
      return;
    }
    const result = process(
      fn,
      [...state.jsx].sort((a, b) => a.id - b.id),
      globals,
    );
    if (result) {
      outlinedFns.push(result.fn);
      rewriteInstr.set(state.jsx.at(0)!.id, result.instrs);
    }
  }

  for (const [, block] of fn.body.blocks) {
    const rewriteInstr = new Map();
    let state: State = {
      jsx: [],
      children: new Set(),
    };

    for (let i = block.instructions.length - 1; i >= 0; i--) {
      const instr = block.instructions[i];
      const {value, lvalue} = instr;
      switch (value.kind) {
        case 'LoadGlobal': {
          globals.set(lvalue.identifier.id, instr as LoadGlobalInstruction);
          break;
        }
        case 'FunctionExpression': {
          outlineJsxImpl(value.loweredFunc.func, outlinedFns);
          break;
        }

        case 'JsxExpression': {
          if (!state.children.has(lvalue.identifier.id)) {
            processAndOutlineJSX(state, rewriteInstr);

            state = {
              jsx: [],
              children: new Set(),
            };
          }
          state.jsx.push(instr as JsxInstruction);
          if (value.children) {
            for (const child of value.children) {
              state.children.add(child.identifier.id);
            }
          }
          break;
        }
        case 'ArrayExpression':
        case 'Await':
        case 'BinaryExpression':
        case 'CallExpression':
        case 'ComputedDelete':
        case 'ComputedLoad':
        case 'ComputedStore':
        case 'Debugger':
        case 'DeclareContext':
        case 'DeclareLocal':
        case 'Destructure':
        case 'FinishMemoize':
        case 'GetIterator':
        case 'IteratorNext':
        case 'JSXText':
        case 'JsxFragment':
        case 'LoadContext':
        case 'LoadLocal':
        case 'MetaProperty':
        case 'MethodCall':