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

Author: bpernick

packages/react-devtools-shared/src/__tests__/utils-test.js

@@ -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_TYPEasSuspenseList,
+REACT_STRICT_MODE_TYPEasStrictMode,
+}from'shared/ReactSymbols';
+import{createElement}from'react/src/ReactElement';
 
 describe('utils',()=>{
 describe('getDisplayName',()=>{
@@ -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',()=>{
+functionFauxComponent(){}
+FauxComponent.displayName='OverrideDisplayName';
+constelement=createElement(FauxComponent);
+expect(getDisplayNameForReactElement(element)).toEqual(
+'OverrideDisplayName',
+);
+});
+it('should return correct display name for an element with a type of StrictMode',()=>{
+constelement=createElement(StrictMode);
+expect(getDisplayNameForReactElement(element)).toEqual('StrictMode');
+});
+it('should return correct display name for an element with a type of SuspenseList',()=>{
+constelement=createElement(SuspenseList);
+expect(getDisplayNameForReactElement(element)).toEqual('SuspenseList');
+});
+it('should return NotImplementedInDevtools for an element with invalid symbol type',()=>{
+constelement=createElement(Symbol('foo'));
+expect(getDisplayNameForReactElement(element)).toEqual(
+'NotImplementedInDevtools',
+);
+});
+it('should return NotImplementedInDevtools for an element with invalid type',()=>{
+constelement=createElement(true);
+expect(getDisplayNameForReactElement(element)).toEqual(
+'NotImplementedInDevtools',
+);
+});
+it('should return Element for null type',()=>{
+constelement=createElement();
+expect(getDisplayNameForReactElement(element)).toEqual('Element');
+});
+});
 });

packages/react-devtools-shared/src/utils.js

@@ -22,6 +22,7 @@ import {
 StrictMode,
 Suspense,
 }from'react-is';
+import{REACT_SUSPENSE_LIST_TYPEasSuspenseList}from'shared/ReactSymbols';
 import{
 TREE_OPERATION_ADD,
 TREE_OPERATION_REMOVE,
@@ -43,7 +44,6 @@ import {
 }from'react-devtools-shared/src/types';
 import{localStorageGetItem,localStorageSetItem}from'./storage';
 import{meta}from'./hydration';
-
 importtype{ComponentFilter,ElementType}from'./types';
 
 constcachedDisplayNames: WeakMap<Function,string>=newWeakMap();
@@ -489,12 +489,16 @@ export function getDisplayNameForReactElement(
 return'StrictMode';
 caseSuspense:
 return'Suspense';
+caseSuspenseList:
+return'SuspenseList';
 default:
 const{type}=element;
 if(typeoftype==='string'){
  return type;
-}elseif(type!=null){
+}elseif(typeoftype==='function'){
 returngetDisplayName(type,'Anonymous');
+}elseif(type!=null){
+return'NotImplementedInDevtools';
 }else{
 return'Element';
 }

packages/react-is/src/ReactIs.js

@@ -21,6 +21,7 @@ import {
 REACT_PROVIDER_TYPE,
 REACT_STRICT_MODE_TYPE,
 REACT_SUSPENSE_TYPE,
+REACT_SUSPENSE_LIST_TYPE,
 }from'shared/ReactSymbols';
 importisValidElementTypefrom'shared/isValidElementType';
 
@@ -36,6 +37,7 @@ export function typeOf(object: any) {
 caseREACT_PROFILER_TYPE:
 caseREACT_STRICT_MODE_TYPE:
 caseREACT_SUSPENSE_TYPE:
+caseREACT_SUSPENSE_LIST_TYPE:
 returntype;
 default:
 const$$typeofType=type&&type.$$typeof;