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
facebook · Dec 4, 2019 · 5235d19 · 5235d19
1 parent 5064c7f
commit 5235d19
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 0 deletions.
diff --git a/...es/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap b/...es/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
@@ -486,6 +486,7 @@ exports[`InspectedElementContext should support complex data types: 1: Inspected
   "hooks": null,
   "props": {
     "array_buffer": {},
+    "big_int": {},
     "date": {},
     "fn": {},
     "html_element": {},

diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
@@ -532,6 +532,8 @@ describe('InspectedElementContext', () => {
       ReactDOM.render(
         <Example
           array_buffer={typedArray.buffer}
+          // eslint-disable-next-line no-undef
+          big_int={BigInt(123)}
           date={new Date()}
           fn={exampleFunction}
           html_element={div}
@@ -577,6 +579,7 @@ describe('InspectedElementContext', () => {
 
     const {
       array_buffer,
+      big_int,
       date,
       fn,
       html_element,
@@ -595,6 +598,10 @@ describe('InspectedElementContext', () => {
     expect(array_buffer[meta.name]).toBe('ArrayBuffer');
     expect(array_buffer[meta.type]).toBe('array_buffer');
 
+    expect(big_int[meta.inspectable]).toBe(false);
+    expect(big_int[meta.name]).toBe('123');
+    expect(big_int[meta.type]).toBe('bigint');
+
     expect(date[meta.inspectable]).toBe(false);
     expect(date[meta.type]).toBe('date');
 

diff --git a/...ages/react-devtools-shared/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap b/...ages/react-devtools-shared/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap
@@ -127,6 +127,7 @@ Object {
   "hooks": null,
   "props": {
     "array_buffer": {},
+    "big_int": {},
     "date": {},
     "fn": {},
     "html_element": {},

diff --git a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
@@ -167,6 +167,8 @@ describe('InspectedElementContext', () => {
       ReactDOM.render(
         <Example
           array_buffer={typedArray.buffer}
+          // eslint-disable-next-line no-undef
+          big_int={BigInt(123)}
           date={new Date()}
           fn={exampleFunction}
           html_element={div}
@@ -190,6 +192,7 @@ describe('InspectedElementContext', () => {
 
     const {
       array_buffer,
+      big_int,
       date,
       fn,
       html_element,
@@ -208,6 +211,10 @@ describe('InspectedElementContext', () => {
     expect(array_buffer[meta.name]).toBe('ArrayBuffer');
     expect(array_buffer[meta.type]).toBe('array_buffer');
 
+    expect(big_int[meta.inspectable]).toBe(false);
+    expect(big_int[meta.name]).toBe('123');
+    expect(big_int[meta.type]).toBe('bigint');
+
     expect(date[meta.inspectable]).toBe(false);
     expect(date[meta.type]).toBe('date');
 

diff --git a/packages/react-devtools-shared/src/devtools/views/utils.js b/packages/react-devtools-shared/src/devtools/views/utils.js
@@ -107,6 +107,8 @@ export function getMetaValueLabel(data: Object): string | null {
     case 'date':
     case 'symbol':
       return name;
+    case 'bigint':
+      return `${name}n`;
     case 'iterator':
       return `${name}(…)`;
     case 'array_buffer':

diff --git a/packages/react-devtools-shared/src/hydration.js b/packages/react-devtools-shared/src/hydration.js
@@ -69,6 +69,7 @@ const LEVEL_THRESHOLD = 2;
 type PropType =
   | 'array'
   | 'array_buffer'
+  | 'bigint'
   | 'boolean'
   | 'data_view'
   | 'date'
@@ -107,6 +108,8 @@ function getDataType(data: Object): PropType {
 
   const type = typeof data;
   switch (type) {
+    case 'bigint':
+      return 'bigint';
     case 'boolean':
       return 'boolean';
     case 'function':
@@ -231,6 +234,14 @@ export function dehydrate(
     case 'string':
       return data.length <= 500 ? data : data.slice(0, 500) + '...';
 
+    case 'bigint':
+      cleaned.push(path);
+      return {
+        inspectable: false,
+        name: data.toString(),
+        type,
+      };
+
     case 'symbol':
       cleaned.push(path);
       return {