Add ViewTransitionComponent to Stacks and DevTools (#32034)
Just adding the name so it shows up. (Note that no experimental ones are added to the list of filters atm. Including SuspenseList etc.)
Sebastian Markbåge committed
Jan 9, 2025 at 11:33 UTC
c4595ca4c86a2a0795bf4d6d5ca4e074babf7fc3
6 files changed
+46
-2
packages/react-devtools-shared/src/backend/fiber/DevToolsFiberComponentStack.js
+7
@@ -43,6 +43,7 @@ export function describeFiber(
43
SimpleMemoComponent,
44
ForwardRef,
45
ClassComponent,
46
+ ViewTransitionComponent,
47
} = workTagMap;
48
49
switch (workInProgress.tag) {
@@ -57,6 +58,8 @@ export function describeFiber(
58
return describeBuiltInComponentFrame('Suspense');
59
case SuspenseListComponent:
60
return describeBuiltInComponentFrame('SuspenseList');
61
+ case ViewTransitionComponent:
62
+ return describeBuiltInComponentFrame('ViewTransition');
63
case FunctionComponent:
64
case IndeterminateComponent:
65
case SimpleMemoComponent:
@@ -150,6 +153,7 @@ export function getOwnerStackByFiberInDev(
153
HostComponent,
154
SuspenseComponent,
155
SuspenseListComponent,
156
+ ViewTransitionComponent,
157
} = workTagMap;
158
try {
159
let info = '';
@@ -177,6 +181,9 @@ export function getOwnerStackByFiberInDev(
181
case SuspenseListComponent:
182
info += describeBuiltInComponentFrame('SuspenseList');
183
break;
184
+ case ViewTransitionComponent:
185
+ info += describeBuiltInComponentFrame('ViewTransition');
186
+ break;
187
}
188
189
let owner: void | null | Fiber | ReactComponentInfo = workInProgress;
packages/react-devtools-shared/src/backend/fiber/renderer.js
+12
@@ -27,6 +27,7 @@ import {
27
ElementTypeSuspense,
28
ElementTypeSuspenseList,
29
ElementTypeTracingMarker,
30
+ ElementTypeViewTransition,
31
ElementTypeVirtual,
32
StrictMode,
33
} from 'react-devtools-shared/src/frontend/types';
@@ -383,6 +384,7 @@ export function getInternalReactConstants(version: string): {
384
// want to fork again so we're adding it here instead
385
YieldComponent: -1, // Removed
386
Throw: 29,
387
+ ViewTransitionComponent: 30, // Experimental
388
};
389
} else if (gte(version, '17.0.0-alpha')) {
390
ReactTypeOfWork = {
@@ -418,6 +420,7 @@ export function getInternalReactConstants(version: string): {
420
TracingMarkerComponent: -1, // Doesn't exist yet
421
YieldComponent: -1, // Removed
422
Throw: -1, // Doesn't exist yet
423
+ ViewTransitionComponent: -1, // Doesn't exist yet
424
};
425
} else if (gte(version, '16.6.0-beta.0')) {
426
ReactTypeOfWork = {
@@ -453,6 +456,7 @@ export function getInternalReactConstants(version: string): {
456
TracingMarkerComponent: -1, // Doesn't exist yet
457
YieldComponent: -1, // Removed
458
Throw: -1, // Doesn't exist yet
459
+ ViewTransitionComponent: -1, // Doesn't exist yet
460
};
461
} else if (gte(version, '16.4.3-alpha')) {
462
ReactTypeOfWork = {
@@ -488,6 +492,7 @@ export function getInternalReactConstants(version: string): {
492
TracingMarkerComponent: -1, // Doesn't exist yet
493
YieldComponent: -1, // Removed
494
Throw: -1, // Doesn't exist yet
495
+ ViewTransitionComponent: -1, // Doesn't exist yet
496
};
497
} else {
498
ReactTypeOfWork = {
@@ -523,6 +528,7 @@ export function getInternalReactConstants(version: string): {
528
TracingMarkerComponent: -1, // Doesn't exist yet
529
YieldComponent: 9,
530
Throw: -1, // Doesn't exist yet
531
+ ViewTransitionComponent: -1, // Doesn't exist yet
532
};
533
}
534
// **********************************************************
@@ -565,6 +571,7 @@ export function getInternalReactConstants(version: string): {
571
SuspenseListComponent,
572
TracingMarkerComponent,
573
Throw,
574
+ ViewTransitionComponent,
575
} = ReactTypeOfWork;
576
577
function resolveFiberType(type: any): $FlowFixMe {
@@ -673,6 +680,8 @@ export function getInternalReactConstants(version: string): {
680
return 'Profiler';
681
case TracingMarkerComponent:
682
return 'TracingMarker';
683
+ case ViewTransitionComponent:
684
+ return 'ViewTransition';
685
case Throw:
686
// This should really never be visible.
687
return 'Error';
@@ -907,6 +916,7 @@ export function attach(
916
SuspenseListComponent,
917
TracingMarkerComponent,
918
Throw,
919
+ ViewTransitionComponent,
920
} = ReactTypeOfWork;
921
const {
922
ImmediatePriority,
@@ -1583,6 +1593,8 @@ export function attach(
1593
return ElementTypeSuspenseList;
1594
case TracingMarkerComponent:
1595
return ElementTypeTracingMarker;
1596
+ case ViewTransitionComponent:
1597
+ return ElementTypeViewTransition;
1598
default:
1599
const typeSymbol = getTypeSymbol(type);
1600
packages/react-devtools-shared/src/backend/types.js
+1
@@ -76,6 +76,7 @@ export type WorkTagMap = {
76
TracingMarkerComponent: WorkTag,
77
YieldComponent: WorkTag,
78
Throw: WorkTag,
79
+ ViewTransitionComponent: WorkTag,
80
};
81
82
export type HostInstance = Object;
packages/react-devtools-shared/src/frontend/types.js
+3
-1
@@ -49,6 +49,7 @@ export const ElementTypeSuspense = 12;
49
export const ElementTypeSuspenseList = 13;
50
export const ElementTypeTracingMarker = 14;
51
export const ElementTypeVirtual = 15;
52
+export const ElementTypeViewTransition = 16;
53
54
// Different types of elements displayed in the Elements tree.
55
// These types may be used to visually distinguish types,
@@ -66,7 +67,8 @@ export type ElementType =
67
| 12
68
| 13
69
| 14
69
- | 15;
70
+ | 15
71
+ | 16;
72
73
// WARNING
74
// The values below are referenced by ComponentFilters (which are saved via localStorage).
packages/react-reconciler/src/ReactFiberComponentStack.js
+16
-1
@@ -7,7 +7,10 @@
7
* @flow
8
*/
9
10
-import {enableOwnerStacks} from 'shared/ReactFeatureFlags';
10
+import {
11
+ enableOwnerStacks,
12
+ enableViewTransition,
13
+} from 'shared/ReactFeatureFlags';
14
import type {Fiber} from './ReactInternalTypes';
15
import type {ReactComponentInfo} from 'shared/ReactTypes';
16
@@ -23,6 +26,7 @@ import {
26
SimpleMemoComponent,
27
ClassComponent,
28
HostText,
29
+ ViewTransitionComponent,
30
} from './ReactWorkTags';
31
import {
32
describeBuiltInComponentFrame,
@@ -52,6 +56,11 @@ function describeFiber(fiber: Fiber): string {
56
return describeFunctionComponentFrame(fiber.type.render);
57
case ClassComponent:
58
return describeClassComponentFrame(fiber.type);
59
+ case ViewTransitionComponent:
60
+ if (enableViewTransition) {
61
+ return describeBuiltInComponentFrame('ViewTransition');
62
+ }
63
+ // Fallthrough
64
default:
65
return '';
66
}
@@ -123,6 +132,12 @@ export function getOwnerStackByFiberInDev(workInProgress: Fiber): string {
132
case SuspenseListComponent:
133
info += describeBuiltInComponentFrame('SuspenseList');
134
break;
135
+ case ViewTransitionComponent:
136
+ if (enableViewTransition) {
137
+ info += describeBuiltInComponentFrame('SuspenseList');
138
+ break;
139
+ }
140
+ // Fallthrough
141
case FunctionComponent:
142
case SimpleMemoComponent:
143
case ClassComponent:
packages/react-reconciler/src/getComponentNameFromFiber.js
+7
@@ -14,6 +14,7 @@ import {
14
disableLegacyMode,
15
enableLegacyHidden,
16
enableRenderableContext,
17
+ enableViewTransition,
18
} from 'shared/ReactFeatureFlags';
19
20
import {
@@ -45,6 +46,7 @@ import {
46
CacheComponent,
47
TracingMarkerComponent,
48
Throw,
49
+ ViewTransitionComponent,
50
} from 'react-reconciler/src/ReactWorkTags';
51
import getComponentNameFromType from 'shared/getComponentNameFromType';
52
import {REACT_STRICT_MODE_TYPE} from 'shared/ReactSymbols';
@@ -139,7 +141,12 @@ export default function getComponentNameFromFiber(fiber: Fiber): string | null {
141
return 'SuspenseList';
142
case TracingMarkerComponent:
143
return 'TracingMarker';
144
+ case ViewTransitionComponent:
145
+ if (enableViewTransition) {
146
+ return 'ViewTransition';
147
+ }
148
// The display name for these tags come from the user-provided type:
149
+ // Fallthrough
150
case IncompleteClassComponent:
151
case IncompleteFunctionComponent:
152
if (disableLegacyMode) {