svelte-streamdown 2.6.1 → 3.0.1

package/README.md

@@ -99,7 +99,8 @@ $$
 - Pan and Zoom
 - Full screen mode
 
-**Example:**
+
+# **Example:**
 
 ```mermaid
 graph TD
@@ -462,6 +463,45 @@ This heading will use a custom component!`;
 />
 ```
 
+## 📦 Bundle Optimization
+
+Streamdown is optimized for minimal bundle size by making heavy components **opt-in**. By default, Code blocks, Mermaid diagrams, and Math expressions render as lightweight fallbacks (plain text). To enable full functionality, import and pass the components you need:
+
+### Enabling Heavy Components
+
+```svelte
+<script>
+	import { Streamdown } from 'svelte-streamdown';
+	// Import only the components you need
+	import Code from 'svelte-streamdown/code';       // Shiki syntax highlighting
+	import Mermaid from 'svelte-streamdown/mermaid'; // Mermaid diagrams
+	import Math from 'svelte-streamdown/math';       // KaTeX math rendering
+</script>
+
+<Streamdown
+	{content}
+	components={{ code: Code, mermaid: Mermaid, math: Math }}
+/>
+```
+
+### Component Dependencies
+
+| Component | Import Path | Dependency | Size Impact |
+|-----------|-------------|------------|-------------|
+| `Code` | `svelte-streamdown/code` | Shiki | ~2MB (languages + themes) |
+| `Mermaid` | `svelte-streamdown/mermaid` | Mermaid.js | ~1.5MB |
+| `Math` | `svelte-streamdown/math` | KaTeX | ~300KB |
+
+> [!TIP]
+> Only import the components your application actually uses. If your content doesn't include code blocks, mermaid diagrams, or math expressions, you can skip those imports entirely for a much smaller bundle.
+
+### Fallback Behavior
+
+When a heavy component is not provided:
+- **Code blocks**: Render as plain `<pre><code>` without syntax highlighting
+- **Mermaid**: Renders the mermaid source as a code block
+- **Math**: Renders the raw LaTeX/math text
+
 ## 📋 Props API
 
 | Prop                       | Type                                                                             | Default          | Description                                                                                                                                        |
@@ -479,7 +519,9 @@ This heading will use a custom component!`;
 | `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                                                                                                                            |
+| `shikiTheme`               | `string`                                                                         | `'github-light'` | Code highlighting theme (`github-dark` or `github-light` by default, or custom theme key)                                                          |
+| `shikiThemes`              | `Record<string, ThemeRegistration>`                                              | -                | Additional themes as pre-imported objects (e.g., `{ nord: nordTheme }`)                                                                            |
+| `shikiLanguages`           | `LanguageInfo[]`                                                                 | -                | Additional syntax highlighting languages (merged with defaults)                                                                                    |
 | `mermaidConfig`            | `MermaidConfig`                                                                  | -                | Mermaid diagram configuration                                                                                                                      |
 | `katexConfig`              | `KatexOptions \| ((inline: boolean) => KatexOptions)`                            | -                | KaTeX math rendering options                                                                                                                       |
 | `animation`                | `AnimationConfig`                                                                | -                | Animation configuration for streaming content                                                                                                      |
@@ -491,6 +533,7 @@ This heading will use a custom component!`;
 | `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 }`)                                                                         |
+| `components`               | `{ code?, mermaid?, math? }`                                                     | -                | Optional heavy components for syntax highlighting, diagrams, and math rendering                                                                    |
 | `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:
@@ -760,7 +803,7 @@ The `mdx` snippet receives three parameters:
 - `children`: Snippet containing parsed markdown content
 
 Use `token.tagName` to determine which component is being rendered:
-
+<Card title="Hello" count={5}>Content</Card>
 ```svelte
 <!-- Markdown: <Card title="Hello" count={5}>Content</Card> -->
 <Streamdown {content}>

package/dist/Block.svelte

@@ -7,13 +7,17 @@
 	import { getContext } from 'svelte';
 
 	let {
-		block
+		block,
+		static: isStatic = false
 	}: {
 		block: string;
+		static?: boolean;
 	} = $props();
 
 	const streamdown = useStreamdown();
-	const tokens = $derived(lex(parseIncompleteMarkdown(block.trim()), streamdown.extensions));
+	const tokens = $derived(
+		lex(isStatic ? block : parseIncompleteMarkdown(block.trim()), streamdown.extensions)
+	);
 	const insidePopover = getContext('POPOVER');
 </script>
 
@@ -24,8 +28,8 @@
 			{@const isTextOnlyNode = children.length === 0}
 			<Element {token}>
 				{#if isTextOnlyNode}
-					{#if streamdown.animation.enabled && !insidePopover}
-						<AnimatedText text={'text' in token ? token.text : ''} />
+					{#if streamdown.animation.enabled && !insidePopover && !isStatic}
+						<AnimatedText text={'text' in token ? token.text || '' : ''} />
 					{:else}
 						{'text' in token ? token.text : ''}
 					{/if}

package/dist/Block.svelte.d.ts

@@ -1,5 +1,6 @@
 type $$ComponentProps = {
     block: string;
+    static?: boolean;
 };
 declare const Block: import("svelte").Component<$$ComponentProps, {}, "">;
 type Block = ReturnType<typeof Block>;

package/dist/Elements/Code.svelte

@@ -3,6 +3,7 @@
 	import { save } from '../utils/save.js';
 	import { useCopy } from '../utils/copy.svelte.js';
 	import { HighlighterManager, languageExtensionMap } from '../utils/hightlighter.svelte.js';
+	import { bundledLanguagesInfo } from '../utils/bundledLanguages.js';
 	import type { Tokens } from 'marked';
 	import { type ThemedToken } from 'shiki';
 	import { untrack } from 'svelte';
@@ -17,7 +18,11 @@
 	} = $props();
 
 	const streamdown = useStreamdown();
-	const highlighter = HighlighterManager.create(streamdown.shikiPreloadThemes);
+	const highlighter = HighlighterManager.create(
+		bundledLanguagesInfo,
+		streamdown.shikiThemes,
+		streamdown.shikiLanguages
+	);
 
 	const copy = useCopy({
 		get content() {

package/dist/Elements/Element.svelte

@@ -1,10 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import Link from './Link.svelte';
-	import Code from './Code.svelte';
 	import Image from './Image.svelte';
-	import Mermaid from './Mermaid.svelte';
-	import Math from './Math.svelte';
 	import Alert from './Alert.svelte';
 	import type { StreamdownToken } from '../marked/index.js';
 	import Slot from './Slot.svelte';
@@ -12,9 +9,16 @@
 	import FootnoteRef from './FootnoteRef.svelte';
 	import Citation from './Citation.svelte';
 	import TableDownload from './TableDownload.svelte';
+	// Import fallback components
+	import { CodeFallback, MermaidFallback, MathFallback } from './fallbacks/index.js';
 	let { token, children }: { token: StreamdownToken; children: Snippet } = $props();
 	const streamdown = useStreamdown();
 
+	// Use provided components or fallback to lightweight versions
+	const CodeComponent = $derived(streamdown.components?.code ?? CodeFallback);
+	const MermaidComponent = $derived(streamdown.components?.mermaid ?? MermaidFallback);
+	const MathComponent = $derived(streamdown.components?.math ?? MathFallback);
+
 	// Only apply animation on block level elements. Leaves text elements to be animated by their text children.
 	const style = $derived(streamdown.isMounted ? streamdown.animationBlockStyle : '');
 	const id = $props.id();
@@ -68,11 +72,11 @@
 	</Slot>
 {:else if token.type === 'code' && token.lang === 'mermaid'}
 	<Slot props={{ children, token }} render={streamdown.snippets.code}>
-		<Mermaid {id} {token} />
+		<MermaidComponent {id} {token} />
 	</Slot>
 {:else if token.type === 'code'}
 	<Slot props={{ children, token }} render={streamdown.snippets.code}>
-		<Code {id} {token} />
+		<CodeComponent {id} {token} />
 	</Slot>
 {:else if token.type === 'codespan'}
 	<Slot props={{ children, token }} render={streamdown.snippets.codespan}>
@@ -240,7 +244,7 @@
 		}}
 		render={streamdown.snippets.math}
 	>
-		<Math {id} {token} />
+		<MathComponent {id} {token} />
 	</Slot>
 {:else if token.type === 'alert'}
 	<Alert {id} {token} {children} />

package/dist/Elements/FootnoteRef.svelte

@@ -37,6 +37,8 @@
 			popover.isOpen = false;
 		}
 	});
+
+	$inspect(token);
 </script>
 
 {#if popover.isOpen}
@@ -48,7 +50,7 @@
 		{@attach clickOutside.attachment}
 		{@attach popover.popoverAttachment}
 		open
-		class={`${streamdown.theme.components.popover}`}
+		class={streamdown.theme.components.popover}
 	>
 		<Slot
 			props={{

package/dist/Elements/Mermaid.svelte

@@ -6,6 +6,7 @@
 	import { on } from 'svelte/events';
 	import { usePanzoom } from '../utils/panzoom.svelte';
 	import { fitViewIcon, fullscreenIcon, zoomInIcon, zoomOutIcon } from './icons.js';
+	import MermaidDownload from './MermaidDownload.svelte';
 
 	const streamdown = useStreamdown();
 
@@ -254,6 +255,7 @@
 					>
 						{@render (streamdown.icons?.fullscreen || fullscreenIcon)()}
 					</button>
+					<MermaidDownload {id} />
 				</div>
 			{/if}
 			<svg {@attach panzoom.attach} data-mermaid-svg></svg>

package/dist/Elements/MermaidDownload.svelte

@@ -0,0 +1,196 @@
+<script lang="ts">
+	import { useStreamdown } from '../context.svelte.js';
+	import { scale } from 'svelte/transition';
+	import { downloadIcon } from './icons.js';
+	import { Popover } from './popover.svelte.js';
+	import { useClickOutside } from '../utils/useClickOutside.svelte.js';
+	import { useKeyDown } from '../utils/useKeyDown.svelte.js';
+	import { save } from '../utils/save.js';
+
+	let {
+		id
+	}: {
+		id: string;
+	} = $props();
+
+	const streamdown = useStreamdown();
+	const popover = new Popover();
+
+	useKeyDown({
+		keys: ['Escape'],
+		get isActive() {
+			return popover.isOpen;
+		},
+		callback: () => {
+			popover.isOpen = false;
+		}
+	});
+
+	const clickOutside = useClickOutside({
+		get isActive() {
+			return popover.isOpen;
+		},
+		callback: () => {
+			popover.isOpen = false;
+		}
+	});
+
+	const getSvgElement = (): SVGSVGElement | null => {
+		const container = document.querySelector(`[data-streamdown-mermaid="${id}"]`);
+		if (!container) return null;
+
+		const svgContainer = container.querySelector('[data-mermaid-svg]');
+		if (!svgContainer) return null;
+
+		// The actual SVG is rendered inside the data-mermaid-svg container
+		const svg = svgContainer.querySelector('svg');
+		return svg;
+	};
+
+	const downloadSvg = () => {
+		const svg = getSvgElement();
+		if (!svg) return;
+
+		// Clone the SVG to avoid modifying the original
+		const clonedSvg = svg.cloneNode(true) as SVGSVGElement;
+
+		// Ensure the SVG has proper xmlns
+		clonedSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+		clonedSvg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
+
+		// Get computed styles and inline them for standalone SVG
+		const styles = getComputedStyle(svg);
+		if (!clonedSvg.getAttribute('width')) {
+			clonedSvg.setAttribute('width', styles.width);
+		}
+		if (!clonedSvg.getAttribute('height')) {
+			clonedSvg.setAttribute('height', styles.height);
+		}
+
+		const svgString = new XMLSerializer().serializeToString(clonedSvg);
+		save('mermaid-diagram.svg', svgString, 'image/svg+xml');
+		popover.isOpen = false;
+	};
+
+	const downloadPng = async () => {
+		const svg = getSvgElement();
+		if (!svg) return;
+
+		// Clone the SVG to avoid modifying the original
+		const clonedSvg = svg.cloneNode(true) as SVGSVGElement;
+
+		// Ensure the SVG has proper xmlns
+		clonedSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+		clonedSvg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
+
+		// Get dimensions
+		const bbox = svg.getBBox();
+		const styles = getComputedStyle(svg);
+		const width = parseFloat(styles.width) || bbox.width || 800;
+		const height = parseFloat(styles.height) || bbox.height || 600;
+
+		// Set explicit dimensions on the cloned SVG
+		clonedSvg.setAttribute('width', String(width));
+		clonedSvg.setAttribute('height', String(height));
+
+		// Serialize SVG to string
+		const svgString = new XMLSerializer().serializeToString(clonedSvg);
+
+		// Use data URL instead of blob URL to avoid tainted canvas issues
+		const svgDataUrl = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgString)));
+
+		// Create an image to load the SVG
+		const img = new Image();
+
+		img.onload = () => {
+			// Create a canvas with 2x scale for better quality
+			const scale = 2;
+			const canvas = document.createElement('canvas');
+			canvas.width = width * scale;
+			canvas.height = height * scale;
+
+			const ctx = canvas.getContext('2d');
+			if (!ctx) {
+				return;
+			}
+
+			// Fill with white background (optional, remove for transparent)
+			ctx.fillStyle = '#ffffff';
+			ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+			// Scale and draw the image
+			ctx.scale(scale, scale);
+			ctx.drawImage(img, 0, 0);
+
+			// Convert to PNG and download
+			canvas.toBlob((blob) => {
+				if (blob) {
+					const url = URL.createObjectURL(blob);
+					const link = document.createElement('a');
+					link.href = url;
+					link.download = 'mermaid-diagram.png';
+					document.body.appendChild(link);
+					link.click();
+					document.body.removeChild(link);
+					URL.revokeObjectURL(url);
+				}
+			}, 'image/png');
+		};
+
+		img.onerror = () => {
+			console.error('Failed to load SVG for PNG conversion');
+		};
+
+		img.src = svgDataUrl;
+		popover.isOpen = false;
+	};
+
+	const download = (type: 'SVG' | 'PNG') => {
+		if (type === 'SVG') {
+			downloadSvg();
+		} else {
+			downloadPng();
+		}
+	};
+</script>
+
+{#if popover.isOpen}
+	<dialog
+		id={'mermaid-download-popover'}
+		aria-modal="false"
+		transition:scale|global={{ start: 0.95, duration: 100 }}
+		{@attach clickOutside.attachment}
+		{@attach popover.popoverAttachment}
+		open
+		style:width="fit-content !important"
+		style:min-width="fit-content !important"
+		class={streamdown.theme.components.popover}
+	>
+		{#each ['PNG', 'SVG'] as type}
+			<button
+				style="width: 100%; text-align: left; justify-content: flex-start; padding: 1rem 1rem; margin: 0.2rem 0;"
+				onclick={() => download(type as 'SVG' | 'PNG')}
+				class={streamdown.theme.components.button}
+			>
+				{type}
+			</button>
+		{/each}
+	</dialog>
+{/if}
+
+<button
+	class={streamdown.theme.components.button}
+	onclick={(e: MouseEvent) => {
+		if (popover.isOpen) {
+			popover.isOpen = false;
+			return;
+		}
+		popover.reference = e.target as HTMLButtonElement;
+		popover.isOpen = true;
+	}}
+	{@attach clickOutside.attachment}
+	title="Download diagram"
+	data-panzoom-ignore
+>
+	{@render (streamdown.icons?.download || downloadIcon)()}
+</button>

package/dist/Elements/MermaidDownload.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    id: string;
+};
+declare const MermaidDownload: import("svelte").Component<$$ComponentProps, {}, "">;
+type MermaidDownload = ReturnType<typeof MermaidDownload>;
+export default MermaidDownload;

package/dist/Elements/fallbacks/CodeFallback.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { useStreamdown } from '../../context.svelte.js';
+	import type { Tokens } from 'marked';
+
+	const {
+		token,
+		id
+	}: {
+		token: Tokens.Code;
+		id: string;
+	} = $props();
+
+	const streamdown = useStreamdown();
+</script>
+
+<div
+	data-streamdown-code={id}
+	style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
+	class={streamdown.theme.code.base}
+>
+	<div class={streamdown.theme.code.header}>
+		<span class={streamdown.theme.code.language}>{token.lang}</span>
+	</div>
+	<div style="height: fit-content; width: 100%;" class={streamdown.theme.code.container}>
+		<pre class={streamdown.theme.code.pre}><code
+				>{#each token.text.split('\n') as line}<span class={streamdown.theme.code.line}
+						><span style={streamdown.isMounted ? streamdown.animationTextStyle : ''}
+							>{line.trim().length > 0 ? line : '\u200B'}</span
+						></span
+					>{/each}</code
+			></pre>
+	</div>
+</div>

package/dist/Elements/fallbacks/CodeFallback.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Tokens } from 'marked';
+type $$ComponentProps = {
+    token: Tokens.Code;
+    id: string;
+};
+declare const CodeFallback: import("svelte").Component<$$ComponentProps, {}, "">;
+type CodeFallback = ReturnType<typeof CodeFallback>;
+export default CodeFallback;

package/dist/Elements/fallbacks/MathFallback.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { useStreamdown } from '../../context.svelte.js';
+	import type { MathToken } from '../../marked/index.js';
+
+	const {
+		token,
+		id
+	}: {
+		token: MathToken;
+		id: string;
+	} = $props();
+
+	const streamdown = useStreamdown();
+</script>
+
+{#if token.isInline}
+	<span
+		data-streamdown-inline-math={id}
+		style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
+		class={streamdown.theme.math.inline}
+	>
+		<code>{token.text}</code>
+	</span>
+{:else}
+	<div
+		data-streamdown-block-math={id}
+		style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
+		style:height="fit-content"
+		style:width="100%"
+	>
+		<div class="overflow-x-auto">
+			<pre class={streamdown.theme.math.block}><code>{token.text}</code></pre>
+		</div>
+	</div>
+{/if}

package/dist/Elements/fallbacks/MathFallback.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { MathToken } from '../../marked/index.js';
+type $$ComponentProps = {
+    token: MathToken;
+    id: string;
+};
+declare const MathFallback: import("svelte").Component<$$ComponentProps, {}, "">;
+type MathFallback = ReturnType<typeof MathFallback>;
+export default MathFallback;

package/dist/Elements/fallbacks/MermaidFallback.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { useStreamdown } from '../../context.svelte.js';
+	import type { Tokens } from 'marked';
+
+	const {
+		token,
+		id
+	}: {
+		token: Tokens.Code;
+		id: string;
+	} = $props();
+
+	const streamdown = useStreamdown();
+</script>
+
+<div data-streamdown-mermaid={id}>
+	<div
+		style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
+		class={streamdown.theme.code.base}
+	>
+		<div class={streamdown.theme.code.header}>
+			<span class={streamdown.theme.code.language}>mermaid</span>
+		</div>
+		<div style="height: fit-content; width: 100%;" class={streamdown.theme.code.container}>
+			<pre class={streamdown.theme.code.pre}><code
+					>{#each token.text.split('\n') as line}<span class={streamdown.theme.code.line}
+							><span style={streamdown.isMounted ? streamdown.animationTextStyle : ''}
+								>{line.trim().length > 0 ? line : '\u200B'}</span
+							></span
+						>{/each}</code
+				></pre>
+		</div>
+	</div>
+</div>

package/dist/Elements/fallbacks/MermaidFallback.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Tokens } from 'marked';
+type $$ComponentProps = {
+    token: Tokens.Code;
+    id: string;
+};
+declare const MermaidFallback: import("svelte").Component<$$ComponentProps, {}, "">;
+type MermaidFallback = ReturnType<typeof MermaidFallback>;
+export default MermaidFallback;

package/dist/Elements/fallbacks/index.d.ts

@@ -0,0 +1,3 @@
+export { default as CodeFallback } from './CodeFallback.svelte';
+export { default as MermaidFallback } from './MermaidFallback.svelte';
+export { default as MathFallback } from './MathFallback.svelte';

package/dist/Elements/fallbacks/index.js

@@ -0,0 +1,3 @@
+export { default as CodeFallback } from './CodeFallback.svelte';
+export { default as MermaidFallback } from './MermaidFallback.svelte';
+export { default as MathFallback } from './MathFallback.svelte';