Have the renderer refine Hydratable Instance to Instance or Text Instance

Currently we assume that if canHydrateInstance or canHydrateTextInstance
returns true, then the types also match up. But we don't tell that to Flow.

It just happens to work because `fiber.stateNode` is still `any`.

We could potentially use some kind of predicate typing but instead
of that I can just return null or instance from the "can" tests.

This ensures that the renderer has to do the refinement properly.

Author: sebmarkbage

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

@@ -459,22 +459,27 @@ const DOMRenderer = ReactFiberReconciler({
       instance: Instance | TextInstance,
       type: string,
       props: Props,
-    ): boolean {
-      return (
-        instance.nodeType === ELEMENT_NODE &&
-        type.toLowerCase() === instance.nodeName.toLowerCase()
-      );
+    ): null | Instance {
+      if (
+        instance.nodeType !== ELEMENT_NODE ||
+        type.toLowerCase() !== instance.nodeName.toLowerCase()
+      ) {
+        return null;
+      }
+      // This has now been refined to an element node.
+      return ((instance: any): Instance);
     },
 
     canHydrateTextInstance(
       instance: Instance | TextInstance,
       text: string,
-    ): boolean {
-      if (text === '') {
+    ): null | TextInstance {
+      if (text === '' || instance.nodeType !== TEXT_NODE) {
         // Empty strings are not parsed by HTML so there won't be a correct match here.
-        return false;
+        return null;
       }
-      return instance.nodeType === TEXT_NODE;
+      // This has now been refined to a text node.
+      return ((instance: any): TextInstance);
     },
 
     getNextHydratableSibling(

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

@@ -8,8 +8,7 @@
  */
 
 // TODO: direct imports like some-package/src/* are bad. Fix me.
-import ReactDebugCurrentFiber
-  from 'react-reconciler/src/ReactDebugCurrentFiber';
+import ReactDebugCurrentFiber from 'react-reconciler/src/ReactDebugCurrentFiber';
 import {registrationNameModules} from 'events/EventPluginRegistry';
 import emptyFunction from 'fbjs/lib/emptyFunction';
 import warning from 'fbjs/lib/warning';
@@ -29,15 +28,9 @@ import {getPropertyInfo, shouldSetAttribute} from '../shared/DOMProperty';
 import assertValidProps from '../shared/assertValidProps';
 import {DOCUMENT_NODE, DOCUMENT_FRAGMENT_NODE} from '../shared/HTMLNodeType';
 import isCustomComponent from '../shared/isCustomComponent';
-import {
-  validateProperties as validateARIAProperties,
-} from '../shared/ReactDOMInvalidARIAHook';
-import {
-  validateProperties as validateInputProperties,
-} from '../shared/ReactDOMNullInputValuePropHook';
-import {
-  validateProperties as validateUnknownProperties,
-} from '../shared/ReactDOMUnknownPropertyHook';
+import {validateProperties as validateARIAProperties} from '../shared/ReactDOMInvalidARIAHook';
+import {validateProperties as validateInputProperties} from '../shared/ReactDOMNullInputValuePropHook';
+import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook';
 
 var {
   getCurrentFiberOwnerName,
@@ -86,9 +79,8 @@ if (__DEV__) {
   var NORMALIZE_NULL_AND_REPLACEMENT_REGEX = /\u0000|\uFFFD/g;
 
   var normalizeMarkupForTextOrAttribute = function(markup: mixed): string {
-    const markupString = typeof markup === 'string'
-      ? markup
-      : '' + (markup: any);
+    const markupString =
+      typeof markup === 'string' ? markup : '' + (markup: any);
     return markupString
       .replace(NORMALIZE_NEWLINES_REGEX, '\n')
       .replace(NORMALIZE_NULL_AND_REPLACEMENT_REGEX, '');
@@ -184,12 +176,13 @@ if (__DEV__) {
     // re-initializing custom elements if they exist. But this breaks
     // how <noscript> is being handled. So we use the same document.
     // See the discussion in https://github.com/facebook/react/pull/11157.
-    var testElement = parent.namespaceURI === HTML_NAMESPACE
-      ? parent.ownerDocument.createElement(parent.tagName)
-      : parent.ownerDocument.createElementNS(
-          (parent.namespaceURI: any),
-          parent.tagName,
-        );
+    var testElement =
+      parent.namespaceURI === HTML_NAMESPACE
+        ? parent.ownerDocument.createElement(parent.tagName)
+        : parent.ownerDocument.createElementNS(
+            (parent.namespaceURI: any),
+            parent.tagName,
+          );
     testElement.innerHTML = html;
     return testElement.innerHTML;
   };

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

@@ -37,8 +37,10 @@ import findNumericNodeHandle from './findNumericNodeHandle';
  *
  * @abstract
  */
-class ReactNativeComponent<DefaultProps, Props, State>
-  extends React.Component<Props, State> {
+class ReactNativeComponent<DefaultProps, Props, State> extends React.Component<
+  Props,
+  State,
+> {
   static defaultProps: DefaultProps;
   props: Props;
   state: State;

packages/react-reconciler/src/ReactFiberCommitWork.js

@@ -119,9 +119,8 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
       case HostRoot: {
         const updateQueue = finishedWork.updateQueue;
         if (updateQueue !== null) {
-          const instance = finishedWork.child !== null
-            ? finishedWork.child.stateNode
-            : null;
+          const instance =
+            finishedWork.child !== null ? finishedWork.child.stateNode : null;
           commitCallbacks(updateQueue, instance);
         }
         return;
@@ -622,9 +621,8 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
         // For hydration we reuse the update path but we treat the oldProps
         // as the newProps. The updatePayload will contain the real change in
         // this case.
-        const oldText: string = current !== null
-          ? current.memoizedProps
-          : newText;
+        const oldText: string =
+          current !== null ? current.memoizedProps : newText;
         commitTextUpdate(textInstance, oldText, newText);
         return;
       }

packages/react-reconciler/src/ReactFiberHydrationContext.js

@@ -188,16 +188,26 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
     }
   }
 
-  function canHydrate(fiber, nextInstance) {
+  function tryHydrate(fiber, nextInstance) {
     switch (fiber.tag) {
       case HostComponent: {
         const type = fiber.type;
         const props = fiber.pendingProps;
-        return canHydrateInstance(nextInstance, type, props);
+        const instance = canHydrateInstance(nextInstance, type, props);
+        if (instance !== null) {
+          fiber.stateNode = (instance: I);
+          return true;
+        }
+        return false;
       }
       case HostText: {
         const text = fiber.pendingProps;
-        return canHydrateTextInstance(nextInstance, text);
+        const textInstance = canHydrateTextInstance(nextInstance, text);
+        if (textInstance !== null) {
+          fiber.stateNode = (textInstance: TI);
+          return true;
+        }
+        return false;
       }
       default:
         return false;
@@ -216,12 +226,12 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
       hydrationParentFiber = fiber;
       return;
     }
-    if (!canHydrate(fiber, nextInstance)) {
+    if (!tryHydrate(fiber, nextInstance)) {
       // If we can't hydrate this instance let's try the next one.
       // We use this as a heuristic. It's based on intuition and not data so it
       // might be flawed or unnecessary.
       nextInstance = getNextHydratableSibling(nextInstance);
-      if (!nextInstance || !canHydrate(fiber, nextInstance)) {
+      if (!nextInstance || !tryHydrate(fiber, nextInstance)) {
         // Nothing to hydrate. Make it an insertion.
         insertNonHydratedInstance((hydrationParentFiber: any), fiber);
         isHydrating = false;
@@ -237,7 +247,6 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
         nextHydratableInstance,
       );
     }
-    fiber.stateNode = nextInstance;
     hydrationParentFiber = fiber;
     nextHydratableInstance = getFirstHydratableChild(nextInstance);
   }

packages/react-reconciler/src/ReactFiberReconciler.js

@@ -152,8 +152,8 @@ type PersistentUpdatesHostConfig<T, P, I, TI, C, CC, PL> = {
 
 type HydrationHostConfig<T, P, I, TI, HI, C, CX, PL> = {
   // Optional hydration
-  canHydrateInstance(instance: HI, type: T, props: P): boolean,
-  canHydrateTextInstance(instance: HI, text: string): boolean,
+  canHydrateInstance(instance: HI, type: T, props: P): null | I,
+  canHydrateTextInstance(instance: HI, text: string): null | TI,
   getNextHydratableSibling(instance: I | TI | HI): null | HI,
   getFirstHydratableChild(parentInstance: I | C): null | HI,
   hydrateInstance(

packages/react-reconciler/src/ReactFiberScheduler.js

@@ -13,9 +13,7 @@ import type {FiberRoot} from './ReactFiberRoot';
 import type {HydrationContext} from './ReactFiberHydrationContext';
 import type {ExpirationTime} from './ReactFiberExpirationTime';
 
-import {
-  getStackAddendumByWorkInProgressFiber,
-} from 'shared/ReactFiberComponentTreeHook';
+import {getStackAddendumByWorkInProgressFiber} from 'shared/ReactFiberComponentTreeHook';
 import ReactErrorUtils from 'shared/ReactErrorUtils';
 import {ReactCurrentOwner} from 'shared/ReactGlobalSharedState';
 import {