Add SuspenseList to devTools

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_TYPE as SuspenseList,
+  REACT_STRICT_MODE_TYPE as StrictMode,
+  REACT_ELEMENT_TYPE as Element,
+} from 'shared/ReactSymbols';
 
 describe('utils', () => {
   describe('getDisplayName', () => {
@@ -37,4 +45,44 @@ 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 FauxElement = {type: FauxComponent};
+      expect(getDisplayNameForReactElement(FauxElement)).toEqual(
+        'OverrideDisplayName',
+      );
+    });
+    it('should return correct display name for an element with a type of StrictMode', () => {
+      const FauxElement = {};
+      FauxElement.type = StrictMode;
+      FauxElement.$$typeof = Element;
+      expect(getDisplayNameForReactElement(FauxElement)).toEqual('StrictMode');
+    });
+    it('should return correct display name for an element with a type of SuspenseList', () => {
+      const FauxElement = {};
+      FauxElement.type = SuspenseList;
+      FauxElement.$$typeof = Element;
+      expect(getDisplayNameForReactElement(FauxElement)).toEqual(
+        'SuspenseList',
+      );
+    });
+    it('should return NotImplementedInDevtools for an element with invalid symbol type', () => {
+      const FauxElement = {type: Symbol('foo')};
+      expect(getDisplayNameForReactElement(FauxElement)).toEqual(
+        'NotImplementedInDevtools',
+      );
+    });
+    it('should return NotImplementedInDevtools for an element with invalid type', () => {
+      const FauxElement = {type: true};
+      expect(getDisplayNameForReactElement(FauxElement)).toEqual(
+        'NotImplementedInDevtools',
+      );
+    });
+    it('should return Element for null type', () => {
+      const FauxElement = {type: null};
+      expect(getDisplayNameForReactElement(FauxElement)).toEqual('Element');
+    });
+  });
 });

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

@@ -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,
@@ -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();
@@ -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';
       }

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';
 import isValidElementType from 'shared/isValidElementType';
 
@@ -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;