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} /> ); }