describeElementDiff() — react Function Reference

Source Code

packages/react-reconciler/src/ReactFiberHydrationDiffs.js lines 377–519

function describeElementDiff(
  type: string,
  clientProps: {+[propName: string]: mixed},
  serverProps: {+[propName: string]: mixed},
  indent: number,
): string {
  let content = '';

  // Maps any previously unmatched lower case server prop name to its full prop name
  const serverPropNames: Map<string, string> = new Map();

  for (const propName in serverProps) {
    if (!serverProps.hasOwnProperty(propName)) {
      continue;
    }
    serverPropNames.set(propName.toLowerCase(), propName);
  }

  if (serverPropNames.size === 1 && serverPropNames.has('children')) {
    content += describeExpandedElement(type, clientProps, indentation(indent));
  } else {
    for (const propName in clientProps) {
      if (!clientProps.hasOwnProperty(propName)) {
        continue;
      }
      if (propName === 'children') {
        // Handled below.
        continue;
      }
      const maxLength = maxRowLength - (indent + 1) * 2 - propName.length - 1;
      const serverPropName = serverPropNames.get(propName.toLowerCase());
      if (serverPropName !== undefined) {
        serverPropNames.delete(propName.toLowerCase());
        // There's a diff here.
        const clientValue = clientProps[propName];
        const serverValue = serverProps[serverPropName];
        const clientPropValue = describePropValue(clientValue, maxLength);
        const serverPropValue = describePropValue(serverValue, maxLength);
        if (
          typeof clientValue === 'object' &&
          clientValue !== null &&
          typeof serverValue === 'object' &&
          serverValue !== null &&
          objectName(clientValue) === 'Object' &&
          objectName(serverValue) === 'Object' &&
          // Only do the diff if the object has a lot of keys or was shortened.
          (Object.keys(clientValue).length > 2 ||
            Object.keys(serverValue).length > 2 ||
            clientPropValue.indexOf('...') > -1 ||
            serverPropValue.indexOf('...') > -1)
        ) {
          // We're comparing two plain objects. We can diff the nested objects instead.
          content +=
            indentation(indent + 1) +
            propName +
            '={{\n' +
            describePropertiesDiff(clientValue, serverValue, indent + 2) +
            indentation(indent + 1) +
            '}}\n';
        } else {
          content +=
            added(indent + 1) + propName + '=' + clientPropValue + '\n';
          content +=
            removed(indent + 1) + propName + '=' + serverPropValue + '\n';
        }
      } else {
        // Considered equal.
        content +=
          indentation(indent + 1) +
          propName +
          '=' +
          describePropValue(clientProps[propName], maxLength) +
          '\n';
      }
    }

    serverPropNames.forEach(propName => {
      if (propName === 'children') {
        // Handled below.
        return;
      }