svelte-streamdown 2.6.0 → 3.0.0

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,
@@ -762,7 +762,7 @@ class IncompleteMarkdownParser {
                     };
                 },
                 handler: ({ line, state }) => {
-                    // Escape incomplete MDX syntax by wrapping in backticks
+                    // Remove incomplete MDX syntax (don't render it)
                     const lineStates = state.mdxLineStates || [];
                     const currentState = lineStates[state.currentLine];
                     if (currentState?.incompletePositions && currentState.incompletePositions.length > 0) {
@@ -771,8 +771,8 @@ class IncompleteMarkdownParser {
                         for (let i = currentState.incompletePositions.length - 1; i >= 0; i--) {
                             const pos = currentState.incompletePositions[i];
                             const before = result.substring(0, pos);
-                            const incomplete = result.substring(pos);
-                            result = before + '`' + incomplete + '`';
+                            // Simply remove the incomplete MDX tag
+                            result = before;
                         }
                         return result;
                     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-streamdown",
-	"version": "2.6.0",
+	"version": "3.0.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -30,6 +30,18 @@
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
+		},
+		"./code": {
+			"types": "./dist/Elements/Code.svelte.d.ts",
+			"svelte": "./dist/Elements/Code.svelte"
+		},
+		"./mermaid": {
+			"types": "./dist/Elements/Mermaid.svelte.d.ts",
+			"svelte": "./dist/Elements/Mermaid.svelte"
+		},
+		"./math": {
+			"types": "./dist/Elements/Math.svelte.d.ts",
+			"svelte": "./dist/Elements/Math.svelte"
 		}
 	},
 	"peerDependencies": {
@@ -72,6 +84,8 @@
 	},
 	"dependencies": {
 		"@floating-ui/dom": "^1.7.4",
+		"@shikijs/langs": "^3.17.1",
+		"@shikijs/themes": "^3.17.1",
 		"clsx": "^2.1.1",
 		"katex": "^0.16.22",
 		"marked": "^16.2.1",