@assistant-ui/react-streamdown 0.0.0

package/src/__tests__/PreOverride.test.tsx

@@ -0,0 +1,132 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { render, renderHook, screen, cleanup } from "@testing-library/react";
+import type { ReactNode } from "react";
+import {
+  PreContext,
+  PreOverride,
+  useIsStreamdownCodeBlock,
+  useStreamdownPreProps,
+} from "../adapters/PreOverride";
+
+afterEach(cleanup);
+
+describe("useIsStreamdownCodeBlock", () => {
+  it("returns false when not inside PreContext", () => {
+    const { result } = renderHook(() => useIsStreamdownCodeBlock());
+    expect(result.current).toBe(false);
+  });
+
+  it("returns true when inside PreContext", () => {
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <PreContext.Provider value={{ className: "test" }}>
+        {children}
+      </PreContext.Provider>
+    );
+
+    const { result } = renderHook(() => useIsStreamdownCodeBlock(), {
+      wrapper,
+    });
+    expect(result.current).toBe(true);
+  });
+
+  it("returns true with minimal context value", () => {
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <PreContext.Provider value={{}}>{children}</PreContext.Provider>
+    );
+
+    const { result } = renderHook(() => useIsStreamdownCodeBlock(), {
+      wrapper,
+    });
+    expect(result.current).toBe(true);
+  });
+});
+
+describe("useStreamdownPreProps", () => {
+  it("returns null when not inside PreContext", () => {
+    const { result } = renderHook(() => useStreamdownPreProps());
+    expect(result.current).toBeNull();
+  });
+
+  it("returns context value when inside PreContext", () => {
+    const preProps = { className: "test-class", "data-foo": "bar" };
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <PreContext.Provider value={preProps}>{children}</PreContext.Provider>
+    );
+
+    const { result } = renderHook(() => useStreamdownPreProps(), { wrapper });
+    expect(result.current).toEqual(preProps);
+  });
+
+  it("includes node when provided", () => {
+    const mockNode = {
+      type: "element" as const,
+      tagName: "pre",
+      position: { start: { line: 1 }, end: { line: 5 } },
+    };
+    const preProps = { node: mockNode, className: "test" };
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <PreContext.Provider value={preProps}>{children}</PreContext.Provider>
+    );
+
+    const { result } = renderHook(() => useStreamdownPreProps(), { wrapper });
+    expect(result.current?.node).toEqual(mockNode);
+  });
+});
+
+describe("PreOverride component", () => {
+  it("renders a pre element", () => {
+    render(<PreOverride>code content</PreOverride>);
+    const preElement = screen.getByText("code content");
+    expect(preElement.tagName).toBe("PRE");
+  });
+
+  it("passes through props to pre element", () => {
+    render(
+      <PreOverride className="my-class" data-testid="my-pre">
+        content
+      </PreOverride>,
+    );
+    const preElement = screen.getByTestId("my-pre");
+    expect(preElement.className).toContain("my-class");
+  });
+
+  it("provides context to children", () => {
+    function ChildComponent() {
+      const isCodeBlock = useIsStreamdownCodeBlock();
+      return <span data-testid="result">{isCodeBlock ? "yes" : "no"}</span>;
+    }
+
+    render(
+      <PreOverride>
+        <ChildComponent />
+      </PreOverride>,
+    );
+
+    expect(screen.getByTestId("result").textContent).toBe("yes");
+  });
+
+  it("provides props via context", () => {
+    function ChildComponent() {
+      const props = useStreamdownPreProps();
+      return <span data-testid="result">{props?.className}</span>;
+    }
+
+    render(
+      <PreOverride className="test-class">
+        <ChildComponent />
+      </PreOverride>,
+    );
+
+    expect(screen.getByTestId("result").textContent).toBe("test-class");
+  });
+
+  it("is memoized and does not re-render unnecessarily", () => {
+    const { rerender } = render(
+      <PreOverride className="test">content</PreOverride>,
+    );
+
+    // Same props should not cause issues
+    rerender(<PreOverride className="test">content</PreOverride>);
+    expect(screen.getByText("content")).toBeDefined();
+  });
+});

package/src/__tests__/code-adapter.integration.test.tsx

@@ -0,0 +1,325 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { createCodeAdapter } from "../adapters/code-adapter";
+import { PreContext } from "../adapters/PreOverride";
+
+afterEach(cleanup);
+
+// Wrapper to provide PreContext (simulates being inside a code block)
+function CodeBlockWrapper({ children }: { children: ReactNode }) {
+  return (
+    <PreContext.Provider value={{ className: "language-javascript" }}>
+      {children}
+    </PreContext.Provider>
+  );
+}
+
+describe("createCodeAdapter integration", () => {
+  describe("inline code detection", () => {
+    it("renders inline code when not inside PreContext", () => {
+      const AdaptedCode = createCodeAdapter({});
+      render(<AdaptedCode className="inline">console.log</AdaptedCode>);
+
+      const codeElement = screen.getByText("console.log");
+      expect(codeElement.tagName).toBe("CODE");
+      expect(codeElement.className).toContain("aui-streamdown-inline-code");
+    });
+
+    it("applies inline class along with user class", () => {
+      const AdaptedCode = createCodeAdapter({});
+      render(<AdaptedCode className="custom-class">code</AdaptedCode>);
+
+      const codeElement = screen.getByText("code");
+      expect(codeElement.className).toContain("aui-streamdown-inline-code");
+      expect(codeElement.className).toContain("custom-class");
+    });
+  });
+
+  describe("code block detection", () => {
+    it("uses SyntaxHighlighter when inside PreContext", () => {
+      const MockSyntax = vi.fn(({ code, language }) => (
+        <div data-testid="syntax">{`${language}: ${code}`}</div>
+      ));
+      const AdaptedCode = createCodeAdapter({
+        SyntaxHighlighter: MockSyntax,
+      });
+
+      render(
+        <CodeBlockWrapper>
+          <AdaptedCode className="language-javascript">const x = 1</AdaptedCode>
+        </CodeBlockWrapper>,
+      );
+
+      expect(screen.getByTestId("syntax").textContent).toBe(
+        "javascript: const x = 1",
+      );
+      expect(MockSyntax).toHaveBeenCalled();
+      const callArgs = MockSyntax.mock.calls[0][0];
+      expect(callArgs.language).toBe("javascript");
+      expect(callArgs.code).toBe("const x = 1");
+    });
+
+    it("renders CodeHeader when provided", () => {
+      const MockHeader = vi.fn(({ language }) => (
+        <div data-testid="header">{language}</div>
+      ));
+      const MockSyntax = vi.fn(({ code }) => (
+        <div data-testid="syntax">{code}</div>
+      ));
+
+      const AdaptedCode = createCodeAdapter({
+        CodeHeader: MockHeader,
+        SyntaxHighlighter: MockSyntax,
+      });
+
+      render(
+        <CodeBlockWrapper>
+          <AdaptedCode className="language-python">print("hi")</AdaptedCode>
+        </CodeBlockWrapper>,
+      );
+
+      expect(screen.getByTestId("header").textContent).toBe("python");
+      expect(screen.getByTestId("syntax").textContent).toBe('print("hi")');
+    });
+  });
+
+  describe("language detection", () => {
+    it.each([
+      ["language-javascript", "javascript"],
+      ["language-typescript", "typescript"],
+      ["language-python", "python"],
+      ["language-rust", "rust"],
+      ["language-go", "go"],
+      ["language-c++", "c++"],
+      ["language-c#", "c#"],
+      ["language-", ""],
+      ["", ""],
+      [undefined, ""],
+    ])("extracts %s as %s", (className, expected) => {
+      const MockSyntax = vi.fn(({ language }) => (
+        <div data-testid="syntax">{language}</div>
+      ));
+      const AdaptedCode = createCodeAdapter({ SyntaxHighlighter: MockSyntax });
+
+      render(
+        <CodeBlockWrapper>
+          <AdaptedCode className={className}>code</AdaptedCode>
+        </CodeBlockWrapper>,
+      );
+
+      expect(screen.getByTestId("syntax").textContent).toBe(expected);
+    });
+  });
+
+  describe("componentsByLanguage", () => {
+    it("uses language-specific SyntaxHighlighter for matching language", () => {
+      const PythonSyntax = vi.fn(() => (
+        <div data-testid="python">python specific</div>
+      ));
+      const AdaptedCode = createCodeAdapter({
+        SyntaxHighlighter: () => <div>default</div>,
+        componentsByLanguage: { python: { SyntaxHighlighter: PythonSyntax } },
+      });
+
+      render(
+        <PreContext.Provider value={{}}>
+          <AdaptedCode className="language-python">code</AdaptedCode>
+        </PreContext.Provider>,
+      );
+
+      expect(screen.getByTestId("python")).toBeDefined();
+      expect(PythonSyntax).toHaveBeenCalled();
+    });
+
+    it("uses default SyntaxHighlighter for non-matching language", () => {
+      const DefaultSyntax = vi.fn(() => (
+        <div data-testid="default">default</div>
+      ));
+      const AdaptedCode = createCodeAdapter({
+        SyntaxHighlighter: DefaultSyntax,
+        componentsByLanguage: { python: { SyntaxHighlighter: () => <div /> } },
+      });
+
+      render(
+        <PreContext.Provider value={{}}>
+          <AdaptedCode className="language-javascript">code</AdaptedCode>
+        </PreContext.Provider>,
+      );
+
+      expect(screen.getByTestId("default")).toBeDefined();
+    });
+
+    it("uses language-specific CodeHeader", () => {
+      const DefaultHeader = vi.fn(() => (
+        <div data-testid="default-header">default</div>
+      ));
+      const MermaidHeader = vi.fn(() => (
+        <div data-testid="mermaid-header">mermaid</div>
+      ));
+      const MockSyntax = vi.fn(() => <div>syntax</div>);
+
+      const AdaptedCode = createCodeAdapter({
+        SyntaxHighlighter: MockSyntax,
+        CodeHeader: DefaultHeader,
+        componentsByLanguage: {
+          mermaid: { CodeHeader: MermaidHeader },
+        },
+      });
+
+      render(
+        <PreContext.Provider value={{}}>
+          <AdaptedCode className="language-mermaid">code</AdaptedCode>
+        </PreContext.Provider>,
+      );
+
+      expect(screen.getByTestId("mermaid-header")).toBeDefined();
+    });
+  });
+
+  describe("code extraction", () => {
+    it("extracts string children", () => {
+      const MockSyntax = vi.fn(({ code }) => (
+        <div data-testid="syntax">{code}</div>
+      ));
+      const AdaptedCode = createCodeAdapter({
+        SyntaxHighlighter: MockSyntax,
+      });
+
+      render(
+        <CodeBlockWrapper>
+          <AdaptedCode className="language-js">const x = 1;</AdaptedCode>
+        </CodeBlockWrapper>,
+      );
+
+      expect(screen.getByTestId("syntax").textContent).toBe("const x = 1;");
+    });
+
+    it("extracts code from React element children", () => {
+      const MockSyntax = vi.fn(({ code }) => (
+        <div data-testid="syntax">{code}</div>
+      ));
+      const AdaptedCode = createCodeAdapter({
+        SyntaxHighlighter: MockSyntax,
+      });
+
+      // Simulates how streamdown might pass children
+      const nestedElement = <span>nested code</span>;
+
+      render(
+        <CodeBlockWrapper>
+          <AdaptedCode className="language-js">{nestedElement}</AdaptedCode>
+        </CodeBlockWrapper>,
+      );
+
+      expect(MockSyntax).toHaveBeenCalled();
+    });
+
+    it("handles empty children", () => {
+      const MockSyntax = vi.fn(({ code }) => (
+        <div data-testid="syntax-empty">{code || "empty"}</div>
+      ));
+      const AdaptedCode = createCodeAdapter({
+        SyntaxHighlighter: MockSyntax,
+      });
+
+      render(
+        <CodeBlockWrapper>
+          <AdaptedCode className="language-js">{""}</AdaptedCode>
+        </CodeBlockWrapper>,
+      );
+
+      expect(screen.getByTestId("syntax-empty").textContent).toBe("empty");
+    });
+  });
+
+  describe("null return for streamdown default", () => {
+    it("returns null when no custom SyntaxHighlighter", () => {
+      const AdaptedCode = createCodeAdapter({});
+
+      const { container } = render(
+        <CodeBlockWrapper>
+          <AdaptedCode className="language-js">code</AdaptedCode>
+        </CodeBlockWrapper>,
+      );
+
+      // When no SyntaxHighlighter provided for block code, returns null
+      // React renders nothing for null
+      expect(container.querySelector("code")).toBeNull();
+    });
+  });
+
+  describe("Pre and Code component props", () => {
+    it("passes Pre and Code components to SyntaxHighlighter", () => {
+      const MockSyntax = vi.fn(({ components }) => {
+        const { Pre, Code } = components;
+        return (
+          <Pre>
+            <Code data-testid="inner-code">test</Code>
+          </Pre>
+        );
+      });
+
+      const AdaptedCode = createCodeAdapter({
+        SyntaxHighlighter: MockSyntax,
+      });
+
+      render(
+        <CodeBlockWrapper>
+          <AdaptedCode className="language-js">test</AdaptedCode>
+        </CodeBlockWrapper>,
+      );
+
+      expect(screen.getByTestId("inner-code")).toBeDefined();
+    });
+
+    it("default Pre strips node prop", () => {
+      const MockSyntax = vi.fn(({ components }) => {
+        const { Pre } = components;
+        // Pre should render a pre element and strip node
+        return (
+          <Pre node={undefined} data-testid="pre">
+            content
+          </Pre>
+        );
+      });
+
+      const AdaptedCode = createCodeAdapter({
+        SyntaxHighlighter: MockSyntax,
+      });
+
+      render(
+        <CodeBlockWrapper>
+          <AdaptedCode className="language-js">test</AdaptedCode>
+        </CodeBlockWrapper>,
+      );
+
+      const preElement = screen.getByTestId("pre");
+      expect(preElement.tagName).toBe("PRE");
+    });
+
+    it("default Code strips node prop", () => {
+      const MockSyntax = vi.fn(({ components }) => {
+        const { Code } = components;
+        return (
+          <Code node={undefined} data-testid="code">
+            content
+          </Code>
+        );
+      });
+
+      const AdaptedCode = createCodeAdapter({
+        SyntaxHighlighter: MockSyntax,
+      });
+
+      render(
+        <CodeBlockWrapper>
+          <AdaptedCode className="language-js">test</AdaptedCode>
+        </CodeBlockWrapper>,
+      );
+
+      const codeElement = screen.getByTestId("code");
+      expect(codeElement.tagName).toBe("CODE");
+    });
+  });
+});

package/src/__tests__/code-adapter.test.tsx

@@ -0,0 +1,46 @@
+import { describe, it, expect } from "vitest";
+import { shouldUseCodeAdapter } from "../adapters/code-adapter";
+
+describe("shouldUseCodeAdapter", () => {
+  it("returns false when no custom components provided", () => {
+    expect(shouldUseCodeAdapter({})).toBe(false);
+  });
+
+  it("returns true when SyntaxHighlighter is provided", () => {
+    const MockSyntaxHighlighter = () => null;
+    expect(
+      shouldUseCodeAdapter({ SyntaxHighlighter: MockSyntaxHighlighter }),
+    ).toBe(true);
+  });
+
+  it("returns true when CodeHeader is provided", () => {
+    const MockCodeHeader = () => null;
+    expect(shouldUseCodeAdapter({ CodeHeader: MockCodeHeader })).toBe(true);
+  });
+
+  it("returns true when componentsByLanguage has entries", () => {
+    expect(
+      shouldUseCodeAdapter({
+        componentsByLanguage: {
+          mermaid: { SyntaxHighlighter: () => null },
+        },
+      }),
+    ).toBe(true);
+  });
+
+  it("returns false when componentsByLanguage is empty", () => {
+    expect(shouldUseCodeAdapter({ componentsByLanguage: {} })).toBe(false);
+  });
+
+  it("returns true when multiple options are provided", () => {
+    expect(
+      shouldUseCodeAdapter({
+        SyntaxHighlighter: () => null,
+        CodeHeader: () => null,
+        componentsByLanguage: {
+          python: { SyntaxHighlighter: () => null },
+        },
+      }),
+    ).toBe(true);
+  });
+});

package/src/__tests__/components-adapter.test.tsx

@@ -0,0 +1,152 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderHook } from "@testing-library/react";
+import { useAdaptedComponents } from "../adapters/components-adapter";
+
+describe("useAdaptedComponents", () => {
+  describe("basic behavior", () => {
+    it("returns PreOverride when no components provided", () => {
+      const { result } = renderHook(() => useAdaptedComponents({}));
+      expect(result.current).toHaveProperty("pre");
+      expect(result.current).not.toHaveProperty("code");
+    });
+
+    it("includes user HTML components", () => {
+      const MockDiv = vi.fn(() => null);
+      const { result } = renderHook(() =>
+        useAdaptedComponents({
+          components: { div: MockDiv },
+        }),
+      );
+      expect(result.current?.div).toBe(MockDiv);
+      expect(result.current).toHaveProperty("pre");
+    });
+
+    it("excludes SyntaxHighlighter and CodeHeader from direct pass-through", () => {
+      const MockSyntax = vi.fn(() => null);
+      const MockHeader = vi.fn(() => null);
+      const { result } = renderHook(() =>
+        useAdaptedComponents({
+          components: {
+            SyntaxHighlighter: MockSyntax,
+            CodeHeader: MockHeader,
+          },
+        }),
+      );
+      // These should be used to create code adapter, not passed directly
+      expect(result.current).toHaveProperty("code");
+      expect(result.current).toHaveProperty("pre");
+    });
+  });
+
+  describe("with SyntaxHighlighter", () => {
+    it("creates code adapter when SyntaxHighlighter provided", () => {
+      const MockSyntax = vi.fn(() => null);
+      const { result } = renderHook(() =>
+        useAdaptedComponents({
+          components: { SyntaxHighlighter: MockSyntax },
+        }),
+      );
+      expect(result.current).toHaveProperty("code");
+      expect(typeof result.current?.code).toBe("function");
+    });
+
+    it("creates code adapter when CodeHeader provided", () => {
+      const MockHeader = vi.fn(() => null);
+      const { result } = renderHook(() =>
+        useAdaptedComponents({
+          components: { CodeHeader: MockHeader },
+        }),
+      );
+      expect(result.current).toHaveProperty("code");
+    });
+  });
+
+  describe("with componentsByLanguage", () => {
+    it("creates code adapter when componentsByLanguage provided", () => {
+      const MockMermaid = vi.fn(() => null);
+      const { result } = renderHook(() =>
+        useAdaptedComponents({
+          componentsByLanguage: {
+            mermaid: { SyntaxHighlighter: MockMermaid },
+          },
+        }),
+      );
+      expect(result.current).toHaveProperty("code");
+    });
+
+    it("handles multiple language overrides", () => {
+      const MockPython = vi.fn(() => null);
+      const MockRust = vi.fn(() => null);
+      const { result } = renderHook(() =>
+        useAdaptedComponents({
+          componentsByLanguage: {
+            python: { SyntaxHighlighter: MockPython },
+            rust: { SyntaxHighlighter: MockRust },
+          },
+        }),
+      );
+      expect(result.current).toHaveProperty("code");
+    });
+
+    it("handles empty componentsByLanguage", () => {
+      const { result } = renderHook(() =>
+        useAdaptedComponents({
+          componentsByLanguage: {},
+        }),
+      );
+      // Empty componentsByLanguage should not create code adapter
+      expect(result.current).not.toHaveProperty("code");
+    });
+  });
+
+  describe("memoization", () => {
+    it("returns same reference when deps unchanged", () => {
+      const components = { div: vi.fn(() => null) };
+      const { result, rerender } = renderHook(
+        ({ comps }) => useAdaptedComponents({ components: comps }),
+        { initialProps: { comps: components } },
+      );
+
+      const firstResult = result.current;
+      rerender({ comps: components });
+      expect(result.current).toBe(firstResult);
+    });
+
+    it("returns new reference when components change", () => {
+      const { result, rerender } = renderHook(
+        ({ comps }) => useAdaptedComponents({ components: comps }),
+        { initialProps: { comps: { div: vi.fn(() => null) } } },
+      );
+
+      const firstResult = result.current;
+      rerender({ comps: { span: vi.fn(() => null) } });
+      expect(result.current).not.toBe(firstResult);
+    });
+  });
+
+  describe("combined options", () => {
+    it("handles all options together", () => {
+      const MockDiv = vi.fn(() => null);
+      const MockSyntax = vi.fn(() => null);
+      const MockHeader = vi.fn(() => null);
+      const MockMermaid = vi.fn(() => null);
+
+      const { result } = renderHook(() =>
+        useAdaptedComponents({
+          components: {
+            div: MockDiv,
+            SyntaxHighlighter: MockSyntax,
+            CodeHeader: MockHeader,
+          },
+          componentsByLanguage: {
+            mermaid: { SyntaxHighlighter: MockMermaid },
+          },
+        }),
+      );
+
+      expect(result.current?.div).toBe(MockDiv);
+      expect(result.current).toHaveProperty("code");
+      expect(result.current).toHaveProperty("pre");
+    });
+  });
+});