fix: make serializable data in react-devtools (#17233)
* fix: make serializable data for bridge in react-devtools * fix: add bigint data type in hydration * refactor: remove console.log * test: update unit tests for bigint in react-devtools
Farhad Yasir committed
Dec 5, 2019 at 02:53 UTC
5235d193d70d2623c98788ccb8dffc1d5abd688d
6 files changed
+29
packages/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
+1
@@ -486,6 +486,7 @@ exports[`InspectedElementContext should support complex data types: 1: Inspected
486
"hooks": null,
487
"props": {
488
"array_buffer": {},
489
+ "big_int": {},
490
"date": {},
491
"fn": {},
492
"html_element": {},
packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
+7
@@ -532,6 +532,8 @@ describe('InspectedElementContext', () => {
532
ReactDOM.render(
533
<Example
534
array_buffer={typedArray.buffer}
535
+ // eslint-disable-next-line no-undef
536
+ big_int={BigInt(123)}
537
date={new Date()}
538
fn={exampleFunction}
539
html_element={div}
@@ -577,6 +579,7 @@ describe('InspectedElementContext', () => {
579
580
const {
581
array_buffer,
582
+ big_int,
583
date,
584
fn,
585
html_element,
@@ -595,6 +598,10 @@ describe('InspectedElementContext', () => {
598
expect(array_buffer[meta.name]).toBe('ArrayBuffer');
599
expect(array_buffer[meta.type]).toBe('array_buffer');
600
601
+ expect(big_int[meta.inspectable]).toBe(false);
602
+ expect(big_int[meta.name]).toBe('123');
603
+ expect(big_int[meta.type]).toBe('bigint');
604
+
605
expect(date[meta.inspectable]).toBe(false);
606
expect(date[meta.type]).toBe('date');
607
packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap
+1
@@ -127,6 +127,7 @@ Object {
127
"hooks": null,
128
"props": {
129
"array_buffer": {},
130
+ "big_int": {},
131
"date": {},
132
"fn": {},
133
"html_element": {},
packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
+7
@@ -167,6 +167,8 @@ describe('InspectedElementContext', () => {
167
ReactDOM.render(
168
<Example
169
array_buffer={typedArray.buffer}
170
+ // eslint-disable-next-line no-undef
171
+ big_int={BigInt(123)}
172
date={new Date()}
173
fn={exampleFunction}
174
html_element={div}
@@ -190,6 +192,7 @@ describe('InspectedElementContext', () => {
192
193
const {
194
array_buffer,
195
+ big_int,
196
date,
197
fn,
198
html_element,
@@ -208,6 +211,10 @@ describe('InspectedElementContext', () => {
211
expect(array_buffer[meta.name]).toBe('ArrayBuffer');
212
expect(array_buffer[meta.type]).toBe('array_buffer');
213
214
+ expect(big_int[meta.inspectable]).toBe(false);
215
+ expect(big_int[meta.name]).toBe('123');
216
+ expect(big_int[meta.type]).toBe('bigint');
217
+
218
expect(date[meta.inspectable]).toBe(false);
219
expect(date[meta.type]).toBe('date');
220
packages/react-devtools-shared/src/devtools/views/utils.js
+2
@@ -107,6 +107,8 @@ export function getMetaValueLabel(data: Object): string | null {
107
case 'date':
108
case 'symbol':
109
return name;
110
+ case 'bigint':
111
+ return `${name}n`;
112
case 'iterator':
113
return `${name}(…)`;
114
case 'array_buffer':
packages/react-devtools-shared/src/hydration.js
+11
@@ -69,6 +69,7 @@ const LEVEL_THRESHOLD = 2;
69
type PropType =
70
| 'array'
71
| 'array_buffer'
72
+ | 'bigint'
73
| 'boolean'
74
| 'data_view'
75
| 'date'
@@ -107,6 +108,8 @@ function getDataType(data: Object): PropType {
108
109
const type = typeof data;
110
switch (type) {
111
+ case 'bigint':
112
+ return 'bigint';
113
case 'boolean':
114
return 'boolean';
115
case 'function':
@@ -231,6 +234,14 @@ export function dehydrate(
234
case 'string':
235
return data.length <= 500 ? data : data.slice(0, 500) + '...';
236
237
+ case 'bigint':
238
+ cleaned.push(path);
239
+ return {
240
+ inspectable: false,
241
+ name: data.toString(),
242
+ type,
243
+ };
244
+
245
case 'symbol':
246
cleaned.push(path);
247
return {