emitUpdatedJsx() — react Function Reference

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

Function typescript BabelCompiler Optimization calls 2 called by 1

Entity Profile

BabelCompiler→ Optimization→ emitUpdatedJsx() — react Function Reference

Dependency Diagram

graph TD
  66224640_ba7d_ee8a_5de1_ad0d81748cff["emitUpdatedJsx()"]
  158befb1_050c_87d2_b4ec_54305bac5a4f["OutlineJsx.ts"]
  66224640_ba7d_ee8a_5de1_ad0d81748cff -->|defined in| 158befb1_050c_87d2_b4ec_54305bac5a4f
  c201bbda_dc3c_7b58_7ce0_7d61d25ef972["emitOutlinedFn()"]
  c201bbda_dc3c_7b58_7ce0_7d61d25ef972 -->|calls| 66224640_ba7d_ee8a_5de1_ad0d81748cff
  e7a01d7c_c128_be66_a07d_007952a380da["printIdentifier()"]
  66224640_ba7d_ee8a_5de1_ad0d81748cff -->|calls| e7a01d7c_c128_be66_a07d_007952a380da
  53244187_914c_cc90_5880_7bfc1fc9c0bb["push()"]
  66224640_ba7d_ee8a_5de1_ad0d81748cff -->|calls| 53244187_914c_cc90_5880_7bfc1fc9c0bb
  style 66224640_ba7d_ee8a_5de1_ad0d81748cff fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

compiler/packages/babel-plugin-react-compiler/src/Optimization/OutlineJsx.ts lines 405–465

function emitUpdatedJsx(
  jsx: Array<JsxInstruction>,
  oldToNewProps: Map<IdentifierId, OutlinedJsxAttribute>,
): Array<JsxInstruction> {
  const newInstrs: Array<JsxInstruction> = [];
  const jsxIds = new Set(jsx.map(i => i.lvalue.identifier.id));

  for (const instr of jsx) {
    const {value} = instr;
    const newProps: Array<JsxAttribute> = [];
    // Update old props references to use the newly destructured props param
    for (const prop of value.props) {
      invariant(
        prop.kind === 'JsxAttribute',
        `Expected only attributes but found ${prop.kind}`,
      );
      if (prop.name === 'key') {
        continue;
      }
      const newProp = oldToNewProps.get(prop.place.identifier.id);
      invariant(
        newProp !== undefined,
        `Expected a new property for ${printIdentifier(prop.place.identifier)}`,
      );
      newProps.push({
        kind: 'JsxAttribute',
        name: newProp.originalName,
        place: newProp.place,
      });
    }

    let newChildren: Array<Place> | null = null;
    if (value.children) {
      newChildren = [];
      for (const child of value.children) {
        if (jsxIds.has(child.identifier.id)) {
          newChildren.push({...child});
          continue;
        }

        const newChild = oldToNewProps.get(child.identifier.id);
        invariant(
          newChild !== undefined,
          `Expected a new prop for ${printIdentifier(child.identifier)}`,
        );
        newChildren.push({...newChild.place});
      }
    }

    newInstrs.push({
      ...instr,
      value: {
        ...value,
        props: newProps,
        children: newChildren,
      },
    });
  }

  return newInstrs;
}