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 83d769aaccd60..3cf933f607d41 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
@@ -511,6 +511,7 @@ exports[`InspectedElementContext should support complex data types: 1: Inspected
"inner": {}
},
"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 c48711cce3bbd..e6d3d8303a47c 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
+++ b/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={}
+ 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('');
expect(react_element[meta.preview_short]).toBe('');
+ 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');
diff --git a/packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap b/packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap
index c1407ceeed6ad..6c1d827808dd8 100644
--- a/packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap
+++ b/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
diff --git a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
index 97aa706152e5e..7b06f257d5e07 100644
--- a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
+++ b/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={}
+ 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');
diff --git a/packages/react-devtools-shared/src/hydration.js b/packages/react-devtools-shared/src/hydration.js
index 7aa61f5ba6270..c3a82d15b98d9 100644
--- a/packages/react-devtools-shared/src/hydration.js
+++ b/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) {
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index fc21e3ebdb5fd..1b55d86c4a418 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/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':
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/SimpleValues.js b/packages/react-devtools-shell/src/app/InspectableElements/SimpleValues.js
index c84f74f845285..c6daa3172ffcb 100644
--- a/packages/react-devtools-shell/src/app/InspectableElements/SimpleValues.js
+++ b/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}
/>
);
}