Skip to content

Commit c32ff0f

Browse files
authored
fix[react-devtools]: add backwards compat with legacy element type symbol (#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.
1 parent 0fc9c84 commit c32ff0f

File tree

1 file changed

+62
-1
lines changed
  • packages/react-devtools-shared/src

1 file changed

+62
-1
lines changed

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

Lines changed: 62 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,23 @@ import {
2323
Suspense,
2424
} from 'react-is';
2525
import {
26+
REACT_CONSUMER_TYPE,
27+
REACT_CONTEXT_TYPE,
28+
REACT_FORWARD_REF_TYPE,
29+
REACT_FRAGMENT_TYPE,
30+
REACT_LAZY_TYPE,
31+
REACT_LEGACY_ELEMENT_TYPE,
32+
REACT_MEMO_TYPE,
33+
REACT_PORTAL_TYPE,
34+
REACT_PROFILER_TYPE,
35+
REACT_PROVIDER_TYPE,
36+
REACT_STRICT_MODE_TYPE,
37+
REACT_SUSPENSE_LIST_TYPE,
2638
REACT_SUSPENSE_LIST_TYPE as SuspenseList,
39+
REACT_SUSPENSE_TYPE,
2740
REACT_TRACING_MARKER_TYPE as TracingMarker,
2841
} from 'shared/ReactSymbols';
42+
import {enableRenderableContext} from 'shared/ReactFeatureFlags';
2943
import {
3044
TREE_OPERATION_ADD,
3145
TREE_OPERATION_REMOVE,
@@ -695,10 +709,57 @@ export function getDataType(data: Object): DataType {
695709
}
696710
}
697711

712+
// Fork of packages/react-is/src/ReactIs.js:30, but with legacy element type
713+
// Which has been changed in https://github.com/facebook/react/pull/28813
714+
function typeOfWithLegacyElementSymbol(object: any): mixed {
715+
if (typeof object === 'object' && object !== null) {
716+
const $$typeof = object.$$typeof;
717+
switch ($$typeof) {
718+
case REACT_LEGACY_ELEMENT_TYPE:
719+
const type = object.type;
720+
721+
switch (type) {
722+
case REACT_FRAGMENT_TYPE:
723+
case REACT_PROFILER_TYPE:
724+
case REACT_STRICT_MODE_TYPE:
725+
case REACT_SUSPENSE_TYPE:
726+
case REACT_SUSPENSE_LIST_TYPE:
727+
return type;
728+
default:
729+
const $$typeofType = type && type.$$typeof;
730+
731+
switch ($$typeofType) {
732+
case REACT_CONTEXT_TYPE:
733+
case REACT_FORWARD_REF_TYPE:
734+
case REACT_LAZY_TYPE:
735+
case REACT_MEMO_TYPE:
736+
return $$typeofType;
737+
case REACT_CONSUMER_TYPE:
738+
if (enableRenderableContext) {
739+
return $$typeofType;
740+
}
741+
// Fall through
742+
case REACT_PROVIDER_TYPE:
743+
if (!enableRenderableContext) {
744+
return $$typeofType;
745+
}
746+
// Fall through
747+
default:
748+
return $$typeof;
749+
}
750+
}
751+
case REACT_PORTAL_TYPE:
752+
return $$typeof;
753+
}
754+
}
755+
756+
return undefined;
757+
}
758+
698759
export function getDisplayNameForReactElement(
699760
element: React$Element<any>,
700761
): string | null {
701-
const elementType = typeOf(element);
762+
const elementType = typeOf(element) || typeOfWithLegacyElementSymbol(element);
702763
switch (elementType) {
703764
case ContextConsumer:
704765
return 'ContextConsumer';

0 commit comments

Comments
 (0)