diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap index 712fdb59b0562..e7fe89f4e2573 100644 --- a/packages/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap +++ b/packages/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 index ca5d074eefeaf..aaf807485f950 100644 --- 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( { 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/packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap b/packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap index b0d83ec67885e..2c35d681bc864 100644 --- a/packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap +++ b/packages/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 index 641b5cf0067da..8c8336a93ed96 100644 --- 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( { 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 index 247f860ac6273..e52bedbace49b 100644 --- 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 index 6624041d0d345..a4ddf7f84ffce 100644 --- 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 {