Back out #28476 and #28458

Back out "Move Hydration Warnings from the DOM Config into the Fiber reconciliation (#28476)"

Original commit changeset: 4b8dfd6

Back out "Remove enableClientRenderFallbackOnTextMismatch flag (#28458)"

Original commit changeset: 84c84d7

Author: kassens

packages/react-dom-bindings/src/client/ReactDOMComponent.js

@@ -52,12 +52,14 @@ import {hasRole} from './DOMAccessibilityRoles';
 import {
   setInitialProperties,
   updateProperties,
-  hydrateProperties,
-  hydrateText,
   diffHydratedProperties,
-  getPropsFromElement,
   diffHydratedText,
   trapClickOnNonInteractiveElement,
+  checkForUnmatchedText,
+  warnForDeletedHydratableElement,
+  warnForDeletedHydratableText,
+  warnForInsertedHydratedElement,
+  warnForInsertedHydratedText,
 } from './ReactDOMComponent';
 import {getSelectionInformation, restoreSelection} from './ReactInputSelection';
 import setTextContent from './setTextContent';
@@ -1340,26 +1342,6 @@ export function getFirstHydratableChildWithinSuspenseInstance(
   return getNextHydratable(parentInstance.nextSibling);
 }
 
-export function describeHydratableInstanceForDevWarnings(
-  instance: HydratableInstance,
-): string | {type: string, props: $ReadOnly<Props>} {
-  // Reverse engineer a pseudo react-element from hydratable instnace
-  if (instance.nodeType === ELEMENT_NODE) {
-    // Reverse engineer a set of props that can print for dev warnings
-    return {
-      type: instance.nodeName.toLowerCase(),
-      props: getPropsFromElement((instance: any)),
-    };
-  } else if (instance.nodeType === COMMENT_NODE) {
-    return {
-      type: 'Suspense',
-      props: {},
-    };
-  } else {
-    return instance.nodeValue;
-  }
-}
-
 export function validateHydratableInstance(
   type: string,
   props: Props,
@@ -1379,23 +1361,14 @@ export function hydrateInstance(
   props: Props,
   hostContext: HostContext,
   internalInstanceHandle: Object,
-): boolean {
+  shouldWarnDev: boolean,
+): void {
   precacheFiberNode(internalInstanceHandle, instance);
   // TODO: Possibly defer this until the commit phase where all the events
   // get attached.
   updateFiberProps(instance, props);
 
-  return hydrateProperties(instance, type, props, hostContext);
-}
-
-// Returns a Map of properties that were different on the server.
-export function diffHydratedPropsForDevWarnings(
-  instance: Instance,
-  type: string,
-  props: Props,
-  hostContext: HostContext,
-): null | $ReadOnly<Props> {
-  return diffHydratedProperties(instance, type, props, hostContext);
+  diffHydratedProperties(instance, type, props, shouldWarnDev, hostContext);
 }
 
 export function validateHydratableTextInstance(
@@ -1416,26 +1389,11 @@ export function hydrateTextInstance(
   textInstance: TextInstance,
   text: string,
   internalInstanceHandle: Object,
-  parentInstanceProps: null | Props,
+  shouldWarnDev: boolean,
 ): boolean {
   precacheFiberNode(internalInstanceHandle, textInstance);
 
-  return hydrateText(textInstance, text, parentInstanceProps);
-}
-
-// Returns the server text if it differs from the client.
-export function diffHydratedTextForDevWarnings(
-  textInstance: TextInstance,
-  text: string,
-  parentProps: null | Props,
-): null | string {
-  if (
-    parentProps === null ||
-    parentProps[SUPPRESS_HYDRATION_WARNING] !== true
-  ) {
-    return diffHydratedText(textInstance, text);
-  }
-  return null;
+  return diffHydratedText(textInstance, text);
 }
 
 export function hydrateSuspenseInstance(
@@ -1527,6 +1485,183 @@ export function shouldDeleteUnhydratedTailInstances(
   return parentType !== 'form' && parentType !== 'button';
 }
 
+export function didNotMatchHydratedContainerTextInstance(
+  parentContainer: Container,
+  textInstance: TextInstance,
+  text: string,
+  shouldWarnDev: boolean,
+) {
+  checkForUnmatchedText(textInstance.nodeValue, text, shouldWarnDev);
+}
+
+export function didNotMatchHydratedTextInstance(
+  parentType: string,
+  parentProps: Props,
+  parentInstance: Instance,
+  textInstance: TextInstance,
+  text: string,
+  shouldWarnDev: boolean,
+) {
+  if (parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
+    checkForUnmatchedText(textInstance.nodeValue, text, shouldWarnDev);
+  }
+}
+
+export function didNotHydrateInstanceWithinContainer(
+  parentContainer: Container,
+  instance: HydratableInstance,
+) {
+  if (__DEV__) {
+    if (instance.nodeType === ELEMENT_NODE) {
+      warnForDeletedHydratableElement(parentContainer, (instance: any));
+    } else if (instance.nodeType === COMMENT_NODE) {
+      // TODO: warnForDeletedHydratableSuspenseBoundary
+    } else {
+      warnForDeletedHydratableText(parentContainer, (instance: any));
+    }
+  }
+}
+
+export function didNotHydrateInstanceWithinSuspenseInstance(
+  parentInstance: SuspenseInstance,
+  instance: HydratableInstance,
+) {
+  if (__DEV__) {
+    // $FlowFixMe[incompatible-type]: Only Element or Document can be parent nodes.
+    const parentNode: Element | Document | null = parentInstance.parentNode;
+    if (parentNode !== null) {
+      if (instance.nodeType === ELEMENT_NODE) {
+        warnForDeletedHydratableElement(parentNode, (instance: any));
+      } else if (instance.nodeType === COMMENT_NODE) {
+        // TODO: warnForDeletedHydratableSuspenseBoundary
+      } else {
+        warnForDeletedHydratableText(parentNode, (instance: any));
+      }
+    }
+  }
+}
+
+export function didNotHydrateInstance(
+  parentType: string,
+  parentProps: Props,
+  parentInstance: Instance,
+  instance: HydratableInstance,
+) {
+  if (__DEV__) {
+    if (instance.nodeType === ELEMENT_NODE) {
+      warnForDeletedHydratableElement(parentInstance, (instance: any));
+    } else if (instance.nodeType === COMMENT_NODE) {
+      // TODO: warnForDeletedHydratableSuspenseBoundary
+    } else {
+      warnForDeletedHydratableText(parentInstance, (instance: any));
+    }
+  }
+}
+
+export function didNotFindHydratableInstanceWithinContainer(
+  parentContainer: Container,
+  type: string,
+  props: Props,
+) {
+  if (__DEV__) {
+    warnForInsertedHydratedElement(parentContainer, type, props);
+  }
+}
+
+export function didNotFindHydratableTextInstanceWithinContainer(
+  parentContainer: Container,
+  text: string,
+) {
+  if (__DEV__) {
+    warnForInsertedHydratedText(parentContainer, text);
+  }
+}
+
+export function didNotFindHydratableSuspenseInstanceWithinContainer(
+  parentContainer: Container,
+) {
+  if (__DEV__) {
+    // TODO: warnForInsertedHydratedSuspense(parentContainer);
+  }
+}
+
+export function didNotFindHydratableInstanceWithinSuspenseInstance(
+  parentInstance: SuspenseInstance,
+  type: string,
+  props: Props,
+) {
+  if (__DEV__) {
+    // $FlowFixMe[incompatible-type]: Only Element or Document can be parent nodes.
+    const parentNode: Element | Document | null = parentInstance.parentNode;
+    if (parentNode !== null)
+      warnForInsertedHydratedElement(parentNode, type, props);
+  }
+}
+
+export function didNotFindHydratableTextInstanceWithinSuspenseInstance(
+  parentInstance: SuspenseInstance,
+  text: string,
+) {
+  if (__DEV__) {
+    // $FlowFixMe[incompatible-type]: Only Element or Document can be parent nodes.
+    const parentNode: Element | Document | null = parentInstance.parentNode;
+    if (parentNode !== null) warnForInsertedHydratedText(parentNode, text);
+  }
+}
+
+export function didNotFindHydratableSuspenseInstanceWithinSuspenseInstance(
+  parentInstance: SuspenseInstance,
+) {
+  if (__DEV__) {
+    // const parentNode: Element | Document | null = parentInstance.parentNode;
+    // TODO: warnForInsertedHydratedSuspense(parentNode);
+  }
+}
+
+export function didNotFindHydratableInstance(
+  parentType: string,
+  parentProps: Props,
+  parentInstance: Instance,
+  type: string,
+  props: Props,
+) {
+  if (__DEV__) {
+    warnForInsertedHydratedElement(parentInstance, type, props);
+  }
+}
+
+export function didNotFindHydratableTextInstance(
+  parentType: string,
+  parentProps: Props,
+  parentInstance: Instance,
+  text: string,
+) {
+  if (__DEV__) {
+    warnForInsertedHydratedText(parentInstance, text);
+  }
+}
+
+export function didNotFindHydratableSuspenseInstance(
+  parentType: string,
+  parentProps: Props,
+  parentInstance: Instance,
+) {
+  if (__DEV__) {
+    // TODO: warnForInsertedHydratedSuspense(parentInstance);
+  }
+}
+
+export function errorHydratingContainer(parentContainer: Container): void {
+  if (__DEV__) {
+    // TODO: This gets logged by onRecoverableError, too, so we should be
+    // able to remove it.
+    console.error(
+      'An error occurred during hydration. The server HTML was replaced with client content in <%s>.',
+      parentContainer.nodeName.toLowerCase(),
+    );
+  }
+}
+
 // -------------------
 //     Test Selectors
 // -------------------

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -2407,8 +2407,8 @@ describe('ReactDOMFizzServer', () => {
       ]);
     }).toErrorDev(
       [
-        'Warning: An error occurred during hydration. The server HTML was replaced with client content.',
-        'Warning: Expected server HTML to contain a matching <div> in the root.\n' +
+        'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.',
+        'Warning: Expected server HTML to contain a matching <div> in <div>.\n' +
           '    in div (at **)\n' +
           '    in App (at **)',
       ],
@@ -2492,7 +2492,7 @@ describe('ReactDOMFizzServer', () => {
     }).toErrorDev(
       [
         'Warning: An error occurred during hydration. The server HTML was replaced with client content',
-        'Warning: Expected server HTML to contain a matching <div> in the root.\n' +
+        'Warning: Expected server HTML to contain a matching <div> in <div>.\n' +
           '    in div (at **)\n' +
           '    in App (at **)',
       ],
@@ -4419,6 +4419,7 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
+  // @gate enableClientRenderFallbackOnTextMismatch
   it('#24384: Suspending should halt hydration warnings but still emit hydration warnings after unsuspending if mismatches are genuine', async () => {
     const makeApp = () => {
       let resolve, resolved;
@@ -4504,6 +4505,7 @@ describe('ReactDOMFizzServer', () => {
     await waitForAll([]);
   });
 
+  // @gate enableClientRenderFallbackOnTextMismatch
   it('only warns once on hydration mismatch while within a suspense boundary', async () => {
     const originalConsoleError = console.error;
     const mockError = jest.fn();
@@ -6343,7 +6345,7 @@ describe('ReactDOMFizzServer', () => {
         await waitForAll([]);
       }).toErrorDev(
         [
-          'Expected server HTML to contain a matching <span> in the root',
+          'Expected server HTML to contain a matching <span> in <div>',
           'An error occurred during hydration',
         ],
         {withoutStack: 1},