collectProps() — react Function Reference

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

Function typescript BabelCompiler Optimization calls 2 called by 1

Entity Profile

BabelCompiler→ Optimization→ collectProps() — react Function Reference

Dependency Diagram

graph TD
  d88e3a28_acde_4a3d_a038_a77b8e6fdace["collectProps()"]
  158befb1_050c_87d2_b4ec_54305bac5a4f["OutlineJsx.ts"]
  d88e3a28_acde_4a3d_a038_a77b8e6fdace -->|defined in| 158befb1_050c_87d2_b4ec_54305bac5a4f
  a18f6e8c_d3ca_2ed1_585d_9032b57ecfe4["process()"]
  a18f6e8c_d3ca_2ed1_585d_9032b57ecfe4 -->|calls| d88e3a28_acde_4a3d_a038_a77b8e6fdace
  53244187_914c_cc90_5880_7bfc1fc9c0bb["push()"]
  d88e3a28_acde_4a3d_a038_a77b8e6fdace -->|calls| 53244187_914c_cc90_5880_7bfc1fc9c0bb
  216a4c34_910d_7936_33eb_adf13df70310["promoteTemporary()"]
  d88e3a28_acde_4a3d_a038_a77b8e6fdace -->|calls| 216a4c34_910d_7936_33eb_adf13df70310
  style d88e3a28_acde_4a3d_a038_a77b8e6fdace fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

compiler/packages/babel-plugin-react-compiler/src/Optimization/OutlineJsx.ts lines 218–273

function collectProps(
  env: Environment,
  instructions: Array<JsxInstruction>,
): Array<OutlinedJsxAttribute> | null {
  let id = 1;

  function generateName(oldName: string): string {
    let newName = oldName;
    while (seen.has(newName)) {
      newName = `${oldName}${id++}`;
    }
    seen.add(newName);
    env.programContext.addNewReference(newName);
    return newName;
  }

  const attributes: Array<OutlinedJsxAttribute> = [];
  const jsxIds = new Set(instructions.map(i => i.lvalue.identifier.id));
  const seen: Set<string> = new Set();

  for (const instr of instructions) {
    const {value} = instr;

    for (const at of value.props) {
      if (at.kind === 'JsxSpreadAttribute') {
        return null;
      }

      if (at.kind === 'JsxAttribute') {
        const newName = generateName(at.name);
        attributes.push({
          originalName: at.name,
          newName,
          place: at.place,
        });
      }
    }

    if (value.children) {
      for (const child of value.children) {
        if (jsxIds.has(child.identifier.id)) {
          continue;
        }

        promoteTemporary(child.identifier);
        const newName = generateName('t');
        attributes.push({
          originalName: child.identifier.name!.value,
          newName: newName,
          place: child,
        });
      }
    }
  }
  return attributes;
}