Skip to content

Commit 009f403

Browse files
committed
[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.
1 parent 4bc52ef commit 009f403

File tree

4 files changed

+18
-0
lines changed

4 files changed

+18
-0
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -503,6 +503,7 @@ exports[`InspectedElementContext should support complex data types: 1: Inspected
503503
"1": {}
504504
},
505505
"react_element": {},
506+
"regexp": {},
506507
"set": {
507508
"0": "abc",
508509
"1": 123

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -539,6 +539,7 @@ describe('InspectedElementContext', () => {
539539
map={mapShallow}
540540
map_of_maps={mapOfMaps}
541541
react_element={<span />}
542+
regexp={/abc/giu}
542543
set={setShallow}
543544
set_of_sets={setOfSets}
544545
symbol={Symbol('symbol')}
@@ -584,6 +585,7 @@ describe('InspectedElementContext', () => {
584585
map,
585586
map_of_maps,
586587
react_element,
588+
regexp,
587589
set,
588590
set_of_sets,
589591
symbol,
@@ -624,6 +626,10 @@ describe('InspectedElementContext', () => {
624626
expect(react_element[meta.name]).toBe('span');
625627
expect(react_element[meta.type]).toBe('react_element');
626628

629+
expect(regexp[meta.inspectable]).toBe(false);
630+
expect(regexp[meta.name]).toBe('/abc/giu');
631+
expect(regexp[meta.type]).toBe('regexp');
632+
627633
expect(set[meta.inspectable]).toBeUndefined(); // Complex type
628634
expect(set[meta.name]).toBe('Set');
629635
expect(set[meta.type]).toBe('iterator');

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ export function getMetaValueLabel(data: Object): string | null {
105105
case 'object':
106106
return 'Object';
107107
case 'date':
108+
case 'regexp':
108109
case 'symbol':
109110
return name;
110111
case 'iterator':

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,8 @@ function getDataType(data: Object): PropType {
128128
return 'array_buffer';
129129
} else if (typeof data[Symbol.iterator] === 'function') {
130130
return 'iterator';
131+
} else if (data instanceof RegExp) {
132+
return 'regexp';
131133
} else if (Object.prototype.toString.call(data) === '[object Date]') {
132134
return 'date';
133135
}
@@ -324,6 +326,14 @@ export function dehydrate(
324326
type,
325327
};
326328

329+
case 'regexp':
330+
cleaned.push(path);
331+
return {
332+
inspectable: false,
333+
name: data.toString(),
334+
type,
335+
};
336+
327337
case 'object':
328338
isPathWhitelistedCheck = isPathWhitelisted(path);
329339
if (level >= LEVEL_THRESHOLD && !isPathWhitelistedCheck) {

0 commit comments

Comments
 (0)