describeExpandedElement() — react Function Reference

Architecture documentation for the describeExpandedElement() function in ReactFiberHydrationDiffs.js from the react codebase.

Function javascript BabelCompiler Validation calls 1 called by 2

Entity Profile

BabelCompiler→ Validation→ describeExpandedElement() — react Function Reference

Dependency Diagram

graph TD
  2747bd4b_fdc4_9488_e109_97887feb56e9["describeExpandedElement()"]
  e98a87b8_beb4_9d09_4d2f_78427872f8a3["ReactFiberHydrationDiffs.js"]
  2747bd4b_fdc4_9488_e109_97887feb56e9 -->|defined in| e98a87b8_beb4_9d09_4d2f_78427872f8a3
  d76433b3_24cb_a703_296a_c8c399817ef2["describeElementDiff()"]
  d76433b3_24cb_a703_296a_c8c399817ef2 -->|calls| 2747bd4b_fdc4_9488_e109_97887feb56e9
  2bddd835_c8df_0f88_d323_52a3495a4bd7["describeNode()"]
  2bddd835_c8df_0f88_d323_52a3495a4bd7 -->|calls| 2747bd4b_fdc4_9488_e109_97887feb56e9
  f70bda65_503f_5299_be1d_ced97c87a0f6["describePropValue()"]
  2747bd4b_fdc4_9488_e109_97887feb56e9 -->|calls| f70bda65_503f_5299_be1d_ced97c87a0f6
  style 2747bd4b_fdc4_9488_e109_97887feb56e9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-reconciler/src/ReactFiberHydrationDiffs.js lines 290–339

function describeExpandedElement(
  type: string,
  props: {+[propName: string]: mixed},
  rowPrefix: string,
): string {
  // This function tries to fit the props into a single line for non-essential elements.
  // We also ignore children because we're not going deeper.

  let remainingRowLength = maxRowLength - rowPrefix.length - type.length;

  // We add the properties to a set so we can choose later whether we'll put it on one
  // line or multiple lines.

  const properties = [];

  for (const propName in props) {
    if (!props.hasOwnProperty(propName)) {
      continue;
    }
    if (propName === 'children') {
      // Ignored.
      continue;
    }
    const maxLength = maxRowLength - rowPrefix.length - propName.length - 1;
    const propValue = describePropValue(props[propName], maxLength);
    remainingRowLength -= propName.length + propValue.length + 2;
    properties.push(propName + '=' + propValue);
  }

  if (properties.length === 0) {
    return rowPrefix + '<' + type + '>\n';
  } else if (remainingRowLength > 0) {
    // We can fit all on one row.
    return rowPrefix + '<' + type + ' ' + properties.join(' ') + '>\n';
  } else {
    // Split into one row per property:
    return (
      rowPrefix +
      '<' +
      type +
      '\n' +
      rowPrefix +
      '  ' +
      properties.join('\n' + rowPrefix + '  ') +
      '\n' +
      rowPrefix +
      '>\n'
    );
  }
}