@marimo-team/islands 0.16.5 → 0.17.0

package/src/core/saving/save-component.tsx

@@ -96,54 +96,61 @@ export function useSaveNotebook() {
   const store = useStore();
 
   // Save the notebook with the given filename
-  const saveNotebook = useEvent((filename: string, userInitiated: boolean) => {
-    const notebook = getNotebook();
-    const cells = notebookCells(notebook);
-    const cellIds = cells.map((cell) => cell.id);
-    const codes = cells.map((cell) => cell.code);
-    const cellNames = cells.map((cell) => cell.name);
-    const configs = getCellConfigs(notebook);
-    const connection = store.get(connectionAtom);
-    const autoSaveConfig = store.get(autoSaveConfigAtom);
-    const layout = store.get(layoutStateAtom);
-    const kioskMode = store.get(kioskModeAtom);
+  const saveNotebook = useEvent(
+    async (filename: string, userInitiated: boolean) => {
+      const connection = store.get(connectionAtom);
+      const autoSaveConfig = store.get(autoSaveConfigAtom);
+      const kioskMode = store.get(kioskModeAtom);
 
-    if (kioskMode) {
-      return;
-    }
+      if (kioskMode) {
+        return;
+      }
 
-    // Don't save if there are no cells
-    if (codes.length === 0) {
-      return;
-    }
+      // Don't save if we are not connected to a kernel
+      if (connection.state !== WebSocketState.OPEN) {
+        openAlert("Failed to save notebook: not connected to a kernel.");
+        return;
+      }
 
-    // Don't save if we are not connected to a kernel
-    if (connection.state !== WebSocketState.OPEN) {
-      openAlert("Failed to save notebook: not connected to a kernel.");
-      return;
-    }
+      Logger.log("saving to ", filename);
 
-    Logger.log("saving to ", filename);
-    sendSave({
-      cellIds: cellIds,
-      codes,
-      names: cellNames,
-      filename,
-      configs,
-      layout: getSerializedLayout(),
-      persist: true,
-    }).then(() => {
       if (userInitiated && autoSaveConfig.format_on_save) {
-        formatAll();
+        Logger.log("formatting notebook (onSave)");
+        await formatAll();
+      }
+
+      // Grab the latest notebook state, after formatting
+      const notebook = getNotebook();
+      const cells = notebookCells(notebook);
+      const cellIds = cells.map((cell) => cell.id);
+      const codes = cells.map((cell) => cell.code);
+      const cellNames = cells.map((cell) => cell.name);
+      const configs = getCellConfigs(notebook);
+      const layout = store.get(layoutStateAtom);
+
+      // Don't save if there are no cells
+      if (codes.length === 0) {
+        return;
       }
+
+      await sendSave({
+        cellIds: cellIds,
+        codes,
+        names: cellNames,
+        filename,
+        configs,
+        layout: getSerializedLayout(),
+        persist: true,
+      });
+
       setLastSavedNotebook({
         names: cellNames,
         codes,
         configs,
         layout,
       });
-    });
-  });
+    },
+  );
 
   // Save the notebook with the current filename, only if the filename exists
   const saveIfNotebookIsPersistent = useEvent((userInitiated = false) => {

package/src/core/wasm/bridge.ts

@@ -551,6 +551,8 @@ export class PyodideBridge implements RunRequests, EditRequests {
   };
 
   invokeAiTool = throwNotImplemented;
+  clearCache = throwNotImplemented;
+  getCacheInfo = throwNotImplemented;
 
   private async putControlRequest(operation: object) {
     await this.rpc.proxy.request.bridge({

package/src/core/websocket/useMarimoWebSocket.tsx

@@ -24,6 +24,7 @@ import { jsonParseWithSpecialChar } from "@/utils/json/json-parser";
 import { Logger } from "@/utils/Logger";
 import { reloadSafe } from "@/utils/reload-safe";
 import { useAlertActions } from "../alerts/state";
+import { cacheInfoAtom } from "../cache/requests";
 import type { CellId, UIElementId } from "../cells/ids";
 import { useRunsActions } from "../cells/runs";
 import { focusAndScrollCellOutputIntoView } from "../cells/scrollCellIntoView";
@@ -87,6 +88,7 @@ export function useMarimoWebSocket(opts: {
   const setKioskMode = useSetAtom(kioskModeAtom);
   const setCapabilities = useSetAtom(capabilitiesAtom);
   const runtimeManager = useRuntimeManager();
+  const setCacheInfo = useSetAtom(cacheInfoAtom);
 
   const handleMessage = (e: MessageEvent<JsonString<OperationMessage>>) => {
     const msg = jsonParseWithSpecialChar(e.data);
@@ -248,6 +250,12 @@ export function useMarimoWebSocket(opts: {
       case "secret-keys-result":
         SECRETS_REGISTRY.resolve(msg.data.request_id as RequestId, msg.data);
         return;
+      case "cache-info-fetched":
+        setCacheInfo(msg.data);
+        return;
+      case "cache-cleared":
+        // Cache cleared, could refresh cache info if needed
+        return;
       case "data-source-connections":
         addDataSourceConnection({
           connections: msg.data.connections.map((conn) => ({

package/src/css/app/codemirror-completions.css

@@ -247,7 +247,7 @@
 
   .cm-completionInfo.cm-completionInfo-right-narrow {
     /* CodeMirror's default makes the completionInfo overlap with the
-      * compeletion symbol */
+      * completion symbol */
     left: 100%;
   }
 

package/src/custom.d.ts

@@ -16,6 +16,8 @@ interface JSON {
     text: string,
     reviver?: (this: any, key: string, value: any) => any,
   ): unknown;
+
+  rawJSON(value: string): unknown;
 }
 
 // Improve type inference for Array.filter with BooleanConstructor

package/src/plugins/core/registerReactComponent.tsx

@@ -32,6 +32,7 @@ import { UIElementRegistry } from "@/core/dom/uiregistry";
 import { FUNCTIONS_REGISTRY } from "@/core/functions/FunctionRegistry";
 import { LocaleProvider } from "@/core/i18n/locale-provider";
 import { store } from "@/core/state/jotai";
+import { isStaticNotebook } from "@/core/static/static-state";
 import {
   type HTMLElementNotDerivedFromRef,
   useEventListener,
@@ -182,10 +183,13 @@ function PluginSlotInternal<T>(
         const objectId = getUIElementObjectId(hostElement);
         invariant(objectId, "Object ID should exist");
 
+        const isStatic = isStaticNotebook();
+
         const htmlId = HTMLCellId.findElementThroughShadowDOMs(hostElement)?.id;
         const cellId = htmlId ? HTMLCellId.parse(htmlId) : null;
-        if (cellId) {
+        if (cellId && !isStatic) {
           // If the cell is not initialized, throw an error
+          // Continue if the cell is static, so we can propagate a clearer error message.
           const notebookState = store.get(notebookAtom);
           const cellRuntime = notebookState.cellRuntime[cellId];
           const cellData = notebookState.cellData[cellId];

package/src/plugins/impl/DataTablePlugin.tsx

@@ -205,7 +205,7 @@ type DataTableFunctions = {
     sort?: {
       by: string;
       descending: boolean;
-    };
+    }[];
     query?: string;
     filters?: ConditionType[];
     page_number: number;
@@ -298,7 +298,12 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       .input(
         z.object({
           sort: z
-            .object({ by: z.string(), descending: z.boolean() })
+            .array(
+              z.object({
+                by: z.string(),
+                descending: z.boolean(),
+              }),
+            )
             .optional(),
           query: z.string().optional(),
           filters: z.array(ConditionSchema).optional(),
@@ -501,19 +506,15 @@ export const LoadingDataTableComponent = memo(
         !props.lazy &&
         !pageSizeChanged;
 
-      if (sorting.length > 1) {
-        Logger.warn("Multiple sort columns are not supported");
-      }
+      // Convert sorting state to API format
+      const sortArgs =
+        sorting.length > 0
+          ? sorting.map((s) => ({ by: s.id, descending: s.desc }))
+          : undefined;
 
       // If we have sort/search/filter, use the search function
       const searchResultsPromise = search<T>({
-        sort:
-          sorting.length > 0
-            ? {
-                by: sorting[0].id,
-                descending: sorting[0].desc,
-              }
-            : undefined,
+        sort: sortArgs,
         query: searchQuery,
         page_number: paginationState.pageIndex,
         page_size: paginationState.pageSize,
@@ -563,16 +564,15 @@ export const LoadingDataTableComponent = memo(
 
     const getRow = useCallback(
       async (rowId: number) => {
+        const sortArgs =
+          sorting.length > 0
+            ? sorting.map((s) => ({ by: s.id, descending: s.desc }))
+            : undefined;
+
         const result = await search<T>({
           page_number: rowId,
           page_size: 1,
-          sort:
-            sorting.length > 0
-              ? {
-                  by: sorting[0].id,
-                  descending: sorting[0].desc,
-                }
-              : undefined,
+          sort: sortArgs,
           query: searchQuery,
           filters: filters.flatMap((filter) => {
             return filterToFilterCondition(

package/src/plugins/impl/__tests__/DateTimePickerPlugin.test.tsx

@@ -42,4 +42,36 @@ describe("DateTimePickerPlugin", () => {
     const datePicker = container.querySelector('[class*="group"]');
     expect(datePicker).not.toBeNull();
   });
+
+  it("should render with datetime.min and datetime.max edge cases", () => {
+    // Regression test for issue #6700
+    // Ensure the component can handle edge case dates like datetime.min
+    const plugin = new DateTimePickerPlugin();
+    const host = document.createElement("div");
+    const props: IPluginProps<string, DateTimeData> = {
+      host,
+      value: "2024-01-01T12:00:00",
+      setValue: (valueOrFn) => {
+        if (typeof valueOrFn === "function") {
+          valueOrFn("2024-01-01T12:00:00");
+        }
+      },
+      data: {
+        label: null,
+        // These are the exact values that datetime.min and datetime.max produce
+        start: "0001-01-01T00:00:00",
+        stop: "9999-12-31T23:59:59",
+        fullWidth: false,
+      },
+      functions: {},
+    };
+
+    // This should not throw an error
+    const { container } = render(plugin.render(props));
+
+    // Check if the component renders successfully
+    expect(container.innerHTML).not.toBe("");
+    const datePicker = container.querySelector('[class*="group"]');
+    expect(datePicker).not.toBeNull();
+  });
 });

package/src/plugins/impl/chat/ChatPlugin.tsx

@@ -41,7 +41,7 @@ export const ChatPlugin = createPlugin<{ messages: ChatMessage[] }>(
           z.object({
             role: z.enum(["system", "user", "assistant"]),
             content: z.string(),
-            parts: z.array(z.any()),
+            parts: z.array(z.any()).nullable(),
           }),
         ),
       }),

package/src/plugins/impl/chat/chat-ui.tsx

@@ -253,6 +253,20 @@ export const Chatbot: React.FC<Props> = (props) => {
     });
   }, [messages.length, scrollContainerRef]);
 
+  const codemirrorView = codeMirrorInputRef.current?.view;
+
+  const resetInput = () => {
+    // Clear input immediately by directly manipulating the editor
+    // There is some delay if we use setInput("") only
+    if (codemirrorView) {
+      const docLength = codemirrorView.state.doc.length;
+      codemirrorView.dispatch({
+        changes: { from: 0, to: docLength, insert: "" },
+      });
+    }
+    setInput("");
+  };
+
   return (
     <div
       className="flex flex-col h-full bg-(--slate-1) rounded-lg shadow border border-(--slate-6) overflow-hidden relative"
@@ -367,6 +381,7 @@ export const Chatbot: React.FC<Props> = (props) => {
             role: "user",
             parts: [{ type: "text", text: input }, ...(fileParts ?? [])],
           });
+          resetInput();
         }}
         ref={formRef}
         className="flex w-full border-t border-(--slate-6) px-2 py-1 items-center"
@@ -380,8 +395,8 @@ export const Chatbot: React.FC<Props> = (props) => {
             onSelect={(prompt) => {
               setInput(prompt);
               requestAnimationFrame(() => {
-                codeMirrorInputRef.current?.view?.focus();
-                moveToEndOfEditor(codeMirrorInputRef.current?.view);
+                codemirrorView?.focus();
+                moveToEndOfEditor(codemirrorView);
               });
             }}
           />

package/src/plugins/impl/chat/types.ts

@@ -7,7 +7,7 @@ export type ChatRole = "system" | "user" | "assistant";
 export interface ChatMessage {
   role: ChatRole;
   content: string; // TODO: Deprecate content
-  parts: UIMessage["parts"];
+  parts: UIMessage["parts"] | null;
 }
 
 export interface SendMessageRequest {

package/src/plugins/impl/data-frames/DataFramePlugin.tsx

@@ -63,7 +63,7 @@ type PluginFunctions = {
     sort?: {
       by: string;
       descending: boolean;
-    };
+    }[];
     query?: string;
     filters?: ConditionType[];
     page_number: number;
@@ -117,7 +117,12 @@ export const DataFramePlugin = createPlugin<S>("marimo-dataframe")
       .input(
         z.object({
           sort: z
-            .object({ by: z.string(), descending: z.boolean() })
+            .array(
+              z.object({
+                by: z.string(),
+                descending: z.boolean(),
+              }),
+            )
             .optional(),
           query: z.string().optional(),
           filters: z.array(ConditionSchema).optional(),

package/src/plugins/impl/plotly/__tests__/parse-from-template.test.ts

@@ -70,4 +70,21 @@ describe("createParser", () => {
       Year: "1964",
     });
   });
+
+  it("should handle labels with special characters (brackets, parentheses, spaces)", () => {
+    const hovertemplate =
+      "Horsepower [ps]=%{x}<br>Miles per Gallon=%{y}<br>Weight (lbs)=%{marker.size}<extra></extra>";
+    const parser = createParser(hovertemplate);
+    const data = {
+      x: "110",
+      y: "20.6",
+      "marker.size": "3000",
+    } as unknown as Plotly.PlotDatum;
+    const result = parser.parse(data);
+    expect(result).toEqual({
+      "Horsepower [ps]": "110",
+      "Miles per Gallon": "20.6",
+      "Weight (lbs)": "3000",
+    });
+  });
 });

package/src/plugins/impl/plotly/parse-from-template.ts

@@ -24,7 +24,8 @@ export interface PlotlyTemplateParser {
  */
 export function createParser(hovertemplate: string): PlotlyTemplateParser {
   // Regular expression to match the pattern key=%{selector}
-  const regex = /(\w+)=%{([^}]+)}/g;
+  // Match any characters except = for the key (non-greedy to avoid capturing previous content)
+  const regex = /([^=<>]+)=%{([^}]+)}/g;
 
   // Create an object to hold the key-selector pairs
   const keySelectorPairs: Record<string, string> = {};

package/src/utils/__tests__/formatting.test.ts

@@ -0,0 +1,107 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { formatBytes, formatTime } from "../formatting";
+
+const locale = "en-US";
+
+describe("formatBytes", () => {
+  it("should format 0 bytes", () => {
+    expect(formatBytes(0, locale)).toBe("0 B");
+    expect(formatBytes(-1, locale)).toBe("0 B");
+  });
+
+  it("should format bytes", () => {
+    expect(formatBytes(100, locale)).toBe("100 B");
+    expect(formatBytes(512, locale)).toBe("512 B");
+    expect(formatBytes(1023, locale)).toBe("1,023 B");
+  });
+
+  it("should format kilobytes", () => {
+    expect(formatBytes(1024, locale)).toBe("1 KB");
+    expect(formatBytes(1536, locale)).toBe("1.5 KB");
+    expect(formatBytes(10240, locale)).toBe("10 KB");
+  });
+
+  it("should format megabytes", () => {
+    expect(formatBytes(1048576, locale)).toBe("1 MB"); // 1024^2
+    expect(formatBytes(1572864, locale)).toBe("1.5 MB"); // 1.5 * 1024^2
+    expect(formatBytes(10485760, locale)).toBe("10 MB");
+  });
+
+  it("should format gigabytes", () => {
+    expect(formatBytes(1073741824, locale)).toBe("1 GB"); // 1024^3
+    expect(formatBytes(1610612736, locale)).toBe("1.5 GB"); // 1.5 * 1024^3
+    expect(formatBytes(10737418240, locale)).toBe("10 GB");
+  });
+
+  it("should format terabytes", () => {
+    expect(formatBytes(1099511627776, locale)).toBe("1 TB"); // 1024^4
+    expect(formatBytes(1649267441664, locale)).toBe("1.5 TB"); // 1.5 * 1024^4
+  });
+
+  it("should respect locale parameter", () => {
+    // German locale uses different separators
+    const bytes = 1536; // 1.5 KB
+    expect(formatBytes(bytes, "de-DE")).toContain("1,5");
+    // US locale uses dot
+    expect(formatBytes(bytes, "en-US")).toContain("1.5");
+  });
+});
+
+describe("formatTime", () => {
+  it("should format 0 seconds", () => {
+    expect(formatTime(0, locale)).toBe("0s");
+  });
+
+  it("should format microseconds", () => {
+    expect(formatTime(0.0000001, locale)).toBe("0.1µs");
+    expect(formatTime(0.0000005, locale)).toBe("0.5µs");
+    expect(formatTime(0.000000999, locale)).toBe("1µs"); // rounded by prettyNumber
+  });
+
+  it("should format milliseconds", () => {
+    expect(formatTime(0.001, locale)).toBe("1ms");
+    expect(formatTime(0.0015, locale)).toBe("1.5ms");
+    expect(formatTime(0.1, locale)).toBe("100ms");
+    expect(formatTime(0.5, locale)).toBe("500ms");
+    expect(formatTime(0.999, locale)).toBe("999ms");
+  });
+
+  it("should format seconds", () => {
+    expect(formatTime(1, locale)).toBe("1s");
+    expect(formatTime(1.5, locale)).toBe("1.5s");
+    expect(formatTime(30, locale)).toBe("30s");
+    expect(formatTime(59.9, locale)).toBe("59.9s");
+  });
+
+  it("should format minutes and seconds", () => {
+    expect(formatTime(60, locale)).toBe("1m");
+    expect(formatTime(90, locale)).toBe("1m 30s");
+    expect(formatTime(150, locale)).toBe("2m 30s");
+    expect(formatTime(3540, locale)).toBe("59m");
+    expect(formatTime(3599, locale)).toBe("59m 59s");
+  });
+
+  it("should format hours and minutes", () => {
+    expect(formatTime(3600, locale)).toBe("1h");
+    expect(formatTime(3660, locale)).toBe("1h 1m");
+    expect(formatTime(5400, locale)).toBe("1h 30m");
+    expect(formatTime(7200, locale)).toBe("2h");
+    expect(formatTime(9000, locale)).toBe("2h 30m");
+  });
+
+  it("should respect locale parameter", () => {
+    // German locale uses comma for decimal separator
+    const time = 1.5;
+    expect(formatTime(time, "de-DE")).toContain("1,5");
+    // US locale uses dot
+    expect(formatTime(time, "en-US")).toContain("1.5");
+  });
+
+  it("should handle edge cases", () => {
+    expect(formatTime(0.0009999, locale)).toBe("999.9µs");
+    expect(formatTime(59.999, locale)).toBe("60s"); // rounded by prettyNumber
+    expect(formatTime(3599.999, locale)).toBe("59m 60s"); // rounded by prettyNumber
+  });
+});

package/src/utils/__tests__/json-parser.test.ts

@@ -55,6 +55,19 @@ it("can fail to jsonParseWithSpecialChar", () => {
   expect(jsonParseWithSpecialChar("[nan]")).toMatchInlineSnapshot("{}");
 });
 
+it("can parse bigInts", () => {
+  const bigint = JSON.stringify({ bigint: { $bigint: "123456" } });
+  expect(jsonParseWithSpecialChar(bigint)).toEqual({ bigint: BigInt(123_456) });
+
+  const arrayOfBigInts = JSON.stringify([{ $bigint: "123456" }]);
+  expect(jsonParseWithSpecialChar(arrayOfBigInts)).toEqual([BigInt(123_456)]);
+
+  const nestedBigInt = JSON.stringify({ bigint: [{ $bigint: "123456" }] });
+  expect(jsonParseWithSpecialChar(nestedBigInt)).toEqual({
+    bigint: [BigInt(123_456)],
+  });
+});
+
 it("can convert json to tsv", () => {
   expect(jsonToTSV([])).toEqual("");
 

package/src/utils/copy.ts

@@ -9,6 +9,12 @@ import { Logger } from "./Logger";
  * when running localhost http.
  */
 export async function copyToClipboard(text: string) {
+  if (navigator.clipboard === undefined) {
+    Logger.warn("navigator.clipboard is not supported");
+    window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
+    return;
+  }
+
   await navigator.clipboard.writeText(text).catch(async () => {
     // Fallback to prompt
     Logger.warn("Failed to copy to clipboard using navigator.clipboard");

package/src/utils/formatting.ts

@@ -0,0 +1,51 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { prettyNumber } from "./numbers";
+
+/**
+ * Format bytes to human-readable format
+ * @param bytes - Number of bytes to format
+ * @param locale - Optional locale for number formatting
+ * @returns Formatted string (e.g., "1.5 MB")
+ */
+export function formatBytes(bytes: number, locale: string): string {
+  if (bytes === 0 || bytes === -1) {
+    return "0 B";
+  }
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  const value = bytes / k ** i;
+  return `${prettyNumber(value, locale)} ${sizes[i]}`;
+}
+
+/**
+ * Format seconds to human-readable time format
+ * @param seconds - Number of seconds to format
+ * @param locale - Optional locale for number formatting
+ * @returns Formatted string (e.g., "1m 30s", "2h 15m", "500ms", "100µs")
+ */
+export function formatTime(seconds: number, locale: string): string {
+  if (seconds === 0) {
+    return "0s";
+  }
+  if (seconds < 0.001) {
+    return `${prettyNumber(seconds * 1_000_000, locale)}µs`;
+  }
+  if (seconds < 1) {
+    return `${prettyNumber(seconds * 1000, locale)}ms`;
+  }
+  if (seconds < 60) {
+    return `${prettyNumber(seconds, locale)}s`;
+  }
+  const minutes = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  if (minutes < 60) {
+    return secs > 0
+      ? `${minutes}m ${prettyNumber(secs, locale)}s`
+      : `${minutes}m`;
+  }
+  const hours = Math.floor(minutes / 60);
+  const remainingMins = minutes % 60;
+  return remainingMins > 0 ? `${hours}h ${remainingMins}m` : `${hours}h`;
+}

package/src/utils/json/json-parser.ts

@@ -2,6 +2,18 @@
 
 import type { JsonString } from "./base64";
 
+declare global {
+  interface BigInt {
+    toJSON(): unknown;
+  }
+}
+
+// Treat BigInts as numbers
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON#using_json_numbers
+BigInt.prototype.toJSON = function () {
+  return JSON.rawJSON(this.toString());
+};
+
 /**
  * Parse an attribute value as JSON.
  * This also handles NaN, Infinity, and -Infinity.
@@ -12,7 +24,7 @@ export function jsonParseWithSpecialChar<T = unknown>(
   // This regex handling is expensive and often not needed.
   // We try to parse with JSON.parse first, and if that fails, we use the regex.
   try {
-    return JSON.parse(value) as T;
+    return JSON.parse(value, (_key, value) => sanitizeBigInt(value)) as T;
   } catch {
     // Do nothing
   }
@@ -36,7 +48,7 @@ export function jsonParseWithSpecialChar<T = unknown>(
     );
     return JSON.parse(value, (_key, v) => {
       if (typeof v !== "string") {
-        return v;
+        return sanitizeBigInt(v);
       }
       if (v === `${CHAR}NaN${CHAR}`) {
         return Number.NaN;
@@ -47,7 +59,7 @@ export function jsonParseWithSpecialChar<T = unknown>(
       if (v === `${CHAR}-Infinity${CHAR}`) {
         return Number.NEGATIVE_INFINITY;
       }
-      return v;
+      return sanitizeBigInt(v);
     }) as T;
   } catch {
     return {} as T;
@@ -63,3 +75,16 @@ export function jsonToTSV(json: Record<string, unknown>[]) {
   const values = json.map((row) => keys.map((key) => row[key]).join("\t"));
   return `${keys.join("\t")}\n${values.join("\n")}`;
 }
+
+/** Adapted from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt#use_within_json */
+function sanitizeBigInt(value: unknown): unknown {
+  if (
+    value !== null &&
+    typeof value === "object" &&
+    "$bigint" in value &&
+    typeof value.$bigint === "string"
+  ) {
+    return BigInt(value.$bigint);
+  }
+  return value;
+}