svelte-streamdown 2.3.3 → 2.3.4

package/dist/Elements/Code.svelte

@@ -14,7 +14,8 @@
 	} = $props();
 
 	const streamdown = useStreamdown();
-	const highlighter = HighlighterManager.create(streamdown.shikiPreloadThemes || []);
+	const highlighter = HighlighterManager.create(streamdown.shikiPreloadThemes);
+
 	const copy = useCopy({
 		get content() {
 			return token.text;
@@ -44,8 +45,6 @@
 			void highlighter.load(theme, lang);
 		});
 	});
-
-	const isMounted = streamdown.isMounted;
 </script>
 
 <div class={streamdown.theme.code.base}>
@@ -84,7 +83,7 @@
 		<span class={streamdown.theme.code.line}>
 			{#each line as token}
 				<span
-					style={isMounted ? streamdown.animationTextStyle : undefined}
+					style={streamdown.isMounted ? streamdown.animationTextStyle : undefined}
 					style:color={token.color}
 					style:background-color={token.bgColor}
 				>
@@ -97,7 +96,10 @@
 
 {#snippet Skeleton(lines: string[])}
 	{#each lines as line}
-		<span class={streamdown.theme.code.skeleton}>
+		<span
+			style={streamdown.isMounted ? streamdown.animationTextStyle : undefined}
+			class={streamdown.theme.code.skeleton}
+		>
 			{line.trim().length > 0 ? line : '\u200B'}
 		</span>
 	{/each}

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

@@ -17,7 +17,7 @@ declare class HighlighterManager {
      * Preloads themes by creating minimal highlighter instances.
      * This reduces flickering when switching themes.
      */
-    preloadThemes(highlighter: Highlighter): Promise<void>;
+    preloadThemes(highlighter: Highlighter): Promise<void[]>;
     /**
      * Ensures the highlighter is ready for the given theme and language.
      */
@@ -26,7 +26,7 @@ declare class HighlighterManager {
      * Highlights code synchronously. Must call isReady() first.
      */
     highlightCode(code: string, language: string | undefined, theme: BundledTheme): ThemedToken[][];
-    static create(preloadedThemes: BundledTheme[]): HighlighterManager;
+    static create(preloadedThemes?: BundledTheme[]): HighlighterManager;
 }
 export { HighlighterManager };
 export declare const languageExtensionMap: Record<string, string>;

package/dist/utils/hightlighter.svelte.js

@@ -23,7 +23,7 @@ class HighlighterManager {
         if (this.highlighter instanceof Promise) {
             return this.highlighter;
         }
-        else {
+        else if (!this.highlighter) {
             this.highlighter = new Promise((resolve, reject) => {
                 loadShiki().then(([engine, createHighlighter]) => {
                     return createHighlighter({
@@ -38,6 +38,9 @@ class HighlighterManager {
             });
             return this.highlighter;
         }
+        else {
+            return this.highlighter;
+        }
     }
     async loadTheme(theme, highlighter) {
         const themeLoader = this.loadedThemes.get(theme);
@@ -50,6 +53,7 @@ class HighlighterManager {
             });
             this.loadedThemes.set(theme, themeLoaderPromise);
             await themeLoaderPromise;
+            this.loadedThemes.set(theme, true);
         }
     }
     async loadLanguage(language, highlighter) {
@@ -63,6 +67,7 @@ class HighlighterManager {
             });
             this.loadedLanguages.set(language, languageLoaderPromise);
             await languageLoaderPromise;
+            this.loadedLanguages.set(language, true);
         }
     }
     isLanguageSupported = (language) => {
@@ -70,26 +75,15 @@ class HighlighterManager {
     };
     isReady(theme, language = 'bash') {
         return (!(this.highlighter instanceof Promise) &&
-            this.loadedLanguages.get(this.isLanguageSupported(language) ? language : 'bash') === true &&
-            this.loadedThemes.get(theme) === true);
+            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) {
-        for (const theme of this.preloadedThemes) {
-            const themeLoader = this.loadedThemes.get(theme);
-            if (themeLoader === true) {
-                return;
-            }
-            else if (themeLoader instanceof Promise) {
-                await themeLoader;
-            }
-            else {
-                await this.loadTheme(theme, highlighter);
-            }
-        }
+        return Promise.all(Array.from(this.preloadedThemes).map((theme) => this.loadTheme(theme, highlighter)));
     }
     /**
      * Ensures the highlighter is ready for the given theme and language.
@@ -101,7 +95,6 @@ class HighlighterManager {
             !(this.highlighter instanceof Promise) &&
             themeLoader === true &&
             languageLoader === true) {
-            // already loaded
             return;
         }
         const highlighter = await this.loadHighlighter();
@@ -131,7 +124,7 @@ class HighlighterManager {
             return [];
         }
     }
-    static create(preloadedThemes) {
+    static create(preloadedThemes = []) {
         if (typeof window !== 'undefined' && 'STREAMDOWN_HIGHLIGHTER' in window) {
             const previousHighlighter = window.STREAMDOWN_HIGHLIGHTER;
             preloadedThemes.forEach((theme) => previousHighlighter.preloadedThemes.add(theme));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-streamdown",
-	"version": "2.3.3",
+	"version": "2.3.4",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",