From 818788e7091847d276615e93f065fabc525833c5 Mon Sep 17 00:00:00 2001 From: Sebastian Markbage Date: Thu, 9 Jan 2025 10:55:16 -0500 Subject: [PATCH] Add ViewTransitionComponent to Stacks and DevTools --- .../fiber/DevToolsFiberComponentStack.js | 7 +++++++ .../src/backend/fiber/renderer.js | 12 ++++++++++++ .../react-devtools-shared/src/backend/types.js | 1 + .../react-devtools-shared/src/frontend/types.js | 4 +++- .../src/ReactFiberComponentStack.js | 17 ++++++++++++++++- .../src/getComponentNameFromFiber.js | 7 +++++++ 6 files changed, 46 insertions(+), 2 deletions(-) diff --git a/packages/react-devtools-shared/src/backend/fiber/DevToolsFiberComponentStack.js b/packages/react-devtools-shared/src/backend/fiber/DevToolsFiberComponentStack.js index 17475cab2860f..46e479905afbb 100644 --- a/packages/react-devtools-shared/src/backend/fiber/DevToolsFiberComponentStack.js +++ b/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; diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index e1bd7881326cf..ef8bac0099a2b 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/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); diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js index 9d9d9a8eb5e65..7b0d801026acc 100644 --- a/packages/react-devtools-shared/src/backend/types.js +++ b/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; diff --git a/packages/react-devtools-shared/src/frontend/types.js b/packages/react-devtools-shared/src/frontend/types.js index 6216283301bf5..302b168bd6eb0 100644 --- a/packages/react-devtools-shared/src/frontend/types.js +++ b/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, @@ -66,7 +67,8 @@ export type ElementType = | 12 | 13 | 14 - | 15; + | 15 + | 16; // WARNING // The values below are referenced by ComponentFilters (which are saved via localStorage). diff --git a/packages/react-reconciler/src/ReactFiberComponentStack.js b/packages/react-reconciler/src/ReactFiberComponentStack.js index ac2cdf20a4cd6..8385cbf63e74a 100644 --- a/packages/react-reconciler/src/ReactFiberComponentStack.js +++ b/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: diff --git a/packages/react-reconciler/src/getComponentNameFromFiber.js b/packages/react-reconciler/src/getComponentNameFromFiber.js index cac247f26912b..04ad072c2583f 100644 --- a/packages/react-reconciler/src/getComponentNameFromFiber.js +++ b/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) {