printElement() — react Function Reference

Architecture documentation for the printElement() function in utils.js from the react codebase.

Function javascript BabelCompiler Validation called by 2

Entity Profile

BabelCompiler→ Validation→ printElement() — react Function Reference

Dependency Diagram

graph TD
  3900d299_1b5e_8f06_db86_8036ae03467a["printElement()"]
  fa31bba5_57ed_1039_52bb_4a8cb4382642["utils.js"]
  3900d299_1b5e_8f06_db86_8036ae03467a -->|defined in| fa31bba5_57ed_1039_52bb_4a8cb4382642
  cd600574_1ffb_5784_38e6_bf5967970c79["printOwnersList()"]
  cd600574_1ffb_5784_38e6_bf5967970c79 -->|calls| 3900d299_1b5e_8f06_db86_8036ae03467a
  d738af75_576c_a12f_4a3a_c9e3cfe329a7["printStore()"]
  d738af75_576c_a12f_4a3a_c9e3cfe329a7 -->|calls| 3900d299_1b5e_8f06_db86_8036ae03467a
  style 3900d299_1b5e_8f06_db86_8036ae03467a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/utils.js lines 20–55

export function printElement(
  element: Element,
  includeWeight: boolean = false,
): string {
  let prefix = ' ';
  if (element.children.length > 0) {
    prefix = element.isCollapsed ? '▸' : '▾';
  }

  let key = '';
  if (element.key !== null) {
    key = ` key="${element.key}"`;
  }

  let name = '';
  if (element.nameProp !== null) {
    name = ` name="${element.nameProp}"`;
  }

  let hocDisplayNames = null;
  if (element.hocDisplayNames !== null) {
    hocDisplayNames = [...element.hocDisplayNames];
  }

  const hocs =
    hocDisplayNames === null ? '' : ` [${hocDisplayNames.join('][')}]`;

  let suffix = '';
  if (includeWeight) {
    suffix = ` (${element.isCollapsed ? 1 : element.weight})`;
  }

  return `${'  '.repeat(element.depth + 1)}${prefix} <${
    element.displayName || 'null'
  }${key}${name}>${hocs}${suffix}`;
}