fix: add bigint data type in hydration

Author: nutboltu

packages/react-devtools-shared/src/__tests__/backend/utils-test.js

@@ -11,29 +11,6 @@ import {dehydrate} from '../hydration';
 
 import type {DehydratedData} from 'react-devtools-shared/src/devtools/views/Components/types';
 
-export function getSerializableData(data: any) {
-  if (data === null) {
-    return data;
-  }
-  // $FlowFixMe
-  if (typeof data === 'bigint') {
-    return data.toString() + 'n';
-  }
-  if (Array.isArray(data)) {
-    return data.reduce(function(acc, val) {
-      acc.push(getSerializableData(val));
-      return acc;
-    }, []);
-  }
-  if (typeof data === 'object') {
-    return Object.keys(data).reduce(function(acc, key) {
-      acc[key] = getSerializableData(data[key]);
-      return acc;
-    }, {});
-  }
-  return data;
-}
-
 export function cleanForBridge(
   data: Object | null,
   isPathWhitelisted: (path: Array<string | number>) => boolean,
@@ -49,7 +26,7 @@ export function cleanForBridge(
       path,
       isPathWhitelisted,
     );
-
+    console.log(cleanedData);
     return {
       data: cleanedData,
       cleaned: cleanedPaths,

packages/react-devtools-shared/src/backend/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':

packages/react-devtools-shared/src/devtools/views/utils.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 {