svelte-streamdown 1.0.4 → 1.0.5

package/dist/Elements/Code.svelte

@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { setContext } from 'svelte';
-	import type { Snippet } from 'svelte';
-	import type { BundledLanguage, BundledTheme } from 'shiki';
 	import { useStreamdown } from '../Streamdown.svelte';
 	import { save } from '../utils/save.js';
 	import { useCopy } from '../utils/copy.svelte.js';
@@ -11,8 +8,8 @@
 
 	let { node, className, props }: ElementProps = $props();
 
-	const highlighter = HighlighterManager.create();
 	const streamdown = useStreamdown();
+	const highlighter = HighlighterManager.create(streamdown.shikiPreloadThemes || []);
 	const theme = $derived(streamdown.shikiTheme);
 	let codeContent = $derived((node.children[0] as any).value);
 	const language = $derived(node.properties.language as string);
@@ -41,8 +38,6 @@
 	$effect(() => {
 		void highlighter.load(theme, language as any);
 	});
-
-	$inspect(highlighter.isReady(theme, language as any));
 </script>
 
 <div

package/dist/Streamdown.svelte

@@ -127,6 +127,9 @@
 		},
 		get customElements() {
 			return customElements;
+		},
+		get shikiPreloadThemes() {
+			return shikiPreloadThemes;
 		}
 	});
 	const id = $props.id();

package/dist/hightlighter.svelte.d.ts

@@ -7,15 +7,16 @@ declare class HighlighterManager {
     private highlighters;
     private createHighlighter;
     private engine;
+    preloadedThemes: BundledTheme[];
     loadedLanguages: SvelteSet<BundledLanguage>;
     loadedThemes: SvelteSet<BundledTheme>;
-    constructor();
+    constructor(preloadedThemes: BundledTheme[]);
     isReady(theme: BundledTheme, language: BundledLanguage): boolean;
     /**
      * Preloads themes by creating minimal highlighter instances.
      * This reduces flickering when switching themes.
      */
-    preloadThemes(themes: BundledTheme[]): Promise<void>;
+    preloadThemes(themes: BundledTheme[], language: BundledLanguage): Promise<void>;
     /**
      * Ensures the highlighter is ready for the given theme and language.
      */
@@ -24,7 +25,7 @@ declare class HighlighterManager {
      * Highlights code synchronously. Must call isReady() first.
      */
     highlightCode(code: string, language: BundledLanguage, theme: BundledTheme, preClassName?: string): string;
-    static create(): HighlighterManager;
+    static create(preloadedThemes: BundledTheme[]): HighlighterManager;
 }
 export { HighlighterManager };
 export declare const languageExtensionMap: Record<string, string>;

package/dist/hightlighter.svelte.js

@@ -1,6 +1,7 @@
 import {} from 'shiki';
 import { untrack } from 'svelte';
 import { SvelteMap, SvelteSet } from 'svelte/reactivity';
+import { StreamdownContext, useStreamdown } from './Streamdown.svelte';
 // Remove background styles from <pre> tags (inline style)
 const removePreBackground = (html) => {
     return html.replace(/<pre[^>]*style="[^"]*background[^";]*;?[^"]*"[^>]*>/g, (match) => match.replace(/style="[^"]*background[^";]*;?[^"]*"/, ''));
@@ -17,9 +18,11 @@ class HighlighterManager {
     highlighters = new SvelteMap();
     createHighlighter = null;
     engine = null;
+    preloadedThemes;
     loadedLanguages = new SvelteSet();
     loadedThemes = new SvelteSet();
-    constructor() {
+    constructor(preloadedThemes) {
+        this.preloadedThemes = preloadedThemes;
         if (typeof window !== 'undefined') {
             Object.assign(window, {
                 STREAMDOWN_HIGHLIGHTER: this
@@ -33,29 +36,29 @@ class HighlighterManager {
      * Preloads themes by creating minimal highlighter instances.
      * This reduces flickering when switching themes.
      */
-    async preloadThemes(themes) {
-        if (!this.highlighter) {
+    async preloadThemes(themes, language) {
+        if (!themes.length) {
             return;
         }
-        const promises = themes
-            .filter((theme) => !this.loadedThemes.has(theme))
+        await Promise.all(themes
+            .filter((theme) => !this.highlighters.has(`${theme}:${language}`))
             .map(async (theme) => {
-            try {
-                this.highlighter.loadTheme(theme);
-                this.loadedThemes.add(theme);
-            }
-            catch (error) {
-                console.warn(`Failed to preload theme ${theme}:`, error);
+            if (!this.createHighlighter || !this.engine) {
+                return;
             }
-        });
-        await Promise.all(promises);
+            const highlighter = await this.createHighlighter?.({
+                themes: [theme],
+                langs: [language],
+                engine: this.engine
+            });
+            this.highlighters.set(`${theme}:${language}`, highlighter);
+        }));
     }
     /**
      * Ensures the highlighter is ready for the given theme and language.
      */
     async load(theme, language) {
         return untrack(async () => {
-            console.log('load', theme, language);
             if (!this.createHighlighter || !this.engine) {
                 const [engine, createHighlighter] = await loadShiki();
                 this.createHighlighter = createHighlighter;
@@ -69,41 +72,16 @@ class HighlighterManager {
                 });
                 this.highlighters.set(`${theme}:${language}`, highlighter);
             }
-            // if (!highlighter) {
-            // 	highlighter = await this.createHighlighter({
-            // 		themes: [theme],
-            // 		langs: [language],
-            // 		engine: this.engine
-            // 	});
-            // 	this.highlighter = highlighter;
-            // 	this.loadedThemes.add(theme);
-            // 	this.loadedLanguages.add(language);
-            // }
-            // if (!this.loadedThemes.has(theme)) {
-            // 	console.log('loading theme', theme);
-            // 	await this.highlighter.loadTheme(theme);
-            // }
-            // if (!this.loadedLanguages.has(language)) {
-            // 	console.log('loading language', language);
-            // 	await this.highlighter.loadLanguage(language);
-            // }
-            // this.loadedThemes.add(theme);
-            // this.loadedLanguages.add(language);
+            void this.preloadThemes(this.preloadedThemes || [], language);
         });
     }
     /**
      * Highlights code synchronously. Must call isReady() first.
      */
     highlightCode(code, language, theme, preClassName) {
-        console.log('highlightCode', theme, language, this.isReady(theme, language));
-        if (!this.isReady(theme, language)) {
-            throw new Error(`Highlighter not ready for theme "${theme}" and language "${language}". ` +
-                `Call await highlighter.isReady(theme, language) first.`);
-        }
         const highlighter = this.highlighters.get(`${theme}:${language}`);
         if (!highlighter) {
-            throw new Error(`Highlighter not loaded for theme "${theme}" and language "${language}". ` +
-                `Call await highlighter.load(theme, language) first.`);
+            return '';
         }
         let html = highlighter.codeToHtml(code, {
             lang: language,
@@ -116,12 +94,14 @@ class HighlighterManager {
         }
         return html;
     }
-    static create() {
+    static create(preloadedThemes) {
         if (typeof window !== 'undefined' && 'STREAMDOWN_HIGHLIGHTER' in window) {
+            const previousHighlighter = window.STREAMDOWN_HIGHLIGHTER;
+            previousHighlighter.preloadedThemes = Array.from(new Set([...previousHighlighter.preloadedThemes, ...preloadedThemes]));
             // @ts-ignore
             return window.STREAMDOWN_HIGHLIGHTER;
         }
-        return new HighlighterManager();
+        return new HighlighterManager(preloadedThemes);
     }
 }
 // Export the class for those who want to create their own instances

package/dist/utils/parse.js

@@ -1,26 +1,14 @@
 import { urlAttributes } from 'html-url-attributes';
 import remarkParse from 'remark-parse';
-import remarkRehype from 'remark-rehype';
+import remarkRehype, {} from 'remark-rehype';
 import { unified } from 'unified';
 import { visit } from 'unist-util-visit';
-import { VFile } from 'vfile';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 import { rehypeGithubAlerts } from './alerts.js';
-import { squeezeParagraphs } from 'mdast-squeeze-paragraphs';
 const emptyPlugins = [];
 const emptyRemarkRehypeOptions = { allowDangerousHtml: true };
 const safeProtocol = /^(https?|ircs?|mailto|xmpp)$/i;
-function createFile(content) {
-    const file = new VFile();
-    if (typeof content === 'string') {
-        file.value = content;
-    }
-    else {
-        throw new Error('Unexpected value `' + content + '` for content, expected `string`');
-    }
-    return file;
-}
 export function parseMarkdown(context, content) {
     const rehypePlugins = context.rehypePlugins || emptyPlugins;
     const remarkPlugins = context.remarkPlugins || emptyPlugins;
@@ -35,9 +23,8 @@ export function parseMarkdown(context, content) {
         .use(remarkRehype, remarkRehypeOptions)
         .use(rehypePlugins)
         .use([rehypeGithubAlerts]);
-    const file = createFile(content);
-    const tree = processor.parse(file);
-    return post(processor.runSync(tree, file), {
+    const tree = processor.runSync(processor.parse(content));
+    return post(tree, {
         allowElement: context.allowElement,
         allowedElements: context.allowedElements,
         disallowedElements: context.disallowedElements,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-streamdown",
-	"version": "1.0.4",
+	"version": "1.0.5",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -78,6 +78,7 @@
 		"mdast": "^3.0.0",
 		"mdast-squeeze-paragraphs": "^6.0.0",
 		"mermaid": "^11.11.0",
+		"micromark": "^4.0.2",
 		"rehype-github-alerts": "^4.1.1",
 		"rehype-katex": "^7.0.1",
 		"remark-gfm": "^4.0.1",
@@ -87,7 +88,6 @@
 		"shiki": "^3.12.2",
 		"tailwind-merge": "^3.3.1",
 		"unified": "^11.0.5",
-		"unist-util-visit": "^5.0.0",
-		"vfile": "^6.0.3"
+		"unist-util-visit": "^5.0.0"
 	}
 }