svelte-streamdown 4.1.0 → 4.1.1

package/README.md

@@ -467,6 +467,9 @@ The animation system works by:
 2. **Sequential Animation**: Each token animates as it is received
 3. **Block-level Animation**: Entire blocks (paragraphs, headings, code blocks) animate as units
 
+> [!NOTE]
+> Only text that arrives in **streamed-sized appends** to `content` is animated. A bulk update — `content` replaced by a different document, a jump back to an earlier prefix, or a single append of more than ~2 KB such as pasting a whole answer or a "show all" — renders without animation, and the next streamed append animates again. Animating a whole document at once would start thousands of CSS animations in a single frame and stall the page.
+
 ### Animation Types
 
 Choose from 4 distinct animation styles:

package/dist/Block.svelte

@@ -4,7 +4,7 @@
 	import { lex, type StreamdownToken } from './marked/index.js';
 	import AnimatedText from './AnimatedText.svelte';
 	import { useStreamdown } from './context.svelte.js';
-	import { getContext } from 'svelte';
+	import { getContext, untrack } from 'svelte';
 
 	let {
 		block,
@@ -21,9 +21,13 @@
 	// The old code never consulted `streamdown.parseIncompleteMarkdown`; the import
 	// is aliased so the context flag and the helper cannot be confused.
 	const complete = $derived(!isStatic && streamdown.parseIncompleteMarkdown !== false);
-	const tokens = $derived(
-		lex(complete ? completeMarkdown(block.trim()) : block, streamdown.extensions)
-	);
+	const view = $derived.by(() => {
+		const tokens = lex(complete ? completeMarkdown(block.trim()) : block, streamdown.extensions);
+		// Decided when this block's text changes and deliberately not tracked: a
+		// bulk update renders plain, and the next streamed chunk must not
+		// retroactively animate the blocks it left untouched.
+		return { tokens, animate: untrack(() => streamdown.animateUpdate) };
+	});
 	const insidePopover = getContext('POPOVER');
 </script>
 
@@ -32,9 +36,9 @@
 		{#if token}
 			{@const children = (token as any)?.tokens || []}
 			{@const isTextOnlyNode = children.length === 0}
-			<Element {token} {incomplete}>
+			<Element {token} {incomplete} animate={view.animate}>
 				{#if isTextOnlyNode}
-					{#if streamdown.animation.enabled && !insidePopover && !isStatic}
+					{#if streamdown.animation.enabled && view.animate && !insidePopover && !isStatic}
 						<AnimatedText text={'text' in token ? token.text || '' : ''} />
 					{:else}
 						{'text' in token ? token.text : ''}
@@ -47,4 +51,4 @@
 	{/each}
 {/snippet}
 
-{@render renderChildren(tokens)}
+{@render renderChildren(view.tokens)}

package/dist/Elements/Code.svelte

@@ -11,12 +11,15 @@
 	const {
 		token,
 		id,
-		incomplete = false
+		incomplete = false,
+		animate = true
 	}: {
 		token: CodeToken;
 		id: string;
 		/** The fence is still being streamed; nothing below it is final yet. */
 		incomplete?: boolean;
+		/** False for the render of a bulk update — a replacement or a paste-sized append (see Block). */
+		animate?: boolean;
 	} = $props();
 
 	const streamdown = useStreamdown();
@@ -66,7 +69,7 @@
 <div
 	data-streamdown-code={id}
 	data-incomplete={incomplete || undefined}
-	style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
+	style={animate && streamdown.isMounted ? streamdown.animationBlockStyle : ''}
 	class={streamdown.theme.code.base}
 >
 	<div class={streamdown.theme.code.header}>
@@ -115,7 +118,7 @@
 				>{#each lines as line}<span class={streamdown.theme.code.line}
 						>{#if line.length === 0}&#8203;{/if}{#each line as t}<span
 								class="th-token{t.className ? ` th-${t.className}` : ''}"
-								style={streamdown.isMounted ? streamdown.animationTextStyle : ''}
+								style={animate && streamdown.isMounted ? streamdown.animationTextStyle : ''}
 								style:color={streamdown.highlightTheme.tokens[t.className ?? 'token']}
 								>{t.value}</span
 							>{/each}</span

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

@@ -4,6 +4,8 @@ type $$ComponentProps = {
     id: string;
     /** The fence is still being streamed; nothing below it is final yet. */
     incomplete?: boolean;
+    /** False for the render of a bulk update — a replacement or a paste-sized append (see Block). */
+    animate?: boolean;
 };
 declare const Code: import("svelte").Component<$$ComponentProps, {}, "">;
 type Code = ReturnType<typeof Code>;

package/dist/Elements/Element.svelte

@@ -15,8 +15,14 @@
 	let {
 		token,
 		children,
-		incomplete = false
-	}: { token: StreamdownToken; children: Snippet; incomplete?: boolean } = $props();
+		incomplete = false,
+		animate = true
+	}: {
+		token: StreamdownToken;
+		children: Snippet;
+		incomplete?: boolean;
+		animate?: boolean;
+	} = $props();
 	const streamdown = useStreamdown();
 
 	// Use provided components or fallback to lightweight versions
@@ -25,7 +31,7 @@
 	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 style = $derived(animate && streamdown.isMounted ? streamdown.animationBlockStyle : '');
 	const id = $props.id();
 
 	// Only ever attached to the table wrapper, which is the element that already
@@ -91,11 +97,11 @@
 		props={{ children, token, incomplete }}
 		render={streamdown.snippets.mermaid ?? streamdown.snippets.code}
 	>
-		<MermaidComponent {id} {token} {incomplete} />
+		<MermaidComponent {id} {token} {incomplete} {animate} />
 	</Slot>
 {:else if token.type === 'code'}
 	<Slot props={{ children, token, incomplete }} render={streamdown.snippets.code}>
-		<CodeComponent {id} {token} {incomplete} />
+		<CodeComponent {id} {token} {incomplete} {animate} />
 	</Slot>
 {:else if token.type === 'codespan'}
 	<Slot props={{ children, token }} render={streamdown.snippets.codespan}>
@@ -284,7 +290,7 @@
 	<Slot props={{ children, token }} render={streamdown.snippets.descriptionList}>
 		<dl
 			data-streamdown-description-list={id}
-			style={streamdown.animationBlockStyle}
+			style={animate ? streamdown.animationBlockStyle : ''}
 			class={streamdown.theme.descriptionList.base}
 		>
 			{@render children()}

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

@@ -4,6 +4,7 @@ type $$ComponentProps = {
     token: StreamdownToken;
     children: Snippet;
     incomplete?: boolean;
+    animate?: boolean;
 };
 declare const Element: import("svelte").Component<$$ComponentProps, {}, "">;
 type Element = ReturnType<typeof Element>;

package/dist/Elements/Mermaid.svelte

@@ -13,12 +13,14 @@
 	const {
 		token,
 		id,
-		incomplete = false
+		incomplete = false,
+		animate = true
 	}: {
 		token: CodeToken;
 		id: string;
 		/** The fence is still being streamed; nothing below it is final yet. */
 		incomplete?: boolean;
+		animate?: boolean;
 	} = $props();
 
 	// Trailing blank lines are noise for mermaid but they still changed `token.text`
@@ -251,7 +253,7 @@
 	{#if mermaid}
 		<div
 			bind:this={container}
-			style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
+			style={animate && streamdown.isMounted ? streamdown.animationBlockStyle : ''}
 			class={streamdown.theme.mermaid.base}
 			{@attach (node) => {
 				// A half-written diagram makes mermaid throw and log on every chunk, so

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

@@ -4,6 +4,7 @@ type $$ComponentProps = {
     id: string;
     /** The fence is still being streamed; nothing below it is final yet. */
     incomplete?: boolean;
+    animate?: boolean;
 };
 declare const Mermaid: import("svelte").Component<$$ComponentProps, {}, "">;
 type Mermaid = ReturnType<typeof Mermaid>;

package/dist/Elements/fallbacks/CodeFallback.svelte

@@ -6,12 +6,14 @@
 	const {
 		token,
 		id,
-		incomplete = false
+		incomplete = false,
+		animate = true
 	}: {
 		token: Tokens.Code;
 		id: string;
 		/** The fence is still being streamed; nothing below it is final yet. */
 		incomplete?: boolean;
+		animate?: boolean;
 	} = $props();
 
 	const streamdown = useStreamdown();
@@ -36,7 +38,7 @@
 <div
 	data-streamdown-code={id}
 	data-incomplete={incomplete || undefined}
-	style={streamdown.isMounted ? streamdown.animationBlockStyle : ''}
+	style={animate && streamdown.isMounted ? streamdown.animationBlockStyle : ''}
 	class={streamdown.theme.code.base}
 >
 	<div class={streamdown.theme.code.header}>
@@ -49,7 +51,7 @@
 			style:overflow-y={streamdown.codeBlockMaxHeight ? 'auto' : undefined}
 			{@attach pinnedScroll}><code
 				>{#each code.split('\n') as line}<span class={streamdown.theme.code.line}
-						><span style={streamdown.isMounted ? streamdown.animationTextStyle : ''}
+						><span style={animate && streamdown.isMounted ? streamdown.animationTextStyle : ''}
 							>{line.trim().length > 0 ? line : '\u200B'}</span
 						></span
 					>{/each}</code

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

@@ -4,6 +4,7 @@ type $$ComponentProps = {
     id: string;
     /** The fence is still being streamed; nothing below it is final yet. */
     incomplete?: boolean;
+    animate?: boolean;
 };
 declare const CodeFallback: import("svelte").Component<$$ComponentProps, {}, "">;
 type CodeFallback = ReturnType<typeof CodeFallback>;

package/dist/Streamdown.svelte

@@ -55,6 +55,10 @@
 		mermaidConfig?.theme ? mermaidConfig.theme : darkMode.current ? 'dark' : 'default'
 	);
 
+	// Per-instance incremental state: append-only content updates re-lex only
+	// the last couple of blocks instead of the whole document.
+	const blocksCache = createParseBlocksCache();
+
 	streamdown = new StreamdownContext({
 		get element() {
 			return element;
@@ -77,6 +81,12 @@
 		get highlightTheme() {
 			return resolvedHighlightTheme;
 		},
+		get animateUpdate() {
+			// A streamed chunk keeps animating; a replacement or a bulk append (the
+			// demo's "Show All" is an append of 95% of the document) renders plain.
+			// The first parse stays animatable so `animateOnMount` keeps its meaning.
+			return blocksCache.lastUpdate !== 'bulk';
+		},
 		get snippets() {
 			return snippets;
 		},
@@ -200,9 +210,6 @@
 
 	const id = $props.id();
 
-	// Per-instance incremental state: append-only content updates re-lex only
-	// the last couple of blocks instead of the whole document.
-	const blocksCache = createParseBlocksCache();
 	const blocks = $derived(
 		isStatic ? content : parseBlocks(content, streamdown.extensions, blocksCache)
 	);

package/dist/context.svelte.d.ts

@@ -50,6 +50,8 @@ export declare const defaultTranslations: Translations;
 export interface StreamdownContext extends Omit<StreamdownProps, keyof Snippets | 'class' | 'theme' | 'highlightTheme' | 'inlineCitationsMode'> {
     snippets: Snippets;
     highlightTheme: HighlightTheme;
+    /** False while rendering a bulk update (a replacement or a paste-sized append); Block captures it per update. */
+    animateUpdate: boolean;
     theme: Theme;
     translations: Translations;
     controls: ResolvedControls;
@@ -69,6 +71,7 @@ export declare class StreamdownContext<Source extends Record<string, any> = Reco
     constructor(props: Omit<StreamdownProps, keyof Snippets | 'class' | 'highlightTheme'> & {
         snippets: Snippets<Source>;
         highlightTheme: HighlightTheme;
+        animateUpdate: boolean;
     });
 }
 export declare const useStreamdown: () => StreamdownContext<Record<string, any>>;
@@ -246,11 +249,13 @@ export type StreamdownProps<Source extends Record<string, any> = Record<string,
             token: Tokens.Code;
             id: string;
             incomplete: boolean;
+            animate: boolean;
         }, any, any>;
         mermaid?: Component<{
             token: Tokens.Code;
             id: string;
             incomplete: boolean;
+            animate: boolean;
         }, any, any>;
         math?: Component<{
             token: MathToken;

package/dist/marked/index.d.ts

@@ -57,6 +57,12 @@ export type ParseBlocksCache = {
     keptBefore: number[];
     /** persistent list of kept raws; only its tail is rewritten on append */
     blocks: string[];
+    /**
+     * What kind of update the last call was. Rendering skips the streaming
+     * animation on a `bulk` one — a replacement, or an append far larger than any
+     * streamed chunk — where ~10k spans would otherwise all animate in one frame.
+     */
+    lastUpdate: 'first' | 'stream' | 'bulk';
 };
 export declare const createParseBlocksCache: () => ParseBlocksCache;
 export declare const parseBlocks: (markdown: string, extensions?: Extension[], cache?: ParseBlocksCache) => string[];

package/dist/marked/index.js

@@ -145,7 +145,8 @@ export const createParseBlocksCache = () => ({
     keep: [],
     offsets: [0],
     keptBefore: [0],
-    blocks: []
+    blocks: [],
+    lastUpdate: 'first'
 });
 // Number of trailing rendered blocks that stay "live" (re-lexed every chunk).
 // 2 covers constructs that merge backward as they stream in — e.g. a paragraph
@@ -225,7 +226,23 @@ const appendable = (markdown, cache, cut, offset) => {
     }
     return markdown.charCodeAt(offset - 1) === content.charCodeAt(offset - 1);
 };
+// An append this large in a single update is a paste or a "show all", not a
+// streamed chunk. Real streams arrive in tens of characters, and even a client
+// that batches renders to one frame at ~1000 tokens/s adds a few hundred; the
+// harm — thousands of spans starting a CSS animation in the same frame — only
+// begins well past this. ponytail: heuristic; a prop if anyone needs to tune it.
+const BULK_APPEND_CHARS = 2048;
+const updateKind = (isAppend, previousLength, length) => {
+    if (!isAppend)
+        return previousLength === 0 ? 'first' : 'bulk';
+    return length - previousLength > BULK_APPEND_CHARS ? 'bulk' : 'stream';
+};
 export const parseBlocks = (markdown, extensions = [], cache) => {
+    // Whether this call extends the content the cache already described — decided
+    // by the same probe the fast path uses, so the contiguity fallback below still
+    // counts as an append for the animation's purposes.
+    let isAppend = false;
+    const previousLength = cache?.content.length ?? 0;
     if (cache && cache.content.length > 0 && markdown.length > cache.content.length) {
         // Append-only update: seal everything except the last SEAL_SLACK rendered
         // blocks and re-lex only the tail. offsets[] are prefix sums over raws, so
@@ -239,6 +256,7 @@ export const parseBlocks = (markdown, extensions = [], cache) => {
         }
         const offset = cache.offsets[cut];
         if (appendable(markdown, cache, cut, offset)) {
+            isAppend = true;
             const tailTokens = blockTokensOf(markdown.slice(offset), extensions);
             let tailLength = 0;
             for (const token of tailTokens)
@@ -268,6 +286,7 @@ export const parseBlocks = (markdown, extensions = [], cache) => {
                     cache.keptBefore.push(kept);
                 }
                 cache.content = markdown;
+                cache.lastUpdate = updateKind(isAppend, previousLength, markdown.length);
                 // Copy out: callers (Svelte `$derived`, the perf harness) diff block
                 // lists by identity, so handing back the persistent array would read as
                 // "nothing changed". slice() is a memcpy with no per-element callback.
@@ -298,6 +317,7 @@ export const parseBlocks = (markdown, extensions = [], cache) => {
             }
             cache.keptBefore.push(kept);
         }
+        cache.lastUpdate = updateKind(isAppend, previousLength, markdown.length);
         // Only trust the cache for future appends if raws reconstruct the input.
         cache.content = pos === markdown.length ? markdown : '';
         return cache.blocks.slice();

package/dist/utils/fence.d.ts

@@ -1,7 +1,12 @@
-/** An open code fence: the character it was opened with, and its run length. */
+/**
+ * An open code fence: the character it was opened with, its run length, and
+ * the prefix the opener sat behind (indentation, blockquote markers, a list
+ * marker). The prefix is what a closer's indentation is measured against.
+ */
 export type OpenFence = {
     char: string;
     length: number;
+    prefix: string;
 } | null;
 /**
  * Fence tracking, one line at a time: returns the fence state after `line`.
@@ -9,6 +14,12 @@ export type OpenFence = {
  * "am I inside a fence" answer can never drift between them.
  */
 export declare const trackFence: (line: string, open: OpenFence) => OpenFence;
+/**
+ * The line that closes `open`, placed at the opener's depth so it closes the
+ * fence where it lives. A list marker in the prefix is blanked to spaces: a
+ * closer must sit inside the item, and a repeated marker would start a new one.
+ */
+export declare const closingFence: (open: NonNullable<OpenFence>) => string;
 /**
  * True when `raw` ends inside a fenced block — i.e. the fence is still being
  * streamed. Only the last block of a live document can be in this state.

package/dist/utils/fence.js

@@ -1,31 +1,48 @@
-// Up to 3 spaces of indentation per CommonMark; blockquote markers are stripped
-// too because a fence can be quoted ("> ```") inside a blockquote or an alert,
-// and so is a leading list marker, because "- ```js" opens a fence in the item.
-const FENCE_LINE = /^[ \t]{0,3}(?:>[ \t]*)*(?:(?:[-*+]|\d{1,9}[.)])[ \t]+)?(`{3,}|~{3,})(.*)$/;
+// An opener may sit behind up to 3 spaces of indentation per CommonMark, behind
+// blockquote markers ("> ```" inside a blockquote or an alert), and behind a
+// list marker, because "- ```js" opens a fence in the item.
+const OPENER_LINE = /^([ \t]{0,3}(?:>[ \t]*)*(?:(?:[-*+]|\d{1,9}[.)])[ \t]+)?)(`{3,}|~{3,})(.*)$/;
+// A closer is measured against the opener, not against column 0: it may be
+// indented up to 3 spaces more than the opener was. That is what makes a fence
+// inside a list item close — "10. ```js" opens at column 4, so its "    ```"
+// closer is at 4, which a fixed 0–3 limit rejected.
+const CLOSER_LINE = /^([ \t]*(?:>[ \t]*)*)(`{3,}|~{3,})[ \t]*$/;
 /**
  * Fence tracking, one line at a time: returns the fence state after `line`.
  * The completer's block scan and `hasUnclosedFence` both walk with this, so the
  * "am I inside a fence" answer can never drift between them.
  */
 export const trackFence = (line, open) => {
-    const match = FENCE_LINE.exec(line);
-    if (!match) {
-        return open;
-    }
-    const run = match[1];
-    const info = match[2];
     if (open) {
-        // A closer uses the opener's character, is at least as long, and carries no
-        // info string — so a shorter fence line inside a longer block is content.
-        return run[0] === open.char && run.length >= open.length && info.trim() === '' ? null : open;
+        // A closer uses the opener's character, is at least as long, carries no
+        // info string, and is not indented deeper than the opener plus 3 — so a
+        // shorter or deeper fence line inside the block is content.
+        const match = CLOSER_LINE.exec(line);
+        if (!match)
+            return open;
+        const run = match[2];
+        const closes = run[0] === open.char &&
+            run.length >= open.length &&
+            match[1].length <= open.prefix.length + 3;
+        return closes ? null : open;
     }
+    const match = OPENER_LINE.exec(line);
+    if (!match)
+        return null;
+    const run = match[2];
     // A backtick fence's info string cannot contain a backtick (marked's own rule),
     // so such a line opens nothing.
-    if (run[0] === '`' && info.includes('`')) {
-        return open;
-    }
-    return { char: run[0], length: run.length };
+    if (run[0] === '`' && match[3].includes('`'))
+        return null;
+    return { char: run[0], length: run.length, prefix: match[1] };
 };
+/**
+ * The line that closes `open`, placed at the opener's depth so it closes the
+ * fence where it lives. A list marker in the prefix is blanked to spaces: a
+ * closer must sit inside the item, and a repeated marker would start a new one.
+ */
+export const closingFence = (open) => open.prefix.replace(/[-*+]|\d{1,9}[.)]/g, (marker) => ' '.repeat(marker.length)) +
+    open.char.repeat(open.length);
 /**
  * True when `raw` ends inside a fenced block — i.e. the fence is still being
  * streamed. Only the last block of a live document can be in this state.

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

@@ -1,4 +1,4 @@
-import { trackFence } from './fence.js';
+import { closingFence, trackFence } from './fence.js';
 export class IncompleteMarkdownParser {
     plugins = [];
     state = {
@@ -196,10 +196,12 @@ export class IncompleteMarkdownParser {
                     // Close inner blocks (code/math) before alignment wrappers.
                     let result = text;
                     if (state.blockingContexts.has('code')) {
-                        // Close with the fence that was opened: a '~~~' block is not closed by
-                        // '```', and a longer run needs a closer at least as long.
+                        // Close with the fence that was opened, at the depth it was opened: a
+                        // '~~~' block is not closed by '```', a longer run needs a closer at
+                        // least as long, and a fence inside a list item needs its closer inside
+                        // the item — one at column 0 leaves the block open and starts a new one.
                         const fence = state.openFence;
-                        result += '\n' + (fence ? fence.char.repeat(fence.length) : '```');
+                        result += '\n' + (fence ? closingFence(fence) : '```');
                     }
                     if (state.blockingContexts.has('math')) {
                         if (state.mathCloser === '\\]') {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-streamdown",
-	"version": "4.1.0",
+	"version": "4.1.1",
 	"packageManager": "pnpm@10.32.1",
 	"repository": {
 		"type": "git",