svelte-streamdown 2.2.3 → 2.2.5

package/README.md

@@ -386,6 +386,7 @@ This heading will use a custom component!`;
 | `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/AnimatedBlock.svelte

@@ -5,11 +5,9 @@
 	let { children }: { children: Snippet } = $props();
 
 	const streamdown = useStreamdown();
-
-	const isMounted = streamdown.isMounted;
 </script>
 
-{#if isMounted}
+{#if streamdown.isMounted}
 	<div style={streamdown.animationBlockStyle}>
 		{@render children()}
 	</div>

package/dist/AnimatedText.svelte

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

package/dist/Elements/Code.svelte

@@ -4,6 +4,7 @@
 	import { useCopy } from '../utils/copy.svelte.js';
 	import { HighlighterManager, languageExtensionMap } from '../utils/hightlighter.svelte.js';
 	import type { Tokens } from 'marked';
+	import { type ThemedToken } from 'shiki';
 
 	const {
 		token
@@ -41,6 +42,8 @@
 	$effect(() => {
 		void highlighter.load(theme, language as any);
 	});
+
+	const isMounted = streamdown.isMounted;
 </script>
 
 <div class={streamdown.theme.code.base} data-language={language}>
@@ -65,37 +68,37 @@
 		{/if}
 	</div>
 	<div style="height: fit-content; width: 100%;" class={streamdown.theme.code.container}>
-		<div>
-			<!-- {@render Skeleton()} -->
-			{#if highlighter.isReady(theme, language as any)}
-				<!-- {@render Skeleton()} -->
-
-				{@const code = highlighter.highlightCode(
-					codeContent,
-					language as any,
-					theme,
-					streamdown.theme.code.pre
-				)}
-				{@html code}
-			{:else}
-				{@render Skeleton()}
-			{/if}
-		</div>
+		{#if highlighter.isReady(theme, language as any)}
+			{@const tokens = highlighter.highlightCode(codeContent, language as any, theme)}
+			<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
+				></pre>
+		{/if}
 	</div>
 </div>
 
-{#snippet Skeleton()}
-	{@const lines = token.text.split('\n')}
-	<!--  -->
-
-	<!--  --><code
-		class={streamdown.theme.code.pre}
-		style="height: fit-content; width: 100%; display: flex; flex-direction: column;"
-		><!--  -->{#each lines as line}<!--  --><span class={streamdown.theme.code.skeleton}
-				>{line.trim().length > 0 ? line : '\u200B'}</span
-			><!--  -->
-			<!--  -->{/each}<!--  --></code
-	><!--  -->
+{#snippet Tokens(tokens: ThemedToken[][])}
+	{#each tokens as line}
+		<span class={streamdown.theme.code.line}>
+			{#each line as token}
+				<span
+					style={isMounted ? streamdown.animationTextStyle : undefined}
+					style:color={token.color}
+					style:background-color={token.bgColor}
+				>
+					{token.content}
+				</span>
+			{/each}
+		</span>
+	{/each}
+{/snippet}
+{#snippet Skeleton(lines: string[])}
+	{#each lines as line}
+		<span class={streamdown.theme.code.line}>
+			{line.trim().length > 0 ? line : '\u200B'}
+		</span>
+	{/each}
 {/snippet}
 {#snippet copyIcon()}
 	<svg

package/dist/Elements/Element.svelte

@@ -12,8 +12,6 @@
 	import FootnoteRef from './FootnoteRef.svelte';
 	let { token, children }: { token: StreamdownToken; children: Snippet } = $props();
 	const streamdown = useStreamdown();
-
-	const isMounted = streamdown.isMounted;
 </script>
 
 {#if token.type === 'heading'}
@@ -93,7 +91,7 @@
 {:else if token.type === 'list_item'}
 	<Slot props={{ children, token }} render={streamdown.snippets.li}>
 		<li
-			style={isMounted ? streamdown.animationBlockStyle : undefined}
+			style={streamdown.isMounted ? streamdown.animationBlockStyle : undefined}
 			style:list-style-type={token.task ? 'none' : undefined}
 			{...token.value && !token.task ? { value: token.value } : {}}
 			class={streamdown.theme.li.base}

package/dist/Elements/FootnoteRef.svelte

@@ -79,7 +79,6 @@
 			off();
 		};
 	};
-	const isMounted = streamdown.isMounted;
 </script>
 
 {#if isOpen}
@@ -113,7 +112,7 @@
 	render={streamdown.snippets.footnoteRef}
 >
 	<button
-		style={isMounted ? streamdown.animationBlockStyle : ''}
+		style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
 		bind:this={reference}
 		class={streamdown.theme.footnoteRef.base}
 		onclick={() => (isOpen = !isOpen)}

package/dist/Elements/Math.svelte

@@ -45,13 +45,11 @@
 			});
 		}
 	});
-
-	const isMounted = streamdown.isMounted;
 </script>
 
 {#if isInline}
 	<span
-		style={isMounted ? streamdown.animationBlockStyle : ''}
+		style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
 		bind:this={inner}
 		class={streamdown.theme.math.inline}
 	>

package/dist/Elements/Mermaid.svelte

@@ -197,9 +197,6 @@
 			panzoom.zoomToFit();
 		} catch (err) {
 			const sanitizedCode = sanitizeMermaidCode(code);
-			console.error('Mermaid rendering error:', err);
-			console.error('Original code:', code);
-			console.error('Sanitized code:', sanitizedCode);
 		}
 	};
 </script>

package/dist/Streamdown.svelte

@@ -83,6 +83,7 @@
 				};
 			return {
 				enabled: true,
+				animateOnMount: animation.animateOnMount ?? false,
 				type: animation.type || 'blur',
 				duration: animation.duration || 500,
 				timingFunction: animation.timingFunction || 'ease-in',

package/dist/context.svelte.d.ts

@@ -21,8 +21,8 @@ export declare class StreamdownContext {
         footnotes: Map<string, Footnote>;
     };
     isMounted: boolean;
-    animationTextStyle: string;
-    animationBlockStyle: string;
+    animationTextStyle: string | undefined;
+    animationBlockStyle: string | undefined;
     constructor(props: Omit<StreamdownProps, keyof Snippets | 'class'> & {
         snippets: Snippets;
     });
@@ -103,6 +103,7 @@ export type StreamdownProps = {
     };
     renderHtml?: boolean | ((token: Tokens.HTML | Tokens.Tag) => string);
     animation?: {
+        animateOnMount?: boolean;
         enabled?: boolean;
         type?: 'fade' | 'blur' | 'typewriter' | 'slideUp' | 'slideDown';
         duration?: number;

package/dist/context.svelte.js

@@ -4,22 +4,29 @@ export class StreamdownContext {
         refs: new Map(),
         footnotes: new Map()
     };
-    isMounted = $state(false);
-    animationTextStyle = $derived(`animation-name: sd-${this.animation.type};
+    isMounted = false;
+    animationTextStyle = $derived(this.animation.enabled
+        ? `animation-name: sd-${this.animation.type};
 animation-duration: ${this.animation.duration}ms;
 animation-timing-function: ${this.animation.timingFunction};
 animation-iteration-count: 1;
 animation-fill-mode: forwards;
 white-space: pre-wrap;
-display: inline-block;`);
-    animationBlockStyle = $derived(`animation-name: sd-${this.animation.type};
+display: inline-block;`
+        : undefined);
+    animationBlockStyle = $derived(this.animation.enabled
+        ? `animation-name: sd-${this.animation.type};
 animation-duration: ${this.animation.duration}ms;
 animation-timing-function: ${this.animation.timingFunction};
 animation-iteration-count: 1;
-animation-fill-mode: forwards;`);
+animation-fill-mode: forwards;`
+        : undefined);
     constructor(props) {
         bind(this, props);
         setContext('streamdown', this);
+        if (this.animation.animateOnMount) {
+            this.isMounted = true;
+        }
         onMount(() => {
             this.isMounted = true;
         });

package/dist/marked/index.js

@@ -49,7 +49,7 @@ const parseExtensions = (...ext) => {
 };
 const blockLexer = new Lexer(parseExtensions(markedFootnote(), markedTable()));
 export const lex = (markdown) => {
-    return new Lexer(parseExtensions(...extensions))
+    return new Lexer(parseExtensions(markedTable(), markedFootnote(), markedAlert(), markedMath(), markedSubSup(), markedList()))
         .lex(markdown)
         .filter((token) => token.type !== 'space' && token.type !== 'footnote');
 };

package/dist/theme.d.ts

@@ -44,6 +44,7 @@ export declare const theme: {
         language: string;
         skeleton: string;
         pre: string;
+        line: string;
     };
     codespan: {
         base: string;
@@ -171,6 +172,7 @@ export declare const shadcnTheme: {
         language: string;
         skeleton: string;
         pre: string;
+        line: string;
     };
     codespan: {
         base: string;
@@ -299,6 +301,7 @@ export declare const mergeTheme: (customTheme?: Partial<Theme>, baseTheme?: "tai
         language: string;
         skeleton: string;
         pre: string;
+        line: string;
     };
     codespan: {
         base: string;

package/dist/theme.js

@@ -44,7 +44,8 @@ export const theme = {
         button: 'cursor-pointer size-6 p-1 text-gray-600 transition-all hover:text-gray-900 rounded hover:bg-gray-100',
         language: 'ml-1 font-mono lowercase',
         skeleton: 'rounded-md font-mono text-transparent bg-gray-200 scale-y-90 animate-pulse whitespace-nowrap inline-block',
-        pre: 'overflow-x-auto font-mono p-0 bg-gray-100/40'
+        pre: 'overflow-x-auto font-mono p-0 bg-gray-100/40',
+        line: 'block'
     },
     codespan: {
         base: 'bg-gray-100 rounded px-1.5 py-0.5 font-mono text-[0.9em]'
@@ -171,7 +172,8 @@ export const shadcnTheme = {
         button: 'cursor-pointer size-6 p-1 text-muted-foreground transition-all hover:text-foreground rounded hover:bg-muted',
         language: 'ml-1 font-mono lowercase',
         skeleton: 'rounded-md font-mono text-transparent bg-border/80 scale-y-90 w-fit animate-pulse whitespace-nowrap inline-block',
-        pre: 'overflow-x-auto font-mono p-0 bg-muted/40'
+        pre: 'overflow-x-auto font-mono p-0 bg-muted/40',
+        line: 'block '
     },
     codespan: {
         base: 'bg-muted rounded px-1.5 py-0.5 font-mono text-foreground text-[0.9em]'

package/dist/utils/hightlighter.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type BundledLanguage, type BundledTheme } from 'shiki';
+import { type BundledLanguage, type BundledTheme, type ThemedToken } from 'shiki';
 import { SvelteSet } from 'svelte/reactivity';
 export declare const loadShiki: () => Promise<[any, import("shiki").CreateHighlighterFactory<BundledLanguage, BundledTheme>]>;
 declare class HighlighterManager {
@@ -23,7 +23,7 @@ declare class HighlighterManager {
     /**
      * Highlights code synchronously. Must call isReady() first.
      */
-    highlightCode(code: string, language: BundledLanguage, theme: BundledTheme, preClassName?: string): string;
+    highlightCode(code: string, language: BundledLanguage, theme: BundledTheme): ThemedToken[][];
     static create(preloadedThemes: BundledTheme[]): HighlighterManager;
 }
 export { HighlighterManager };

package/dist/utils/hightlighter.svelte.js

@@ -4,10 +4,6 @@ import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 const isLanguageSupported = (language) => {
     return Object.hasOwn(bundledLanguages, language);
 };
-// Remove background styles from <pre> tags (inline style)
-const removePreBackground = (html) => {
-    return html.replace(/<pre[^>]*style="[^"]*background[^";]*;?[^"]*"[^>]*>/g, (match) => match.replace(/style="[^"]*background[^";]*;?[^"]*"/, ''));
-};
 export const loadShiki = async () => {
     return Promise.all([
         import('shiki/engine/javascript').then((mod) => mod.createJavaScriptRegexEngine({ forgiving: true })),
@@ -79,21 +75,16 @@ class HighlighterManager {
     /**
      * Highlights code synchronously. Must call isReady() first.
      */
-    highlightCode(code, language, theme, preClassName) {
+    highlightCode(code, language, theme) {
         const highlighter = this.highlighters.get(`${theme}:${language}`);
         if (!highlighter) {
-            return '';
+            return [];
         }
-        let html = highlighter.codeToHtml(code, {
+        const tokens = highlighter.codeToTokensBase(code, {
             lang: isLanguageSupported(language) ? language : 'text',
             theme: theme
         });
-        // Remove background and add custom class if needed
-        html = removePreBackground(html);
-        if (preClassName) {
-            html = html.replace(/<pre(\s|>)/, `<pre class="${preClassName}"$1`);
-        }
-        return html;
+        return tokens;
     }
     static create(preloadedThemes) {
         if (typeof window !== 'undefined' && 'STREAMDOWN_HIGHLIGHTER' in window) {

package/package.json

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