Differentiate SuspenseInstance vs ActivityInstance comment node

So we can warn for mismatching Suspense vs Activity.

Author: sebmarkbage

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

@@ -3042,10 +3042,10 @@ export function canHydrateTextInstance(
   return ((instance: any): TextInstance);
 }
 
-function canHydrateHydrationBoundary<T: SuspenseInstance | ActivityInstance>(
+function canHydrateHydrationBoundary(
   instance: HydratableInstance,
   inRootOrSingleton: boolean,
-): null | T {
+): null | SuspenseInstance | ActivityInstance {
   while (instance.nodeType !== COMMENT_NODE) {
     if (!inRootOrSingleton) {
       return null;
@@ -3056,24 +3056,42 @@ function canHydrateHydrationBoundary<T: SuspenseInstance | ActivityInstance>(
     }
     instance = nextInstance;
   }
-  // This has now been refined to a suspense node.
-  return ((instance: any): T);
+  // This has now been refined to a hydration boundary node.
+  return (instance: any);
 }
 
 export function canHydrateActivityInstance(
   instance: HydratableInstance,
   inRootOrSingleton: boolean,
 ): null | ActivityInstance {
-  // $FlowFixMe: This should be inferred. I can't pass explicit since it breaks build tooling.
-  return canHydrateHydrationBoundary(instance, inRootOrSingleton);
+  const hydratableInstance = canHydrateHydrationBoundary(
+    instance,
+    inRootOrSingleton,
+  );
+  if (
+    hydratableInstance !== null &&
+    hydratableInstance.data === ACTIVITY_START_DATA
+  ) {
+    return (hydratableInstance: any);
+  }
+  return null;
 }
 
 export function canHydrateSuspenseInstance(
   instance: HydratableInstance,
   inRootOrSingleton: boolean,
 ): null | SuspenseInstance {
-  // $FlowFixMe: This should be inferred. I can't pass explicit since it breaks build tooling.
-  return canHydrateHydrationBoundary(instance, inRootOrSingleton);
+  const hydratableInstance = canHydrateHydrationBoundary(
+    instance,
+    inRootOrSingleton,
+  );
+  if (
+    hydratableInstance !== null &&
+    hydratableInstance.data !== ACTIVITY_START_DATA
+  ) {
+    return (hydratableInstance: any);
+  }
+  return null;
 }
 
 export function isSuspenseInstancePending(instance: SuspenseInstance): boolean {
@@ -3299,6 +3317,12 @@ export function describeHydratableInstanceForDevWarnings(
       props: getPropsFromElement((instance: any)),
     };
   } else if (instance.nodeType === COMMENT_NODE) {
+    if (instance.data === ACTIVITY_START_DATA) {
+      return {
+        type: 'Activity',
+        props: {},
+      };
+    }
     return {
       type: 'Suspense',
       props: {},

packages/react-reconciler/src/ReactFiberHydrationDiffs.js

@@ -14,6 +14,7 @@ import {
   HostHoistable,
   HostSingleton,
   LazyComponent,
+  ActivityComponent,
   SuspenseComponent,
   SuspenseListComponent,
   FunctionComponent,
@@ -83,6 +84,8 @@ function describeFiberType(fiber: Fiber): null | string {
       return fiber.type;
     case LazyComponent:
       return 'Lazy';
+    case ActivityComponent:
+      return 'Activity';
     case SuspenseComponent:
       return 'Suspense';
     case SuspenseListComponent: