Skip to content

Commit

Permalink
[DevTools] Display RegExp values in props/state
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
Zirak committed Oct 5, 2019
1 parent 4bc52ef commit cfbfa89
Show file tree
Hide file tree
Showing 4 changed files with 19 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -503,6 +503,7 @@ exports[`InspectedElementContext should support complex data types: 1: Inspected
"1": {}
},
"react_element": {},
"regexp": {},
"set": {
"0": "abc",
"1": 123
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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')}
Expand Down Expand Up @@ -584,6 +585,7 @@ describe('InspectedElementContext', () => {
map,
map_of_maps,
react_element,
regexp,
set,
set_of_sets,
symbol,
Expand Down Expand Up @@ -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');
Expand Down
1 change: 1 addition & 0 deletions packages/react-devtools-shared/src/devtools/views/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -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':
Expand Down
11 changes: 11 additions & 0 deletions packages/react-devtools-shared/src/hydration.js
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ type PropType =
| 'number'
| 'object'
| 'react_element'
| 'regexp'
| 'string'
| 'symbol'
| 'typed_array'
Expand Down Expand Up @@ -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';
}
Expand Down Expand Up @@ -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) {
Expand Down

0 comments on commit cfbfa89

Please sign in to comment.