describeNode() — react Function Reference

Source Code

packages/react-reconciler/src/ReactFiberHydrationDiffs.js lines 537–648

function describeNode(node: HydrationDiffNode, indent: number): string {
  const skipToNode = findNotableNode(node, indent);
  if (
    skipToNode !== node &&
    (node.children.length !== 1 || node.children[0] !== skipToNode)
  ) {
    return indentation(indent) + '...\n' + describeNode(skipToNode, indent + 1);
  }

  // Prefix with any server components for context
  let parentContent = '';
  const debugInfo = node.fiber._debugInfo;
  if (debugInfo) {
    for (let i = 0; i < debugInfo.length; i++) {
      const serverComponentName = debugInfo[i].name;
      if (typeof serverComponentName === 'string') {
        parentContent +=
          indentation(indent) + '<' + serverComponentName + '>' + '\n';
        indent++;
      }
    }
  }

  // Self
  let selfContent = '';

  // We use the pending props since we might be generating a diff before the complete phase
  // when something throws.
  const clientProps = node.fiber.pendingProps;

  if (node.fiber.tag === HostText) {
    // Text Node
    selfContent = describeTextDiff(clientProps, node.serverProps, indent);
    indent++;
  } else {
    const type = describeFiberType(node.fiber);
    if (type !== null) {
      // Element Node
      if (node.serverProps === undefined) {
        // Just a reference node for context.
        selfContent = describeCollapsedElement(type, clientProps, indent);
        indent++;
      } else if (node.serverProps === null) {
        selfContent = describeExpandedElement(type, clientProps, added(indent));
        indent++;
      } else if (typeof node.serverProps === 'string') {
        if (__DEV__) {
          console.error(
            'Should not have matched a non HostText fiber to a Text node. This is a bug in React.',
          );
        }
      } else {
        selfContent = describeElementDiff(
          type,
          clientProps,
          node.serverProps,
          indent,
        );
        indent++;
      }
    }
  }

  // Compute children
  let childContent = '';
  let childFiber = node.fiber.child;
  let diffIdx = 0;
  while (childFiber && diffIdx < node.children.length) {
    const childNode = node.children[diffIdx];
    if (childNode.fiber === childFiber) {
      // This was a match in the diff.
      childContent += describeNode(childNode, indent);
      diffIdx++;
    } else {
      // This is an unrelated previous sibling.
      childContent += describeSiblingFiber(childFiber, indent);
    }
    childFiber = childFiber.sibling;
  }

  if (childFiber && node.children.length > 0) {