svelte-streamdown 2.6.1 → 3.0.0

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

package/dist/utils/hightlighter.svelte.js

@@ -1,18 +1,41 @@
-import { bundledLanguages } from 'shiki';
-import { SvelteMap, SvelteSet } from 'svelte/reactivity';
-export const loadShiki = async () => {
-    return Promise.all([
-        import('shiki/engine/javascript').then((mod) => mod.createJavaScriptRegexEngine({ forgiving: true })),
-        import('shiki').then((mod) => mod.createHighlighter)
-    ]);
+import { SvelteMap } from 'svelte/reactivity';
+import { supportedLanguages, createLanguageSet, bundledLanguagesInfo } from './bundledLanguages.js';
+import { createHighlighterCore } from 'shiki/core';
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
+// Import default themes directly
+import githubDark from '@shikijs/themes/github-dark';
+import githubLight from '@shikijs/themes/github-light';
+// Default themes that are always loaded
+const DEFAULT_THEMES = {
+    'github-dark': githubDark,
+    'github-light': githubLight
 };
 class HighlighterManager {
     loadedLanguages = new SvelteMap();
-    loadedThemes = new SvelteMap();
-    preloadedThemes = new SvelteSet();
     highlighter = $state(null);
-    constructor(preloadedThemes) {
-        preloadedThemes.forEach((theme) => this.preloadedThemes.add(theme));
+    customLanguages;
+    languageLoaders;
+    additionalThemes;
+    constructor(languages, additionalThemes, additionalLanguages) {
+        // Store additional themes (will be loaded with highlighter)
+        this.additionalThemes = additionalThemes || {};
+        // Merge languages: default + additional
+        const allLanguages = additionalLanguages ? [...languages, ...additionalLanguages] : languages;
+        this.languageLoaders = new Map();
+        allLanguages.forEach((l) => {
+            this.languageLoaders.set(l.id, l.import);
+            if (l.aliases) {
+                l.aliases.forEach((alias) => this.languageLoaders.set(alias, l.import));
+            }
+        });
+        // Build custom languages set for validation
+        if (additionalLanguages) {
+            const additionalSet = createLanguageSet(additionalLanguages);
+            this.customLanguages = new Set([...supportedLanguages, ...additionalSet]);
+        }
+        else {
+            this.customLanguages = supportedLanguages;
+        }
         if (typeof window !== 'undefined') {
             Object.assign(window, {
                 STREAMDOWN_HIGHLIGHTER: this
@@ -24,17 +47,25 @@ class HighlighterManager {
             return this.highlighter;
         }
         else if (!this.highlighter) {
-            this.highlighter = new Promise((resolve, reject) => {
-                loadShiki().then(([engine, createHighlighter]) => {
-                    return createHighlighter({
-                        themes: [],
+            this.highlighter = new Promise(async (resolve, reject) => {
+                try {
+                    const engine = createJavaScriptRegexEngine({ forgiving: true });
+                    // Load default themes + any additional themes immediately
+                    const allThemes = [
+                        ...Object.values(DEFAULT_THEMES),
+                        ...Object.values(this.additionalThemes)
+                    ];
+                    const highlighter = await createHighlighterCore({
+                        themes: allThemes,
                         langs: [],
                         engine
-                    }).then((highlighter) => {
-                        this.highlighter = highlighter;
-                        resolve(highlighter);
                     });
-                });
+                    this.highlighter = highlighter;
+                    resolve(highlighter);
+                }
+                catch (error) {
+                    reject(error);
+                }
             });
             return this.highlighter;
         }
@@ -42,94 +73,143 @@ class HighlighterManager {
             return this.highlighter;
         }
     }
-    async loadTheme(theme, highlighter) {
-        const themeLoader = this.loadedThemes.get(theme);
-        if (themeLoader instanceof Promise) {
-            await themeLoader;
-        }
-        else {
-            const themeLoaderPromise = highlighter.loadTheme(theme).then(() => {
-                this.loadedThemes.set(theme, true);
-            });
-            this.loadedThemes.set(theme, themeLoaderPromise);
-            await themeLoaderPromise;
-        }
+    isThemeAvailable(theme) {
+        return theme in DEFAULT_THEMES || theme in this.additionalThemes;
     }
     async loadLanguage(language, highlighter) {
+        // Skip loading if language is not supported
+        if (!this.isLanguageSupported(language)) {
+            return;
+        }
         const languageLoader = this.loadedLanguages.get(language);
         if (languageLoader instanceof Promise) {
             await languageLoader;
         }
-        else {
-            const languageLoaderPromise = highlighter.loadLanguage(language).then(() => {
+        else if (!languageLoader) {
+            const loader = this.languageLoaders.get(language);
+            if (!loader) {
+                // Language not available, mark as failed
+                this.loadedLanguages.set(language, false);
+                return;
+            }
+            const languageLoaderPromise = loader()
+                .then((langModule) => {
+                const langObj = langModule.default || langModule;
+                return highlighter.loadLanguage(langObj);
+            })
+                .then(() => {
                 this.loadedLanguages.set(language, true);
+            })
+                .catch((err) => {
+                this.loadedLanguages.set(language, false);
+                throw err;
             });
             this.loadedLanguages.set(language, languageLoaderPromise);
             await languageLoaderPromise;
         }
     }
     isLanguageSupported = (language) => {
-        return Object.hasOwn(bundledLanguages, language);
+        return this.customLanguages.has(language);
     };
-    isReady(theme, language = 'bash') {
+    isReady(theme, language) {
+        // Check if theme is available
+        if (!this.isThemeAvailable(theme)) {
+            return false;
+        }
+        // For unsupported languages, we don't need to load anything (will use plaintext)
+        if (!language || !this.isLanguageSupported(language)) {
+            return !!this.highlighter && !(this.highlighter instanceof Promise);
+        }
         return (!!this.highlighter &&
             !(this.highlighter instanceof Promise) &&
-            this.loadedThemes.get(theme) === true &&
-            this.loadedLanguages.get(this.isLanguageSupported(language) ? language : 'bash') === true);
-    }
-    /**
-     * Preloads themes by creating minimal highlighter instances.
-     * This reduces flickering when switching themes.
-     */
-    async preloadThemes(highlighter) {
-        await Promise.all(Array.from(this.preloadedThemes).map((theme) => this.loadTheme(theme, highlighter)));
+            this.loadedLanguages.get(language) === true);
     }
     /**
      * Ensures the highlighter is ready for the given theme and language.
      */
-    async load(theme, language = 'bash') {
-        const themeLoader = this.loadedThemes.get(theme);
-        const languageLoader = this.loadedLanguages.get(this.isLanguageSupported(language) ? language : 'bash');
+    async load(theme, language) {
+        // For unsupported languages, only need to load highlighter (themes are pre-loaded)
+        if (!language || !this.isLanguageSupported(language)) {
+            if (this.highlighter !== null && !(this.highlighter instanceof Promise)) {
+                return;
+            }
+            await this.loadHighlighter();
+            return;
+        }
+        const languageLoader = this.loadedLanguages.get(language);
         if (this.highlighter !== null &&
             !(this.highlighter instanceof Promise) &&
-            themeLoader === true &&
             languageLoader === true) {
             return;
         }
         const highlighter = await this.loadHighlighter();
-        await Promise.all([
-            this.loadTheme(theme, highlighter),
-            this.loadLanguage(this.isLanguageSupported(language) ? language : 'bash', highlighter)
-        ]);
-        await this.preloadThemes(highlighter);
+        await this.loadLanguage(language, highlighter);
     }
     /**
      * Highlights code synchronously. Must call isReady() first.
+     * Returns plaintext tokens for unsupported languages.
      */
-    highlightCode(code, language = 'bash', theme) {
+    highlightCode(code, language, theme) {
         try {
-            // const highlighter = this.highlighters.get(`${theme}:${language}`);
             const highlighter = this.highlighter;
             if (!highlighter || highlighter instanceof Promise) {
-                return [];
+                // Return plaintext tokens when highlighter is not ready
+                return code.split('\n').map((line) => [
+                    {
+                        content: line,
+                        color: undefined,
+                        bgColor: undefined
+                    }
+                ]);
+            }
+            // For unsupported languages, return plaintext tokens
+            if (!language || !this.isLanguageSupported(language)) {
+                return code.split('\n').map((line) => [
+                    {
+                        content: line,
+                        color: undefined,
+                        bgColor: undefined
+                    }
+                ]);
             }
             const tokens = highlighter.codeToTokensBase(code, {
-                lang: this.isLanguageSupported(language) ? language : 'bash',
+                lang: language,
                 theme
             });
             return tokens;
         }
         catch (error) {
-            return [];
+            // Return plaintext tokens on error
+            return code.split('\n').map((line) => [
+                {
+                    content: line,
+                    color: undefined,
+                    bgColor: undefined
+                }
+            ]);
         }
     }
-    static create(preloadedThemes = []) {
+    static create(languages = bundledLanguagesInfo, additionalThemes, additionalLanguages) {
         if (typeof window !== 'undefined' && 'STREAMDOWN_HIGHLIGHTER' in window) {
             const previousHighlighter = window.STREAMDOWN_HIGHLIGHTER;
-            preloadedThemes.forEach((theme) => previousHighlighter.preloadedThemes.add(theme));
+            // Merge additional themes
+            if (additionalThemes) {
+                Object.assign(previousHighlighter.additionalThemes, additionalThemes);
+            }
+            // Merge additional languages with existing set
+            if (additionalLanguages) {
+                additionalLanguages.forEach((lang) => {
+                    previousHighlighter.languageLoaders.set(lang.id, lang.import);
+                    if (lang.aliases) {
+                        lang.aliases.forEach((alias) => previousHighlighter.languageLoaders.set(alias, lang.import));
+                    }
+                });
+                const additionalSet = createLanguageSet(additionalLanguages);
+                additionalSet.forEach((lang) => previousHighlighter.customLanguages.add(lang));
+            }
             return previousHighlighter;
         }
-        return new HighlighterManager(preloadedThemes);
+        return new HighlighterManager(languages, additionalThemes, additionalLanguages);
     }
 }
 // Export the class for those who want to create their own instances

package/dist/utils/parse-incomplete-markdown.d.ts

@@ -1 +1,53 @@
+export interface Plugin {
+    name: string;
+    pattern?: RegExp;
+    handler?: (payload: HandlerPayload) => string;
+    skipInBlockTypes?: string[];
+    preprocess?: (payload: HookPayload) => string | {
+        text: string;
+        state: Partial<ParseState>;
+    };
+    postprocess?: (payload: HookPayload) => string;
+}
+interface HookPayload {
+    text: string;
+    state: ParseState;
+    setState: (state: Partial<ParseState>) => void;
+}
+interface HandlerPayload {
+    line: string;
+    text: string;
+    match: RegExpMatchArray;
+    state: ParseState;
+    setState: (state: Partial<ParseState>) => void;
+}
+interface ParseState {
+    currentLine: number;
+    context: 'normal' | 'list' | 'blockquote' | 'descriptionList';
+    blockingContexts: Set<'code' | 'math' | 'center' | 'right'>;
+    lineContexts?: Array<{
+        code: boolean;
+        math: boolean;
+        center: boolean;
+        right: boolean;
+    }>;
+    fenceInfo?: string;
+    mdxUnclosedTags?: Array<{
+        tagName: string;
+        lineIndex: number;
+    }>;
+    mdxLineStates?: Array<{
+        inMdx: boolean;
+        incompletePositions: number[];
+    }>;
+}
+export declare class IncompleteMarkdownParser {
+    private plugins;
+    private state;
+    setState: (state: Partial<ParseState>) => void;
+    constructor(plugins?: Plugin[]);
+    parse(text: string): string;
+    static createDefaultPlugins(): Plugin[];
+}
 export declare const parseIncompleteMarkdown: (text: string) => string;
+export {};

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

@@ -1,4 +1,4 @@
-class IncompleteMarkdownParser {
+export class IncompleteMarkdownParser {
     plugins = [];
     state = {
         currentLine: 0,