feat: add meta prop to custom renderer props

.changeset/custom-renderer-meta.md

@@ -0,0 +1,6 @@
+---
+"streamdown": minor
+---
+
+Add meta prop to custom renderer props to expose code fence metastring
+

add_tests.py

@@ -0,0 +1,54 @@
+content = open('packages/streamdown/__tests__/custom-renderer.test.tsx').read()
+
+# The triple backtick strings - use chr(96)*3 to avoid issues
+bt = chr(96) * 3
+
+addition = f"""
+  it("passes meta prop to custom renderer when metastring is present", async () => {{
+    const MetaRenderer = ({{ meta }}: CustomRendererProps) => (
+      <div data-meta={{meta ?? ""}} data-testid="meta-renderer" />
+    );
+    const {{ container }} = render(
+      <Streamdown
+        plugins={{{{
+          renderers: [{{ language: "rust", component: MetaRenderer }}],
+        }}}}
+      >
+        {{'{bt}rust {{1}} title="foo"\\nlet x = 1;\\n{bt}'}}
+      </Streamdown>
+    );
+
+    await waitFor(() => {{
+      const el = container.querySelector('[data-testid="meta-renderer"]');
+      expect(el?.getAttribute("data-meta")).toBe('{{1}} title="foo"');
+    }});
+  }});
+
+  it("passes undefined meta when no metastring present", async () => {{
+    const MetaRenderer = ({{ meta }}: CustomRendererProps) => (
+      <div
+        data-has-meta={{meta !== undefined ? "true" : "false"}}
+        data-testid="meta-renderer"
+      />
+    );
+    const {{ container }} = render(
+      <Streamdown
+        plugins={{{{
+          renderers: [{{ language: "rust", component: MetaRenderer }}],
+        }}}}
+      >
+        {{"{bt}rust\\nlet x = 1;\\n{bt}"}}
+      </Streamdown>
+    );
+
+    await waitFor(() => {{
+      const el = container.querySelector('[data-testid="meta-renderer"]');
+      expect(el?.getAttribute("data-has-meta")).toBe("false");
+    }});
+  }});
+"""
+
+idx = content.rfind('});')
+new_content = content[:idx] + addition + content[idx:]
+open('packages/streamdown/__tests__/custom-renderer.test.tsx', 'w').write(new_content)
+print('done')

packages/streamdown/__tests__/custom-renderer.test.tsx

@@ -7,11 +7,13 @@ const VegaRenderer = ({
   code,
   language,
   isIncomplete,
+  meta,
 }: CustomRendererProps) => (
   <div
     data-code={code}
     data-incomplete={isIncomplete}
     data-language={language}
+    data-meta={meta}
     data-testid="vega-renderer"
   >
     Vega Chart: {code}
@@ -131,6 +133,42 @@ describe("Custom Renderers", () => {
     });
   });
 
+  it("passes meta prop when metastring is present", async () => {
+    const { container } = render(
+      <Streamdown
+        plugins={{
+          renderers: [{ language: "vega-lite", component: VegaRenderer }],
+        }}
+      >
+        {"```vega-lite startLine=5\ntest-code\n```"}
+      </Streamdown>
+    );
+
+    await waitFor(() => {
+      const renderer = container.querySelector('[data-testid="vega-renderer"]');
+      expect(renderer).toBeTruthy();
+      expect(renderer?.getAttribute("data-meta")).toBe("startLine=5");
+    });
+  });
+
+  it("passes meta as undefined when no metastring is present", async () => {
+    const { container } = render(
+      <Streamdown
+        plugins={{
+          renderers: [{ language: "vega-lite", component: VegaRenderer }],
+        }}
+      >
+        {"```vega-lite\ntest-code\n```"}
+      </Streamdown>
+    );
+
+    await waitFor(() => {
+      const renderer = container.querySelector('[data-testid="vega-renderer"]');
+      expect(renderer).toBeTruthy();
+      expect(renderer?.getAttribute("data-meta")).toBeNull();
+    });
+  });
+
   it("does not interfere with default code blocks when no renderers configured", async () => {
     const { container } = render(
       <Streamdown>{"```javascript\nconst x = 1;\n```"}</Streamdown>

packages/streamdown/lib/components.tsx

@@ -843,6 +843,7 @@ const CodeComponent = ({
           code={code}
           isIncomplete={isBlockIncomplete}
           language={language}
+          meta={metastring}
         />
       </Suspense>
     );

packages/streamdown/lib/plugin-types.ts

@@ -149,6 +149,7 @@ export interface CustomRendererProps {
   code: string;
   isIncomplete: boolean;
   language: string;
+  meta?: string;
 }
 
 export interface CustomRenderer {