fix: make serializable data for bridge in react-devtools

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

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {getSerializableData} from 'react-devtools-shared/src/backend/utils';
+
+describe('backend/utils', () => {
+  describe('getSerializableData', () => {
+    it('should return null if data is null', () => {
+      expect(getSerializableData(null)).toEqual(null);
+    });
+
+    it('should return undefined if data is undefined', () => {
+      expect(getSerializableData(undefined)).toEqual(undefined);
+    });
+
+    it('should return string if data is string', () => {
+      expect(getSerializableData('react')).toEqual('react');
+    });
+
+    it('should return number if data is number', () => {
+      expect(getSerializableData(123)).toEqual(123);
+    });
+
+    it('should return array object if data is array object', () => {
+      expect(getSerializableData([{name: 'react'}])).toEqual([{name: 'react'}]);
+    });
+
+    it('should return object if data is object', () => {
+      expect(getSerializableData({name: 'react'})).toEqual({name: 'react'});
+    });
+
+    it('should return string with suffix n if data is BigInt', () => {
+      // eslint-disable-next-line no-undef
+      expect(getSerializableData(BigInt('123'))).toEqual('123n');
+    });
+  });
+});

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

@@ -11,6 +11,29 @@ 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,