svelte-streamdown 2.2.6 → 2.3.0

package/README.md

@@ -20,7 +20,6 @@ Perfect for AI-powered applications that need to stream and render markdown cont
 
 ## ✨ Main Features
 
-
 ### 🔄 Streaming-Optimized
 
 - **Incomplete Markdown Parsing**: Handles unterminated blocks gracefully
@@ -28,12 +27,10 @@ Perfect for AI-powered applications that need to stream and render markdown cont
 - **Real-time Updates**: Optimized for dynamic content
 - **Smooth Animations**: Animate tokens and blocks as they are streamed.
 
-
 ### 🔒 Security Hardening
 
 - **Image Origin Control**: Whitelist allowed image sources
 - **Link Safety**: Control link destinations
-- **HTML Sanitization**: Prevent XSS attacks
 
 ### 🎯 Fully Customizable Components & Theming
 
@@ -49,8 +46,9 @@ Beautiful, responsive typography with **built-in Tailwind CSS classes** for head
 
 ### 📝 Extensive Markdown Features
 
-Full support for 
-- Basic text marks: **bold**, *italic*, `code`, ~~Strikethrough~~
+Full support for
+
+- Basic text marks: **bold**, _italic_, `code`, ~~Strikethrough~~
 - ~Subscript~ and ^Superscript^
 - [Links](https://svelte-streamdown.beynar.workers.dev/)
 - Headings (H1–H6)
@@ -58,9 +56,10 @@ Full support for
 - Github alert
 - Ordered & unordered lists (including roman, alpha, nested)
 - Task lists ([ ] and [x])
-- Code blocks 
+- Code blocks
 - Mermaid diagrams
 - Math $expressions$
+- Escaping currency symbols ($140)
 - Complex tables
 - Footnotes [^1]
 
@@ -134,24 +133,27 @@ pie title Project Time Allocation
 
 | H1                        | H2  | H3  |
 | ------------------------- | --- | --- |
-| This cell spans 3 columns |||
+| This cell spans 3 columns |     |     |
 
 | Header 1                  | Header 2 | Header 3 |
 | ------------------------- | -------- | -------- |
-| This cell spans 2 columns || Normal
+| This cell spans 2 columns |          | Normal   |
 | Normal                    | Normal   | Normal   |
 
 #### Rowspan
+
 | Header 1        | Header 2 |
 | --------------- | -------- |
 | This cell spans | Cell A   |
 | two rows ^      | Cell B   |
+
 #### Footer
+
 | Header 1        | Header 2 |
 | --------------- | -------- |
-| Cell B 		  | Cell A   |
+| Cell B          | Cell A   |
 | --------------- | -------- |
-| Footer ||
+| Footer          |          |
 
 #### Column alignment
 
@@ -161,7 +163,6 @@ pie title Project Time Allocation
 
 #### Multiple headers and very complex layout
 
-
 | Product Category ||| Sales Data Q1-Q4 2024 ||||
 | Product | Region || Q1 | Q2 | Q3 | Q4 |
 | Name | Type | Area | Revenue | Revenue | Revenue | Revenue |
@@ -179,8 +180,8 @@ pie title Project Time Allocation
 
 #### decimal
 
-1. First item  
-2. Second item  
+1. First item
+2. Second item
 3. Third item
 
 #### lower-alpha
@@ -211,10 +212,9 @@ III. Third item
 
 1. First level (numeric)
    a. Second level (lowercase alpha)
-      i. Third level (lowercase roman)
-         - Fourth level (bullet)
-            I. Fifth level (uppercase roman)
-               A. Sixth level (uppercase alpha)
+   i. Third level (lowercase roman) - Fourth level (bullet)
+   I. Fifth level (uppercase roman)
+   A. Sixth level (uppercase alpha)
 
 2. Back to the first level
 
@@ -226,13 +226,11 @@ III. Third item
   - [ ] Nested uncompleted subtask
   - [x] Nested completed subtask
 
-
 ### Alert Support
 
 > [!IMPORTANT]
 > Native support for Github style Alert
 
-
 ## 🔄 Differences from Original React Version
 
 This Svelte port maintains feature parity with the original [Streamdown](https://streamdown.ai/) while adapting to Svelte's patterns:
@@ -252,7 +250,7 @@ This Svelte port maintains feature parity with the original [Streamdown](https:/
 > [!NOTE]
 > Streamdown comes with **built-in Tailwind CSS classes** for beautiful default styling. To ensure all styles are included in your build, add the following to your `app.css` or main CSS file:
 > This setup is primarily necessary if you're using Tailwind CSS v4's new `@source` directive or if you have aggressive purging enabled in older versions. If you're using standard Tailwind CSS v3+ with default purging, Streamdown's styles should be automatically included when the component is imported and used in your application.
-> 
+>
 > This ensures that all Streamdown's default styling is included in your Tailwind build process.
 
 ```css
@@ -261,8 +259,6 @@ This Svelte port maintains feature parity with the original [Streamdown](https:/
 @source "../node_modules/svelte-streamdown/**/*";
 ```
 
-
-
 ## 🎭 Animation System
 
 Streamdown includes a sophisticated animation system designed specifically for streaming AI content, providing smooth and engaging visual feedback as text appears on screen.
@@ -280,18 +276,23 @@ The animation system works by:
 Choose from five distinct animation styles:
 
 #### `fade`
+
 A clean fade-in effect where text smoothly appears from transparent to opaque.
 
 #### `blur`
+
 Text starts slightly blurred and comes into focus while fading in, creating a smooth reveal effect.
 
 #### `typewriter`
+
 A typewriter effect where text appears character by character, mimicking the look of someone typing.
 
 #### `slideUp`
+
 Text slides up from below while fading in, creating a dynamic upward motion.
 
 #### `slideDown`
+
 Text slides down from above while fading in, creating a dynamic downward motion.
 
 > [!TIP]
@@ -300,7 +301,6 @@ Text slides down from above while fading in, creating a dynamic downward motion.
 > [!WARNING]
 > Character-level tokenization (`tokenize: 'char'`) creates significantly more DOM elements than word-level tokenization. Use character tokenization sparingly and only when the typewriter effect is essential for your user experience.
 
-
 ## 🚀 Quick Start
 
 ### Basic Usage
@@ -363,30 +363,30 @@ This heading will use a custom component!`;
 
 ## 📋 Props API
 
-| Prop                      | Type                                                  | Default          | Description                                    |
-| ------------------------- | ----------------------------------------------------- | ---------------- | ---------------------------------------------- |
-| `content`                 | `string`                                              | -                | **Required.** The markdown content to render   |
-| `class`                   | `string`                                              | -                | CSS class names for the wrapper element        |
-| `parseIncompleteMarkdown` | `boolean`                                             | `true`           | Parse and fix incomplete markdown syntax       |
-| `defaultOrigin`           | `string`                                              | -                | Default origin for relative URLs               |
-| `allowedLinkPrefixes`     | `string[]`                                            | `['*']`          | Allowed URL prefixes for links                 |
-| `allowedImagePrefixes`    | `string[]`                                            | `['*']`          | Allowed URL prefixes for images                |
-| `skipHtml`                | `boolean`                                             | -                | Skip HTML parsing entirely                     |
-| `unwrapDisallowed`        | `boolean`                                             | -                | Unwrap instead of removing disallowed elements |
-| `urlTransform`            | `UrlTransform \| null`                                | -                | Custom URL transformation function             |
-| `theme`                   | `Partial<Theme>`                                      | -                | Custom theme overrides                         |
-| `baseTheme`               | `'tailwind' \| 'shadcn'`                              | `'tailwind'`     | Base theme to use before applying overrides    |
-| `mergeTheme`              | `boolean`                                             | `true`           | Whether to merge theme with base theme         |
-| `shikiTheme`              | `BundledTheme`                                        | `'github-light'` | Code highlighting theme                        |
-| `mermaidConfig`           | `MermaidConfig`                                       | -                | Mermaid diagram configuration                  |
-| `katexConfig`             | `KatexOptions \| ((inline: boolean) => KatexOptions)` | -                | KaTeX math rendering options                   |
-| `animation`               | `AnimationConfig`                                     | -                | Animation configuration for streaming content  |
-| `animation.enabled`       | `boolean`                                             | `false`          | Enable/disable animations                      |
-| `animation.type`          | `'fade' \| 'blur' \| 'typewriter' \| 'slideUp' \| 'slideDown'` | `'blur'`         | Animation style for text appearance           |
-| `animation.duration`      | `number`                                              | `500`            | Animation duration in milliseconds             |
-| `animation.timingFunction`| `'ease' \| 'ease-in' \| 'ease-out' \| 'ease-in-out' \| 'linear'` | `'ease-in'`      | CSS timing function for animations             |
-| `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        |
+| Prop                       | Type                                                             | Default          | Description                                                                                                                                        |
+| -------------------------- | ---------------------------------------------------------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `content`                  | `string`                                                         | -                | **Required.** The markdown content to render                                                                                                       |
+| `class`                    | `string`                                                         | -                | CSS class names for the wrapper element                                                                                                            |
+| `parseIncompleteMarkdown`  | `boolean`                                                        | `true`           | Parse and fix incomplete markdown syntax                                                                                                           |
+| `defaultOrigin`            | `string`                                                         | -                | Default origin for relative URLs                                                                                                                   |
+| `allowedLinkPrefixes`      | `string[]`                                                       | `['*']`          | Allowed URL prefixes for links                                                                                                                     |
+| `allowedImagePrefixes`     | `string[]`                                                       | `['*']`          | Allowed URL prefixes for images                                                                                                                    |
+| `skipHtml`                 | `boolean`                                                        | -                | Skip HTML parsing entirely                                                                                                                         |
+| `unwrapDisallowed`         | `boolean`                                                        | -                | Unwrap instead of removing disallowed elements                                                                                                     |
+| `urlTransform`             | `UrlTransform \| null`                                           | -                | Custom URL transformation function                                                                                                                 |
+| `theme`                    | `DeepPartial<Theme>`                                                 | -                | Custom theme overrides                                                                                                                             |
+| `baseTheme`                | `'tailwind' \| 'shadcn'`                                         | `'tailwind'`     | Base theme to use before applying overrides                                                                                                        |
+| `mergeTheme`               | `boolean`                                                        | `true`           | Whether to merge theme with base theme                                                                                                             |
+| `shikiTheme`               | `BundledTheme`                                                   | `'github-light'` | Code highlighting theme                                                                                                                            |
+| `mermaidConfig`            | `MermaidConfig`                                                  | -                | Mermaid diagram configuration                                                                                                                      |
+| `katexConfig`              | `KatexOptions \| ((inline: boolean) => KatexOptions)`            | -                | KaTeX math rendering options                                                                                                                       |
+| `animation`                | `AnimationConfig`                                                | -                | Animation configuration for streaming content                                                                                                      |
+| `animation.enabled`        | `boolean`                                                        | `false`          | Enable/disable animations                                                                                                                          |
+| `animation.type`           | `'fade' \| 'blur' \| 'typewriter' \| 'slideUp' \| 'slideDown'`   | `'blur'`         | Animation style for text appearance                                                                                                                |
+| `animation.duration`       | `number`                                                         | `500`            | Animation duration in milliseconds                                                                                                                 |
+| `animation.timingFunction` | `'ease' \| 'ease-in' \| 'ease-out' \| 'ease-in-out' \| 'linear'` | `'ease-in'`      | CSS timing function for animations                                                                                                                 |
+| `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 |
 
 ### Custom Component Props
 

package/dist/AnimatedText.svelte

@@ -16,18 +16,16 @@
 
 		return text.split(splitRegex).filter((token) => token.length > 0);
 	};
-  
+
 	const tokens = $derived(tokenizeNewContent(text));
 </script>
 
 {#if streamdown.isMounted}
-	<span>
-		{#each tokens as token}
-			<span style={streamdown.animationTextStyle}>
-				{token}
-			</span>
-		{/each}
-	</span>
+	{#each tokens as token}
+		<span style={streamdown.animationTextStyle}>
+			{token}
+		</span>
+	{/each}
 {:else}
 	{text}
 {/if}

package/dist/Block.svelte

@@ -13,13 +13,13 @@
 		block: string;
 		insideFootnote?: boolean;
 	} = $props();
-	const id = $props.id();
+
 	const tokens = $derived(lex(parseIncompleteMarkdown(block.trim())));
 	const streamdown = useStreamdown();
 </script>
 
 {#snippet renderChildren(tokens: StreamdownToken[])}
-	{#each tokens as token, i (`${id}-block-${i}`)}
+	{#each tokens as token}
 		{#if token}
 			{@const children = (token as any)?.tokens || []}
 			{@const isTextOnlyNode = children.length === 0}

package/dist/Elements/Alert.svelte

@@ -27,9 +27,6 @@
 		children: Snippet;
 		token: AlertToken;
 	} = $props();
-
-	const alertType = $derived(token.variant);
-	const title = $derived(streamdown.translations?.alert?.[alertType] || alertType);
 </script>
 
 <Slot
@@ -39,23 +36,27 @@
 	}}
 	render={streamdown.snippets.alert}
 >
-	<div class={`${streamdown.theme.alert.base} ${streamdown.theme.alert[alertType]}`}>
+	<div class={`${streamdown.theme.alert.base} ${streamdown.theme.alert[token.variant]}`}>
 		<div data-alert-title class={streamdown.theme.alert.title}>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="24"
-				height="24"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				class={streamdown.theme.alert.icon}
-			>
-				{@html icons[alertType]}
-			</svg>
-			{title}
+			{@render (streamdown.icons?.[token.variant] || icon)()}
+			{streamdown.translations?.alert?.[token.variant] || token.variant}
 		</div>
 		{@render children()}
 	</div>
 </Slot>
+
+{#snippet icon()}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class={streamdown.theme.alert.icon}
+	>
+		{@html icons[token.variant]}
+	</svg>
+{/snippet}

package/dist/Elements/Code.svelte

@@ -5,6 +5,7 @@
 	import { HighlighterManager, languageExtensionMap } from '../utils/hightlighter.svelte.js';
 	import type { Tokens } from 'marked';
 	import { type ThemedToken } from 'shiki';
+	import { untrack } from 'svelte';
 
 	const {
 		token
@@ -14,12 +15,9 @@
 
 	const streamdown = useStreamdown();
 	const highlighter = HighlighterManager.create(streamdown.shikiPreloadThemes || []);
-	const theme = $derived(streamdown.shikiTheme);
-	let codeContent = $derived(token.text);
-	const language = $derived(token.lang || '');
 	const copy = useCopy({
 		get content() {
-			return codeContent;
+			return token.text;
 		}
 	});
 
@@ -28,48 +26,51 @@
 	const downloadCode = () => {
 		try {
 			const extension =
-				language && language in languageExtensionMap
-					? languageExtensionMap[language as keyof typeof languageExtensionMap]
+				token.lang && token.lang in languageExtensionMap
+					? languageExtensionMap[token.lang as keyof typeof languageExtensionMap]
 					: 'txt';
 			const filename = `file.${extension}`;
 			const mimeType = 'text/plain';
-			save(filename, codeContent, mimeType);
+			save(filename, token.text, mimeType);
 		} catch (error) {
 			console.error('Failed to download file:', error);
 		}
 	};
 
 	$effect(() => {
-		void highlighter.load(theme, language as any);
+		const theme = streamdown.shikiTheme;
+		const lang = token.lang;
+		untrack(() => {
+			void highlighter.load(theme, lang);
+		});
 	});
 
 	const isMounted = streamdown.isMounted;
 </script>
 
-<div class={streamdown.theme.code.base} data-language={language}>
-	<div class={streamdown.theme.code.header} data-code-block-header data-language={language}>
-		<span class={streamdown.theme.code.language}>{language}</span>
+<div class={streamdown.theme.code.base}>
+	<div class={streamdown.theme.code.header}>
+		<span class={streamdown.theme.code.language}>{token.lang}</span>
 		{#if streamdown.controls.code}
-			<div class="flex items-center gap-2">
-				<!-- Download button snippet -->
+			<div class={streamdown.theme.code.buttons}>
 				<button
 					class={streamdown.theme.code.button}
 					onclick={downloadCode}
 					title="Download file"
 					type="button"
 				>
-					{@render downloadIcon()}
+					{@render (streamdown.icons?.download || downloadIcon)()}
 				</button>
 
 				<button class={streamdown.theme.code.button} onclick={copy.copy} type="button">
-					{@render copyIcon()}
+					{@render (streamdown.icons?.copy || copyIcon)()}
 				</button>
 			</div>
 		{/if}
 	</div>
 	<div style="height: fit-content; width: 100%;" class={streamdown.theme.code.container}>
-		{#if highlighter.isReady(theme, language as any)}
-			{@const tokens = highlighter.highlightCode(codeContent, language as any, theme)}
+		{#if highlighter.isReady(streamdown.shikiTheme, token.lang)}
+			{@const tokens = highlighter.highlightCode(token.text, token.lang, streamdown.shikiTheme)}
 			<pre class={streamdown.theme.code.pre}><code>{@render Tokens(tokens)}</code></pre>
 		{:else}
 			<pre class={streamdown.theme.code.pre}><code>{@render Skeleton(token.text.split('\n'))}</code
@@ -93,6 +94,7 @@
 		</span>
 	{/each}
 {/snippet}
+
 {#snippet Skeleton(lines: string[])}
 	{#each lines as line}
 		<span class={streamdown.theme.code.skeleton}>
@@ -100,6 +102,7 @@
 		</span>
 	{/each}
 {/snippet}
+
 {#snippet copyIcon()}
 	<svg
 		xmlns="http://www.w3.org/2000/svg"

package/dist/Elements/Image.svelte

@@ -20,25 +20,27 @@
 	);
 </script>
 
-{#if transformedUrl}
-	<Slot
-		props={{
-			src: transformedUrl,
-			alt: token.text,
-			children,
-			token
-		}}
-		render={streamdown.snippets.image}
-	>
-		<span class={streamdown.theme.image.base}>
-			<img class={streamdown.theme.image.image} src={transformedUrl} alt={token.text} />
+{#if token.href !== 'streamdown:incomplete-image'}
+	{#if transformedUrl}
+		<Slot
+			props={{
+				src: transformedUrl,
+				alt: token.text,
+				children,
+				token
+			}}
+			render={streamdown.snippets.image}
+		>
+			<span class={streamdown.theme.image.base}>
+				<img class={streamdown.theme.image.image} src={transformedUrl} alt={token.text} />
+			</span>
+		</Slot>
+	{:else}
+		<span
+			class="inline-block rounded bg-gray-200 px-3 py-1 text-sm text-gray-600 dark:bg-gray-700 dark:text-gray-400"
+			title={`Blocked URL: ${token.href}`}
+		>
+			[Image blocked: {token.text || 'No description'}]
 		</span>
-	</Slot>
-{:else}
-	<span
-		class="inline-block rounded bg-gray-200 px-3 py-1 text-sm text-gray-600 dark:bg-gray-700 dark:text-gray-400"
-		title={`Blocked URL: ${token.href}`}
-	>
-		[Image blocked: {token.text || 'No description'}]
-	</span>
+	{/if}
 {/if}

package/dist/Elements/Link.svelte

@@ -20,7 +20,7 @@
 	);
 </script>
 
-{#if transformedUrl}
+{#if transformedUrl || token.href === 'streamdown:incomplete-link'}
 	<Slot
 		props={{
 			href: transformedUrl,

package/dist/Elements/Math.svelte

@@ -5,16 +5,13 @@
 	import type { KatexOptions } from 'katex';
 	import 'katex/dist/katex.min.css';
 
-	const streamdown = useStreamdown();
-
 	const {
 		token
 	}: {
 		token: MathToken;
 	} = $props();
 
-	const isInline = $derived(token.isInline);
-
+	const streamdown = useStreamdown();
 	let katexInstance = $state<typeof import('katex') | null>(null);
 
 	onMount(() => {
@@ -30,9 +27,9 @@
 		}
 		const config: KatexOptions = {
 			output: 'html',
-			displayMode: !isInline,
+			displayMode: !token.isInline,
 			...(typeof streamdown.katexConfig === 'function'
-				? streamdown.katexConfig(isInline)
+				? streamdown.katexConfig(token.isInline)
 				: streamdown.katexConfig || {})
 		};
 		const code = token.text;
@@ -47,7 +44,7 @@
 	});
 </script>
 
-{#if isInline}
+{#if token.isInline}
 	<span
 		style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
 		bind:this={inner}