@samitouri / QOS-React / commits / c4595ca4c8

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

@@ -43,6 +43,7 @@ export function describeFiber(

43 SimpleMemoComponent,

44 ForwardRef,

45 ClassComponent,

46 + ViewTransitionComponent,

47 } = workTagMap;

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

@@ -76,6 +76,7 @@ export type WorkTagMap = {

76 TracingMarkerComponent: WorkTag,

77 YieldComponent: WorkTag,

78 Throw: WorkTag,

79 + ViewTransitionComponent: WorkTag,

80 };

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;

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;

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 */

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';

@@ -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

@@ -14,6 +14,7 @@ import {

14 disableLegacyMode,

15 enableLegacyHidden,

16 enableRenderableContext,

17 + enableViewTransition,

18 } from 'shared/ReactFeatureFlags';

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) {