svelte-streamdown 2.5.2 → 2.6.0

package/README.md

@@ -63,6 +63,7 @@ Full support for
 - Complex tables
 - Footnotes [^1]
 - Inline citations [ref] [ref2]
+- MDX components (embed custom Svelte components)
 
 [^1]:
     Reference render in a popover by default.
@@ -489,7 +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                                                                        |
-| `children`                 | `Snippet<[{token:GenericToken, streamdown: StreamdownContext, children: Snippet` | `undefined`      | Snippet used to render element that are not supported by Streamdown and tokenized by your custom extensions                                        |
+| `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:
 
@@ -505,6 +506,8 @@ 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
+
 **Note**: The above elements are **supported by Streamdown** and should be customized using individual props or the theme system.
 
 ## 🎨 Theming System
@@ -612,6 +615,107 @@ Each component supports multiple themeable parts:
 
 Themes are intelligently merged using Tailwind's class merging utility, so you only need to override the specific parts you want to customize while keeping the default styling for everything else.
 
+## 🧩 MDX Component Support
+
+Streamdown supports MDX-style JSX components, allowing you to embed custom Svelte components directly in your markdown content.
+
+### Basic Usage
+
+```svelte
+<script>
+  import { Streamdown } from 'svelte-streamdown';
+  
+  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}>
+  {#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()}
+      </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>
+  {/snippet}
+</Streamdown>
+```
+
+### Supported Syntax
+
+**Self-closing components:**
+```markdown
+<Component attr="value" count={42} enabled={true} />
+```
+
+**Components with markdown children:**
+```markdown
+<Component title="Hello">
+# This is a heading
+This **markdown** content will be parsed!
+</Component>
+```
+
+### Attribute Types
+
+MDX components support three attribute value types:
+
+- **Strings**: `attr="hello"` → `"hello"`
+- **Numbers**: `count={42}` or `value={3.14}` → `42`, `3.14`
+- **Booleans**: `active={true}` or `disabled={false}` → `true`, `false`
+- **Expressions**: `value={variableName}` → `"variableName"` (stored as string)
+
+### Component Naming
+
+- Component names **must start with a capital letter** (PascalCase)
+- Valid: `<Card />`, `<MyComponent />`, `<Component123 />`
+- Invalid: `<card />`, `<myComponent />` (these are treated as HTML)
+
+### Streaming Safety
+
+MDX components are streaming-safe. Incomplete components are automatically handled during AI streaming:
+
+- Incomplete tags like `<Component attr` are escaped with backticks
+- Unclosed components like `<Card>content` are auto-closed with `</Card>`
+- Malformed attributes are escaped to prevent rendering errors
+
+This ensures your UI remains stable even when receiving partial markdown from streaming AI responses.
+
+### Component Props
+
+MDX component snippets receive:
+- `token`: The full MdxToken with `tagName`, `attributes`, etc.
+- `children`: Snippet containing parsed markdown content
+- **All attributes spread directly**: Access attributes by name (e.g., `title`, `count`, `active`)
+
+Example:
+```svelte
+<!-- Markdown: <Card title="Hello" count={5}>Content</Card> -->
+<Streamdown {content}>
+  {#snippet Card({ title, count, children })}
+    <div>
+      <h3>{title}</h3>
+      <span>Count: {count}</span>
+      {@render children()}
+    </div>
+  {/snippet}
+</Streamdown>
+```
+
 ## 💉 Extensibility
 
 Streamdown is extensible through the use of custom extensions.

package/dist/Elements/Element.svelte

@@ -298,6 +298,18 @@
 			typeof streamdown.renderHtml === 'function' ? streamdown.renderHtml(token) : token.raw}
 		{@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]}
+		>
+			{@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 -->
 	{@render streamdown.children?.({ token, children, streamdown })}

package/dist/marked/index.d.ts

@@ -10,6 +10,7 @@ import { type TableToken, type THead, type TBody, type TFoot, type THeadRow, typ
 import { type DescriptionDetailToken, type DescriptionListToken, type DescriptionTermToken, type DescriptionToken } from './marked-dl.js';
 import { type AlignToken } from './marked-align.js';
 import { type CitationToken } from './marked-citations.js';
+import { type MdxToken } from './marked-mdx.js';
 export type GenericToken = {
     type: string;
     raw: string;
@@ -22,8 +23,8 @@ export type Extension = {
     start?: TokenizerStartFunction;
     applyInBlockParsing?: boolean;
 };
-export type StreamdownToken = Exclude<MarkedToken, Tokens.List | Tokens.ListItem | Tokens.Table> | ListToken | ListItemToken | MathToken | AlertToken | FootnoteToken | SubSupToken | BrToken | HrToken | TableToken | THead | TBody | TFoot | THeadRow | TRow | TH | TD | DescriptionListToken | DescriptionToken | DescriptionDetailToken | DescriptionTermToken | AlignToken | CitationToken;
+export type StreamdownToken = Exclude<MarkedToken, Tokens.List | Tokens.ListItem | Tokens.Table> | ListToken | ListItemToken | MathToken | AlertToken | FootnoteToken | SubSupToken | BrToken | HrToken | TableToken | THead | TBody | TFoot | THeadRow | TRow | TH | TD | DescriptionListToken | DescriptionToken | DescriptionDetailToken | DescriptionTermToken | AlignToken | CitationToken | MdxToken;
 export type { TableToken, THead, TBody, TFoot, THeadRow, TRow, TH, TD } from './marked-table.js';
 export declare const lex: (markdown: string, extensions?: Extension[]) => StreamdownToken[];
 export declare const parseBlocks: (markdown: string, extensions?: Extension[]) => string[];
-export type { MathToken, AlertToken, FootnoteToken, SubSupToken, BrToken, HrToken, AlignToken, CitationToken };
+export type { MathToken, AlertToken, FootnoteToken, SubSupToken, BrToken, HrToken, AlignToken, CitationToken, MdxToken };

package/dist/marked/index.js

@@ -10,6 +10,7 @@ import { markedTable } from './marked-table.js';
 import { markedDl } from './marked-dl.js';
 import { markedAlign } from './marked-align.js';
 import { markedCitations } from './marked-citations.js';
+import { markedMdx } from './marked-mdx.js';
 const parseExtensions = (...extensions) => {
     const options = {
         gfm: true,
@@ -43,12 +44,12 @@ const parseExtensions = (...extensions) => {
     return options;
 };
 export const lex = (markdown, extensions = []) => {
-    return new Lexer(parseExtensions(markedHr, markedTable, ...markedFootnote(), markedAlert, ...markedMath, markedSub, markedSup, markedList, markedBr, markedDl, markedAlign, markedCitations, ...extensions))
+    return new Lexer(parseExtensions(markedHr, markedTable, ...markedFootnote(), markedAlert, ...markedMath, markedSub, markedSup, markedList, markedBr, markedDl, markedAlign, markedCitations, markedMdx, ...extensions))
         .lex(markdown)
         .filter((token) => token.type !== 'space' && token.type !== 'footnote');
 };
 export const parseBlocks = (markdown, extensions = []) => {
-    const blockLexer = new Lexer(parseExtensions(markedHr, ...markedFootnote(), markedDl, markedTable, markedAlign, ...extensions.filter(({ level, applyInBlockParsing }) => level === 'block' && applyInBlockParsing)));
+    const blockLexer = new Lexer(parseExtensions(markedHr, ...markedFootnote(), markedDl, markedTable, markedAlign, markedMdx, ...extensions.filter(({ level, applyInBlockParsing }) => level === 'block' && applyInBlockParsing)));
     return blockLexer.blockTokens(markdown, []).reduce((acc, block) => {
         if (block.type === 'space' || block.type === 'footnote') {
             return acc;

package/dist/marked/marked-mdx.d.ts

@@ -0,0 +1,12 @@
+import type { Extension } from './index.js';
+import type { Token } from 'marked';
+export type MdxToken = {
+    type: 'mdx';
+    raw: string;
+    tagName: string;
+    attributes: Record<string, any>;
+    selfClosing: boolean;
+    tokens?: Token[];
+    text?: string;
+};
+export declare const markedMdx: Extension;

package/dist/marked/marked-mdx.js

@@ -0,0 +1,124 @@
+import { Lexer } from 'marked';
+const defaultLexer = new Lexer({ gfm: true });
+const defaultTokenizer = defaultLexer.options.tokenizer;
+/**
+ * Parse attributes from MDX component tag
+ * Supports: attribute="string", attribute={number}, attribute={boolean}, attribute={expression}
+ */
+function parseAttributes(attributeString) {
+    const attributes = {};
+    // Pattern: attr="value" or attr={value}
+    const attrPattern = /(\w+)=(?:"([^"]*)"|{([^}]*)})/g;
+    let match;
+    while ((match = attrPattern.exec(attributeString)) !== null) {
+        const [, name, stringValue, expressionValue] = match;
+        if (stringValue !== undefined) {
+            // String attribute: attr="value"
+            attributes[name] = stringValue;
+        }
+        else if (expressionValue !== undefined) {
+            // Expression attribute: attr={value}
+            const trimmed = expressionValue.trim();
+            // Try to parse as number
+            if (/^-?\d+(\.\d+)?$/.test(trimmed)) {
+                attributes[name] = parseFloat(trimmed);
+            }
+            // Parse boolean
+            else if (trimmed === 'true') {
+                attributes[name] = true;
+            }
+            else if (trimmed === 'false') {
+                attributes[name] = false;
+            }
+            // Otherwise keep as string (could be variable reference, etc.)
+            else {
+                attributes[name] = trimmed;
+            }
+        }
+    }
+    return attributes;
+}
+export const markedMdx = {
+    name: 'mdx',
+    level: 'block',
+    applyInBlockParsing: true,
+    tokenizer(src) {
+        // Match MDX component tags (must start with capital letter)
+        // Self-closing: <Component attr="value" />
+        // With children: <Component attr="value">content</Component>
+        // First try self-closing tag
+        const selfClosingMatch = src.match(/^<([A-Z][a-zA-Z0-9]*)((?:\s+\w+=(?:"[^"]*"|{[^}]*}))*)\s*\/>/);
+        if (selfClosingMatch) {
+            const [raw, tagName, attributeString] = selfClosingMatch;
+            const attributes = parseAttributes(attributeString);
+            return {
+                type: 'mdx',
+                raw,
+                tagName,
+                attributes,
+                selfClosing: true
+            };
+        }
+        // Try paired tag with children
+        const openTagMatch = src.match(/^<([A-Z][a-zA-Z0-9]*)((?:\s+\w+=(?:"[^"]*"|{[^}]*}))*)\s*>/);
+        if (openTagMatch) {
+            const [openTag, tagName, attributeString] = openTagMatch;
+            const attributes = parseAttributes(attributeString);
+            // Find matching closing tag with nesting support
+            const closingTag = `</${tagName}>`;
+            // Escape special regex characters in tagName to prevent ReDoS
+            const escapedTagName = tagName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+            const openTagPattern = new RegExp(`<${escapedTagName}(?:\\s|>)`, 'g');
+            const closeTagPattern = new RegExp(`</${escapedTagName}>`, 'g');
+            let depth = 1;
+            let searchPos = openTag.length;
+            let closingIndex = -1;
+            while (depth > 0 && searchPos < src.length) {
+                openTagPattern.lastIndex = searchPos;
+                closeTagPattern.lastIndex = searchPos;
+                const nextOpen = openTagPattern.exec(src);
+                const nextClose = closeTagPattern.exec(src);
+                if (!nextClose)
+                    break;
+                if (nextOpen && nextOpen.index < nextClose.index) {
+                    // Verify this is not a self-closing tag by finding the full tag and checking for />
+                    const tagStart = nextOpen.index;
+                    const tagEndPos = src.indexOf('>', tagStart);
+                    if (tagEndPos !== -1) {
+                        const fullTag = src.substring(tagStart, tagEndPos + 1);
+                        const isSelfClosing = fullTag.trimEnd().endsWith('/>');
+                        if (!isSelfClosing) {
+                            depth++;
+                        }
+                    }
+                    searchPos = openTagPattern.lastIndex;
+                }
+                else {
+                    depth--;
+                    if (depth === 0) {
+                        closingIndex = nextClose.index;
+                    }
+                    searchPos = closeTagPattern.lastIndex;
+                }
+            }
+            if (closingIndex !== -1) {
+                // Extract content between tags
+                const contentStart = openTag.length;
+                const content = src.substring(contentStart, closingIndex);
+                const raw = src.substring(0, closingIndex + closingTag.length);
+                // Parse children as markdown
+                const tokens = content.trim() ? this.lexer.blockTokens(content.trim(), []) : [];
+                return {
+                    type: 'mdx',
+                    raw,
+                    tagName,
+                    attributes,
+                    selfClosing: false,
+                    tokens,
+                    text: content
+                };
+            }
+        }
+        return undefined;
+    }
+};

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

@@ -670,6 +670,127 @@ class IncompleteMarkdownParser {
                     }
                     return line;
                 }
+            },
+            {
+                name: 'mdx',
+                skipInBlockTypes: ['code', 'math', 'center', 'right'],
+                preprocess: ({ text }) => {
+                    // Track MDX component states across the entire text
+                    const lines = text.split('\n');
+                    const openTags = [];
+                    let mdxLineStates = [];
+                    for (let i = 0; i < lines.length; i++) {
+                        const line = lines[i];
+                        let inMdx = false;
+                        let incompletePositions = [];
+                        // Find all MDX tags in the line
+                        let searchPos = 0;
+                        while (searchPos < line.length) {
+                            // Look for opening bracket with capital letter (MDX component)
+                            const tagStart = line.indexOf('<', searchPos);
+                            if (tagStart === -1 || tagStart >= line.length - 1)
+                                break;
+                            const nextChar = line[tagStart + 1];
+                            // Only match if starts with capital letter (MDX component)
+                            if (!/[A-Z]/.test(nextChar)) {
+                                searchPos = tagStart + 1;
+                                continue;
+                            }
+                            // Try to match complete self-closing tag
+                            const selfClosingMatch = line
+                                .substring(tagStart)
+                                .match(/^<([A-Z][a-zA-Z0-9]*)((?:\s+\w+=(?:"[^"]*"|{[^}]*}))*)\s*\/>/);
+                            if (selfClosingMatch) {
+                                searchPos = tagStart + selfClosingMatch[0].length;
+                                continue;
+                            }
+                            // Try to match complete opening tag with immediate closing
+                            const completeMatch = line
+                                .substring(tagStart)
+                                .match(/^<([A-Z][a-zA-Z0-9]*)((?:\s+\w+=(?:"[^"]*"|{[^}]*}))*)\s*>.*?<\/\1>/);
+                            if (completeMatch) {
+                                searchPos = tagStart + completeMatch[0].length;
+                                continue;
+                            }
+                            // Try to match opening tag
+                            const openTagMatch = line
+                                .substring(tagStart)
+                                .match(/^<([A-Z][a-zA-Z0-9]*)((?:\s+\w+=(?:"[^"]*"|{[^}]*}))*)\s*>/);
+                            if (openTagMatch) {
+                                const tagName = openTagMatch[1];
+                                openTags.push({ tagName, lineIndex: i });
+                                inMdx = true;
+                                searchPos = tagStart + openTagMatch[0].length;
+                                continue;
+                            }
+                            // Check for incomplete self-closing (e.g., <Component /)
+                            const incompleteSelfClosing = line
+                                .substring(tagStart)
+                                .match(/^<([A-Z][a-zA-Z0-9]*)[^>]*\/$/);
+                            if (incompleteSelfClosing) {
+                                incompletePositions.push(tagStart);
+                                break; // This is at the end of the line
+                            }
+                            // Check for incomplete tag (no closing >) - only at end of line
+                            const incompleteTag = line
+                                .substring(tagStart)
+                                .match(/^<([A-Z][a-zA-Z0-9]*)(?:\s+[^>]*)?$/);
+                            if (incompleteTag) {
+                                incompletePositions.push(tagStart);
+                                break; // This is at the end of the line
+                            }
+                            searchPos = tagStart + 1;
+                        }
+                        // Check for closing tags
+                        const closeTagMatches = line.matchAll(/<\/([A-Z][a-zA-Z0-9]*)>/g);
+                        for (const closeMatch of closeTagMatches) {
+                            const tagName = closeMatch[1];
+                            // Find and remove the matching open tag
+                            const openIndex = openTags.findIndex((t) => t.tagName === tagName);
+                            if (openIndex !== -1) {
+                                openTags.splice(openIndex, 1);
+                            }
+                        }
+                        mdxLineStates[i] = { inMdx, incompletePositions };
+                    }
+                    return {
+                        text,
+                        state: {
+                            mdxUnclosedTags: openTags,
+                            mdxLineStates
+                        }
+                    };
+                },
+                handler: ({ line, state }) => {
+                    // Escape incomplete MDX syntax by wrapping in backticks
+                    const lineStates = state.mdxLineStates || [];
+                    const currentState = lineStates[state.currentLine];
+                    if (currentState?.incompletePositions && currentState.incompletePositions.length > 0) {
+                        // Process incomplete positions from right to left to preserve indices
+                        let result = line;
+                        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 + '`';
+                        }
+                        return result;
+                    }
+                    return line;
+                },
+                postprocess: ({ text, state }) => {
+                    // Complete unclosed MDX components at the end
+                    const unclosedTags = state.mdxUnclosedTags || [];
+                    if (unclosedTags.length > 0) {
+                        // Close tags in reverse order (innermost first)
+                        let result = text;
+                        for (let i = unclosedTags.length - 1; i >= 0; i--) {
+                            result += `\n</${unclosedTags[i].tagName}>`;
+                        }
+                        return result;
+                    }
+                    return text;
+                }
             }
         ];
     }

package/dist/utils/url.js

@@ -29,7 +29,6 @@ export const transformUrl = (url, allowedPrefixes, defaultOrigin) => {
     if (!url)
         return null;
     const parsedUrl = parseUrl(url, defaultOrigin);
-    console.log('parsedUrl', { parsedUrl, url });
     if (!parsedUrl)
         return null;
     // If the input is path relative, we output a path relative URL as well,

package/package.json

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