svelte-streamdown 2.6.0 → 2.6.1

package/README.md

@@ -490,6 +490,7 @@ This heading will use a custom component!`;
 | `animation.tokenize`       | `'word' \| 'char'`                                                               | `'word'`         | Tokenization method for text animations                                                                                                            |
 | `animation.animateOnMount` | `boolean`                                                                        | `false`          | Run the token animation on mount or not, useful if you render the Streamdown component in the same time as the first token is receive from the LLM |
 | `extensions`               | `Array<Extension>`                                                               | `[]`             | Custom marked tokenizers to render special markdown blocks or inline tokens                                                                        |
+| `mdxComponents`            | `Record<string, Component>`                                                      | `{}`             | Map of MDX component names to Svelte components (e.g., `{ Card, Button }`)                                                                         |
 | `children`                 | `Snippet<[{token:GenericToken, streamdown: StreamdownContext, children: Snippet` | `undefined`      | Snippet used to render elements not supported by Streamdown, custom extensions, and MDX components                                                 |
 
 #### All Available Customizable Elements:
@@ -506,9 +507,9 @@ This heading will use a custom component!`;
 
 **Special Content**: `blockquote`, `hr`, `alert`, `mermaid`, `math`, `footnoteRef`, `inlineCitation`
 
-**MDX Components**: Any PascalCase component (e.g., `Card`, `Button`, `MyComponent`) - pass as snippets with the component name
+**MDX Components**: Handled via a single `mdx` snippet that receives `token`, `props`, and `children`. Use `token.tagName` to differentiate between components.
 
-**Note**: The above elements are **supported by Streamdown** and should be customized using individual props or the theme system.
+**Note**: The above elements are **supported by Streamdown** and should be customized using individual props or the theme system. MDX components require the `mdx` snippet.
 
 ## 🎨 Theming System
 
@@ -637,24 +638,80 @@ This is **markdown content** inside a component!
 </script>
 
 <Streamdown {content}>
-  {#snippet Card({ title, count, children })}
-    <div class="rounded-lg border border-gray-200 p-4 shadow-sm">
-      <h3 class="text-xl font-bold">{title}</h3>
-      <p class="text-gray-600">Count: {count}</p>
-      <div class="mt-2">
-        {@render children()}
+  {#snippet mdx({ token, props, children })}
+    {#if token.tagName === 'Card'}
+      <div class="rounded-lg border border-gray-200 p-4 shadow-sm">
+        <h3 class="text-xl font-bold">{props.title}</h3>
+        <p class="text-gray-600">Count: {props.count}</p>
+        <div class="mt-2">
+          {@render children()}
+        </div>
       </div>
-    </div>
-  {/snippet}
-  
-  {#snippet Button({ label, active })}
-    <button class="rounded px-4 py-2 {active ? 'bg-blue-500 text-white' : 'bg-gray-200'}">
-      {label}
-    </button>
+    {:else if token.tagName === 'Button'}
+      <button class="rounded px-4 py-2 {props.active ? 'bg-blue-500 text-white' : 'bg-gray-200'}">
+        {props.label}
+      </button>
+    {:else}
+      {@render children()}
+    {/if}
   {/snippet}
 </Streamdown>
 ```
 
+### Alternative: Using Svelte Components Directly
+
+Instead of using the `mdx` snippet with conditional logic, you can pass Svelte components directly using the `mdxComponents` prop:
+
+```svelte
+<script>
+  import { Streamdown } from 'svelte-streamdown';
+  import Card from './Card.svelte';
+  import Button from './Button.svelte';
+  
+  let content = `
+# Using MDX Components
+
+<Card title="Hello" count={42}>
+This is **markdown content** inside a component!
+</Card>
+
+<Button label="Click me" active={true} />
+`;
+</script>
+
+<Streamdown {content} mdxComponents={{ Card, Button }} />
+```
+
+**Your Svelte components** (`Card.svelte`, `Button.svelte`) should accept props and a `children` snippet:
+
+```svelte
+<!-- Card.svelte -->
+<script>
+  let { title, count, children } = $props();
+</script>
+
+<div class="rounded-lg border border-gray-200 p-4 shadow-sm">
+  <h3 class="text-xl font-bold">{title}</h3>
+  <p class="text-gray-600">Count: {count}</p>
+  <div class="mt-2">
+    {@render children()}
+  </div>
+</div>
+```
+
+```svelte
+<!-- Button.svelte -->
+<script>
+  let { label, active } = $props();
+</script>
+
+<button class="rounded px-4 py-2 {active ? 'bg-blue-500 text-white' : 'bg-gray-200'}">
+  {label}
+</button>
+```
+
+This approach is cleaner when you have standalone component files, while the `mdx` snippet approach is better for inline component definitions or when you need shared logic across components.
+
 ### Supported Syntax
 
 **Self-closing components:**
@@ -689,7 +746,7 @@ MDX components support three attribute value types:
 
 MDX components are streaming-safe. Incomplete components are automatically handled during AI streaming:
 
-- Incomplete tags like `<Component attr` are escaped with backticks
+- Incomplete tags like `<Component attr` not rendered to prevent runtime errors
 - Unclosed components like `<Card>content` are auto-closed with `</Card>`
 - Malformed attributes are escaped to prevent rendering errors
 
@@ -697,21 +754,31 @@ This ensures your UI remains stable even when receiving partial markdown from st
 
 ### Component Props
 
-MDX component snippets receive:
-- `token`: The full MdxToken with `tagName`, `attributes`, etc.
+The `mdx` snippet receives three parameters:
+- `token`: The full MdxToken with `tagName`, `attributes`, `selfClosing`, etc.
+- `props`: Object containing all parsed attributes (e.g., `props.title`, `props.count`)
 - `children`: Snippet containing parsed markdown content
-- **All attributes spread directly**: Access attributes by name (e.g., `title`, `count`, `active`)
 
-Example:
+Use `token.tagName` to determine which component is being rendered:
+
 ```svelte
 <!-- Markdown: <Card title="Hello" count={5}>Content</Card> -->
 <Streamdown {content}>
-  {#snippet Card({ title, count, children })}
-    <div>
-      <h3>{title}</h3>
-      <span>Count: {count}</span>
+  {#snippet mdx({ token, props, children })}
+    {#if token.tagName === 'Card'}
+      <div>
+        <h3>{props.title}</h3>
+        <span>Count: {props.count}</span>
+        {@render children()}
+      </div>
+    {:else if token.tagName === 'Alert'}
+      <div class="alert alert-{props.type}">
+        {@render children()}
+      </div>
+    {:else}
+      <!-- Fallback for unknown components -->
       {@render children()}
-    </div>
+    {/if}
   {/snippet}
 </Streamdown>
 ```

package/dist/Elements/Element.svelte

@@ -299,16 +299,13 @@
 		{@html content}
 	{/if}
 {:else if token.type === 'mdx'}
-	{#if token.tagName in streamdown.snippets}
-		<Slot
-			props={{ token, children, ...token.attributes }}
-			render={streamdown.snippets[token.tagName as keyof typeof streamdown.snippets]}
-		>
+	{@const Component = streamdown.mdxComponents?.[token.tagName]}
+	{#if Component}
+		<Component {token} {children} props={token.attributes} />
+	{:else}
+		<Slot props={{ token, children, props: token.attributes }} render={streamdown.snippets.mdx}>
 			{@render children()}
 		</Slot>
-	{:else}
-		<!-- Fallback if no snippet provided for this component -->
-		{@render children()}
 	{/if}
 {:else}
 	<!-- For tokens we don't handle specifically, it may certainely be a custom extension to to the children props to handle -->

package/dist/Streamdown.svelte

@@ -29,6 +29,7 @@
 		extensions,
 		sources,
 		inlineCitationsMode = 'carousel',
+		mdxComponents,
 		...snippets
 	}: StreamdownProps<Source> = $props();
 
@@ -118,6 +119,9 @@
 		},
 		get icons() {
 			return icons;
+		},
+		get mdxComponents() {
+			return mdxComponents;
 		}
 	});
 

package/dist/context.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import type { Component, Snippet } from 'svelte';
 import type { DeepPartialTheme, Theme } from './theme.js';
 import type { MermaidConfig } from 'mermaid';
 import type { KatexOptions } from 'katex';
@@ -30,7 +30,7 @@ export declare class StreamdownContext<Source extends Record<string, any> = Reco
     });
 }
 export declare const useStreamdown: () => StreamdownContext<Record<string, any>>;
-import type { AlertToken, MathToken, SubSupToken, TableToken, THead, TBody, TFoot, THeadRow, TRow, TD, TH, Extension, GenericToken, CitationToken } from './marked/index.js';
+import type { AlertToken, MathToken, SubSupToken, TableToken, THead, TBody, TFoot, THeadRow, TRow, TD, TH, Extension, GenericToken, CitationToken, MdxToken } from './marked/index.js';
 import type { Tokens } from 'marked';
 import type { ListItemToken, ListToken } from './marked/marked-list.js';
 import type { Footnote, FootnoteRef, FootnoteToken } from './marked/marked-footnotes.js';
@@ -73,6 +73,7 @@ type TokenSnippet = {
     inlineCitationPopover: CitationToken;
     inlineCitationContent: CitationToken;
     inlineCitationPreview: CitationToken;
+    mdx: MdxToken;
 };
 type PredefinedElements = keyof TokenSnippet;
 export type Snippets<Source extends Record<string, any> = Record<string, any>> = {
@@ -83,6 +84,8 @@ export type Snippets<Source extends Record<string, any> = Record<string, any>> =
         } & (K extends 'inlineCitationContent' ? {
             source: Source;
             key: string;
+        } : K extends 'mdx' ? {
+            props: Record<string, number | string | boolean | null | undefined>;
         } : {})
     ]>;
 };
@@ -151,5 +154,10 @@ export type StreamdownProps<Source extends Record<string, any> = Record<string,
         token: GenericToken;
         children: Snippet;
     }]>;
+    mdxComponents?: Record<string, Component<{
+        token: MdxToken;
+        children: Snippet;
+        props: any;
+    }, any, any>>;
 } & Partial<Snippets<Source>>;
 export {};

package/dist/utils/parse-incomplete-markdown.js

@@ -762,7 +762,7 @@ class IncompleteMarkdownParser {
                     };
                 },
                 handler: ({ line, state }) => {
-                    // Escape incomplete MDX syntax by wrapping in backticks
+                    // Remove incomplete MDX syntax (don't render it)
                     const lineStates = state.mdxLineStates || [];
                     const currentState = lineStates[state.currentLine];
                     if (currentState?.incompletePositions && currentState.incompletePositions.length > 0) {
@@ -771,8 +771,8 @@ class IncompleteMarkdownParser {
                         for (let i = currentState.incompletePositions.length - 1; i >= 0; i--) {
                             const pos = currentState.incompletePositions[i];
                             const before = result.substring(0, pos);
-                            const incomplete = result.substring(pos);
-                            result = before + '`' + incomplete + '`';
+                            // Simply remove the incomplete MDX tag
+                            result = before;
                         }
                         return result;
                     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-streamdown",
-	"version": "2.6.0",
+	"version": "2.6.1",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",