Add ViewTransitionComponent to Stacks and DevTools

Author: sebmarkbage

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

@@ -43,6 +43,7 @@ export function describeFiber(
     SimpleMemoComponent,
     ForwardRef,
     ClassComponent,
+    ViewTransitionComponent,
   } = workTagMap;
 
   switch (workInProgress.tag) {
@@ -57,6 +58,8 @@ export function describeFiber(
       return describeBuiltInComponentFrame('Suspense');
     case SuspenseListComponent:
       return describeBuiltInComponentFrame('SuspenseList');
+    case ViewTransitionComponent:
+      return describeBuiltInComponentFrame('ViewTransition');
     case FunctionComponent:
     case IndeterminateComponent:
     case SimpleMemoComponent:
@@ -150,6 +153,7 @@ export function getOwnerStackByFiberInDev(
     HostComponent,
     SuspenseComponent,
     SuspenseListComponent,
+    ViewTransitionComponent,
   } = workTagMap;
   try {
     let info = '';
@@ -177,6 +181,9 @@ export function getOwnerStackByFiberInDev(
       case SuspenseListComponent:
         info += describeBuiltInComponentFrame('SuspenseList');
         break;
+      case ViewTransitionComponent:
+        info += describeBuiltInComponentFrame('ViewTransition');
+        break;
     }
 
     let owner: void | null | Fiber | ReactComponentInfo = workInProgress;

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

@@ -27,6 +27,7 @@ import {
   ElementTypeSuspense,
   ElementTypeSuspenseList,
   ElementTypeTracingMarker,
+  ElementTypeViewTransition,
   ElementTypeVirtual,
   StrictMode,
 } from 'react-devtools-shared/src/frontend/types';
@@ -383,6 +384,7 @@ export function getInternalReactConstants(version: string): {
       // want to fork again so we're adding it here instead
       YieldComponent: -1, // Removed
       Throw: 29,
+      ViewTransitionComponent: 30, // Experimental
     };
   } else if (gte(version, '17.0.0-alpha')) {
     ReactTypeOfWork = {
@@ -418,6 +420,7 @@ export function getInternalReactConstants(version: string): {
       TracingMarkerComponent: -1, // Doesn't exist yet
       YieldComponent: -1, // Removed
       Throw: -1, // Doesn't exist yet
+      ViewTransitionComponent: -1, // Doesn't exist yet
     };
   } else if (gte(version, '16.6.0-beta.0')) {
     ReactTypeOfWork = {
@@ -453,6 +456,7 @@ export function getInternalReactConstants(version: string): {
       TracingMarkerComponent: -1, // Doesn't exist yet
       YieldComponent: -1, // Removed
       Throw: -1, // Doesn't exist yet
+      ViewTransitionComponent: -1, // Doesn't exist yet
     };
   } else if (gte(version, '16.4.3-alpha')) {
     ReactTypeOfWork = {
@@ -488,6 +492,7 @@ export function getInternalReactConstants(version: string): {
       TracingMarkerComponent: -1, // Doesn't exist yet
       YieldComponent: -1, // Removed
       Throw: -1, // Doesn't exist yet
+      ViewTransitionComponent: -1, // Doesn't exist yet
     };
   } else {
     ReactTypeOfWork = {
@@ -523,6 +528,7 @@ export function getInternalReactConstants(version: string): {
       TracingMarkerComponent: -1, // Doesn't exist yet
       YieldComponent: 9,
       Throw: -1, // Doesn't exist yet
+      ViewTransitionComponent: -1, // Doesn't exist yet
     };
   }
   // **********************************************************
@@ -565,6 +571,7 @@ export function getInternalReactConstants(version: string): {
     SuspenseListComponent,
     TracingMarkerComponent,
     Throw,
+    ViewTransitionComponent,
   } = ReactTypeOfWork;
 
   function resolveFiberType(type: any): $FlowFixMe {
@@ -673,6 +680,8 @@ export function getInternalReactConstants(version: string): {
         return 'Profiler';
       case TracingMarkerComponent:
         return 'TracingMarker';
+      case ViewTransitionComponent:
+        return 'ViewTransition';
       case Throw:
         // This should really never be visible.
         return 'Error';
@@ -907,6 +916,7 @@ export function attach(
     SuspenseListComponent,
     TracingMarkerComponent,
     Throw,
+    ViewTransitionComponent,
   } = ReactTypeOfWork;
   const {
     ImmediatePriority,
@@ -1583,6 +1593,8 @@ export function attach(
         return ElementTypeSuspenseList;
       case TracingMarkerComponent:
         return ElementTypeTracingMarker;
+      case ViewTransitionComponent:
+        return ElementTypeViewTransition;
       default:
         const typeSymbol = getTypeSymbol(type);
 

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

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

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

@@ -49,6 +49,7 @@ export const ElementTypeSuspense = 12;
 export const ElementTypeSuspenseList = 13;
 export const ElementTypeTracingMarker = 14;
 export const ElementTypeVirtual = 15;
+export const ElementTypeViewTransition = 16;
 
 // Different types of elements displayed in the Elements tree.
 // These types may be used to visually distinguish types,

packages/react-reconciler/src/ReactFiberComponentStack.js

@@ -7,7 +7,10 @@
  * @flow
  */
 
-import {enableOwnerStacks} from 'shared/ReactFeatureFlags';
+import {
+  enableOwnerStacks,
+  enableViewTransition,
+} from 'shared/ReactFeatureFlags';
 import type {Fiber} from './ReactInternalTypes';
 import type {ReactComponentInfo} from 'shared/ReactTypes';
 
@@ -23,6 +26,7 @@ import {
   SimpleMemoComponent,
   ClassComponent,
   HostText,
+  ViewTransitionComponent,
 } from './ReactWorkTags';
 import {
   describeBuiltInComponentFrame,
@@ -52,6 +56,11 @@ function describeFiber(fiber: Fiber): string {
       return describeFunctionComponentFrame(fiber.type.render);
     case ClassComponent:
       return describeClassComponentFrame(fiber.type);
+    case ViewTransitionComponent:
+      if (enableViewTransition) {
+        return describeBuiltInComponentFrame('ViewTransition');
+      }
+    // Fallthrough
     default:
       return '';
   }
@@ -123,6 +132,12 @@ export function getOwnerStackByFiberInDev(workInProgress: Fiber): string {
       case SuspenseListComponent:
         info += describeBuiltInComponentFrame('SuspenseList');
         break;
+      case ViewTransitionComponent:
+        if (enableViewTransition) {
+          info += describeBuiltInComponentFrame('SuspenseList');
+          break;
+        }
+      // Fallthrough
       case FunctionComponent:
       case SimpleMemoComponent:
       case ClassComponent:

packages/react-reconciler/src/getComponentNameFromFiber.js

@@ -14,6 +14,7 @@ import {
   disableLegacyMode,
   enableLegacyHidden,
   enableRenderableContext,
+  enableViewTransition,
 } from 'shared/ReactFeatureFlags';
 
 import {
@@ -45,6 +46,7 @@ import {
   CacheComponent,
   TracingMarkerComponent,
   Throw,
+  ViewTransitionComponent,
 } from 'react-reconciler/src/ReactWorkTags';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import {REACT_STRICT_MODE_TYPE} from 'shared/ReactSymbols';
@@ -139,7 +141,12 @@ export default function getComponentNameFromFiber(fiber: Fiber): string | null {
       return 'SuspenseList';
     case TracingMarkerComponent:
       return 'TracingMarker';
+    case ViewTransitionComponent:
+      if (enableViewTransition) {
+        return 'ViewTransition';
+      }
     // The display name for these tags come from the user-provided type:
+    // Fallthrough
     case IncompleteClassComponent:
     case IncompleteFunctionComponent:
       if (disableLegacyMode) {