From cfbfa898bb428dbff20fd0132b8f6bffed620a5f Mon Sep 17 00:00:00 2001
From: Zirak <zirakertan@gmail.com>
Date: Sat, 5 Oct 2019 10:54:40 +0000
Subject: [PATCH] [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.
---
 .../inspectedElementContext-test.js.snap              |  1 +
 .../src/__tests__/inspectedElementContext-test.js     |  6 ++++++
 .../react-devtools-shared/src/devtools/views/utils.js |  1 +
 packages/react-devtools-shared/src/hydration.js       | 11 +++++++++++
 4 files changed, 19 insertions(+)

diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
index 712fdb59b0562..a0d1c01887671 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
+++ b/packages/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
index ca5d074eefeaf..9404df3c0c525 100644
--- 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
index 247f860ac6273..1cda46a223b30 100644
--- 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
index 6624041d0d345..01dc004d3d739 100644
--- a/packages/react-devtools-shared/src/hydration.js
+++ b/packages/react-devtools-shared/src/hydration.js
@@ -81,6 +81,7 @@ type PropType =
   | 'number'
   | 'object'
   | 'react_element'
+  | 'regexp'
   | 'string'
   | 'symbol'
   | 'typed_array'
@@ -128,6 +129,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 +327,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) {