fix[react-devtools]: add backwards compat with legacy element type symbol (#28982)
Follow-up to https://github.com/facebook/react/pull/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.
Ruslan Lesiutin committed
May 7, 2024 at 16:38 UTC
c32ff0f4f196cb1fbfdb93a6f08c60b27fc7f31c
1 file changed
+62
-1
packages/react-devtools-shared/src/utils.js
+62
-1
@@ -23,9 +23,23 @@ import {
23
Suspense,
24
} from 'react-is';
25
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,
38
REACT_SUSPENSE_LIST_TYPE as SuspenseList,
39
+ REACT_SUSPENSE_TYPE,
40
REACT_TRACING_MARKER_TYPE as TracingMarker,
41
} from 'shared/ReactSymbols';
42
+import {enableRenderableContext} from 'shared/ReactFeatureFlags';
43
import {
44
TREE_OPERATION_ADD,
45
TREE_OPERATION_REMOVE,
@@ -695,10 +709,57 @@ export function getDataType(data: Object): DataType {
709
}
710
}
711
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
+
759
export function getDisplayNameForReactElement(
760
element: React$Element<any>,
761
): string | null {
701
- const elementType = typeOf(element);
762
+ const elementType = typeOf(element) || typeOfWithLegacyElementSymbol(element);
763
switch (elementType) {
764
case ContextConsumer:
765
return 'ContextConsumer';