svelte-streamdown 2.2.2 → 2.2.4

package/dist/AnimatedBlock.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { useStreamdown } from './streamdown.svelte.js';
+	import { useStreamdown } from './context.svelte.js';
 
 	let { children }: { children: Snippet } = $props();
 

package/dist/AnimatedText.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { useStreamdown } from './streamdown.svelte.js';
+	import { useStreamdown } from './context.svelte.js';
 	let { text }: { text: string } = $props();
 
 	const streamdown = useStreamdown();

package/dist/Block.svelte

@@ -3,7 +3,7 @@
 	import Element from './Elements/Element.svelte';
 	import { lex, type StreamdownToken } from './marked/index.js';
 	import AnimatedText from './AnimatedText.svelte';
-	import { useStreamdown } from './streamdown.svelte.js';
+	import { useStreamdown } from './context.svelte.js';
 	import AnimatedBlock from './AnimatedBlock.svelte';
 
 	let {

package/dist/Elements/Alert.svelte

@@ -13,7 +13,7 @@
 	/><path d="M12 17h.01" />`
 	};
 
-	import { useStreamdown } from '../streamdown.svelte.js';
+	import { useStreamdown } from '../context.svelte.js';
 	import Slot from './Slot.svelte';
 	import type { AlertToken } from '../marked/index.js';
 	import type { Snippet } from 'svelte';

package/dist/Elements/Code.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-	import { useStreamdown } from '../streamdown.svelte.js';
+	import { useStreamdown } from '../context.svelte.js';
 	import { save } from '../utils/save.js';
 	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

@@ -8,7 +8,7 @@
 	import Alert from './Alert.svelte';
 	import type { StreamdownToken } from '../marked/index.js';
 	import Slot from './Slot.svelte';
-	import { useStreamdown } from '../streamdown.svelte.js';
+	import { useStreamdown } from '../context.svelte.js';
 	import FootnoteRef from './FootnoteRef.svelte';
 	let { token, children }: { token: StreamdownToken; children: Snippet } = $props();
 	const streamdown = useStreamdown();

package/dist/Elements/FootnoteRef.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { useStreamdown } from '../streamdown.svelte.js';
+	import { useStreamdown } from '../context.svelte.js';
 	import Slot from './Slot.svelte';
 	import type { FootnoteRef } from '../marked/marked-footnotes.js';
 	import {

package/dist/Elements/Image.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { useStreamdown } from '../streamdown.svelte.js';
+	import { useStreamdown } from '../context.svelte.js';
 	import { transformUrl } from '../utils/url.js';
 	import Slot from './Slot.svelte';
 	import type { Tokens } from 'marked';

package/dist/Elements/Link.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { useStreamdown } from '../streamdown.svelte.js';
+	import { useStreamdown } from '../context.svelte.js';
 	import { transformUrl } from '../utils/url.js';
 	import Slot from './Slot.svelte';
 	import type { Tokens } from 'marked';

package/dist/Elements/Math.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount, untrack } from 'svelte';
-	import { useStreamdown } from '../streamdown.svelte.js';
+	import { useStreamdown } from '../context.svelte.js';
 	import type { MathToken } from '../marked/index.js';
 	import type { KatexOptions } from 'katex';
 	import 'katex/dist/katex.min.css';

package/dist/Elements/Mermaid.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { useStreamdown } from '../streamdown.svelte.js';
+	import { useStreamdown } from '../context.svelte.js';
 	import type { Tokens } from 'marked';
 	import type { MermaidConfig } from 'mermaid';
 	import { on } from 'svelte/events';

package/dist/Elements/Table.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { useStreamdown } from '../streamdown.svelte.js';
+	import { useStreamdown } from '../context.svelte.js';
 	import Slot from './Slot.svelte';
 	import type { Tokens } from 'marked';
 	import type { Snippet } from 'svelte';

package/dist/Streamdown.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Block from './Block.svelte';
-	import { StreamdownContext, type StreamdownProps } from './streamdown.svelte.js';
+	import { StreamdownContext, type StreamdownProps } from './context.svelte.js';
 	import { mergeTheme, shadcnTheme } from './theme.js';
 	import { parseBlocks } from './marked/index.js';
 

package/dist/Streamdown.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type StreamdownProps } from './context.svelte.js';
+declare const Streamdown: import("svelte").Component<StreamdownProps, {}, "streamdown" | "element">;
+type Streamdown = ReturnType<typeof Streamdown>;
+export default Streamdown;

package/dist/{streamdown.svelte.d.ts → 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;
     });

package/dist/{streamdown.svelte.js → context.svelte.js}

@@ -5,18 +5,22 @@ export class StreamdownContext {
         footnotes: new Map()
     };
     isMounted = $state(false);
-    animationTextStyle = $derived(`animation-name: sd-${this.animation.type};
+    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);

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { default as Streamdown } from './Streamdown.svelte';
-export { useStreamdown, type StreamdownProps } from './streamdown.svelte.js';
+export { useStreamdown, type StreamdownProps } from './context.svelte.js';
 export { theme, shadcnTheme, mergeTheme, type Theme } from './theme.js';
 export { lex, parseBlocks, type StreamdownToken } from './marked/index.js';

package/dist/index.js

@@ -1,4 +1,4 @@
 export { default as Streamdown } from './Streamdown.svelte';
-export { useStreamdown } from './streamdown.svelte.js';
+export { useStreamdown } from './context.svelte.js';
 export { theme, shadcnTheme, mergeTheme } from './theme.js';
 export { lex, parseBlocks } from './marked/index.js';

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/marked/marked-footnotes.js

@@ -1,5 +1,5 @@
 import {} from './index.js';
-import { StreamdownContext } from '../streamdown.svelte.js';
+import { StreamdownContext } from '../context.svelte.js';
 import { getContext } from 'svelte';
 const safeGetContext = () => {
     try {

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.2",
+	"version": "2.2.4",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",