Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DevTools][Transition Tracing] Add <TracingMarker> component boilerplate #23275

Merged
merged 1 commit into from
Feb 11, 2022
Merged

[DevTools][Transition Tracing] Add <TracingMarker> component boilerplate #23275

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions packages/react-devtools-shared/src/backend/renderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import {
ElementTypeRoot,
ElementTypeSuspense,
ElementTypeSuspenseList,
ElementTypeTracingMarker,
StrictMode,
} from 'react-devtools-shared/src/types';
import {
Expand Down Expand Up @@ -247,6 +248,8 @@ export function getInternalReactConstants(
SimpleMemoComponent: 15,
SuspenseComponent: 13,
SuspenseListComponent: 19, // Experimental
TracingMarkerComponent: 25, // Experimental - This is technically in 18 but we don't
// want to fork again so we're adding it here instead
YieldComponent: -1, // Removed
};
} else if (gte(version, '17.0.0-alpha')) {
Expand Down Expand Up @@ -277,6 +280,7 @@ export function getInternalReactConstants(
SimpleMemoComponent: 15,
SuspenseComponent: 13,
SuspenseListComponent: 19, // Experimental
TracingMarkerComponent: -1, // Doesn't exist yet
YieldComponent: -1, // Removed
};
} else if (gte(version, '16.6.0-beta.0')) {
Expand Down Expand Up @@ -307,6 +311,7 @@ export function getInternalReactConstants(
SimpleMemoComponent: 15,
SuspenseComponent: 13,
SuspenseListComponent: 19, // Experimental
TracingMarkerComponent: -1, // Doesn't exist yet
YieldComponent: -1, // Removed
};
} else if (gte(version, '16.4.3-alpha')) {
Expand Down Expand Up @@ -337,6 +342,7 @@ export function getInternalReactConstants(
SimpleMemoComponent: -1, // Doesn't exist yet
SuspenseComponent: 16,
SuspenseListComponent: -1, // Doesn't exist yet
TracingMarkerComponent: -1, // Doesn't exist yet
YieldComponent: -1, // Removed
};
} else {
Expand Down Expand Up @@ -367,6 +373,7 @@ export function getInternalReactConstants(
SimpleMemoComponent: -1, // Doesn't exist yet
SuspenseComponent: 16,
SuspenseListComponent: -1, // Doesn't exist yet
TracingMarkerComponent: -1, // Doesn't exist yet
YieldComponent: 9,
};
}
Expand Down Expand Up @@ -405,6 +412,7 @@ export function getInternalReactConstants(
SimpleMemoComponent,
SuspenseComponent,
SuspenseListComponent,
TracingMarkerComponent,
} = ReactTypeOfWork;

function resolveFiberType(type: any) {
Expand Down Expand Up @@ -484,6 +492,8 @@ export function getInternalReactConstants(
return 'SuspenseList';
case Profiler:
return 'Profiler';
case TracingMarkerComponent:
return 'TracingMarker';
default:
const typeSymbol = getTypeSymbol(type);

Expand Down Expand Up @@ -583,6 +593,7 @@ export function attach(
SimpleMemoComponent,
SuspenseComponent,
SuspenseListComponent,
TracingMarkerComponent,
} = ReactTypeOfWork;
const {
ImmediatePriority,
Expand Down Expand Up @@ -1044,6 +1055,8 @@ export function attach(
return ElementTypeSuspense;
case SuspenseListComponent:
return ElementTypeSuspenseList;
case TracingMarkerComponent:
return ElementTypeTracingMarker;
default:
const typeSymbol = getTypeSymbol(type);

Expand Down
1 change: 1 addition & 0 deletions packages/react-devtools-shared/src/backend/types.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ export type WorkTagMap = {|
SimpleMemoComponent: WorkTag,
SuspenseComponent: WorkTag,
SuspenseListComponent: WorkTag,
TracingMarkerComponent: WorkTag,
YieldComponent: WorkTag,
|};

Expand Down
3 changes: 2 additions & 1 deletion packages/react-devtools-shared/src/types.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,12 @@ export const ElementTypeProfiler = 10;
export const ElementTypeRoot = 11;
export const ElementTypeSuspense = 12;
export const ElementTypeSuspenseList = 13;
export const ElementTypeTracingMarker = 14;

// Different types of elements displayed in the Elements tree.
// These types may be used to visually distinguish types,
// or to enable/disable certain functionality.
export type ElementType = 1 | 2 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13;
export type ElementType = 1 | 2 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14;

// WARNING
// The values below are referenced by ComponentFilters (which are saved via localStorage).
Expand Down
7 changes: 6 additions & 1 deletion packages/react-devtools-shared/src/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,10 @@ import {
StrictMode,
Suspense,
} from 'react-is';
import {REACT_SUSPENSE_LIST_TYPE as SuspenseList} from 'shared/ReactSymbols';
import {
REACT_SUSPENSE_LIST_TYPE as SuspenseList,
REACT_TRACING_MARKER_TYPE as TracingMarker,
} from 'shared/ReactSymbols';
import {
TREE_OPERATION_ADD,
TREE_OPERATION_REMOVE,
Expand Down Expand Up @@ -684,6 +687,8 @@ export function getDisplayNameForReactElement(
return 'Suspense';
case SuspenseList:
return 'SuspenseList';
case TracingMarker:
return 'TracingMarker';
default:
const {type} = element;
if (typeof type === 'string') {
Expand Down
20 changes: 20 additions & 0 deletions packages/react-reconciler/src/ReactFiber.new.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import {
enableScopeAPI,
enableSyncDefaultUpdates,
allowConcurrentByDefault,
enableTransitionTracing,
} from 'shared/ReactFeatureFlags';
import {
supportsPersistence,
Expand Down Expand Up @@ -56,6 +57,7 @@ import {
OffscreenComponent,
LegacyHiddenComponent,
CacheComponent,
TracingMarkerComponent,
} from './ReactWorkTags';
import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';

Expand Down Expand Up @@ -91,6 +93,7 @@ import {
REACT_OFFSCREEN_TYPE,
REACT_LEGACY_HIDDEN_TYPE,
REACT_CACHE_TYPE,
REACT_TRACING_MARKER_TYPE,
} from 'shared/ReactSymbols';

export type {Fiber};
Expand Down Expand Up @@ -521,6 +524,11 @@ export function createFiberFromTypeAndProps(
return createFiberFromCache(pendingProps, mode, lanes, key);
}
// eslint-disable-next-line no-fallthrough
case REACT_TRACING_MARKER_TYPE:
if (enableTransitionTracing) {
return createFiberFromTracingMarker(pendingProps, mode, lanes, key);
}
// eslint-disable-next-line no-fallthrough
default: {
if (typeof type === 'object' && type !== null) {
switch (type.$$typeof) {
Expand Down Expand Up @@ -746,6 +754,18 @@ export function createFiberFromCache(
return fiber;
}

export function createFiberFromTracingMarker(
pendingProps: any,
mode: TypeOfMode,
lanes: Lanes,
key: null | string,
) {
const fiber = createFiber(TracingMarkerComponent, pendingProps, key, mode);
fiber.elementType = REACT_TRACING_MARKER_TYPE;
fiber.lanes = lanes;
return fiber;
}

export function createFiberFromText(
content: string,
mode: TypeOfMode,
Expand Down
20 changes: 20 additions & 0 deletions packages/react-reconciler/src/ReactFiber.old.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import {
enableScopeAPI,
enableSyncDefaultUpdates,
allowConcurrentByDefault,
enableTransitionTracing,
} from 'shared/ReactFeatureFlags';
import {
supportsPersistence,
Expand Down Expand Up @@ -56,6 +57,7 @@ import {
OffscreenComponent,
LegacyHiddenComponent,
CacheComponent,
TracingMarkerComponent,
} from './ReactWorkTags';
import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';

Expand Down Expand Up @@ -91,6 +93,7 @@ import {
REACT_OFFSCREEN_TYPE,
REACT_LEGACY_HIDDEN_TYPE,
REACT_CACHE_TYPE,
REACT_TRACING_MARKER_TYPE,
} from 'shared/ReactSymbols';

export type {Fiber};
Expand Down Expand Up @@ -521,6 +524,11 @@ export function createFiberFromTypeAndProps(
return createFiberFromCache(pendingProps, mode, lanes, key);
}
// eslint-disable-next-line no-fallthrough
case REACT_TRACING_MARKER_TYPE:
if (enableTransitionTracing) {
return createFiberFromTracingMarker(pendingProps, mode, lanes, key);
}
// eslint-disable-next-line no-fallthrough
default: {
if (typeof type === 'object' && type !== null) {
switch (type.$$typeof) {
Expand Down Expand Up @@ -746,6 +754,18 @@ export function createFiberFromCache(
return fiber;
}

export function createFiberFromTracingMarker(
pendingProps: any,
mode: TypeOfMode,
lanes: Lanes,
key: null | string,
) {
const fiber = createFiber(TracingMarkerComponent, pendingProps, key, mode);
fiber.elementType = REACT_TRACING_MARKER_TYPE;
fiber.lanes = lanes;
return fiber;
}

export function createFiberFromText(
content: string,
mode: TypeOfMode,
Expand Down
27 changes: 27 additions & 0 deletions packages/react-reconciler/src/ReactFiberBeginWork.new.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ import {
OffscreenComponent,
LegacyHiddenComponent,
CacheComponent,
TracingMarkerComponent,
} from './ReactWorkTags';
import {
NoFlags,
Expand Down Expand Up @@ -93,6 +94,7 @@ import {
enableSuspenseLayoutEffectSemantics,
enableSchedulingProfiler,
enablePersistentOffscreenHostContainer,
enableTransitionTracing,
} from 'shared/ReactFeatureFlags';
import isArray from 'shared/isArray';
import shallowEqual from 'shared/shallowEqual';
Expand Down Expand Up @@ -898,6 +900,21 @@ function updateCacheComponent(
return workInProgress.child;
}

// This should only be called if the name changes
function updateTracingMarkerComponent(
current: Fiber | null,
workInProgress: Fiber,
renderLanes: Lanes,
) {
if (!enableTransitionTracing) {
return null;
}

const nextChildren = workInProgress.pendingProps.children;
reconcileChildren(current, workInProgress, nextChildren, renderLanes);
return workInProgress.child;
}

function updateFragment(
current: Fiber | null,
workInProgress: Fiber,
Expand Down Expand Up @@ -3900,6 +3917,16 @@ function beginWork(
}
break;
}
case TracingMarkerComponent: {
if (enableTransitionTracing) {
return updateTracingMarkerComponent(
current,
workInProgress,
renderLanes,
);
}
break;
}
}

throw new Error(
Expand Down
27 changes: 27 additions & 0 deletions packages/react-reconciler/src/ReactFiberBeginWork.old.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ import {
OffscreenComponent,
LegacyHiddenComponent,
CacheComponent,
TracingMarkerComponent,
} from './ReactWorkTags';
import {
NoFlags,
Expand Down Expand Up @@ -93,6 +94,7 @@ import {
enableSuspenseLayoutEffectSemantics,
enableSchedulingProfiler,
enablePersistentOffscreenHostContainer,
enableTransitionTracing,
} from 'shared/ReactFeatureFlags';
import isArray from 'shared/isArray';
import shallowEqual from 'shared/shallowEqual';
Expand Down Expand Up @@ -898,6 +900,21 @@ function updateCacheComponent(
return workInProgress.child;
}

// This should only be called if the name changes
function updateTracingMarkerComponent(
current: Fiber | null,
workInProgress: Fiber,
renderLanes: Lanes,
) {
if (!enableTransitionTracing) {
return null;
}

const nextChildren = workInProgress.pendingProps.children;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make sure you wrap all these functions with the feature flag

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nvm I didn't see the early return

reconcileChildren(current, workInProgress, nextChildren, renderLanes);
return workInProgress.child;
}

function updateFragment(
current: Fiber | null,
workInProgress: Fiber,
Expand Down Expand Up @@ -3900,6 +3917,16 @@ function beginWork(
}
break;
}
case TracingMarkerComponent: {
if (enableTransitionTracing) {
return updateTracingMarkerComponent(
current,
workInProgress,
renderLanes,
);
}
break;
}
}

throw new Error(
Expand Down
4 changes: 3 additions & 1 deletion packages/react-reconciler/src/ReactWorkTags.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@ export type WorkTag =
| 21
| 22
| 23
| 24;
| 24
| 25;

export const FunctionComponent = 0;
export const ClassComponent = 1;
Expand All @@ -58,3 +59,4 @@ export const ScopeComponent = 21;
export const OffscreenComponent = 22;
export const LegacyHiddenComponent = 23;
export const CacheComponent = 24;
export const TracingMarkerComponent = 25;
4 changes: 3 additions & 1 deletion packages/react-reconciler/src/getComponentNameFromFiber.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import {
OffscreenComponent,
LegacyHiddenComponent,
CacheComponent,
TracingMarkerComponent,
} from 'react-reconciler/src/ReactWorkTags';
import getComponentNameFromType from 'shared/getComponentNameFromType';
import {REACT_STRICT_MODE_TYPE} from 'shared/ReactSymbols';
Expand Down Expand Up @@ -103,7 +104,8 @@ export default function getComponentNameFromFiber(fiber: Fiber): string | null {
return 'Suspense';
case SuspenseListComponent:
return 'SuspenseList';

case TracingMarkerComponent:
return 'TracingMarker';
// The display name for this tags come from the user-provided type:
case ClassComponent:
case FunctionComponent:
Expand Down
1 change: 1 addition & 0 deletions packages/react/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ export {
unstable_LegacyHidden,
unstable_Offscreen,
unstable_Scope,
unstable_TracingMarker,
unstable_getCacheSignal,
unstable_getCacheForType,
unstable_useCacheRefresh,
Expand Down
Loading