svelte-streamdown 2.2.4 → 2.2.6

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

@@ -95,7 +95,7 @@
 {/snippet}
 {#snippet Skeleton(lines: string[])}
 	{#each lines as line}
-		<span class={streamdown.theme.code.line}>
+		<span class={streamdown.theme.code.skeleton}>
 			{line.trim().length > 0 ? line : '\u200B'}
 		</span>
 	{/each}

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

@@ -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,7 +4,7 @@ export class StreamdownContext {
         refs: new Map(),
         footnotes: new Map()
     };
-    isMounted = $state(false);
+    isMounted = false;
     animationTextStyle = $derived(this.animation.enabled
         ? `animation-name: sd-${this.animation.type};
 animation-duration: ${this.animation.duration}ms;
@@ -24,6 +24,9 @@ animation-fill-mode: forwards;`
     constructor(props) {
         bind(this, props);
         setContext('streamdown', this);
+        if (this.animation.animateOnMount) {
+            this.isMounted = true;
+        }
         onMount(() => {
             this.isMounted = true;
         });

package/dist/theme.js

@@ -43,7 +43,7 @@ export const theme = {
         header: 'flex items-center justify-between bg-gray-100/80 p-2	 text-gray-600 text-xs',
         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',
+        skeleton: 'block rounded-md font-mono text-transparent bg-gray-200 scale-y-90 animate-pulse whitespace-nowrap',
         pre: 'overflow-x-auto font-mono p-0 bg-gray-100/40',
         line: 'block'
     },
@@ -171,7 +171,7 @@ export const shadcnTheme = {
         header: 'flex items-center justify-between bg-muted/80 px-2 py-1 text-muted-foreground text-xs',
         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',
+        skeleton: 'block rounded-md font-mono text-transparent bg-border/80 scale-y-90 w-fit animate-pulse whitespace-nowrap',
         pre: 'overflow-x-auto font-mono p-0 bg-muted/40',
         line: 'block '
     },

package/package.json

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