Add SuspenseList to devTools (#19684)
* ensure getDisplayName is only called on functions * add SuspenseList to Dev tools element names * Add SuspenseList and pass tests * Import SuspenseList directly * run prettier * Refactor tests to use real components * run linter
Ben Pernick committed
Aug 26, 2020 at 12:04 UTC
60ba723bf78b9a28f60dce854e88e206fab52301
3 files changed
+51
-3
packages/react-devtools-shared/src/__tests__/utils-test.js
+43
-1
@@ -7,7 +7,15 @@
7
* @flow
8
*/
9
10
-import {getDisplayName} from 'react-devtools-shared/src/utils';
10
+import {
11
+ getDisplayName,
12
+ getDisplayNameForReactElement,
13
+} from 'react-devtools-shared/src/utils';
14
+import {
15
+ REACT_SUSPENSE_LIST_TYPE as SuspenseList,
16
+ REACT_STRICT_MODE_TYPE as StrictMode,
17
+} from 'shared/ReactSymbols';
18
+import {createElement} from 'react/src/ReactElement';
19
20
describe('utils', () => {
21
describe('getDisplayName', () => {
@@ -37,4 +45,38 @@ describe('utils', () => {
45
expect(getDisplayName(FauxComponent, 'Fallback')).toEqual('Fallback');
46
});
47
});
48
+ describe('getDisplayNameForReactElement', () => {
49
+ it('should return correct display name for an element with function type', () => {
50
+ function FauxComponent() {}
51
+ FauxComponent.displayName = 'OverrideDisplayName';
52
+ const element = createElement(FauxComponent);
53
+ expect(getDisplayNameForReactElement(element)).toEqual(
54
+ 'OverrideDisplayName',
55
+ );
56
+ });
57
+ it('should return correct display name for an element with a type of StrictMode', () => {
58
+ const element = createElement(StrictMode);
59
+ expect(getDisplayNameForReactElement(element)).toEqual('StrictMode');
60
+ });
61
+ it('should return correct display name for an element with a type of SuspenseList', () => {
62
+ const element = createElement(SuspenseList);
63
+ expect(getDisplayNameForReactElement(element)).toEqual('SuspenseList');
64
+ });
65
+ it('should return NotImplementedInDevtools for an element with invalid symbol type', () => {
66
+ const element = createElement(Symbol('foo'));
67
+ expect(getDisplayNameForReactElement(element)).toEqual(
68
+ 'NotImplementedInDevtools',
69
+ );
70
+ });
71
+ it('should return NotImplementedInDevtools for an element with invalid type', () => {
72
+ const element = createElement(true);
73
+ expect(getDisplayNameForReactElement(element)).toEqual(
74
+ 'NotImplementedInDevtools',
75
+ );
76
+ });
77
+ it('should return Element for null type', () => {
78
+ const element = createElement();
79
+ expect(getDisplayNameForReactElement(element)).toEqual('Element');
80
+ });
81
+ });
82
});
packages/react-devtools-shared/src/utils.js
+6
-2
@@ -22,6 +22,7 @@ import {
22
StrictMode,
23
Suspense,
24
} from 'react-is';
25
+import {REACT_SUSPENSE_LIST_TYPE as SuspenseList} from 'shared/ReactSymbols';
26
import {
27
TREE_OPERATION_ADD,
28
TREE_OPERATION_REMOVE,
@@ -43,7 +44,6 @@ import {
44
} from 'react-devtools-shared/src/types';
45
import {localStorageGetItem, localStorageSetItem} from './storage';
46
import {meta} from './hydration';
46
-
47
import type {ComponentFilter, ElementType} from './types';
48
49
const cachedDisplayNames: WeakMap<Function, string> = new WeakMap();
@@ -489,12 +489,16 @@ export function getDisplayNameForReactElement(
489
return 'StrictMode';
490
case Suspense:
491
return 'Suspense';
492
+ case SuspenseList:
493
+ return 'SuspenseList';
494
default:
495
const {type} = element;
496
if (typeof type === 'string') {
497
return type;
496
- } else if (type != null) {
498
+ } else if (typeof type === 'function') {
499
return getDisplayName(type, 'Anonymous');
500
+ } else if (type != null) {
501
+ return 'NotImplementedInDevtools';
502
} else {
503
return 'Element';
504
}
packages/react-is/src/ReactIs.js
+2
@@ -21,6 +21,7 @@ import {
21
REACT_PROVIDER_TYPE,
22
REACT_STRICT_MODE_TYPE,
23
REACT_SUSPENSE_TYPE,
24
+ REACT_SUSPENSE_LIST_TYPE,
25
} from 'shared/ReactSymbols';
26
import isValidElementType from 'shared/isValidElementType';
27
@@ -36,6 +37,7 @@ export function typeOf(object: any) {
37
case REACT_PROFILER_TYPE:
38
case REACT_STRICT_MODE_TYPE:
39
case REACT_SUSPENSE_TYPE:
40
+ case REACT_SUSPENSE_LIST_TYPE:
41
return type;
42
default:
43
const $$typeofType = type && type.$$typeof;