[wip] Replace LegacyHidden with Activity mode

packages/react-devtools-shared/src/backend/fiber/renderer.js

@@ -146,6 +146,7 @@ import type {
 import type {Source} from 'react-devtools-shared/src/shared/types';
 import {getSourceLocationByFiber} from './DevToolsFiberComponentStack';
 import {formatOwnerStack} from '../shared/DevToolsOwnerStack';
+import {ActivityComponent} from 'react-reconciler/src/ReactWorkTags';
 
 // Kinds
 const FIBER_INSTANCE = 0;
@@ -385,6 +386,7 @@ export function getInternalReactConstants(version: string): {
       YieldComponent: -1, // Removed
       Throw: 29,
       ViewTransitionComponent: 30, // Experimental
+      ActivityComponent: 31,
     };
   } else if (gte(version, '17.0.0-alpha')) {
     ReactTypeOfWork = {
@@ -421,6 +423,7 @@ export function getInternalReactConstants(version: string): {
       YieldComponent: -1, // Removed
       Throw: -1, // Doesn't exist yet
       ViewTransitionComponent: -1, // Doesn't exist yet
+      ActivityComponent: -1, // Doesn't exist yet
     };
   } else if (gte(version, '16.6.0-beta.0')) {
     ReactTypeOfWork = {
@@ -457,6 +460,7 @@ export function getInternalReactConstants(version: string): {
       YieldComponent: -1, // Removed
       Throw: -1, // Doesn't exist yet
       ViewTransitionComponent: -1, // Doesn't exist yet
+      ActivityComponent: -1, // Doesn't exist yet
     };
   } else if (gte(version, '16.4.3-alpha')) {
     ReactTypeOfWork = {
@@ -493,6 +497,7 @@ export function getInternalReactConstants(version: string): {
       YieldComponent: -1, // Removed
       Throw: -1, // Doesn't exist yet
       ViewTransitionComponent: -1, // Doesn't exist yet
+      ActivityComponent: -1, // Doesn't exist yet
     };
   } else {
     ReactTypeOfWork = {
@@ -529,6 +534,7 @@ export function getInternalReactConstants(version: string): {
       YieldComponent: 9,
       Throw: -1, // Doesn't exist yet
       ViewTransitionComponent: -1, // Doesn't exist yet
+      ActivityComponent: -1, // Doesn't exist yet
     };
   }
   // **********************************************************
@@ -622,6 +628,8 @@ export function getInternalReactConstants(version: string): {
     }
 
     switch (tag) {
+      case ActivityComponent:
+        return 'Activity';
       case CacheComponent:
         return 'Cache';
       case ClassComponent:
@@ -1480,6 +1488,7 @@ export function attach(
         return true;
       case HostPortal:
       case HostText:
+      case ActivityComponent:
       case LegacyHiddenComponent:
       case OffscreenComponent:
       case Throw:

packages/react-devtools-shared/src/backend/types.js

@@ -77,6 +77,7 @@ export type WorkTagMap = {
   YieldComponent: WorkTag,
   Throw: WorkTag,
   ViewTransitionComponent: WorkTag,
+  ActivityComponent: WorkTag,
 };
 
 export type HostInstance = Object;

packages/react-reconciler/src/ReactFiber.js

@@ -72,6 +72,7 @@ import {
   TracingMarkerComponent,
   Throw,
   ViewTransitionComponent,
+  ActivityComponent,
 } from './ReactWorkTags';
 import {OffscreenVisible} from './ReactFiberActivityComponent';
 import {getComponentNameFromOwner} from 'react-reconciler/src/getComponentNameFromFiber';
@@ -108,6 +109,7 @@ import {
   REACT_TRACING_MARKER_TYPE,
   REACT_ELEMENT_TYPE,
   REACT_VIEW_TRANSITION_TYPE,
+  REACT_ACTIVITY_TYPE,
 } from 'shared/ReactSymbols';
 import {TransitionTracingMarker} from './ReactFiberTracingMarkerComponent';
 import {
@@ -595,6 +597,8 @@ export function createFiberFromTypeAndProps(
     }
   } else {
     getTag: switch (type) {
+      case REACT_ACTIVITY_TYPE:
+        return createFiberFromActivity(pendingProps, mode, lanes, key);
       case REACT_FRAGMENT_TYPE:
         return createFiberFromFragment(pendingProps.children, mode, lanes, key);
       case REACT_STRICT_MODE_TYPE:
@@ -874,6 +878,17 @@ export function createFiberFromOffscreen(
   fiber.stateNode = primaryChildInstance;
   return fiber;
 }
+export function createFiberFromActivity(
+  pendingProps: OffscreenProps,
+  mode: TypeOfMode,
+  lanes: Lanes,
+  key: null | string,
+): Fiber {
+  const fiber = createFiber(ActivityComponent, pendingProps, key, mode);
+  fiber.elementType = REACT_ACTIVITY_TYPE;
+  fiber.lanes = lanes;
+  return fiber;
+}
 
 export function createFiberFromViewTransition(
   pendingProps: ViewTransitionProps,

packages/react-reconciler/src/ReactFiberActivityComponent.js

@@ -69,3 +69,12 @@ export function isOffscreenManual(offscreenFiber: Fiber): boolean {
     offscreenFiber.memoizedProps.mode === 'manual'
   );
 }
+
+export function isLegacyHiddenMode(fiber: Fiber): boolean {
+  return (
+    fiber != null &&
+    fiber.memoizedProps != null &&
+    (fiber.memoizedProps.mode === 'unstable-legacy-hidden' ||
+      fiber.memoizedProps.mode === 'unstable-defer-without-hiding')
+  );
+}

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -77,6 +77,7 @@ import {
   TracingMarkerComponent,
   Throw,
   ViewTransitionComponent,
+  ActivityComponent,
 } from './ReactWorkTags';
 import {
   NoFlags,
@@ -303,6 +304,7 @@ import {
   callComponentInDEV,
   callRenderInDEV,
 } from './ReactFiberCallUserSpace';
+import {enableReplaceLegacyHiddenWithActivity} from 'shared/ReactFeatureFlags';
 
 // A special exception that's used to unwind the stack when an update flows
 // into a dehydrated boundary.
@@ -658,6 +660,8 @@ function updateOffscreenComponent(
     nextProps.mode === 'hidden' ||
     (enableLegacyHidden &&
       nextProps.mode === 'unstable-defer-without-hiding') ||
+    (enableReplaceLegacyHiddenWithActivity &&
+      nextProps.mode === 'unstable-legacy-hidden') ||
     nextIsDetached
   ) {
     // Rendering a hidden tree.
@@ -867,6 +871,46 @@ function deferHiddenOffscreenComponent(
 // fork the function.
 const updateLegacyHiddenComponent = updateOffscreenComponent;
 
+function updateActivityComponent(
+  current: null | Fiber,
+  workInProgress: Fiber,
+  renderLanes: Lanes,
+) {
+  const nextProps = workInProgress.pendingProps;
+  const nextChildren = nextProps.children;
+  const nextMode = nextProps.mode;
+  const mode = workInProgress.mode;
+  const offscreenChildProps: OffscreenProps = {
+    mode: nextMode,
+    children: nextChildren,
+  };
+
+  if (current === null) {
+    const primaryChildFragment = mountWorkInProgressOffscreenFiber(
+      offscreenChildProps,
+      mode,
+      renderLanes,
+    );
+    primaryChildFragment.ref = workInProgress.ref;
+    workInProgress.child = primaryChildFragment;
+    primaryChildFragment.return = workInProgress;
+
+    return primaryChildFragment;
+  } else {
+    const currentChild: Fiber = (current.child: any);
+
+    const primaryChildFragment = updateWorkInProgressOffscreenFiber(
+      currentChild,
+      offscreenChildProps,
+    );
+
+    primaryChildFragment.ref = workInProgress.ref;
+    workInProgress.child = primaryChildFragment;
+    primaryChildFragment.return = workInProgress;
+    return primaryChildFragment;
+  }
+}
+
 function updateCacheComponent(
   current: Fiber | null,
   workInProgress: Fiber,
@@ -4024,6 +4068,9 @@ function beginWork(
       }
       break;
     }
+    case ActivityComponent: {
+      return updateActivityComponent(current, workInProgress, renderLanes);
+    }
     case OffscreenComponent: {
       return updateOffscreenComponent(current, workInProgress, renderLanes);
     }