Skip to content

Commit

Permalink
Add SuspenseList to devTools (#19684)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
bpernick authored Aug 26, 2020
1 parent 5564f2c commit 60ba723
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 3 deletions.
44 changes: 43 additions & 1 deletion packages/react-devtools-shared/src/__tests__/utils-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,15 @@
* @flow
*/

import {getDisplayName} from 'react-devtools-shared/src/utils';
import {
getDisplayName,
getDisplayNameForReactElement,
} from 'react-devtools-shared/src/utils';
import {
REACT_SUSPENSE_LIST_TYPE as SuspenseList,
REACT_STRICT_MODE_TYPE as StrictMode,
} from 'shared/ReactSymbols';
import {createElement} from 'react/src/ReactElement';

describe('utils', () => {
describe('getDisplayName', () => {
Expand Down Expand Up @@ -37,4 +45,38 @@ describe('utils', () => {
expect(getDisplayName(FauxComponent, 'Fallback')).toEqual('Fallback');
});
});
describe('getDisplayNameForReactElement', () => {
it('should return correct display name for an element with function type', () => {
function FauxComponent() {}
FauxComponent.displayName = 'OverrideDisplayName';
const element = createElement(FauxComponent);
expect(getDisplayNameForReactElement(element)).toEqual(
'OverrideDisplayName',
);
});
it('should return correct display name for an element with a type of StrictMode', () => {
const element = createElement(StrictMode);
expect(getDisplayNameForReactElement(element)).toEqual('StrictMode');
});
it('should return correct display name for an element with a type of SuspenseList', () => {
const element = createElement(SuspenseList);
expect(getDisplayNameForReactElement(element)).toEqual('SuspenseList');
});
it('should return NotImplementedInDevtools for an element with invalid symbol type', () => {
const element = createElement(Symbol('foo'));
expect(getDisplayNameForReactElement(element)).toEqual(
'NotImplementedInDevtools',
);
});
it('should return NotImplementedInDevtools for an element with invalid type', () => {
const element = createElement(true);
expect(getDisplayNameForReactElement(element)).toEqual(
'NotImplementedInDevtools',
);
});
it('should return Element for null type', () => {
const element = createElement();
expect(getDisplayNameForReactElement(element)).toEqual('Element');
});
});
});
8 changes: 6 additions & 2 deletions packages/react-devtools-shared/src/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
StrictMode,
Suspense,
} from 'react-is';
import {REACT_SUSPENSE_LIST_TYPE as SuspenseList} from 'shared/ReactSymbols';
import {
TREE_OPERATION_ADD,
TREE_OPERATION_REMOVE,
Expand All @@ -43,7 +44,6 @@ import {
} from 'react-devtools-shared/src/types';
import {localStorageGetItem, localStorageSetItem} from './storage';
import {meta} from './hydration';

import type {ComponentFilter, ElementType} from './types';

const cachedDisplayNames: WeakMap<Function, string> = new WeakMap();
Expand Down Expand Up @@ -489,12 +489,16 @@ export function getDisplayNameForReactElement(
return 'StrictMode';
case Suspense:
return 'Suspense';
case SuspenseList:
return 'SuspenseList';
default:
const {type} = element;
if (typeof type === 'string') {
return type;
} else if (type != null) {
} else if (typeof type === 'function') {
return getDisplayName(type, 'Anonymous');
} else if (type != null) {
return 'NotImplementedInDevtools';
} else {
return 'Element';
}
Expand Down
2 changes: 2 additions & 0 deletions packages/react-is/src/ReactIs.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
REACT_PROVIDER_TYPE,
REACT_STRICT_MODE_TYPE,
REACT_SUSPENSE_TYPE,
REACT_SUSPENSE_LIST_TYPE,
} from 'shared/ReactSymbols';
import isValidElementType from 'shared/isValidElementType';

Expand All @@ -36,6 +37,7 @@ export function typeOf(object: any) {
case REACT_PROFILER_TYPE:
case REACT_STRICT_MODE_TYPE:
case REACT_SUSPENSE_TYPE:
case REACT_SUSPENSE_LIST_TYPE:
return type;
default:
const $$typeofType = type && type.$$typeof;
Expand Down

0 comments on commit 60ba723

Please sign in to comment.