Skip to content

Commit

Permalink
fix[react-devtools]: add backwards compat with legacy element type sy…
Browse files Browse the repository at this point in the history
…mbol (#28982)

Follow-up to #28813.

RDT is using `typeOf` from `react-is` to determine the element display
name, I've forked an implementation of this method, but will be using
legacy element symbol.
  • Loading branch information
hoxyq authored May 7, 2024
1 parent 0fc9c84 commit c32ff0f
Showing 1 changed file with 62 additions and 1 deletion.
63 changes: 62 additions & 1 deletion packages/react-devtools-shared/src/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,23 @@ import {
Suspense,
} from 'react-is';
import {
REACT_CONSUMER_TYPE,
REACT_CONTEXT_TYPE,
REACT_FORWARD_REF_TYPE,
REACT_FRAGMENT_TYPE,
REACT_LAZY_TYPE,
REACT_LEGACY_ELEMENT_TYPE,
REACT_MEMO_TYPE,
REACT_PORTAL_TYPE,
REACT_PROFILER_TYPE,
REACT_PROVIDER_TYPE,
REACT_STRICT_MODE_TYPE,
REACT_SUSPENSE_LIST_TYPE,
REACT_SUSPENSE_LIST_TYPE as SuspenseList,
REACT_SUSPENSE_TYPE,
REACT_TRACING_MARKER_TYPE as TracingMarker,
} from 'shared/ReactSymbols';
import {enableRenderableContext} from 'shared/ReactFeatureFlags';
import {
TREE_OPERATION_ADD,
TREE_OPERATION_REMOVE,
Expand Down Expand Up @@ -695,10 +709,57 @@ export function getDataType(data: Object): DataType {
}
}

// Fork of packages/react-is/src/ReactIs.js:30, but with legacy element type
// Which has been changed in https://github.com/facebook/react/pull/28813
function typeOfWithLegacyElementSymbol(object: any): mixed {
if (typeof object === 'object' && object !== null) {
const $$typeof = object.$$typeof;
switch ($$typeof) {
case REACT_LEGACY_ELEMENT_TYPE:
const type = object.type;

switch (type) {
case REACT_FRAGMENT_TYPE:
case REACT_PROFILER_TYPE:
case REACT_STRICT_MODE_TYPE:
case REACT_SUSPENSE_TYPE:
case REACT_SUSPENSE_LIST_TYPE:
return type;
default:
const $$typeofType = type && type.$$typeof;

switch ($$typeofType) {
case REACT_CONTEXT_TYPE:
case REACT_FORWARD_REF_TYPE:
case REACT_LAZY_TYPE:
case REACT_MEMO_TYPE:
return $$typeofType;
case REACT_CONSUMER_TYPE:
if (enableRenderableContext) {
return $$typeofType;
}
// Fall through
case REACT_PROVIDER_TYPE:
if (!enableRenderableContext) {
return $$typeofType;
}
// Fall through
default:
return $$typeof;
}
}
case REACT_PORTAL_TYPE:
return $$typeof;
}
}

return undefined;
}

export function getDisplayNameForReactElement(
element: React$Element<any>,
): string | null {
const elementType = typeOf(element);
const elementType = typeOf(element) || typeOfWithLegacyElementSymbol(element);
switch (elementType) {
case ContextConsumer:
return 'ContextConsumer';
Expand Down

0 comments on commit c32ff0f

Please sign in to comment.