@samitouri / QOS-React / commits / a6987bee73

add <TracingMarker> component boilerplate (#23275)

- Add Tracing Marker component type to React exports - Add reconciler work tag - Add devtools work tag - Add boilerplate for the cache to render children No functionality yet

Luna Ruan committed Feb 11, 2022 at 11:42 UTC a6987bee730052dccdddd4645e15b1ce458fd9a6
15 files changed +139 -6
packages/react-devtools-shared/src/backend/renderer.js
+13
@@ -24,6 +24,7 @@ import {
24 ElementTypeRoot,
25 ElementTypeSuspense,
26 ElementTypeSuspenseList,
27 + ElementTypeTracingMarker,
28 StrictMode,
29 } from 'react-devtools-shared/src/types';
30 import {
@@ -247,6 +248,8 @@ export function getInternalReactConstants(
248 SimpleMemoComponent: 15,
249 SuspenseComponent: 13,
250 SuspenseListComponent: 19, // Experimental
251 + TracingMarkerComponent: 25, // Experimental - This is technically in 18 but we don't
252 + // want to fork again so we're adding it here instead
253 YieldComponent: -1, // Removed
254 };
255 } else if (gte(version, '17.0.0-alpha')) {
@@ -277,6 +280,7 @@ export function getInternalReactConstants(
280 SimpleMemoComponent: 15,
281 SuspenseComponent: 13,
282 SuspenseListComponent: 19, // Experimental
283 + TracingMarkerComponent: -1, // Doesn't exist yet
284 YieldComponent: -1, // Removed
285 };
286 } else if (gte(version, '16.6.0-beta.0')) {
@@ -307,6 +311,7 @@ export function getInternalReactConstants(
311 SimpleMemoComponent: 15,
312 SuspenseComponent: 13,
313 SuspenseListComponent: 19, // Experimental
314 + TracingMarkerComponent: -1, // Doesn't exist yet
315 YieldComponent: -1, // Removed
316 };
317 } else if (gte(version, '16.4.3-alpha')) {
@@ -337,6 +342,7 @@ export function getInternalReactConstants(
342 SimpleMemoComponent: -1, // Doesn't exist yet
343 SuspenseComponent: 16,
344 SuspenseListComponent: -1, // Doesn't exist yet
345 + TracingMarkerComponent: -1, // Doesn't exist yet
346 YieldComponent: -1, // Removed
347 };
348 } else {
@@ -367,6 +373,7 @@ export function getInternalReactConstants(
373 SimpleMemoComponent: -1, // Doesn't exist yet
374 SuspenseComponent: 16,
375 SuspenseListComponent: -1, // Doesn't exist yet
376 + TracingMarkerComponent: -1, // Doesn't exist yet
377 YieldComponent: 9,
378 };
379 }
@@ -405,6 +412,7 @@ export function getInternalReactConstants(
412 SimpleMemoComponent,
413 SuspenseComponent,
414 SuspenseListComponent,
415 + TracingMarkerComponent,
416 } = ReactTypeOfWork;
417
418 function resolveFiberType(type: any) {
@@ -484,6 +492,8 @@ export function getInternalReactConstants(
492 return 'SuspenseList';
493 case Profiler:
494 return 'Profiler';
495 + case TracingMarkerComponent:
496 + return 'TracingMarker';
497 default:
498 const typeSymbol = getTypeSymbol(type);
499
@@ -583,6 +593,7 @@ export function attach(
593 SimpleMemoComponent,
594 SuspenseComponent,
595 SuspenseListComponent,
596 + TracingMarkerComponent,
597 } = ReactTypeOfWork;
598 const {
599 ImmediatePriority,
@@ -1044,6 +1055,8 @@ export function attach(
1055 return ElementTypeSuspense;
1056 case SuspenseListComponent:
1057 return ElementTypeSuspenseList;
1058 + case TracingMarkerComponent:
1059 + return ElementTypeTracingMarker;
1060 default:
1061 const typeSymbol = getTypeSymbol(type);
1062
packages/react-devtools-shared/src/backend/types.js
+1
@@ -53,6 +53,7 @@ export type WorkTagMap = {|
53 SimpleMemoComponent: WorkTag,
54 SuspenseComponent: WorkTag,
55 SuspenseListComponent: WorkTag,
56 + TracingMarkerComponent: WorkTag,
57 YieldComponent: WorkTag,
58 |};
59
packages/react-devtools-shared/src/types.js
+2 -1
@@ -32,11 +32,12 @@ export const ElementTypeProfiler = 10;
32 export const ElementTypeRoot = 11;
33 export const ElementTypeSuspense = 12;
34 export const ElementTypeSuspenseList = 13;
35 +export const ElementTypeTracingMarker = 14;
36
37 // Different types of elements displayed in the Elements tree.
38 // These types may be used to visually distinguish types,
39 // or to enable/disable certain functionality.
39 -export type ElementType = 1 | 2 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13;
40 +export type ElementType = 1 | 2 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14;
41
42 // WARNING
43 // The values below are referenced by ComponentFilters (which are saved via localStorage).
packages/react-devtools-shared/src/utils.js
+6 -1
@@ -22,7 +22,10 @@ import {
22 StrictMode,
23 Suspense,
24 } from 'react-is';
25 -import {REACT_SUSPENSE_LIST_TYPE as SuspenseList} from 'shared/ReactSymbols';
25 +import {
26 + REACT_SUSPENSE_LIST_TYPE as SuspenseList,
27 + REACT_TRACING_MARKER_TYPE as TracingMarker,
28 +} from 'shared/ReactSymbols';
29 import {
30 TREE_OPERATION_ADD,
31 TREE_OPERATION_REMOVE,
@@ -684,6 +687,8 @@ export function getDisplayNameForReactElement(
687 return 'Suspense';
688 case SuspenseList:
689 return 'SuspenseList';
690 + case TracingMarker:
691 + return 'TracingMarker';
692 default:
693 const {type} = element;
694 if (typeof type === 'string') {
packages/react-reconciler/src/ReactFiber.new.js
+20
@@ -25,6 +25,7 @@ import {
25 enableScopeAPI,
26 enableSyncDefaultUpdates,
27 allowConcurrentByDefault,
28 + enableTransitionTracing,
29 } from 'shared/ReactFeatureFlags';
30 import {
31 supportsPersistence,
@@ -56,6 +57,7 @@ import {
57 OffscreenComponent,
58 LegacyHiddenComponent,
59 CacheComponent,
60 + TracingMarkerComponent,
61 } from './ReactWorkTags';
62 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
63
@@ -91,6 +93,7 @@ import {
93 REACT_OFFSCREEN_TYPE,
94 REACT_LEGACY_HIDDEN_TYPE,
95 REACT_CACHE_TYPE,
96 + REACT_TRACING_MARKER_TYPE,
97 } from 'shared/ReactSymbols';
98
99 export type {Fiber};
@@ -521,6 +524,11 @@ export function createFiberFromTypeAndProps(
524 return createFiberFromCache(pendingProps, mode, lanes, key);
525 }
526 // eslint-disable-next-line no-fallthrough
527 + case REACT_TRACING_MARKER_TYPE:
528 + if (enableTransitionTracing) {
529 + return createFiberFromTracingMarker(pendingProps, mode, lanes, key);
530 + }
531 + // eslint-disable-next-line no-fallthrough
532 default: {
533 if (typeof type === 'object' && type !== null) {
534 switch (type.$$typeof) {
@@ -746,6 +754,18 @@ export function createFiberFromCache(
754 return fiber;
755 }
756
757 +export function createFiberFromTracingMarker(
758 + pendingProps: any,
759 + mode: TypeOfMode,
760 + lanes: Lanes,
761 + key: null | string,
762 +) {
763 + const fiber = createFiber(TracingMarkerComponent, pendingProps, key, mode);
764 + fiber.elementType = REACT_TRACING_MARKER_TYPE;
765 + fiber.lanes = lanes;
766 + return fiber;
767 +}
768 +
769 export function createFiberFromText(
770 content: string,
771 mode: TypeOfMode,
packages/react-reconciler/src/ReactFiber.old.js
+20
@@ -25,6 +25,7 @@ import {
25 enableScopeAPI,
26 enableSyncDefaultUpdates,
27 allowConcurrentByDefault,
28 + enableTransitionTracing,
29 } from 'shared/ReactFeatureFlags';
30 import {
31 supportsPersistence,
@@ -56,6 +57,7 @@ import {
57 OffscreenComponent,
58 LegacyHiddenComponent,
59 CacheComponent,
60 + TracingMarkerComponent,
61 } from './ReactWorkTags';
62 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
63
@@ -91,6 +93,7 @@ import {
93 REACT_OFFSCREEN_TYPE,
94 REACT_LEGACY_HIDDEN_TYPE,
95 REACT_CACHE_TYPE,
96 + REACT_TRACING_MARKER_TYPE,
97 } from 'shared/ReactSymbols';
98
99 export type {Fiber};
@@ -521,6 +524,11 @@ export function createFiberFromTypeAndProps(
524 return createFiberFromCache(pendingProps, mode, lanes, key);
525 }
526 // eslint-disable-next-line no-fallthrough
527 + case REACT_TRACING_MARKER_TYPE:
528 + if (enableTransitionTracing) {
529 + return createFiberFromTracingMarker(pendingProps, mode, lanes, key);
530 + }
531 + // eslint-disable-next-line no-fallthrough
532 default: {
533 if (typeof type === 'object' && type !== null) {
534 switch (type.$$typeof) {
@@ -746,6 +754,18 @@ export function createFiberFromCache(
754 return fiber;
755 }
756
757 +export function createFiberFromTracingMarker(
758 + pendingProps: any,
759 + mode: TypeOfMode,
760 + lanes: Lanes,
761 + key: null | string,
762 +) {
763 + const fiber = createFiber(TracingMarkerComponent, pendingProps, key, mode);
764 + fiber.elementType = REACT_TRACING_MARKER_TYPE;
765 + fiber.lanes = lanes;
766 + return fiber;
767 +}
768 +
769 export function createFiberFromText(
770 content: string,
771 mode: TypeOfMode,
packages/react-reconciler/src/ReactFiberBeginWork.new.js
+27
@@ -61,6 +61,7 @@ import {
61 OffscreenComponent,
62 LegacyHiddenComponent,
63 CacheComponent,
64 + TracingMarkerComponent,
65 } from './ReactWorkTags';
66 import {
67 NoFlags,
@@ -93,6 +94,7 @@ import {
94 enableSuspenseLayoutEffectSemantics,
95 enableSchedulingProfiler,
96 enablePersistentOffscreenHostContainer,
97 + enableTransitionTracing,
98 } from 'shared/ReactFeatureFlags';
99 import isArray from 'shared/isArray';
100 import shallowEqual from 'shared/shallowEqual';
@@ -898,6 +900,21 @@ function updateCacheComponent(
900 return workInProgress.child;
901 }
902
903 +// This should only be called if the name changes
904 +function updateTracingMarkerComponent(
905 + current: Fiber | null,
906 + workInProgress: Fiber,
907 + renderLanes: Lanes,
908 +) {
909 + if (!enableTransitionTracing) {
910 + return null;
911 + }
912 +
913 + const nextChildren = workInProgress.pendingProps.children;
914 + reconcileChildren(current, workInProgress, nextChildren, renderLanes);
915 + return workInProgress.child;
916 +}
917 +
918 function updateFragment(
919 current: Fiber | null,
920 workInProgress: Fiber,
@@ -3900,6 +3917,16 @@ function beginWork(
3917 }
3918 break;
3919 }
3920 + case TracingMarkerComponent: {
3921 + if (enableTransitionTracing) {
3922 + return updateTracingMarkerComponent(
3923 + current,
3924 + workInProgress,
3925 + renderLanes,
3926 + );
3927 + }
3928 + break;
3929 + }
3930 }
3931
3932 throw new Error(
packages/react-reconciler/src/ReactFiberBeginWork.old.js
+27
@@ -61,6 +61,7 @@ import {
61 OffscreenComponent,
62 LegacyHiddenComponent,
63 CacheComponent,
64 + TracingMarkerComponent,
65 } from './ReactWorkTags';
66 import {
67 NoFlags,
@@ -93,6 +94,7 @@ import {
94 enableSuspenseLayoutEffectSemantics,
95 enableSchedulingProfiler,
96 enablePersistentOffscreenHostContainer,
97 + enableTransitionTracing,
98 } from 'shared/ReactFeatureFlags';
99 import isArray from 'shared/isArray';
100 import shallowEqual from 'shared/shallowEqual';
@@ -898,6 +900,21 @@ function updateCacheComponent(
900 return workInProgress.child;
901 }
902
903 +// This should only be called if the name changes
904 +function updateTracingMarkerComponent(
905 + current: Fiber | null,
906 + workInProgress: Fiber,
907 + renderLanes: Lanes,
908 +) {
909 + if (!enableTransitionTracing) {
910 + return null;
911 + }
912 +
913 + const nextChildren = workInProgress.pendingProps.children;
914 + reconcileChildren(current, workInProgress, nextChildren, renderLanes);
915 + return workInProgress.child;
916 +}
917 +
918 function updateFragment(
919 current: Fiber | null,
920 workInProgress: Fiber,
@@ -3900,6 +3917,16 @@ function beginWork(
3917 }
3918 break;
3919 }
3920 + case TracingMarkerComponent: {
3921 + if (enableTransitionTracing) {
3922 + return updateTracingMarkerComponent(
3923 + current,
3924 + workInProgress,
3925 + renderLanes,
3926 + );
3927 + }
3928 + break;
3929 + }
3930 }
3931
3932 throw new Error(
packages/react-reconciler/src/ReactWorkTags.js
+3 -1
@@ -32,7 +32,8 @@ export type WorkTag =
32 | 21
33 | 22
34 | 23
35 - | 24;
35 + | 24
36 + | 25;
37
38 export const FunctionComponent = 0;
39 export const ClassComponent = 1;
@@ -58,3 +59,4 @@ export const ScopeComponent = 21;
59 export const OffscreenComponent = 22;
60 export const LegacyHiddenComponent = 23;
61 export const CacheComponent = 24;
62 +export const TracingMarkerComponent = 25;
packages/react-reconciler/src/getComponentNameFromFiber.js
+3 -1
@@ -34,6 +34,7 @@ import {
34 OffscreenComponent,
35 LegacyHiddenComponent,
36 CacheComponent,
37 + TracingMarkerComponent,
38 } from 'react-reconciler/src/ReactWorkTags';
39 import getComponentNameFromType from 'shared/getComponentNameFromType';
40 import {REACT_STRICT_MODE_TYPE} from 'shared/ReactSymbols';
@@ -103,7 +104,8 @@ export default function getComponentNameFromFiber(fiber: Fiber): string | null {
104 return 'Suspense';
105 case SuspenseListComponent:
106 return 'SuspenseList';
106 -
107 + case TracingMarkerComponent:
108 + return 'TracingMarker';
109 // The display name for this tags come from the user-provided type:
110 case ClassComponent:
111 case FunctionComponent:
packages/react/index.js
+1
@@ -58,6 +58,7 @@ export {
58 unstable_LegacyHidden,
59 unstable_Offscreen,
60 unstable_Scope,
61 + unstable_TracingMarker,
62 unstable_getCacheSignal,
63 unstable_getCacheForType,
64 unstable_useCacheRefresh,
packages/react/src/React.js
+3
@@ -19,6 +19,7 @@ import {
19 REACT_OFFSCREEN_TYPE,
20 REACT_SCOPE_TYPE,
21 REACT_CACHE_TYPE,
22 + REACT_TRACING_MARKER_TYPE,
23 } from 'shared/ReactSymbols';
24
25 import {Component, PureComponent} from './ReactBaseClasses';
@@ -126,6 +127,8 @@ export {
127 REACT_CACHE_TYPE as unstable_Cache,
128 // enableScopeAPI
129 REACT_SCOPE_TYPE as unstable_Scope,
130 + // enableTransitionTracing
131 + REACT_TRACING_MARKER_TYPE as unstable_TracingMarker,
132 useId,
133 act,
134 };
packages/shared/ReactSymbols.js
+2
@@ -30,6 +30,7 @@ export let REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
30 export let REACT_OFFSCREEN_TYPE = 0xeae2;
31 export let REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
32 export let REACT_CACHE_TYPE = 0xeae4;
33 +export let REACT_TRACING_MARKER_TYPE = 0xeae5;
34
35 if (typeof Symbol === 'function' && Symbol.for) {
36 const symbolFor = Symbol.for;
@@ -50,6 +51,7 @@ if (typeof Symbol === 'function' && Symbol.for) {
51 REACT_OFFSCREEN_TYPE = symbolFor('react.offscreen');
52 REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
53 REACT_CACHE_TYPE = symbolFor('react.cache');
54 + REACT_TRACING_MARKER_TYPE = symbolFor('react.tracing_marker');
55 }
56
57 const MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
packages/shared/getComponentNameFromType.js
+3
@@ -23,6 +23,7 @@ import {
23 REACT_SUSPENSE_LIST_TYPE,
24 REACT_LAZY_TYPE,
25 REACT_CACHE_TYPE,
26 + REACT_TRACING_MARKER_TYPE,
27 } from 'shared/ReactSymbols';
28
29 // Keep in sync with react-reconciler/getComponentNameFromFiber
@@ -79,6 +80,8 @@ export default function getComponentNameFromType(type: mixed): string | null {
80 return 'SuspenseList';
81 case REACT_CACHE_TYPE:
82 return 'Cache';
83 + case REACT_TRACING_MARKER_TYPE:
84 + return 'TracingMarker';
85 }
86 if (typeof type === 'object') {
87 switch (type.$$typeof) {
packages/shared/isValidElementType.js
+8 -2
@@ -23,8 +23,13 @@ import {
23 REACT_LEGACY_HIDDEN_TYPE,
24 REACT_OFFSCREEN_TYPE,
25 REACT_CACHE_TYPE,
26 + REACT_TRACING_MARKER_TYPE,
27 } from 'shared/ReactSymbols';
27 -import {enableScopeAPI, enableCache} from './ReactFeatureFlags';
28 +import {
29 + enableScopeAPI,
30 + enableCache,
31 + enableTransitionTracing,
32 +} from './ReactFeatureFlags';
33
34 let REACT_MODULE_REFERENCE: number | Symbol = 0;
35 if (typeof Symbol === 'function') {
@@ -47,7 +52,8 @@ export default function isValidElementType(type: mixed) {
52 type === REACT_LEGACY_HIDDEN_TYPE ||
53 type === REACT_OFFSCREEN_TYPE ||
54 (enableScopeAPI && type === REACT_SCOPE_TYPE) ||
50 - (enableCache && type === REACT_CACHE_TYPE)
55 + (enableCache && type === REACT_CACHE_TYPE) ||
56 + (enableTransitionTracing && type === REACT_TRACING_MARKER_TYPE)
57 ) {
58 return true;
59 }