Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add SuspenseList to devTools #19684

Merged
merged 7 commits into from
Aug 26, 2020
Merged

Add SuspenseList to devTools #19684

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2913d25
ensure getDisplayName is only called on functions
bpernick Aug 23, 2020
ee14dde
add SuspenseList to Dev tools element names
bpernick Aug 23, 2020
e643a66
Add SuspenseList and pass tests
bpernick Aug 24, 2020
8eea855
Import SuspenseList directly
bpernick Aug 24, 2020
c58d7f1
run prettier
bpernick Aug 24, 2020
2362d17
Refactor tests to use real components
bpernick Aug 25, 2020
62144f7
run linter
bpernick Aug 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 43 additions & 1 deletion packages/react-devtools-shared/src/__tests__/utils-test.js
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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:
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we still need this change?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think so; without it typeOf will not recognize a SuspenseList and will cause getDisplayNameForReactElement to return "NotImplementedInDevtools" instead of "SuspenseList"

return type;
default:
const $$typeofType = type && type.$$typeof;
Expand Down