@assistant-ui/react-devtools 1.2.18 → 1.2.19

package/src/views/ui/JSONTree.tsx

@@ -1,6 +1,7 @@
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import clsx from "clsx";
 import { CopyButton } from "./CopyButton";
+import { getInlineJson } from "./getInlineJson";
 
 const ENTRY_LIMIT = 100;
 const INLINE_MAX = 88;
@@ -10,29 +11,20 @@ const isContainer = (value: unknown): value is object =>
 
 type Entry = { key: string; value: unknown };
 
-const entriesOf = (value: unknown): Entry[] => {
+const entriesOf = (value: object, keys: string[], limit: number): Entry[] => {
   if (Array.isArray(value)) {
-    return value.map((item, index) => ({ key: String(index), value: item }));
+    return value
+      .slice(0, limit)
+      .map((item, index) => ({ key: String(index), value: item }));
   }
-  return Object.entries(value as Record<string, unknown>).map(
-    ([key, value]) => ({ key, value }),
-  );
-};
-
-const summaryOf = (value: unknown): string => {
-  if (Array.isArray(value)) return `[${value.length}]`;
-  return `{${Object.keys(value as object).length}}`;
+  return keys
+    .slice(0, limit)
+    .map((key) => ({ key, value: (value as Record<string, unknown>)[key] }));
 };
 
 const serialize = (value: unknown, compact: boolean) =>
   JSON.stringify(value, null, compact ? 0 : 2);
 
-const isInline = (value: unknown, compact: boolean) => {
-  if (!compact) return false;
-  if (!isContainer(value)) return true;
-  return serialize(value, true).length <= INLINE_MAX;
-};
-
 const Leaf = ({ value }: { value: unknown }) => {
   if (typeof value === "string") {
     return (
@@ -78,9 +70,12 @@ const TreeNode = ({
     );
   }
 
-  const entries = entriesOf(value);
-  const shown = showAll ? entries : entries.slice(0, ENTRY_LIMIT);
-  const hidden = entries.length - shown.length;
+  const keys = Array.isArray(value) ? [] : Object.keys(value);
+  const count = Array.isArray(value) ? value.length : keys.length;
+  const shown = open
+    ? entriesOf(value, keys, showAll ? count : ENTRY_LIMIT)
+    : [];
+  const hidden = count - shown.length;
 
   return (
     <div className="min-w-0">
@@ -101,7 +96,9 @@ const TreeNode = ({
           ›
         </span>
         {name !== undefined ? <span>{name}</span> : null}
-        <span className="opacity-60">{summaryOf(value)}</span>
+        <span className="opacity-60">
+          {Array.isArray(value) ? `[${count}]` : `{${count}}`}
+        </span>
       </button>
       {open ? (
         <div
@@ -141,7 +138,7 @@ const InlineJson = ({
   compact,
 }: {
   serialized: string;
-  copyText: string;
+  copyText: () => string;
   compact: boolean;
 }) => (
   <div className="flex min-w-0 items-start gap-0.5">
@@ -171,7 +168,7 @@ const TreeWithCopy = ({
 }: {
   value: unknown;
   openDepth: number;
-  copyText: string;
+  copyText: () => string;
   compact: boolean;
 }) => (
   <div className="flex min-w-0 items-start gap-0.5">
@@ -212,14 +209,18 @@ export const JSONTree = ({
   openDepth?: number;
   compact?: boolean;
 }) => {
-  const isLeaf = isInline(value, compact) || !isContainer(value);
   const serialized = useMemo(
-    () => (isLeaf ? serialize(value, compact) : ""),
-    [value, compact, isLeaf],
+    () =>
+      !isContainer(value)
+        ? serialize(value, compact)
+        : compact
+          ? getInlineJson(value, INLINE_MAX)
+          : undefined,
+    [value, compact],
   );
-  const copyText = useMemo(() => JSON.stringify(value, null, 2), [value]);
+  const copyText = useCallback(() => JSON.stringify(value, null, 2), [value]);
 
-  if (isLeaf) {
+  if (serialized !== undefined) {
     return (
       <InlineJson
         serialized={serialized}

package/src/views/ui/JSONTree.work.test.tsx

@@ -0,0 +1,60 @@
+import { renderToStaticMarkup } from "react-dom/server";
+import { createRenderCounter } from "@assistant-ui/x-performance";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { JSONTree } from "./JSONTree";
+
+afterEach(() => vi.restoreAllMocks());
+
+function trackedValue(size: number, array: boolean) {
+  const counter = createRenderCounter();
+  const value: Record<string, unknown> | unknown[] = array ? [] : {};
+  for (let index = 0; index < size; index++) {
+    Object.defineProperty(value, String(index), {
+      enumerable: true,
+      get: () => {
+        counter.useRender("entry");
+        return index;
+      },
+    });
+  }
+  const stringify = JSON.stringify;
+  vi.spyOn(JSON, "stringify").mockImplementation((...args) => {
+    if (args[0] === value) counter.useRender("serialization");
+    return Reflect.apply(stringify, JSON, args);
+  });
+  return { value, counter };
+}
+
+describe("JSONTree work bounds", () => {
+  it.each([false, true])(
+    "does not read a collapsed array in compact=%s",
+    (compact) => {
+      const { value, counter } = trackedValue(10_000, true);
+      const html = renderToStaticMarkup(
+        <JSONTree value={value} openDepth={0} compact={compact} />,
+      );
+      expect(html).toContain("[10000]");
+      expect(counter.renders("entry")).toBe(0);
+      expect(counter.renders("serialization")).toBe(0);
+    },
+  );
+
+  it("does not read a collapsed object's values", () => {
+    const { value, counter } = trackedValue(10_000, false);
+    const html = renderToStaticMarkup(<JSONTree value={value} openDepth={0} />);
+    expect(html).toContain("{10000}");
+    expect(counter.renders("entry")).toBe(0);
+    expect(counter.renders("serialization")).toBe(0);
+  });
+
+  it.each([false, true])(
+    "reads only the first 100 entries for array=%s",
+    (array) => {
+      const { value, counter } = trackedValue(10_000, array);
+      const html = renderToStaticMarkup(<JSONTree value={value} />);
+      expect(html).toContain("9900");
+      expect(counter.renders("entry")).toBe(100);
+      expect(counter.renders("serialization")).toBe(0);
+    },
+  );
+});

package/src/views/ui/getInlineJson.test.ts

@@ -0,0 +1,83 @@
+import { createRenderCounter } from "@assistant-ui/x-performance";
+import { describe, expect, it } from "vitest";
+import { getInlineJson } from "./getInlineJson";
+
+describe("getInlineJson", () => {
+  it("preserves JSON output and the exact inline length boundary", () => {
+    const values: unknown[] = [
+      null,
+      true,
+      false,
+      0,
+      NaN,
+      Infinity,
+      {},
+      [],
+      undefined,
+    ];
+    for (const size of [0, 1, 20, 42, 43, 44, 85, 86, 87, 88, 89, 100]) {
+      for (const char of ["x", "\n", '"', "\\", "😀", "\ud800"]) {
+        const text = char.repeat(size);
+        values.push(text, { text }, { nested: { text } }, [text]);
+      }
+      values.push(
+        Array(size).fill(0),
+        Array(size),
+        Object.fromEntries(
+          Array.from({ length: size }, (_, i) => [String(i), undefined]),
+        ),
+      );
+    }
+    values.push({
+      omitted: undefined,
+      fn: () => {},
+      symbol: Symbol(),
+      kept: "yes",
+    });
+    values.push(new Date("2026-01-01T00:00:00.000Z"));
+    values.push({ toJSON: () => ({ short: true }) });
+    const customArray = Object.assign(Array(100).fill(0), {
+      toJSON: () => "short",
+    });
+    values.push(customArray);
+    for (const value of values) {
+      const serialized = JSON.stringify(value);
+      expect(getInlineJson(value, 88)).toBe(
+        serialized !== undefined && serialized.length <= 88
+          ? serialized
+          : undefined,
+      );
+    }
+  });
+
+  it("stops reading a large object after the preview budget is exhausted", () => {
+    const counter = createRenderCounter();
+    const value: Record<string, number> = {};
+    for (let index = 0; index < 10_000; index++) {
+      Object.defineProperty(value, `row${index}`, {
+        enumerable: true,
+        get: () => {
+          counter.useRender("entry");
+          return index;
+        },
+      });
+    }
+    expect(getInlineJson(value, 88)).toBeUndefined();
+    expect(counter.renders("entry")).toBe(17);
+  });
+
+  it("does not turn unrelated serialization errors into a large preview", () => {
+    const failure = new Error("serialization failed");
+    expect(() =>
+      getInlineJson(
+        {
+          toJSON: () => {
+            throw failure;
+          },
+        },
+        88,
+      ),
+    ).toThrow(failure);
+    expect(() => getInlineJson({ value: 1n }, 88)).toThrow(TypeError);
+  });
+});

package/src/views/ui/getInlineJson.ts

@@ -0,0 +1,38 @@
+const TOO_LARGE = Symbol();
+
+export function getInlineJson(value: unknown, limit: number) {
+  if (
+    Array.isArray(value) &&
+    !("toJSON" in value) &&
+    value.length * 2 + 1 > limit
+  ) {
+    return undefined;
+  }
+
+  let remaining = limit;
+  try {
+    const serialized = JSON.stringify(value, function (key, entry: unknown) {
+      if (
+        !Array.isArray(this) &&
+        (entry === undefined ||
+          typeof entry === "function" ||
+          typeof entry === "symbol")
+      ) {
+        return entry;
+      }
+      // This lower bound stops large values without replacing JSON escaping or omission rules.
+      remaining -=
+        1 +
+        (Array.isArray(this) ? 0 : key.length) +
+        (typeof entry === "string" ? entry.length : 0);
+      if (remaining < 0) throw TOO_LARGE;
+      return entry;
+    });
+    return serialized !== undefined && serialized.length <= limit
+      ? serialized
+      : undefined;
+  } catch (error) {
+    if (error === TOO_LARGE) return undefined;
+    throw error;
+  }
+}