svelte-streamdown 1.0.1 → 1.0.3

package/dist/Elements/Code.svelte

@@ -5,12 +5,13 @@
 	import { useStreamdown } from '../Streamdown.svelte';
 	import { save } from '../utils/save.js';
 	import { useCopy } from '../utils/copy.svelte.js';
-	import { highlighter, languageExtensionMap } from '../hightlighter.svelte.js';
+	import { HighlighterManager, languageExtensionMap } from '../hightlighter.svelte.js';
 	import { clsx } from 'clsx';
 	import type { ElementProps } from './element.js';
 
 	let { node, className, props }: ElementProps = $props();
 
+	const highlighter = HighlighterManager.create();
 	const streamdown = useStreamdown();
 	const theme = $derived(streamdown.shikiTheme);
 	let codeContent = $derived((node.children[0] as any).value);
@@ -38,8 +39,10 @@
 	};
 
 	$effect(() => {
-		void highlighter.isReady(theme, language as any);
+		void highlighter.load(theme, language as any);
 	});
+
+	$inspect(highlighter.isReady(theme, language as any));
 </script>
 
 <div
@@ -67,7 +70,7 @@
 	</div>
 	<div style="height: fit-content; width: 100%;" class={streamdown.theme.code.container}>
 		<div>
-			{#if highlighter.isLoaded(theme, language as any)}
+			{#if highlighter.isReady(theme, language as any)}
 				{@const code = highlighter.highlightCode(
 					codeContent,
 					language as any,

package/dist/Streamdown.svelte

@@ -30,7 +30,6 @@
 	import 'katex/dist/katex.min.css';
 	import { mergeTheme, type Theme, shadcnTheme } from './theme.js';
 	import type { BundledTheme } from 'shiki';
-	import { highlighter } from './hightlighter.svelte.js';
 
 	let {
 		content = '',
@@ -133,13 +132,6 @@
 	const id = $props.id();
 
 	const blocks = $derived(parseMarkdownIntoBlocks(content));
-
-	// Preload themes if specified to avoid flickering
-	$effect(() => {
-		if (shikiPreloadThemes && shikiPreloadThemes.length > 0) {
-			highlighter.preloadThemes(shikiPreloadThemes);
-		}
-	});
 </script>
 
 {#each blocks as block, index (`${id}-block-${index}`)}

package/dist/hightlighter.svelte.d.ts

@@ -1,12 +1,16 @@
 import { type BundledLanguage, type BundledTheme } from 'shiki';
+import { SvelteSet } from 'svelte/reactivity';
+export declare const loadShiki: () => Promise<[any, import("shiki").CreateHighlighterFactory<BundledLanguage, BundledTheme>]>;
 declare class HighlighterManager {
     initialized: boolean;
-    private state;
-    private readonly preloadedThemes;
-    private readonly readyCache;
-    initPromise: Promise<void> | null;
-    private getCacheKey;
-    isLoaded(theme: BundledTheme, language: BundledLanguage): boolean;
+    private highlighter;
+    private highlighters;
+    private createHighlighter;
+    private engine;
+    loadedLanguages: SvelteSet<BundledLanguage>;
+    loadedThemes: SvelteSet<BundledTheme>;
+    constructor();
+    isReady(theme: BundledTheme, language: BundledLanguage): boolean;
     /**
      * Preloads themes by creating minimal highlighter instances.
      * This reduces flickering when switching themes.
@@ -15,17 +19,12 @@ declare class HighlighterManager {
     /**
      * Ensures the highlighter is ready for the given theme and language.
      */
-    isReady(theme: BundledTheme, language: BundledLanguage): Promise<void>;
-    private initialize;
+    load(theme: BundledTheme, language: BundledLanguage): Promise<void>;
     /**
      * Highlights code synchronously. Must call isReady() first.
      */
     highlightCode(code: string, language: BundledLanguage, theme: BundledTheme, preClassName?: string): string;
-    /**
-     * Clean up resources
-     */
-    dispose(): void;
+    static create(): HighlighterManager;
 }
 export { HighlighterManager };
-export declare const highlighter: HighlighterManager;
 export declare const languageExtensionMap: Record<string, string>;

package/dist/hightlighter.svelte.js

@@ -1,39 +1,48 @@
-import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
-import { createHighlighter } from 'shiki';
-import { SvelteMap } from 'svelte/reactivity';
+import {} from 'shiki';
+import { untrack } from 'svelte';
+import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 // Remove background styles from <pre> tags (inline style)
 const removePreBackground = (html) => {
     return html.replace(/<pre[^>]*style="[^"]*background[^";]*;?[^"]*"[^>]*>/g, (match) => match.replace(/style="[^"]*background[^";]*;?[^"]*"/, ''));
 };
+export const loadShiki = async () => {
+    return Promise.all([
+        import('shiki/engine/javascript').then((mod) => mod.createJavaScriptRegexEngine({ forgiving: true })),
+        import('shiki').then((mod) => mod.createHighlighter)
+    ]);
+};
 class HighlighterManager {
     initialized = $state(false);
-    state = null;
-    preloadedThemes = new Set();
-    readyCache = new SvelteMap();
-    initPromise = $state(null);
-    getCacheKey(theme, language) {
-        return `${theme}:${language}`;
+    highlighter = null;
+    highlighters = new SvelteMap();
+    createHighlighter = null;
+    engine = null;
+    loadedLanguages = new SvelteSet();
+    loadedThemes = new SvelteSet();
+    constructor() {
+        if (typeof window !== 'undefined') {
+            Object.assign(window, {
+                STREAMDOWN_HIGHLIGHTER: this
+            });
+        }
     }
-    isLoaded(theme, language) {
-        return this.readyCache.get(this.getCacheKey(theme, language)) ?? false;
+    isReady(theme, language) {
+        return this.highlighters.has(`${theme}:${language}`);
     }
     /**
      * Preloads themes by creating minimal highlighter instances.
      * This reduces flickering when switching themes.
      */
     async preloadThemes(themes) {
+        if (!this.highlighter) {
+            return;
+        }
         const promises = themes
-            .filter((theme) => !this.preloadedThemes.has(theme))
+            .filter((theme) => !this.loadedThemes.has(theme))
             .map(async (theme) => {
             try {
-                // Create minimal highlighter just to load theme assets
-                const preloader = await createHighlighter({
-                    themes: [theme],
-                    langs: ['javascript'], // Minimal language for preloading
-                    engine: createJavaScriptRegexEngine({ forgiving: true })
-                });
-                preloader.dispose();
-                this.preloadedThemes.add(theme);
+                this.highlighter.loadTheme(theme);
+                this.loadedThemes.add(theme);
             }
             catch (error) {
                 console.warn(`Failed to preload theme ${theme}:`, error);
@@ -44,66 +53,59 @@ class HighlighterManager {
     /**
      * Ensures the highlighter is ready for the given theme and language.
      */
-    async isReady(theme, language) {
-        const cacheKey = this.getCacheKey(theme, language);
-        // Return immediately if already ready
-        if (this.readyCache.get(cacheKey)) {
-            return;
-        }
-        // Wait for any ongoing initialization
-        if (this.initPromise) {
-            await this.initPromise;
-        }
-        // Check again after waiting
-        if (this.readyCache.get(cacheKey)) {
-            return;
-        }
-        // Initialize the highlighter
-        this.initPromise = this.initialize(theme, language);
-        await this.initPromise;
-        this.readyCache.set(cacheKey, true);
-        this.initialized = true;
-        this.initPromise = null;
-    }
-    async initialize(theme, language) {
-        const needsNewHighlighter = !this.state || this.state.theme !== theme;
-        if (needsNewHighlighter) {
-            // Dispose old highlighter if it exists
-            this.state?.highlighter.dispose();
-            // Clear cache when theme changes
-            this.readyCache.clear();
-            // Create new highlighter with the theme
-            const highlighter = await createHighlighter({
-                themes: [theme],
-                langs: [language],
-                engine: createJavaScriptRegexEngine({ forgiving: true })
-            });
-            this.state = {
-                highlighter,
-                theme,
-                languages: new Set([language])
-            };
-            // Mark theme as preloaded since we now have it
-            this.preloadedThemes.add(theme);
-        }
-        else if (this.state && !this.state.languages.has(language)) {
-            // Add language to existing highlighter
-            await this.state.highlighter.loadLanguage(language);
-            this.state.languages.add(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;
+                this.engine = engine;
+            }
+            if (!this.highlighters.has(`${theme}:${language}`)) {
+                const highlighter = await this.createHighlighter({
+                    themes: [theme],
+                    langs: [language],
+                    engine: this.engine
+                });
+                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);
+        });
     }
     /**
      * Highlights code synchronously. Must call isReady() first.
      */
     highlightCode(code, language, theme, preClassName) {
-        if (!this.isLoaded(theme, language)) {
+        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.`);
         }
-        if (!this.state) {
-            throw new Error('Highlighter not initialized. This should not happen after calling isReady().');
+        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.`);
         }
-        let html = this.state.highlighter.codeToHtml(code, {
+        let html = highlighter.codeToHtml(code, {
             lang: language,
             theme: theme
         });
@@ -114,21 +116,16 @@ class HighlighterManager {
         }
         return html;
     }
-    /**
-     * Clean up resources
-     */
-    dispose() {
-        this.state?.highlighter.dispose();
-        this.state = null;
-        this.readyCache.clear();
-        this.preloadedThemes.clear();
-        this.initialized = false;
+    static create() {
+        if (typeof window !== 'undefined' && 'STREAMDOWN_HIGHLIGHTER' in window) {
+            // @ts-ignore
+            return window.STREAMDOWN_HIGHLIGHTER;
+        }
+        return new HighlighterManager();
     }
 }
 // Export the class for those who want to create their own instances
 export { HighlighterManager };
-// Create and export a singleton instance
-export const highlighter = new HighlighterManager();
 export const languageExtensionMap = {
     '1c': '1c',
     '1c-query': '1cq',

package/package.json

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