Pass parent type and props to insert/delete hydration warning hooks

For this to work, we need to split the API into a container and normal
version. Since the root doesn't have a type nor props.

src/renderers/dom/fiber/ReactDOMFiberEntry.js

@@ -523,8 +523,21 @@ var DOMRenderer = ReactFiberReconciler({
     return diffHydratedText(textInstance, text);
   },
 
+  didNotHydrateContainerInstance(
+    parentContainer: Container,
+    instance: Instance | TextInstance,
+  ) {
+    if (instance.nodeType === 1) {
+      warnForDeletedHydratableElement(parentContainer, (instance: any));
+    } else {
+      warnForDeletedHydratableText(parentContainer, (instance: any));
+    }
+  },
+
   didNotHydrateInstance(
-    parentInstance: Instance | Container,
+    parentType: string,
+    parentProps: Props,
+    parentInstance: Instance,
     instance: Instance | TextInstance,
   ) {
     if (instance.nodeType === 1) {
@@ -534,16 +547,35 @@ var DOMRenderer = ReactFiberReconciler({
     }
   },
 
+  didNotFindHydratableContainerInstance(
+    parentContainer: Container,
+    type: string,
+    props: Props,
+  ) {
+    warnForInsertedHydratedElement(parentContainer, type, props);
+  },
+
+  didNotFindHydratableContainerTextInstance(
+    parentContainer: Container,
+    text: string,
+  ) {
+    warnForInsertedHydratedText(parentContainer, text);
+  },
+
   didNotFindHydratableInstance(
-    parentInstance: Instance | Container,
+    parentType: string,
+    parentProps: Props,
+    parentInstance: Instance,
     type: string,
     props: Props,
   ) {
     warnForInsertedHydratedElement(parentInstance, type, props);
   },
 
   didNotFindHydratableTextInstance(
-    parentInstance: Instance | Container,
+    parentType: string,
+    parentProps: Props,
+    parentInstance: Instance,
     text: string,
   ) {
     warnForInsertedHydratedText(parentInstance, text);

src/renderers/shared/fiber/ReactFiberHydrationContext.js

@@ -44,7 +44,11 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
     getFirstHydratableChild,
     hydrateInstance,
     hydrateTextInstance,
+    didNotHydrateContainerInstance,
     didNotHydrateInstance,
+    // TODO: These are currently unused, see below.
+    // didNotFindHydratableContainerInstance,
+    // didNotFindHydratableContainerTextInstance,
     didNotFindHydratableInstance,
     didNotFindHydratableTextInstance,
   } = config;
@@ -57,7 +61,10 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
       getFirstHydratableChild &&
       hydrateInstance &&
       hydrateTextInstance &&
+      didNotHydrateContainerInstance &&
       didNotHydrateInstance &&
+      // didNotFindHydratableContainerInstance &&
+      //  didNotFindHydratableContainerTextInstance &&
       didNotFindHydratableInstance &&
       didNotFindHydratableTextInstance)
   ) {
@@ -105,10 +112,18 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
     if (__DEV__) {
       switch (returnFiber.tag) {
         case HostRoot:
-          didNotHydrateInstance(returnFiber.stateNode.containerInfo, instance);
+          didNotHydrateContainerInstance(
+            returnFiber.stateNode.containerInfo,
+            instance,
+          );
           break;
         case HostComponent:
-          didNotHydrateInstance(returnFiber.stateNode, instance);
+          didNotHydrateInstance(
+            returnFiber.type,
+            returnFiber.memoizedProps,
+            returnFiber.stateNode,
+            instance,
+          );
           break;
       }
     }
@@ -134,32 +149,57 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
   function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
     fiber.effectTag |= Placement;
     if (__DEV__) {
-      var parentInstance;
       switch (returnFiber.tag) {
         // TODO: Currently we don't warn for insertions into the root because
         // we always insert into the root in the non-hydrating case. We just
         // delete the existing content. Reenable this once we have a better
         // strategy for determining if we're hydrating or not.
-        // case HostRoot:
-        //   parentInstance = returnFiber.stateNode.containerInfo;
+        // case HostRoot: {
+        //   const parentContainer = returnFiber.stateNode.containerInfo;
+        //   switch (fiber.tag) {
+        //     case HostComponent:
+        //       const type = fiber.type;
+        //       const props = fiber.pendingProps;
+        //       didNotFindHydratableContainerInstance(parentContainer, type, props);
+        //       break;
+        //     case HostText:
+        //       const text = fiber.pendingProps;
+        //       didNotFindHydratableContainerTextInstance(parentContainer, text);
+        //       break;
+        //   }
         //   break;
-        case HostComponent:
-          parentInstance = returnFiber.stateNode;
+        // }
+        case HostComponent: {
+          const parentType = returnFiber.type;
+          const parentProps = returnFiber.memoizedProps;
+          const parentInstance = returnFiber.stateNode;
+          switch (fiber.tag) {
+            case HostComponent:
+              const type = fiber.type;
+              const props = fiber.pendingProps;
+              didNotFindHydratableInstance(
+                parentType,
+                parentProps,
+                parentInstance,
+                type,
+                props,
+              );
+              break;
+            case HostText:
+              const text = fiber.pendingProps;
+              didNotFindHydratableTextInstance(
+                parentType,
+                parentProps,
+                parentInstance,
+                text,
+              );
+              break;
+          }
           break;
+        }
         default:
           return;
       }
-      switch (fiber.tag) {
-        case HostComponent:
-          const type = fiber.type;
-          const props = fiber.pendingProps;
-          didNotFindHydratableInstance(parentInstance, type, props);
-          break;
-        case HostText:
-          const text = fiber.pendingProps;
-          didNotFindHydratableTextInstance(parentInstance, text);
-          break;
-      }
     }
   }
 

src/renderers/shared/fiber/ReactFiberReconciler.js

@@ -139,14 +139,36 @@ export type HostConfig<T, P, I, TI, PI, C, CX, PL> = {
     text: string,
     internalInstanceHandle: OpaqueHandle,
   ) => boolean,
-  didNotHydrateInstance?: (parentInstance: I | C, instance: I | TI) => void,
+  didNotHydrateContainerInstance?: (
+    parentContainer: C,
+    instance: I | TI,
+  ) => void,
+  didNotHydrateInstance?: (
+    parentType: T,
+    parentProps: P,
+    parentInstance: I,
+    instance: I | TI,
+  ) => void,
+  didNotFindHydratableContainerInstance?: (
+    parentContainer: C,
+    type: T,
+    props: P,
+  ) => void,
+  didNotFindHydratableContainerTextInstance?: (
+    parentContainer: C,
+    text: string,
+  ) => void,
   didNotFindHydratableInstance?: (
-    parentInstance: I | C,
+    parentType: T,
+    parentProps: P,
+    parentInstance: I,
     type: T,
     props: P,
   ) => void,
   didNotFindHydratableTextInstance?: (
-    parentInstance: I | C,
+    parentType: T,
+    parentProps: P,
+    parentInstance: I,
     text: string,
   ) => void,