[DevTools] Display RegExp values in props/state (#17690)

Previously, when props/state contained a regexp, it was shown as an
empty object. This commit adds regexps as values in need of special
rehydration (like Symbols or TypedArrays), and display them as a user
might expect.

Co-authored-by: Zirak <[email protected]>

packages/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap

@@ -511,6 +511,7 @@ exports[`InspectedElementContext should support complex data types: 1: Inspected
       "inner": {}
     },
     "react_element": {},
+    "regexp": {},
     "set": {
       "0": "abc",
       "1": 123

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

@@ -555,6 +555,7 @@ describe('InspectedElementContext', () => {
           map_of_maps={mapOfMaps}
           object_of_objects={objectOfObjects}
           react_element={<span />}
+          regexp={/abc/giu}
           set={setShallow}
           set_of_sets={setOfSets}
           symbol={Symbol('symbol')}
@@ -604,6 +605,7 @@ describe('InspectedElementContext', () => {
       map_of_maps,
       object_of_objects,
       react_element,
+      regexp,
       set,
       set_of_sets,
       symbol,
@@ -699,6 +701,12 @@ describe('InspectedElementContext', () => {
     expect(react_element[meta.preview_long]).toBe('<span />');
     expect(react_element[meta.preview_short]).toBe('<span />');
 
+    expect(regexp[meta.inspectable]).toBe(false);
+    expect(regexp[meta.name]).toBe('/abc/giu');
+    expect(regexp[meta.preview_long]).toBe('/abc/giu');
+    expect(regexp[meta.preview_short]).toBe('/abc/giu');
+    expect(regexp[meta.type]).toBe('regexp');
+
     expect(set[meta.inspectable]).toBeUndefined(); // Complex type
     expect(set[meta.name]).toBe('Set');
     expect(set[meta.type]).toBe('iterator');

packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap

@@ -152,6 +152,7 @@ Object {
       "inner": {}
     },
     "react_element": {},
+    "regexp": {},
     "set": {
       "0": "abc",
       "1": 123

packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js

@@ -185,6 +185,7 @@ describe('InspectedElementContext', () => {
           map_of_maps={mapOfMaps}
           object_of_objects={objectOfObjects}
           react_element={<span />}
+          regexp={/abc/giu}
           set={setShallow}
           set_of_sets={setOfSets}
           symbol={Symbol('symbol')}
@@ -212,6 +213,7 @@ describe('InspectedElementContext', () => {
       map_of_maps,
       object_of_objects,
       react_element,
+      regexp,
       set,
       set_of_sets,
       symbol,
@@ -279,6 +281,12 @@ describe('InspectedElementContext', () => {
     expect(react_element[meta.name]).toBe('span');
     expect(react_element[meta.type]).toBe('react_element');
 
+    expect(regexp[meta.inspectable]).toBe(false);
+    expect(regexp[meta.name]).toBe('/abc/giu');
+    expect(regexp[meta.preview_long]).toBe('/abc/giu');
+    expect(regexp[meta.preview_short]).toBe('/abc/giu');
+    expect(regexp[meta.type]).toBe('regexp');
+
     expect(set[meta.inspectable]).toBeUndefined(); // Complex type
     expect(set[meta.name]).toBe('Set');
     expect(set[meta.type]).toBe('iterator');

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

@@ -271,6 +271,16 @@ export function dehydrate(
         type,
       };
 
+    case 'regexp':
+      cleaned.push(path);
+      return {
+        inspectable: false,
+        preview_short: formatDataForPreview(data, false),
+        preview_long: formatDataForPreview(data, true),
+        name: data.toString(),
+        type,
+      };
+
     case 'object':
       isPathWhitelistedCheck = isPathWhitelisted(path);
       if (level >= LEVEL_THRESHOLD && !isPathWhitelistedCheck) {

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

@@ -340,6 +340,7 @@ export type DataType =
   | 'number'
   | 'object'
   | 'react_element'
+  | 'regexp'
   | 'string'
   | 'symbol'
   | 'typed_array'
@@ -395,6 +396,8 @@ export function getDataType(data: Object): DataType {
         return 'array_buffer';
       } else if (typeof data[Symbol.iterator] === 'function') {
         return 'iterator';
+      } else if (data.constructor.name === 'RegExp') {
+        return 'regexp';
       } else if (Object.prototype.toString.call(data) === '[object Date]') {
         return 'date';
       }
@@ -504,6 +507,8 @@ export function formatDataForPreview(
       return `"${data}"`;
     case 'bigint':
       return truncateForDisplay(data.toString() + 'n');
+    case 'regexp':
+      return truncateForDisplay(data.toString());
     case 'symbol':
       return truncateForDisplay(data.toString());
     case 'react_element':

packages/react-devtools-shell/src/app/InspectableElements/SimpleValues.js

@@ -24,6 +24,7 @@ export default function SimpleValues() {
       true={true}
       false={false}
       function={noop}
+      regex={/abc[123]+/i}
     />
   );
 }