diff --git a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js index 243759e5b02e7..b5941ee5c6ccc 100644 --- a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js +++ b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js @@ -289,23 +289,9 @@ describe('InspectedElementContext', () => { "preview_long": {boolean: true, number: 123, string: "abc"}, }, }, - "react_element": { - "$$typeof": Dehydrated { - "preview_short": Symbol(react.element), - "preview_long": Symbol(react.element), - }, - "_owner": null, - "_store": Dehydrated { - "preview_short": {…}, - "preview_long": {}, - }, - "key": null, - "props": Dehydrated { - "preview_short": {…}, - "preview_long": {}, - }, - "ref": null, - "type": "span", + "react_element": Dehydrated { + "preview_short": , + "preview_long": , }, "regexp": Dehydrated { "preview_short": /abc/giu, diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js index 8e6f52f6c0f8a..62ae8070bf020 100644 --- a/packages/react-devtools-shared/src/utils.js +++ b/packages/react-devtools-shared/src/utils.js @@ -8,26 +8,13 @@ */ import LRU from 'lru-cache'; -import { - isElement, - typeOf, - ContextConsumer, - ContextProvider, - ForwardRef, - Fragment, - Lazy, - Memo, - Portal, - Profiler, - StrictMode, - Suspense, -} from 'react-is'; import { REACT_CONSUMER_TYPE, REACT_CONTEXT_TYPE, REACT_FORWARD_REF_TYPE, REACT_FRAGMENT_TYPE, REACT_LAZY_TYPE, + REACT_ELEMENT_TYPE, REACT_LEGACY_ELEMENT_TYPE, REACT_MEMO_TYPE, REACT_PORTAL_TYPE, @@ -35,9 +22,8 @@ import { 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, + REACT_TRACING_MARKER_TYPE, } from 'shared/ReactSymbols'; import {enableRenderableContext} from 'shared/ReactFeatureFlags'; import { @@ -632,10 +618,6 @@ export function getDataType(data: Object): DataType { return 'undefined'; } - if (isElement(data)) { - return 'react_element'; - } - if (typeof HTMLElement !== 'undefined' && data instanceof HTMLElement) { return 'html_element'; } @@ -657,6 +639,12 @@ export function getDataType(data: Object): DataType { return 'number'; } case 'object': + if ( + data.$$typeof === REACT_ELEMENT_TYPE || + data.$$typeof === REACT_LEGACY_ELEMENT_TYPE + ) { + return 'react_element'; + } if (isArray(data)) { return 'array'; } else if (ArrayBuffer.isView(data)) { @@ -717,6 +705,7 @@ function typeOfWithLegacyElementSymbol(object: any): mixed { if (typeof object === 'object' && object !== null) { const $$typeof = object.$$typeof; switch ($$typeof) { + case REACT_ELEMENT_TYPE: case REACT_LEGACY_ELEMENT_TYPE: const type = object.type; @@ -761,31 +750,33 @@ function typeOfWithLegacyElementSymbol(object: any): mixed { export function getDisplayNameForReactElement( element: React$Element, ): string | null { - const elementType = typeOf(element) || typeOfWithLegacyElementSymbol(element); + const elementType = typeOfWithLegacyElementSymbol(element); switch (elementType) { - case ContextConsumer: + case REACT_CONSUMER_TYPE: return 'ContextConsumer'; - case ContextProvider: + case REACT_PROVIDER_TYPE: return 'ContextProvider'; - case ForwardRef: + case REACT_CONTEXT_TYPE: + return 'Context'; + case REACT_FORWARD_REF_TYPE: return 'ForwardRef'; - case Fragment: + case REACT_FRAGMENT_TYPE: return 'Fragment'; - case Lazy: + case REACT_LAZY_TYPE: return 'Lazy'; - case Memo: + case REACT_MEMO_TYPE: return 'Memo'; - case Portal: + case REACT_PORTAL_TYPE: return 'Portal'; - case Profiler: + case REACT_PROFILER_TYPE: return 'Profiler'; - case StrictMode: + case REACT_STRICT_MODE_TYPE: return 'StrictMode'; - case Suspense: + case REACT_SUSPENSE_TYPE: return 'Suspense'; - case SuspenseList: + case REACT_SUSPENSE_LIST_TYPE: return 'SuspenseList'; - case TracingMarker: + case REACT_TRACING_MARKER_TYPE: return 'TracingMarker'; default: const {type} = element;