svelte-streamdown 2.6.0 → 3.0.0

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';

package/dist/Streamdown.svelte

@@ -8,13 +8,14 @@
 		content = '',
 		class: className,
 		shikiTheme,
-		shikiPreloadThemes,
+		shikiLanguages,
+		shikiThemes,
 		parseIncompleteMarkdown,
 		defaultOrigin,
 		allowedLinkPrefixes = ['*'],
 		allowedImagePrefixes = ['*'],
 		theme,
-		mermaidConfig,
+		mermaidConfig = {},
 		katexConfig,
 		translations,
 		baseTheme,
@@ -29,8 +30,22 @@
 		extensions,
 		sources,
 		inlineCitationsMode = 'carousel',
+		mdxComponents,
+		components,
+		static: isStatic,
 		...snippets
 	}: StreamdownProps<Source> = $props();
+	import { useDarkMode } from './utils/darkMode.svelte.js';
+
+	const darkMode = useDarkMode();
+
+	const shikiThemedTheme = $derived(
+		shikiThemes ? Object.keys(shikiThemes)[0] || 'github-light' : darkMode.current ? 'github-dark' : 'github-light'
+	);
+
+	const mermaidThemedTheme = $derived(
+		mermaidConfig?.theme ? mermaidConfig.theme : darkMode.current ? 'dark' : 'default'
+	);
 
 	streamdown = new StreamdownContext({
 		get element() {
@@ -52,7 +67,7 @@
 			return allowedImagePrefixes;
 		},
 		get shikiTheme() {
-			return shikiTheme || 'github-light';
+			return shikiTheme || shikiThemedTheme;
 		},
 		get snippets() {
 			return snippets;
@@ -66,7 +81,10 @@
 			return baseTheme;
 		},
 		get mermaidConfig() {
-			return mermaidConfig;
+			return {
+				theme: mermaidThemedTheme,
+				...mermaidConfig
+			};
 		},
 		get katexConfig() {
 			return katexConfig;
@@ -77,8 +95,11 @@
 		get translations() {
 			return translations;
 		},
-		get shikiPreloadThemes() {
-			return shikiPreloadThemes;
+		get shikiLanguages() {
+			return shikiLanguages;
+		},
+		get shikiThemes() {
+			return shikiThemes;
 		},
 		get sources() {
 			return sources;
@@ -118,18 +139,28 @@
 		},
 		get icons() {
 			return icons;
+		},
+		get mdxComponents() {
+			return mdxComponents;
+		},
+		get components() {
+			return components;
 		}
 	});
 
 	const id = $props.id();
 
-	const blocks = $derived(parseBlocks(content, streamdown.extensions));
+	const blocks = $derived(isStatic ? content : parseBlocks(content, streamdown.extensions));
 </script>
 
 <div bind:this={element} class={className}>
-	{#each blocks as block, index (`${id}-block-${index}`)}
-		<Block {block} />
-	{/each}
+	{#if isStatic}
+		<Block static={isStatic} block={content} />
+	{:else}
+		{#each blocks as block, index (`${id}-block-${index}`)}
+			<Block static={isStatic} {block} />
+		{/each}
+	{/if}
 </div>
 
 <style global>

package/dist/context.svelte.d.ts

@@ -1,11 +1,12 @@
-import type { Snippet } from 'svelte';
+import type { Component, Snippet } from 'svelte';
 import type { DeepPartialTheme, Theme } from './theme.js';
 import type { MermaidConfig } from 'mermaid';
 import type { KatexOptions } from 'katex';
-import type { BundledTheme } from 'shiki';
+import type { LanguageInfo } from './utils/bundledLanguages.js';
+import type { ThemeRegistration } from 'shiki';
 export interface StreamdownContext extends Omit<StreamdownProps, keyof Snippets | 'class' | 'theme' | 'shikiTheme' | 'inlineCitationsMode'> {
     snippets: Snippets;
-    shikiTheme: BundledTheme;
+    shikiTheme: string;
     theme: Theme;
     controls: {
         code: boolean;
@@ -30,7 +31,7 @@ export declare class StreamdownContext<Source extends Record<string, any> = Reco
     });
 }
 export declare const useStreamdown: () => StreamdownContext<Record<string, any>>;
-import type { AlertToken, MathToken, SubSupToken, TableToken, THead, TBody, TFoot, THeadRow, TRow, TD, TH, Extension, GenericToken, CitationToken } from './marked/index.js';
+import type { AlertToken, MathToken, SubSupToken, TableToken, THead, TBody, TFoot, THeadRow, TRow, TD, TH, Extension, GenericToken, CitationToken, MdxToken } from './marked/index.js';
 import type { Tokens } from 'marked';
 import type { ListItemToken, ListToken } from './marked/marked-list.js';
 import type { Footnote, FootnoteRef, FootnoteToken } from './marked/marked-footnotes.js';
@@ -73,6 +74,7 @@ type TokenSnippet = {
     inlineCitationPopover: CitationToken;
     inlineCitationContent: CitationToken;
     inlineCitationPreview: CitationToken;
+    mdx: MdxToken;
 };
 type PredefinedElements = keyof TokenSnippet;
 export type Snippets<Source extends Record<string, any> = Record<string, any>> = {
@@ -83,11 +85,14 @@ export type Snippets<Source extends Record<string, any> = Record<string, any>> =
         } & (K extends 'inlineCitationContent' ? {
             source: Source;
             key: string;
+        } : K extends 'mdx' ? {
+            props: Record<string, number | string | boolean | null | undefined>;
         } : {})
     ]>;
 };
 export type StreamdownProps<Source extends Record<string, any> = Record<string, any>> = {
     streamdown?: StreamdownContext;
+    static?: boolean;
     sources?: {
         [key: string]: Source;
     };
@@ -102,8 +107,9 @@ export type StreamdownProps<Source extends Record<string, any> = Record<string,
     theme?: DeepPartialTheme;
     baseTheme?: 'tailwind' | 'shadcn';
     mergeTheme?: boolean;
-    shikiTheme?: BundledTheme;
-    shikiPreloadThemes?: BundledTheme[];
+    shikiTheme?: string;
+    shikiLanguages?: LanguageInfo[];
+    shikiThemes?: Record<string, ThemeRegistration>;
     mermaidConfig?: MermaidConfig;
     katexConfig?: KatexOptions | ((inline: boolean) => KatexOptions);
     translations?: {
@@ -151,5 +157,24 @@ export type StreamdownProps<Source extends Record<string, any> = Record<string,
         token: GenericToken;
         children: Snippet;
     }]>;
+    mdxComponents?: Record<string, Component<{
+        token: MdxToken;
+        children: Snippet;
+        props: any;
+    }, any, any>>;
+    components?: {
+        code?: Component<{
+            token: Tokens.Code;
+            id: string;
+        }, any, any>;
+        mermaid?: Component<{
+            token: Tokens.Code;
+            id: string;
+        }, any, any>;
+        math?: Component<{
+            token: MathToken;
+            id: string;
+        }, any, any>;
+    };
 } & Partial<Snippets<Source>>;
 export {};

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { default as Streamdown } from './Streamdown.svelte';
 export { useStreamdown, type StreamdownProps } from './context.svelte.js';
 export { theme, shadcnTheme, mergeTheme, type Theme } from './theme.js';
-export { type Extension, type StreamdownToken } from './marked/index.js';
-export { lex, parseBlocks } from './marked/index.js';
+export { type Extension, type StreamdownToken, lex, parseBlocks } from './marked/index.js';
+export { parseIncompleteMarkdown, type Plugin, IncompleteMarkdownParser } from './utils/parse-incomplete-markdown.js';
+export { bundledLanguagesInfo, createLanguageSet, type LanguageInfo } from './utils/bundledLanguages.js';

package/dist/index.js

@@ -1,5 +1,6 @@
 export { default as Streamdown } from './Streamdown.svelte';
 export { useStreamdown } from './context.svelte.js';
 export { theme, shadcnTheme, mergeTheme } from './theme.js';
-export {} from './marked/index.js';
 export { lex, parseBlocks } from './marked/index.js';
+export { parseIncompleteMarkdown, IncompleteMarkdownParser } from './utils/parse-incomplete-markdown.js';
+export { bundledLanguagesInfo, createLanguageSet } from './utils/bundledLanguages.js';

package/dist/utils/bundledLanguages.d.ts

@@ -0,0 +1,8 @@
+export type LanguageInfo = {
+    id: string;
+    aliases?: string[];
+    import: () => Promise<any>;
+};
+export declare const bundledLanguagesInfo: LanguageInfo[];
+export declare function createLanguageSet(languages: LanguageInfo[]): Set<string>;
+export declare const supportedLanguages: Set<string>;

package/dist/utils/bundledLanguages.js

@@ -0,0 +1,143 @@
+export const bundledLanguagesInfo = [
+    // Web essentials
+    {
+        id: 'javascript',
+        aliases: ['js'],
+        import: () => import('@shikijs/langs/javascript')
+    },
+    {
+        id: 'typescript',
+        aliases: ['ts'],
+        import: () => import('@shikijs/langs/typescript')
+    },
+    {
+        id: 'html',
+        import: () => import('@shikijs/langs/html')
+    },
+    {
+        id: 'css',
+        import: () => import('@shikijs/langs/css')
+    },
+    {
+        id: 'json',
+        import: () => import('@shikijs/langs/json')
+    },
+    {
+        id: 'jsx',
+        import: () => import('@shikijs/langs/jsx')
+    },
+    {
+        id: 'tsx',
+        import: () => import('@shikijs/langs/tsx')
+    },
+    {
+        id: 'markdown',
+        aliases: ['md'],
+        import: () => import('@shikijs/langs/markdown')
+    },
+    {
+        id: 'yaml',
+        aliases: ['yml'],
+        import: () => import('@shikijs/langs/yaml')
+    },
+    {
+        id: 'xml',
+        import: () => import('@shikijs/langs/xml')
+    },
+    // Backend languages
+    {
+        id: 'python',
+        aliases: ['py'],
+        import: () => import('@shikijs/langs/python')
+    },
+    {
+        id: 'java',
+        import: () => import('@shikijs/langs/java')
+    },
+    {
+        id: 'go',
+        import: () => import('@shikijs/langs/go')
+    },
+    {
+        id: 'rust',
+        aliases: ['rs'],
+        import: () => import('@shikijs/langs/rust')
+    },
+    {
+        id: 'ruby',
+        aliases: ['rb'],
+        import: () => import('@shikijs/langs/ruby')
+    },
+    {
+        id: 'php',
+        import: () => import('@shikijs/langs/php')
+    },
+    {
+        id: 'c',
+        import: () => import('@shikijs/langs/c')
+    },
+    {
+        id: 'cpp',
+        aliases: ['c++'],
+        import: () => import('@shikijs/langs/cpp')
+    },
+    {
+        id: 'csharp',
+        aliases: ['c#', 'cs'],
+        import: () => import('@shikijs/langs/csharp')
+    },
+    {
+        id: 'sql',
+        import: () => import('@shikijs/langs/sql')
+    },
+    {
+        id: 'swift',
+        import: () => import('@shikijs/langs/swift')
+    },
+    {
+        id: 'kotlin',
+        aliases: ['kt', 'kts'],
+        import: () => import('@shikijs/langs/kotlin')
+    },
+    // Config/Shell
+    {
+        id: 'shellscript',
+        aliases: ['bash', 'sh', 'shell', 'zsh'],
+        import: () => import('@shikijs/langs/shellscript')
+    },
+    {
+        id: 'docker',
+        aliases: ['dockerfile'],
+        import: () => import('@shikijs/langs/docker')
+    },
+    {
+        id: 'toml',
+        import: () => import('@shikijs/langs/toml')
+    },
+    {
+        id: 'graphql',
+        aliases: ['gql'],
+        import: () => import('@shikijs/langs/graphql')
+    },
+    {
+        id: 'svelte',
+        import: () => import('@shikijs/langs/svelte')
+    },
+    {
+        id: 'vue',
+        import: () => import('@shikijs/langs/vue')
+    }
+];
+// Helper function to create a Set of all language IDs and aliases from language info
+export function createLanguageSet(languages) {
+    const set = new Set();
+    languages.forEach((lang) => {
+        set.add(lang.id);
+        if (lang.aliases) {
+            lang.aliases.forEach((alias) => set.add(alias));
+        }
+    });
+    return set;
+}
+// Create a Set of all supported language IDs and aliases for fast lookup (default set)
+export const supportedLanguages = createLanguageSet(bundledLanguagesInfo);

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

@@ -0,0 +1,3 @@
+export declare const useDarkMode: () => {
+    readonly current: boolean;
+};

package/dist/utils/darkMode.svelte.js

@@ -0,0 +1,49 @@
+import { onMount } from 'svelte';
+export const useDarkMode = () => {
+    let isDark = $state(false);
+    const checkTheme = () => {
+        const elements = [document.documentElement, document.body];
+        // First check for explicit light mode
+        for (const element of elements) {
+            if (element.classList.contains('light') ||
+                element.dataset.theme === 'light' ||
+                element.style.colorScheme === 'light') {
+                isDark = false;
+                return;
+            }
+        }
+        // Then check for dark mode
+        for (const element of elements) {
+            if (element.classList.contains('dark') ||
+                element.dataset.theme === 'dark' ||
+                element.style.colorScheme === 'dark') {
+                isDark = true;
+                return;
+            }
+        }
+        // Default to light mode if no explicit theme is set
+        isDark = false;
+    };
+    onMount(() => {
+        // Initial check
+        checkTheme();
+        // Watch for class, attribute, and style changes on html and body
+        const observer = new MutationObserver(() => {
+            checkTheme();
+        });
+        const observerOptions = {
+            attributes: true,
+            attributeFilter: ['class', 'data-theme', 'style']
+        };
+        observer.observe(document.documentElement, observerOptions);
+        observer.observe(document.body, observerOptions);
+        return () => {
+            observer.disconnect();
+        };
+    });
+    return {
+        get current() {
+            return isDark;
+        }
+    };
+};

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

@@ -1,32 +1,30 @@
-import { type BundledLanguage, type BundledTheme, type HighlighterGeneric, type ThemedToken } from 'shiki';
-import { SvelteMap, SvelteSet } from 'svelte/reactivity';
-export declare const loadShiki: () => Promise<[any, import("shiki").CreateHighlighterFactory<BundledLanguage, BundledTheme>]>;
-export type Highlighter = HighlighterGeneric<BundledLanguage, BundledTheme>;
+import type { ThemedToken, ThemeRegistration } from 'shiki';
+import type { HighlighterCore } from 'shiki/core';
+import { SvelteMap } from 'svelte/reactivity';
+import { type LanguageInfo } from './bundledLanguages.js';
+export type Highlighter = HighlighterCore;
 declare class HighlighterManager {
-    loadedLanguages: SvelteMap<BundledLanguage, boolean | Promise<void>>;
-    loadedThemes: SvelteMap<BundledTheme, boolean | Promise<void>>;
-    preloadedThemes: SvelteSet<BundledTheme>;
-    highlighter: Highlighter | Promise<Highlighter> | null;
-    constructor(preloadedThemes: BundledTheme[]);
+    loadedLanguages: SvelteMap<string, boolean | Promise<void>>;
+    highlighter: any;
+    customLanguages: Set<string>;
+    languageLoaders: Map<string, () => Promise<any>>;
+    additionalThemes: Record<string, ThemeRegistration>;
+    constructor(languages: LanguageInfo[], additionalThemes?: Record<string, ThemeRegistration>, additionalLanguages?: LanguageInfo[]);
     private loadHighlighter;
-    private loadTheme;
+    private isThemeAvailable;
     private loadLanguage;
     private isLanguageSupported;
-    isReady(theme: BundledTheme, language?: string | undefined): boolean;
-    /**
-     * Preloads themes by creating minimal highlighter instances.
-     * This reduces flickering when switching themes.
-     */
-    preloadThemes(highlighter: Highlighter): Promise<void>;
+    isReady(theme: string, language: string | undefined): boolean;
     /**
      * Ensures the highlighter is ready for the given theme and language.
      */
-    load(theme: BundledTheme, language?: string | undefined): Promise<void>;
+    load(theme: string, language: string | undefined): Promise<void>;
     /**
      * Highlights code synchronously. Must call isReady() first.
+     * Returns plaintext tokens for unsupported languages.
      */
-    highlightCode(code: string, language: string | undefined, theme: BundledTheme): ThemedToken[][];
-    static create(preloadedThemes?: BundledTheme[]): HighlighterManager;
+    highlightCode(code: string, language: string | undefined, theme: string): ThemedToken[][];
+    static create(languages?: LanguageInfo[], additionalThemes?: Record<string, ThemeRegistration>, additionalLanguages?: LanguageInfo[]): HighlighterManager;
 }
 export { HighlighterManager };
 export declare const languageExtensionMap: Record<string, string>;