From 1e76e5ff43665b43247a355ee41e19ddfa9b6089 Mon Sep 17 00:00:00 2001 From: Pavel Glac Date: Mon, 12 Jan 2026 14:50:56 +0000 Subject: [PATCH 1/4] convert bigint to string --- .../apollo-cache/history/DiffViewer.tsx | 11 +--- .../history/components/ArrayIndexItem.tsx | 7 +-- .../history/components/FieldChangeItem.tsx | 28 +-------- .../history/components/ListViewMode.tsx | 8 +-- .../history/components/OperationMetadata.tsx | 2 +- .../history/components/arrayDiffUtils.ts | 10 ---- .../shared/__tests__/diffUtils.test.ts | 60 +++++++++++++++++++ .../history/shared/components/CodeBlock.tsx | 20 +------ .../history/shared/components/JsonViewer.tsx | 9 +-- .../apollo-cache/history/shared/diffUtils.ts | 8 ++- 10 files changed, 80 insertions(+), 83 deletions(-) create mode 100644 packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/__tests__/diffUtils.test.ts diff --git a/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/DiffViewer.tsx b/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/DiffViewer.tsx index dbec4c2b8..f2fa1467c 100644 --- a/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/DiffViewer.tsx +++ b/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/DiffViewer.tsx @@ -9,6 +9,7 @@ import { ChevronDown20Regular, } from "@fluentui/react-icons"; import { useDiffViewerStyles } from "./DiffViewer.styles"; +import { formatValue } from "./shared/diffUtils"; interface DiffViewerProps { oldValue: unknown; @@ -360,16 +361,6 @@ const DiffLineComponent: React.FC = ({ ); }; -function formatValue(value: unknown): string { - if (value === undefined) return "undefined"; - if (value === null) return "null"; - try { - return JSON.stringify(value, null, 2); - } catch { - return String(value); - } -} - // LCS (Longest Common Subsequence) algorithm for better diff matching function computeLCS( oldLines: string[], diff --git a/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/components/ArrayIndexItem.tsx b/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/components/ArrayIndexItem.tsx index 6ff5f7783..c1863ee28 100644 --- a/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/components/ArrayIndexItem.tsx +++ b/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/components/ArrayIndexItem.tsx @@ -1,8 +1,9 @@ import React from "react"; import { Text, Tooltip } from "@fluentui/react-components"; import type { IndexItem } from "./arrayDiffUtils"; -import { formatValueForDisplay, formatDataPreview } from "./arrayDiffUtils"; +import { formatDataPreview } from "./arrayDiffUtils"; import { useArrayDiffViewerStyles } from "../ArrayDiffViewer.styles"; +import { formatValue } from "../shared/diffUtils"; interface ArrayIndexItemProps { item: IndexItem; @@ -97,9 +98,7 @@ export const ArrayIndexItem: React.FC = ({ ); } - return isExpanded - ? formatValueForDisplay(item.data) - : formatDataPreview(item.data); + return isExpanded ? formatValue(item.data) : formatDataPreview(item.data); }; return ( diff --git a/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/components/FieldChangeItem.tsx b/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/components/FieldChangeItem.tsx index 2140076c2..aa06a8e0c 100644 --- a/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/components/FieldChangeItem.tsx +++ b/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/components/FieldChangeItem.tsx @@ -5,6 +5,7 @@ import type { HistoryFieldChange } from "@graphitation/apollo-forest-run"; import { DifferenceKind } from "@graphitation/apollo-forest-run"; import { ArrayDiffViewer } from "../ArrayDiffViewer"; import { useFieldChangesListStyles } from "../FieldChangesList.styles"; +import { formatValue } from "../shared/diffUtils"; interface FieldChangeItemProps { change: HistoryFieldChange; @@ -192,30 +193,3 @@ function formatValuePreview(value: unknown): string { } return String(value); } - -function formatValue(value: unknown): string { - if (value === undefined) return "(unavailable)"; - if (value === null) return "null"; - - // If it's a string, check if it's JSON - if (typeof value === "string") { - try { - const parsed = JSON.parse(value); - // If successfully parsed and it's an object or array, format it - if (typeof parsed === "object" && parsed !== null) { - return JSON.stringify(parsed, null, 2); - } - } catch { - // Not JSON, return the string as-is - return value; - } - return value; - } - - // For objects, arrays, and other types, stringify with formatting - try { - return JSON.stringify(value, null, 2); - } catch { - return String(value); - } -} diff --git a/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/components/ListViewMode.tsx b/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/components/ListViewMode.tsx index 8eccc9839..0cf628157 100644 --- a/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/components/ListViewMode.tsx +++ b/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/components/ListViewMode.tsx @@ -1,11 +1,9 @@ import React from "react"; import { Text, tokens } from "@fluentui/react-components"; import type { CompositeListLayoutChange as ListItemChange } from "@graphitation/apollo-forest-run"; -import { - getListItemChangeDescription, - formatValueForDisplay, -} from "./arrayDiffUtils"; +import { getListItemChangeDescription } from "./arrayDiffUtils"; import { useArrayDiffViewerStyles } from "../ArrayDiffViewer.styles"; +import { formatValue } from "../shared/diffUtils"; interface ListViewModeProps { itemChanges: ListItemChange[]; @@ -32,7 +30,7 @@ export const ListViewMode: React.FC = ({ itemChanges }) => { fontFamily: tokens.fontFamilyMonospace, }} > - {formatValueForDisplay(change.data)} + {formatValue(change.data)} )} diff --git a/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/components/OperationMetadata.tsx b/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/components/OperationMetadata.tsx index 0e2d4d2ac..689c1398d 100644 --- a/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/components/OperationMetadata.tsx +++ b/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/components/OperationMetadata.tsx @@ -45,7 +45,7 @@ export const OperationMetadata: React.FC = ({ {shouldInlineVariables ? ( {variablesString} ) : ( - + )} )} diff --git a/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/components/arrayDiffUtils.ts b/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/components/arrayDiffUtils.ts index 3bc077b4c..23ebf8fd1 100644 --- a/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/components/arrayDiffUtils.ts +++ b/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/components/arrayDiffUtils.ts @@ -9,16 +9,6 @@ export interface IndexItem { newIndex?: number; // for moved items } -export const formatValueForDisplay = (value: unknown): string => { - if (value === undefined) return "undefined"; - if (value === null) return "null"; - try { - return JSON.stringify(value, null, 2); - } catch { - return String(value); - } -}; - export const formatDataPreview = (data: unknown): string => { if (data === null) return "null"; if (data === undefined) return "undefined"; diff --git a/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/__tests__/diffUtils.test.ts b/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/__tests__/diffUtils.test.ts new file mode 100644 index 000000000..8109de0db --- /dev/null +++ b/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/__tests__/diffUtils.test.ts @@ -0,0 +1,60 @@ +import { formatValue } from "../diffUtils"; + +describe("formatValue", () => { + describe("primitive values", () => { + it("should format undefined", () => { + expect(formatValue(undefined)).toBe("undefined"); + }); + + it("should format null", () => { + expect(formatValue(null)).toBe("null"); + }); + + it("should format strings", () => { + expect(formatValue("hello")).toBe('"hello"'); + expect(formatValue("")).toBe('""'); + expect(formatValue("multi\nline")).toBe('"multi\\nline"'); + }); + + it("should format numbers", () => { + expect(formatValue(42)).toBe("42"); + expect(formatValue(Infinity)).toBe("null"); + expect(formatValue(NaN)).toBe("null"); + }); + + it("should format booleans", () => { + expect(formatValue(true)).toBe("true"); + expect(formatValue(false)).toBe("false"); + }); + }); + + describe("bigint values", () => { + it("should format standalone bigint", () => { + expect(formatValue(BigInt(123))).toBe("123"); + expect(formatValue(BigInt(0))).toBe("0"); + }); + }); + + describe("objects and arrays", () => { + it("should format objects", () => { + const result = formatValue({ + user: { name: "John", address: { city: "NYC" } }, + }); + expect(result).toBe( + '{\n "user": {\n "name": "John",\n "address": {\n "city": "NYC"\n }\n }\n}', + ); + }); + + it("should format object with BigInt", () => { + const result = formatValue({ id: BigInt(Number.MAX_SAFE_INTEGER) }); + expect(result).toBe(`{\n "id": "${Number.MAX_SAFE_INTEGER}n"\n}`); + }); + + it("should format arrays", () => { + const result = formatValue([{ id: 1 }, { id: 2 }]); + expect(result).toBe( + '[\n {\n "id": 1\n },\n {\n "id": 2\n }\n]', + ); + }); + }); +}); diff --git a/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/components/CodeBlock.tsx b/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/components/CodeBlock.tsx index ae28484bf..92530dca9 100644 --- a/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/components/CodeBlock.tsx +++ b/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/components/CodeBlock.tsx @@ -1,5 +1,6 @@ import React from "react"; import { makeStyles, shorthands, tokens } from "@fluentui/react-components"; +import { formatValue } from "../diffUtils"; const useStyles = makeStyles({ codeBlock: { @@ -39,29 +40,12 @@ export interface CodeBlockProps { export const CodeBlock: React.FC = ({ value, - language = "json", inline = false, maxHeight, className, }) => { const classes = useStyles(); - const formatValue = (): string => { - if (typeof value === "string") { - return value; - } - - if (language === "json") { - try { - return JSON.stringify(value, null, 2); - } catch (e) { - return String(value); - } - } - - return String(value); - }; - const style = maxHeight ? { maxHeight } : undefined; return ( @@ -71,7 +55,7 @@ export const CodeBlock: React.FC = ({ }`} style={style} > - {formatValue()} + {formatValue(value)} ); }; diff --git a/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/components/JsonViewer.tsx b/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/components/JsonViewer.tsx index 5c08daedd..d9c10cf24 100644 --- a/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/components/JsonViewer.tsx +++ b/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/components/JsonViewer.tsx @@ -1,6 +1,7 @@ import React, { useMemo } from "react"; import { VirtualizerScrollView } from "@fluentui/react-virtualizer"; import { tokens } from "@fluentui/react-components"; +import { formatValue } from "../diffUtils"; interface JsonViewerProps { data: unknown; @@ -11,13 +12,7 @@ export const JsonViewer: React.FC = ({ data, maxHeight = 400, }) => { - const lines = useMemo(() => { - try { - return JSON.stringify(data, null, 2).split("\n"); - } catch { - return String(data).split("\n"); - } - }, [data]); + const lines = useMemo(() => formatValue(data).split("\n"), [data]); const itemSize = 20; const height = Math.min(lines.length * itemSize, maxHeight); diff --git a/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/diffUtils.ts b/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/diffUtils.ts index f58175152..df5558708 100644 --- a/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/diffUtils.ts +++ b/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/diffUtils.ts @@ -146,8 +146,14 @@ export function computeDiff(oldText: string, newText: string): DiffHunk[] { export function formatValue(value: unknown): string { if (value === undefined) return "undefined"; if (value === null) return "null"; + if (typeof value === "bigint") return value.toString(); + try { - return JSON.stringify(value, null, 2); + return JSON.stringify( + value, + (_, val) => (typeof val === "bigint" ? val.toString() + "n" : val), + 2, + ); } catch { return String(value); } From ab2b8bfe91614c252319617ca0a146aa920225b7 Mon Sep 17 00:00:00 2001 From: Pavel Glac Date: Mon, 12 Jan 2026 14:51:09 +0000 Subject: [PATCH 2/4] Change files --- ...ollo-devtools-14a6c9d6-2b2d-408a-aee2-b75704225839.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@graphitation-rempl-apollo-devtools-14a6c9d6-2b2d-408a-aee2-b75704225839.json diff --git a/change/@graphitation-rempl-apollo-devtools-14a6c9d6-2b2d-408a-aee2-b75704225839.json b/change/@graphitation-rempl-apollo-devtools-14a6c9d6-2b2d-408a-aee2-b75704225839.json new file mode 100644 index 000000000..cb223e132 --- /dev/null +++ b/change/@graphitation-rempl-apollo-devtools-14a6c9d6-2b2d-408a-aee2-b75704225839.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "convert bigint to string", + "packageName": "@graphitation/rempl-apollo-devtools", + "email": "pavelglac@gmail.com", + "dependentChangeType": "patch" +} From f4ae387b65c9a9e11610216069d5196b5e3c68db Mon Sep 17 00:00:00 2001 From: Pavel Glac Date: Mon, 12 Jan 2026 14:56:33 +0000 Subject: [PATCH 3/4] remove redudant code --- .../apollo-cache/history/shared/__tests__/diffUtils.test.ts | 4 ++-- .../src/subscriber/apollo-cache/history/shared/diffUtils.ts | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/__tests__/diffUtils.test.ts b/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/__tests__/diffUtils.test.ts index 8109de0db..86bf60476 100644 --- a/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/__tests__/diffUtils.test.ts +++ b/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/__tests__/diffUtils.test.ts @@ -30,8 +30,8 @@ describe("formatValue", () => { describe("bigint values", () => { it("should format standalone bigint", () => { - expect(formatValue(BigInt(123))).toBe("123"); - expect(formatValue(BigInt(0))).toBe("0"); + expect(formatValue(BigInt(123))).toBe('"123n"'); + expect(formatValue(BigInt(0))).toBe('"0n"'); }); }); diff --git a/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/diffUtils.ts b/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/diffUtils.ts index df5558708..e08fcd4d3 100644 --- a/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/diffUtils.ts +++ b/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/diffUtils.ts @@ -146,7 +146,6 @@ export function computeDiff(oldText: string, newText: string): DiffHunk[] { export function formatValue(value: unknown): string { if (value === undefined) return "undefined"; if (value === null) return "null"; - if (typeof value === "bigint") return value.toString(); try { return JSON.stringify( From 8c6fd6f2bb20ed5d676478ce79e0aac506835111 Mon Sep 17 00:00:00 2001 From: Pavel Glac Date: Mon, 12 Jan 2026 15:04:03 +0000 Subject: [PATCH 4/4] remove unused memo --- .../apollo-cache/history/shared/components/JsonViewer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/components/JsonViewer.tsx b/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/components/JsonViewer.tsx index d9c10cf24..89d405e88 100644 --- a/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/components/JsonViewer.tsx +++ b/packages/rempl-apollo-devtools/src/subscriber/apollo-cache/history/shared/components/JsonViewer.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from "react"; +import React from "react"; import { VirtualizerScrollView } from "@fluentui/react-virtualizer"; import { tokens } from "@fluentui/react-components"; import { formatValue } from "../diffUtils"; @@ -12,7 +12,7 @@ export const JsonViewer: React.FC = ({ data, maxHeight = 400, }) => { - const lines = useMemo(() => formatValue(data).split("\n"), [data]); + const lines = formatValue(data).split("\n"); const itemSize = 20; const height = Math.min(lines.length * itemSize, maxHeight);