Simplify ReactFiberHydrationWarning in react-reconciler

Stopped printing non-hydratable nodes in the diff, simplified
the ReactFiberHydrationWarning and ReactDOMHostConfig code.
Removed ReactFiberHostConfig functions:
```
getAllChildHostInstances,
getHostInstanceDisplayStringForHydrationWarning,
getHostInstanceClosingDisplayStringForHydrationWarning,
isHydratableInstance,
```
Added ReactFiberHostConfig functions:
```
getHostInstanceDisplayName,
getHostInstanceProps,
```

Removed type HydratableInstance, it everywhere was aliased
to Instance | TextInstance, and was used as such alias,
but in the custom renderer it used an opaque type,
and this failed the typechecks because the aliasing did not happen.
Alternative solution would be to alias HydratableInstance in the
custom renderer's ReactFiberHostConfig.custom to align with other
renderers. I don't see any potential for HydratableInstance to be
something else than Instance | TextInstance, so I chose to inline
the alias.

Removed type HostInstance, not needed anymore.

Author: sompylasar

packages/react-dom/src/__tests__/ReactMount-test.js

@@ -313,7 +313,6 @@ describe('ReactMount', () => {
       'Warning: Expected server HTML to contain a matching <h2> in <div>.\n\n' +
         '  <div>\n' +
         "    {'nested'}\n" +
-        '    <!-- -->\n' +
         "    {'   '}\n" +
         '-   <h1>children <b>text</b></h1>\n' +
         '+   <h2>children <b>text</b></h2>\n' +
@@ -385,7 +384,6 @@ describe('ReactMount', () => {
       'Warning: Expected server HTML to contain a matching <h2> in <div>.\n\n' +
         '  <div>\n' +
         "    {'nested'}\n" +
-        '    <!-- -->\n' +
         "    {'   '}\n" +
         '    <h1>children <b>text</b></h1>\n' +
         '    <div data-ssr-mismatch-padding="1" />\n' +
@@ -455,7 +453,6 @@ describe('ReactMount', () => {
       "Warning: Expected server HTML to contain a matching text node for {'extra text node'} in <div>.\n\n" +
         '  <div>\n' +
         "    {'nested'}\n" +
-        '    <!-- -->\n' +
         "    {'   '}\n" +
         '    <h1>children <b>text</b></h1>\n' +
         '    <div data-ssr-mismatch-padding="1" />\n' +
@@ -999,7 +996,6 @@ describe('ReactMount', () => {
     ).toWarnDev(
       'Warning: Expected server HTML to contain a matching <span> in <div>.\n\n' +
         '  <div>\n' +
-        '    <!-- a comment -->\n' +
         '+   <span />\n' +
         '  </div>\n\n' +
         '    in span (at **)\n' +
@@ -1022,7 +1018,6 @@ describe('ReactMount', () => {
     ).toWarnDev(
       'Warning: Expected server HTML to contain a matching <span> in <div>.\n\n' +
         '  <div>\n' +
-        '    <!-- a comment <-- --&gt; > -->\n' +
         '-   <div />\n' +
         '+   <span />\n' +
         '  </div>\n\n' +
@@ -1045,7 +1040,6 @@ describe('ReactMount', () => {
     expect(() => ReactDOM.hydrate(<div />, xml)).toWarnDev(
       'Warning: Expected server HTML to contain a matching <div> in <xml>.\n\n' +
         '  <xml>\n' +
-        '    <?dom-processing-instruction content &gt; ?>\n' +
         '+   <div />\n' +
         '  </xml>\n\n' +
         '    in div (at **)',

packages/react-dom/src/client/ReactDOMHostConfig.js

@@ -31,7 +31,6 @@ import {
   DOCUMENT_NODE,
   DOCUMENT_FRAGMENT_NODE,
 } from '../shared/HTMLNodeType';
-import omittedCloseTags from '../shared/omittedCloseTags';
 
 export type Type = string;
 export type Props = {
@@ -44,8 +43,6 @@ export type Props = {
 export type Container = Element | Document;
 export type Instance = Element;
 export type TextInstance = Text;
-export type HydratableInstance = Instance | TextInstance;
-export type HostInstance = HydratableInstance | Container | Node;
 export type PublicInstance = Element | Text;
 type HostContextDev = {
   namespace: string,
@@ -403,31 +400,16 @@ export function removeChildFromContainer(
 
 export const supportsHydration = true;
 
-export function getAllChildHostInstances(
-  parentInstance: HostInstance,
-): HostInstance[] {
-  return [].slice.call(parentInstance.childNodes);
-}
-
-export function getHostInstanceDisplayName(instance: HostInstance): string {
+export function getHostInstanceDisplayName(
+  instance: Container | Instance,
+): string {
   return instance.nodeName.toLowerCase();
 }
 
-export function getHostInstanceDisplayStringForHydrationWarning(
-  instance: HostInstance,
-  printElementOrText: (
-    instanceDisplayName: string | null,
-    instanceProps: Object | null,
-    instanceTextOrHTML: string | {__html: any} | null,
-  ) => string,
-): string {
-  const nodeType = instance.nodeType;
-  if (nodeType === COMMENT_NODE) {
-    return '<!--' + instance.textContent.replace(/-->/g, '--&gt;') + '-->';
-  } else if (nodeType === TEXT_NODE) {
-    // TODO: `instance.textContent` or `instance.nodeValue`?
-    return printElementOrText(null, null, instance.textContent);
-  } else if (nodeType === ELEMENT_NODE) {
+export function getHostInstanceProps(
+  instance: Container | Instance,
+): Object | null {
+  if (instance.nodeType === ELEMENT_NODE) {
     let instanceProps: Object | null = null;
     if (instance instanceof Element) {
       instanceProps = {};
@@ -437,62 +419,14 @@ export function getHostInstanceDisplayStringForHydrationWarning(
         instanceProps[attrs[i].name] = attrs[i].value;
       }
     }
-    let canHaveChildNodes = !omittedCloseTags.hasOwnProperty(
-      instance.nodeName.toLowerCase(),
-    );
-    let hasElementOrTextChildNodes = false;
-    let hasElementChildNodes = false;
-    if (canHaveChildNodes) {
-      const ic = instance.childNodes.length;
-      for (let i = 0; i < ic; ++i) {
-        if (instance.childNodes[i].nodeType === ELEMENT_NODE) {
-          hasElementOrTextChildNodes = true;
-          hasElementChildNodes = true;
-          break;
-        } else if (instance.childNodes[i].nodeType === TEXT_NODE) {
-          hasElementOrTextChildNodes = true;
-        }
-      }
-    }
-    const instanceTextOrHTML =
-      canHaveChildNodes && hasElementOrTextChildNodes
-        ? instance instanceof Element && hasElementChildNodes
-          ? {__html: instance.innerHTML}
-          : instance.textContent
-        : null;
-    return printElementOrText(
-      getHostInstanceDisplayName(instance),
-      instanceProps,
-      instanceTextOrHTML,
-    );
-  } else {
-    // In normal circumstances, we should not reach here.
-    // But while looping over all host nodes in getHydrationDiff, an unexpected nodeType can show up.
-    // Below is a safety net for when we have to display a Node that's not an element, text, or comment.
-    // For example, a PROCESSING_INSTRUCTION_NODE.
-    return (
-      '<?' +
-      instance.nodeName.replace(/>/g, '&gt;') +
-      ' ' +
-      instance.textContent.replace(/>/g, '&gt;') +
-      '?>'
-    );
+    return instanceProps;
   }
+  return null;
 }
 
-export function getHostInstanceClosingDisplayStringForHydrationWarning(
-  instance: HostInstance,
-  printElementClosingTag: (instanceDisplayName: string) => string,
-): string {
-  return printElementClosingTag(getHostInstanceDisplayName(instance));
-}
-
-export function isHydratableInstance(instance: HostInstance): boolean {
-  // Same logic in getNextHydratableSibling, getFirstHydratableChild.
-  return instance.nodeType === ELEMENT_NODE || instance.nodeType === TEXT_NODE;
-}
-
-export function isTextInstance(instance: HostInstance): boolean {
+export function isTextInstance(
+  instance: Container | Instance | TextInstance,
+): boolean {
   return instance.nodeType === TEXT_NODE;
 }
 

packages/react-native-renderer/src/ReactFabricHostConfig.js

@@ -61,8 +61,6 @@ export type Instance = {
 export type TextInstance = {
   node: Node,
 };
-export type HydratableInstance = Instance | TextInstance;
-export type HostInstance = HydratableInstance | Container;
 export type PublicInstance = ReactFabricHostComponent;
 export type ChildSet = Object;
 export type HostContext = $ReadOnly<{|

packages/react-native-renderer/src/ReactNativeHostConfig.js

@@ -34,8 +34,6 @@ export type Instance = {
   viewConfig: ReactNativeBaseComponentViewConfig<>,
 };
 export type TextInstance = number;
-export type HydratableInstance = Instance | TextInstance;
-export type HostInstance = HydratableInstance | Container;
 export type PublicInstance = Instance;
 export type HostContext = $ReadOnly<{|
   isInAParentText: boolean,

packages/react-reconciler/src/ReactFiberHydrationContext.js

@@ -11,7 +11,6 @@ import type {Fiber} from './ReactFiber';
 import type {
   Instance,
   TextInstance,
-  HydratableInstance,
   Container,
   HostContext,
 } from './ReactFiberHostConfig';
@@ -46,7 +45,7 @@ import {
 // The deepest Fiber on the stack involved in a hydration context.
 // This may have been an insertion or a hydration.
 let hydrationParentFiber: null | Fiber = null;
-let nextHydratableInstance: null | HydratableInstance = null;
+let nextHydratableInstance: null | Instance | TextInstance = null;
 let isHydrating: boolean = false;
 
 function enterHydrationState(fiber: Fiber): boolean {
@@ -63,7 +62,7 @@ function enterHydrationState(fiber: Fiber): boolean {
 
 function deleteHydratableInstance(
   returnFiber: Fiber,
-  instance: HydratableInstance,
+  instance: Instance | TextInstance,
 ) {
   if (__DEV__) {
     switch (returnFiber.tag) {