[DevTools] Display RegExp values in props/state

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.
facebook · Oct 5, 2019 · 009f403 · 009f403
1 parent 4bc52ef
commit 009f403
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 0 deletions.
diff --git a/...es/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap b/...es/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
@@ -503,6 +503,7 @@ exports[`InspectedElementContext should support complex data types: 1: Inspected
       "1": {}
     },
     "react_element": {},
+    "regexp": {},
     "set": {
       "0": "abc",
       "1": 123

diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
@@ -539,6 +539,7 @@ describe('InspectedElementContext', () => {
           map={mapShallow}
           map_of_maps={mapOfMaps}
           react_element={<span />}
+          regexp={/abc/giu}
           set={setShallow}
           set_of_sets={setOfSets}
           symbol={Symbol('symbol')}
@@ -584,6 +585,7 @@ describe('InspectedElementContext', () => {
       map,
       map_of_maps,
       react_element,
+      regexp,
       set,
       set_of_sets,
       symbol,
@@ -624,6 +626,10 @@ 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.type]).toBe('regexp');
+
     expect(set[meta.inspectable]).toBeUndefined(); // Complex type
     expect(set[meta.name]).toBe('Set');
     expect(set[meta.type]).toBe('iterator');

diff --git a/packages/react-devtools-shared/src/devtools/views/utils.js b/packages/react-devtools-shared/src/devtools/views/utils.js
@@ -105,6 +105,7 @@ export function getMetaValueLabel(data: Object): string | null {
     case 'object':
       return 'Object';
     case 'date':
+    case 'regexp':
     case 'symbol':
       return name;
     case 'iterator':

diff --git a/packages/react-devtools-shared/src/hydration.js b/packages/react-devtools-shared/src/hydration.js
@@ -128,6 +128,8 @@ function getDataType(data: Object): PropType {
         return 'array_buffer';
       } else if (typeof data[Symbol.iterator] === 'function') {
         return 'iterator';
+      } else if (data instanceof RegExp) {
+        return 'regexp';
       } else if (Object.prototype.toString.call(data) === '[object Date]') {
         return 'date';
       }
@@ -324,6 +326,14 @@ export function dehydrate(
         type,
       };
 
+    case 'regexp':
+      cleaned.push(path);
+      return {
+        inspectable: false,
+        name: data.toString(),
+        type,
+      };
+
     case 'object':
       isPathWhitelistedCheck = isPathWhitelisted(path);
       if (level >= LEVEL_THRESHOLD && !isPathWhitelistedCheck) {