Skip to content

Commit a6987be

Browse files
lunaruanlunaruan
authored
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
1 parent 796fff5 commit a6987be

File tree

15 files changed

+139
-6
lines changed

15 files changed

+139
-6
lines changed

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import {
2424
ElementTypeRoot,
2525
ElementTypeSuspense,
2626
ElementTypeSuspenseList,
27+
ElementTypeTracingMarker,
2728
StrictMode,
2829
} from 'react-devtools-shared/src/types';
2930
import {
@@ -247,6 +248,8 @@ export function getInternalReactConstants(
247248
SimpleMemoComponent: 15,
248249
SuspenseComponent: 13,
249250
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
250253
YieldComponent: -1, // Removed
251254
};
252255
} else if (gte(version, '17.0.0-alpha')) {
@@ -277,6 +280,7 @@ export function getInternalReactConstants(
277280
SimpleMemoComponent: 15,
278281
SuspenseComponent: 13,
279282
SuspenseListComponent: 19, // Experimental
283+
TracingMarkerComponent: -1, // Doesn't exist yet
280284
YieldComponent: -1, // Removed
281285
};
282286
} else if (gte(version, '16.6.0-beta.0')) {
@@ -307,6 +311,7 @@ export function getInternalReactConstants(
307311
SimpleMemoComponent: 15,
308312
SuspenseComponent: 13,
309313
SuspenseListComponent: 19, // Experimental
314+
TracingMarkerComponent: -1, // Doesn't exist yet
310315
YieldComponent: -1, // Removed
311316
};
312317
} else if (gte(version, '16.4.3-alpha')) {
@@ -337,6 +342,7 @@ export function getInternalReactConstants(
337342
SimpleMemoComponent: -1, // Doesn't exist yet
338343
SuspenseComponent: 16,
339344
SuspenseListComponent: -1, // Doesn't exist yet
345+
TracingMarkerComponent: -1, // Doesn't exist yet
340346
YieldComponent: -1, // Removed
341347
};
342348
} else {
@@ -367,6 +373,7 @@ export function getInternalReactConstants(
367373
SimpleMemoComponent: -1, // Doesn't exist yet
368374
SuspenseComponent: 16,
369375
SuspenseListComponent: -1, // Doesn't exist yet
376+
TracingMarkerComponent: -1, // Doesn't exist yet
370377
YieldComponent: 9,
371378
};
372379
}
@@ -405,6 +412,7 @@ export function getInternalReactConstants(
405412
SimpleMemoComponent,
406413
SuspenseComponent,
407414
SuspenseListComponent,
415+
TracingMarkerComponent,
408416
} = ReactTypeOfWork;
409417

410418
function resolveFiberType(type: any) {
@@ -484,6 +492,8 @@ export function getInternalReactConstants(
484492
return 'SuspenseList';
485493
case Profiler:
486494
return 'Profiler';
495+
case TracingMarkerComponent:
496+
return 'TracingMarker';
487497
default:
488498
const typeSymbol = getTypeSymbol(type);
489499

@@ -583,6 +593,7 @@ export function attach(
583593
SimpleMemoComponent,
584594
SuspenseComponent,
585595
SuspenseListComponent,
596+
TracingMarkerComponent,
586597
} = ReactTypeOfWork;
587598
const {
588599
ImmediatePriority,
@@ -1044,6 +1055,8 @@ export function attach(
10441055
return ElementTypeSuspense;
10451056
case SuspenseListComponent:
10461057
return ElementTypeSuspenseList;
1058+
case TracingMarkerComponent:
1059+
return ElementTypeTracingMarker;
10471060
default:
10481061
const typeSymbol = getTypeSymbol(type);
10491062

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ export type WorkTagMap = {|
5353
SimpleMemoComponent: WorkTag,
5454
SuspenseComponent: WorkTag,
5555
SuspenseListComponent: WorkTag,
56+
TracingMarkerComponent: WorkTag,
5657
YieldComponent: WorkTag,
5758
|};
5859

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,12 @@ export const ElementTypeProfiler = 10;
3232
export const ElementTypeRoot = 11;
3333
export const ElementTypeSuspense = 12;
3434
export const ElementTypeSuspenseList = 13;
35+
export const ElementTypeTracingMarker = 14;
3536

3637
// Different types of elements displayed in the Elements tree.
3738
// These types may be used to visually distinguish types,
3839
// 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;
4041

4142
// WARNING
4243
// The values below are referenced by ComponentFilters (which are saved via localStorage).

‎packages/react-devtools-shared/src/utils.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,10 @@ import {
2222
StrictMode,
2323
Suspense,
2424
} 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';
2629
import {
2730
TREE_OPERATION_ADD,
2831
TREE_OPERATION_REMOVE,
@@ -684,6 +687,8 @@ export function getDisplayNameForReactElement(
684687
return 'Suspense';
685688
case SuspenseList:
686689
return 'SuspenseList';
690+
case TracingMarker:
691+
return 'TracingMarker';
687692
default:
688693
const {type} = element;
689694
if (typeof type === 'string') {

‎packages/react-reconciler/src/ReactFiber.new.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
enableScopeAPI,
2626
enableSyncDefaultUpdates,
2727
allowConcurrentByDefault,
28+
enableTransitionTracing,
2829
} from 'shared/ReactFeatureFlags';
2930
import {
3031
supportsPersistence,
@@ -56,6 +57,7 @@ import {
5657
OffscreenComponent,
5758
LegacyHiddenComponent,
5859
CacheComponent,
60+
TracingMarkerComponent,
5961
} from './ReactWorkTags';
6062
import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
6163

@@ -91,6 +93,7 @@ import {
9193
REACT_OFFSCREEN_TYPE,
9294
REACT_LEGACY_HIDDEN_TYPE,
9395
REACT_CACHE_TYPE,
96+
REACT_TRACING_MARKER_TYPE,
9497
} from 'shared/ReactSymbols';
9598

9699
export type {Fiber};
@@ -521,6 +524,11 @@ export function createFiberFromTypeAndProps(
521524
return createFiberFromCache(pendingProps, mode, lanes, key);
522525
}
523526
// 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
524532
default: {
525533
if (typeof type === 'object' && type !== null) {
526534
switch (type.$$typeof) {
@@ -746,6 +754,18 @@ export function createFiberFromCache(
746754
return fiber;
747755
}
748756

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+
749769
export function createFiberFromText(
750770
content: string,
751771
mode: TypeOfMode,

‎packages/react-reconciler/src/ReactFiber.old.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
enableScopeAPI,
2626
enableSyncDefaultUpdates,
2727
allowConcurrentByDefault,
28+
enableTransitionTracing,
2829
} from 'shared/ReactFeatureFlags';
2930
import {
3031
supportsPersistence,
@@ -56,6 +57,7 @@ import {
5657
OffscreenComponent,
5758
LegacyHiddenComponent,
5859
CacheComponent,
60+
TracingMarkerComponent,
5961
} from './ReactWorkTags';
6062
import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
6163

@@ -91,6 +93,7 @@ import {
9193
REACT_OFFSCREEN_TYPE,
9294
REACT_LEGACY_HIDDEN_TYPE,
9395
REACT_CACHE_TYPE,
96+
REACT_TRACING_MARKER_TYPE,
9497
} from 'shared/ReactSymbols';
9598

9699
export type {Fiber};
@@ -521,6 +524,11 @@ export function createFiberFromTypeAndProps(
521524
return createFiberFromCache(pendingProps, mode, lanes, key);
522525
}
523526
// 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
524532
default: {
525533
if (typeof type === 'object' && type !== null) {
526534
switch (type.$$typeof) {
@@ -746,6 +754,18 @@ export function createFiberFromCache(
746754
return fiber;
747755
}
748756

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+
749769
export function createFiberFromText(
750770
content: string,
751771
mode: TypeOfMode,

‎packages/react-reconciler/src/ReactFiberBeginWork.new.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ import {
6161
OffscreenComponent,
6262
LegacyHiddenComponent,
6363
CacheComponent,
64+
TracingMarkerComponent,
6465
} from './ReactWorkTags';
6566
import {
6667
NoFlags,
@@ -93,6 +94,7 @@ import {
9394
enableSuspenseLayoutEffectSemantics,
9495
enableSchedulingProfiler,
9596
enablePersistentOffscreenHostContainer,
97+
enableTransitionTracing,
9698
} from 'shared/ReactFeatureFlags';
9799
import isArray from 'shared/isArray';
98100
import shallowEqual from 'shared/shallowEqual';
@@ -898,6 +900,21 @@ function updateCacheComponent(
898900
return workInProgress.child;
899901
}
900902

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+
901918
function updateFragment(
902919
current: Fiber | null,
903920
workInProgress: Fiber,
@@ -3900,6 +3917,16 @@ function beginWork(
39003917
}
39013918
break;
39023919
}
3920+
case TracingMarkerComponent: {
3921+
if (enableTransitionTracing) {
3922+
return updateTracingMarkerComponent(
3923+
current,
3924+
workInProgress,
3925+
renderLanes,
3926+
);
3927+
}
3928+
break;
3929+
}
39033930
}
39043931

39053932
throw new Error(

‎packages/react-reconciler/src/ReactFiberBeginWork.old.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ import {
6161
OffscreenComponent,
6262
LegacyHiddenComponent,
6363
CacheComponent,
64+
TracingMarkerComponent,
6465
} from './ReactWorkTags';
6566
import {
6667
NoFlags,
@@ -93,6 +94,7 @@ import {
9394
enableSuspenseLayoutEffectSemantics,
9495
enableSchedulingProfiler,
9596
enablePersistentOffscreenHostContainer,
97+
enableTransitionTracing,
9698
} from 'shared/ReactFeatureFlags';
9799
import isArray from 'shared/isArray';
98100
import shallowEqual from 'shared/shallowEqual';
@@ -898,6 +900,21 @@ function updateCacheComponent(
898900
return workInProgress.child;
899901
}
900902

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+
901918
function updateFragment(
902919
current: Fiber | null,
903920
workInProgress: Fiber,
@@ -3900,6 +3917,16 @@ function beginWork(
39003917
}
39013918
break;
39023919
}
3920+
case TracingMarkerComponent: {
3921+
if (enableTransitionTracing) {
3922+
return updateTracingMarkerComponent(
3923+
current,
3924+
workInProgress,
3925+
renderLanes,
3926+
);
3927+
}
3928+
break;
3929+
}
39033930
}
39043931

39053932
throw new Error(

‎packages/react-reconciler/src/ReactWorkTags.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,8 @@ export type WorkTag =
3232
| 21
3333
| 22
3434
| 23
35-
| 24;
35+
| 24
36+
| 25;
3637

3738
export const FunctionComponent = 0;
3839
export const ClassComponent = 1;
@@ -58,3 +59,4 @@ export const ScopeComponent = 21;
5859
export const OffscreenComponent = 22;
5960
export const LegacyHiddenComponent = 23;
6061
export const CacheComponent = 24;
62+
export const TracingMarkerComponent = 25;

‎packages/react-reconciler/src/getComponentNameFromFiber.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import {
3434
OffscreenComponent,
3535
LegacyHiddenComponent,
3636
CacheComponent,
37+
TracingMarkerComponent,
3738
} from 'react-reconciler/src/ReactWorkTags';
3839
import getComponentNameFromType from 'shared/getComponentNameFromType';
3940
import {REACT_STRICT_MODE_TYPE} from 'shared/ReactSymbols';
@@ -103,7 +104,8 @@ export default function getComponentNameFromFiber(fiber: Fiber): string | null {
103104
return 'Suspense';
104105
case SuspenseListComponent:
105106
return 'SuspenseList';
106-
107+
case TracingMarkerComponent:
108+
return 'TracingMarker';
107109
// The display name for this tags come from the user-provided type:
108110
case ClassComponent:
109111
case FunctionComponent:

0 commit comments

Comments
 (0)