svelte-streamdown 2.6.1 → 3.0.1

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,
@@ -30,8 +31,25 @@
 		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() {
@@ -53,7 +71,7 @@
 			return allowedImagePrefixes;
 		},
 		get shikiTheme() {
-			return shikiTheme || 'github-light';
+			return shikiTheme || shikiThemedTheme;
 		},
 		get snippets() {
 			return snippets;
@@ -67,7 +85,10 @@
 			return baseTheme;
 		},
 		get mermaidConfig() {
-			return mermaidConfig;
+			return {
+				theme: mermaidThemedTheme,
+				...mermaidConfig
+			};
 		},
 		get katexConfig() {
 			return katexConfig;
@@ -78,8 +99,11 @@
 		get translations() {
 			return translations;
 		},
-		get shikiPreloadThemes() {
-			return shikiPreloadThemes;
+		get shikiLanguages() {
+			return shikiLanguages;
+		},
+		get shikiThemes() {
+			return shikiThemes;
 		},
 		get sources() {
 			return sources;
@@ -122,18 +146,25 @@
 		},
 		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

@@ -2,10 +2,11 @@ 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;
@@ -91,6 +92,7 @@ export type Snippets<Source extends Record<string, any> = Record<string, any>> =
 };
 export type StreamdownProps<Source extends Record<string, any> = Record<string, any>> = {
     streamdown?: StreamdownContext;
+    static?: boolean;
     sources?: {
         [key: string]: Source;
     };
@@ -105,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?: {
@@ -159,5 +162,19 @@ export type StreamdownProps<Source extends Record<string, any> = Record<string,
         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/marked/marked-footnotes.js

@@ -1,6 +1,9 @@
 import {} from './index.js';
 import { StreamdownContext } from '../context.svelte.js';
 import { getContext } from 'svelte';
+const footnoteRegex = /^\[\^([^\]\n]+)\]:(?:[ \t]+|\n|$)([^\n]*(?:\n(?:[ \t]+[^\n]*)?)*)/;
+const footnoteRefRegex = /^\[\^([^\]\n]+)\]/;
+const footNoteLastLineRegex = /^[ \t]*?[>\-*][ ]|[`]{3,}$|^[ \t]*?[|].+[|]$/;
 const safeGetContext = () => {
     try {
         return getContext('streamdown');
@@ -32,18 +35,16 @@ export function markedFootnote() {
             level: 'block',
             tokenizer(src) {
                 const maps = ensureMaps(this);
-                const match = /^\[\^([^\]\n]+)\]:(?:[ \t]+|[\n]*?|$)([^\n]*?(?:\n|$)(?:\n*?[ ]{4,}[^\n]*)*)/.exec(src);
+                const match = footnoteRegex.exec(src);
                 if (match) {
                     const [raw, label, text = ''] = match;
                     let content = text.split('\n').reduce((acc, curr) => {
-                        return acc + '\n' + curr.replace(/^(?:[ ]{4}|[\t])/, '');
+                        return acc + '\n' + curr.replace(/^[ \t]+/, '');
                     }, '');
                     const contentLastLine = content.trimEnd().split('\n').pop();
                     content +=
                         // add lines after list, blockquote, codefence, and table
-                        contentLastLine && /^[ \t]*?[>\-*][ ]|[`]{3,}$|^[ \t]*?[|].+[|]$/.test(contentLastLine)
-                            ? '\n\n'
-                            : '';
+                        contentLastLine && footNoteLastLineRegex.test(contentLastLine) ? '\n\n' : '';
                     const lines = content.split('\n');
                     const token = {
                         type: 'footnote',
@@ -66,7 +67,7 @@ export function markedFootnote() {
             level: 'inline',
             tokenizer(src) {
                 const maps = ensureMaps(this);
-                const match = /^\[\^([^\]\n]+)\]/.exec(src);
+                const match = footnoteRefRegex.exec(src);
                 if (match) {
                     const [raw, label] = match;
                     const footnote = maps.footnotes.get(label);

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