[DevTools] Support REACT_LEGACY_ELEMENT_TYPE for formatting JSX (#30779)
DevTools shouldn't use react-is since that's versioned to one version of React. We don't need to since we use all the symbols from shared/ReactSymbols anyway and have a fork of typeOf that can cover both. Now JSX of old React versions show up with proper JSX formatting when inspecting.
Sebastian Markbåge committed
Aug 21, 2024 at 18:17 UTC
985747f81033833dca22f30b0c04704dd4bd3714
2 files changed
+27
-50
packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
+3
-17
@@ -289,23 +289,9 @@ describe('InspectedElementContext', () => {
289
"preview_long": {boolean: true, number: 123, string: "abc"},
290
},
291
},
292
- "react_element": {
293
- "$$typeof": Dehydrated {
294
- "preview_short": Symbol(react.element),
295
- "preview_long": Symbol(react.element),
296
- },
297
- "_owner": null,
298
- "_store": Dehydrated {
299
- "preview_short": {…},
300
- "preview_long": {},
301
- },
302
- "key": null,
303
- "props": Dehydrated {
304
- "preview_short": {…},
305
- "preview_long": {},
306
- },
307
- "ref": null,
308
- "type": "span",
292
+ "react_element": Dehydrated {
293
+ "preview_short": <span />,
294
+ "preview_long": <span />,
295
},
296
"regexp": Dehydrated {
297
"preview_short": /abc/giu,
packages/react-devtools-shared/src/utils.js
+24
-33
@@ -8,26 +8,13 @@
8
*/
9
10
import LRU from 'lru-cache';
11
-import {
12
- isElement,
13
- typeOf,
14
- ContextConsumer,
15
- ContextProvider,
16
- ForwardRef,
17
- Fragment,
18
- Lazy,
19
- Memo,
20
- Portal,
21
- Profiler,
22
- StrictMode,
23
- Suspense,
24
-} from 'react-is';
11
import {
12
REACT_CONSUMER_TYPE,
13
REACT_CONTEXT_TYPE,
14
REACT_FORWARD_REF_TYPE,
15
REACT_FRAGMENT_TYPE,
16
REACT_LAZY_TYPE,
17
+ REACT_ELEMENT_TYPE,
18
REACT_LEGACY_ELEMENT_TYPE,
19
REACT_MEMO_TYPE,
20
REACT_PORTAL_TYPE,
@@ -35,9 +22,8 @@ import {
22
REACT_PROVIDER_TYPE,
23
REACT_STRICT_MODE_TYPE,
24
REACT_SUSPENSE_LIST_TYPE,
38
- REACT_SUSPENSE_LIST_TYPE as SuspenseList,
25
REACT_SUSPENSE_TYPE,
40
- REACT_TRACING_MARKER_TYPE as TracingMarker,
26
+ REACT_TRACING_MARKER_TYPE,
27
} from 'shared/ReactSymbols';
28
import {enableRenderableContext} from 'shared/ReactFeatureFlags';
29
import {
@@ -632,10 +618,6 @@ export function getDataType(data: Object): DataType {
618
return 'undefined';
619
}
620
635
- if (isElement(data)) {
636
- return 'react_element';
637
- }
638
-
621
if (typeof HTMLElement !== 'undefined' && data instanceof HTMLElement) {
622
return 'html_element';
623
}
@@ -657,6 +639,12 @@ export function getDataType(data: Object): DataType {
639
return 'number';
640
}
641
case 'object':
642
+ if (
643
+ data.$$typeof === REACT_ELEMENT_TYPE ||
644
+ data.$$typeof === REACT_LEGACY_ELEMENT_TYPE
645
+ ) {
646
+ return 'react_element';
647
+ }
648
if (isArray(data)) {
649
return 'array';
650
} else if (ArrayBuffer.isView(data)) {
@@ -717,6 +705,7 @@ function typeOfWithLegacyElementSymbol(object: any): mixed {
705
if (typeof object === 'object' && object !== null) {
706
const $$typeof = object.$$typeof;
707
switch ($$typeof) {
708
+ case REACT_ELEMENT_TYPE:
709
case REACT_LEGACY_ELEMENT_TYPE:
710
const type = object.type;
711
@@ -761,31 +750,33 @@ function typeOfWithLegacyElementSymbol(object: any): mixed {
750
export function getDisplayNameForReactElement(
751
element: React$Element<any>,
752
): string | null {
764
- const elementType = typeOf(element) || typeOfWithLegacyElementSymbol(element);
753
+ const elementType = typeOfWithLegacyElementSymbol(element);
754
switch (elementType) {
766
- case ContextConsumer:
755
+ case REACT_CONSUMER_TYPE:
756
return 'ContextConsumer';
768
- case ContextProvider:
757
+ case REACT_PROVIDER_TYPE:
758
return 'ContextProvider';
770
- case ForwardRef:
759
+ case REACT_CONTEXT_TYPE:
760
+ return 'Context';
761
+ case REACT_FORWARD_REF_TYPE:
762
return 'ForwardRef';
772
- case Fragment:
763
+ case REACT_FRAGMENT_TYPE:
764
return 'Fragment';
774
- case Lazy:
765
+ case REACT_LAZY_TYPE:
766
return 'Lazy';
776
- case Memo:
767
+ case REACT_MEMO_TYPE:
768
return 'Memo';
778
- case Portal:
769
+ case REACT_PORTAL_TYPE:
770
return 'Portal';
780
- case Profiler:
771
+ case REACT_PROFILER_TYPE:
772
return 'Profiler';
782
- case StrictMode:
773
+ case REACT_STRICT_MODE_TYPE:
774
return 'StrictMode';
784
- case Suspense:
775
+ case REACT_SUSPENSE_TYPE:
776
return 'Suspense';
786
- case SuspenseList:
777
+ case REACT_SUSPENSE_LIST_TYPE:
778
return 'SuspenseList';
788
- case TracingMarker:
779
+ case REACT_TRACING_MARKER_TYPE:
780
return 'TracingMarker';
781
default:
782
const {type} = element;