stream-monaco 0.0.10 → 0.0.12

package/README.md

@@ -34,7 +34,9 @@ The package exports helpers around theme/highlighter for advanced use:
 - `registerMonacoThemes(themes, languages): Promise<Highlighter>` — create or reuse a Shiki highlighter and register themes to Monaco. Returns a Promise resolving to the highlighter for reuse (e.g., rendering snippets).
 - `getOrCreateHighlighter(themes, languages): Promise<Highlighter>` — get or create a highlighter (managed by internal cache). If you need to call `codeToHtml` or `setTheme` manually, use this and handle loading/errors.
 
-Note: If you only use Monaco and pass all `themes` to `createEditor`, typically just call `monaco.editor.setTheme(themeName)`.
+Note:
+- If the target theme is already included in the `themes` you passed to `useMonaco()`, calling `monaco.editor.setTheme(themeName)` is fine.
+- If you switch to a theme that was not pre-registered (e.g. dynamic theme name like `andromeeda`), prefer `await setTheme(themeName)` from `useMonaco()`. It will ensure the theme is registered, and when possible it will also try to `loadTheme` on the underlying Shiki highlighter to avoid "Theme not found, you may need to load it first" errors.
 
 Config: `useMonaco()` does not auto-sync an external Shiki highlighter; if you need external Shiki snippets to follow theme changes, call `getOrCreateHighlighter(...)` and `highlighter.setTheme(...)` yourself.
 

package/README.zh-CN.md

@@ -27,6 +27,10 @@ IMPORTANT: Since v0.0.32 the library enables a default time-based throttle for `
 
 注意：如果你只使用 Monaco 编辑器并在 `createEditor` 时传入了全量 `themes`，通常只需调用 `monaco.editor.setTheme(themeName)` 即可。
 
+补充：如果你要切换到一个**不在初始 `themes` 列表里的主题**（例如运行时才决定的 `andromeeda`），建议使用 `useMonaco()` 返回的 `await setTheme(themeName)`，而不是直接调用 `monaco.editor.setTheme(themeName)`。
+
+`setTheme()` 会确保主题被注册；并且在可能的情况下，会对底层 Shiki highlighter 进行一次 `loadTheme(themeName)` 的兜底，避免出现 `Theme ... not found, you may need to load it first` 这类“主题未加载”的错误。
+
 配置：`useMonaco()` 不会自动同步 Shiki highlighter；如果你需要在切换主题时同步页面中独立的 Shiki 渲染，请手动使用 `getOrCreateHighlighter(...)` 并调用高亮器实例的 `setTheme`。
 
 ### 安装

package/dist/index.cjs

@@ -1993,9 +1993,7 @@ function arraysEqual(a, b) {
 
 //#endregion
 //#region src/utils/registerMonacoThemes.ts
-let themesRegistered = false;
 let languagesRegistered = false;
-let currentThemes = [];
 let currentLanguages = [];
 let themeRegisterPromise = null;
 let registrationQueue = Promise.resolve();
@@ -2008,6 +2006,54 @@ function setThemeRegisterPromise(p) {
 	return themeRegisterPromise = p;
 }
 const highlighterCache = /* @__PURE__ */ new Map();
+let monacoHighlighterPromise = null;
+let lastPatchedHighlighter = null;
+const monacoThemeByKey = /* @__PURE__ */ new Map();
+const monacoLanguageSet = /* @__PURE__ */ new Set();
+function themeKey(t) {
+	return typeof t === "string" ? t : t.name ?? JSON.stringify(t);
+}
+async function ensureMonacoHighlighter(themes, languages$1) {
+	for (const t of themes) monacoThemeByKey.set(themeKey(t), t);
+	for (const l of languages$1) monacoLanguageSet.add(l);
+	if (!monacoHighlighterPromise) {
+		const initialThemes = Array.from(monacoThemeByKey.values());
+		const initialLangs = Array.from(monacoLanguageSet.values());
+		monacoHighlighterPromise = (0, shiki.createHighlighter)({
+			themes: initialThemes,
+			langs: initialLangs
+		}).then((h$1) => h$1);
+	}
+	const h = await monacoHighlighterPromise;
+	const wantsThemes = Array.from(monacoThemeByKey.values());
+	const wantsLangs = Array.from(monacoLanguageSet.values());
+	const canLoadTheme = typeof h.loadTheme === "function";
+	const canLoadLanguage = typeof h.loadLanguage === "function";
+	if (canLoadTheme || canLoadLanguage) {
+		if (canLoadTheme) for (const t of themes) {
+			const k = themeKey(t);
+			if (!h.__streamMonacoLoadedThemes) h.__streamMonacoLoadedThemes = /* @__PURE__ */ new Set();
+			const loaded = h.__streamMonacoLoadedThemes;
+			if (loaded.has(k)) continue;
+			await h.loadTheme(t);
+			loaded.add(k);
+		}
+		if (canLoadLanguage) for (const l of languages$1) {
+			if (!h.__streamMonacoLoadedLangs) h.__streamMonacoLoadedLangs = /* @__PURE__ */ new Set();
+			const loaded = h.__streamMonacoLoadedLangs;
+			if (loaded.has(l)) continue;
+			await h.loadLanguage(l);
+			loaded.add(l);
+		}
+		return h;
+	}
+	const p = (0, shiki.createHighlighter)({
+		themes: wantsThemes,
+		langs: wantsLangs
+	}).then((hh) => hh);
+	monacoHighlighterPromise = p;
+	return p;
+}
 /**
 * Clear all cached shiki highlighters.
 *
@@ -2082,15 +2128,12 @@ async function getOrCreateHighlighter(themes, languages$1) {
 async function registerMonacoThemes(themes, languages$1) {
 	return enqueueRegistration(async () => {
 		registerMonacoLanguages(languages$1);
-		if (themesRegistered && arraysEqual(themes, currentThemes) && arraysEqual(languages$1, currentLanguages)) {
-			const existing = highlighterCache.get(serializeThemes(themes));
-			return existing ? existing.promise : Promise.resolve(null);
-		}
 		const p = (async () => {
-			const highlighter = await getOrCreateHighlighter(themes, languages$1);
-			(0, __shikijs_monaco.shikiToMonaco)(highlighter, monaco_shim_exports);
-			themesRegistered = true;
-			currentThemes = themes.slice();
+			const highlighter = await ensureMonacoHighlighter(themes, languages$1);
+			if (lastPatchedHighlighter !== highlighter) {
+				(0, __shikijs_monaco.shikiToMonaco)(highlighter, monaco_shim_exports);
+				lastPatchedHighlighter = highlighter;
+			}
 			currentLanguages = languages$1.slice();
 			return highlighter;
 		})();
@@ -2125,6 +2168,9 @@ let RevealStrategy = /* @__PURE__ */ function(RevealStrategy$1) {
 
 //#endregion
 //#region src/index.ts
+let globalRequestedThemeName = null;
+let globalThemeRequestSeq = 0;
+let globalAppliedThemeName = null;
 /**
 * useMonaco 组合式函数
 *
@@ -2255,40 +2301,64 @@ function useMonaco(monacoOptions = {}) {
 	const cachedComputedHeight = null;
 	const appendBuffer = [];
 	let appendBufferScheduled = false;
-	let lastAppliedTheme = null;
 	const currentTheme = computed(() => monacoOptions.theme ?? (typeof themes[0] === "string" ? themes[0] : themes[0].name));
+	let requestedThemeName = monacoOptions.theme ?? globalRequestedThemeName ?? currentTheme.value;
 	let themeWatcher = null;
 	const rafScheduler = createRafScheduler();
+	async function tryLoadAndSetShikiTheme(highlighter, themeName) {
+		if (!highlighter || typeof highlighter.setTheme !== "function") return;
+		try {
+			await highlighter.setTheme(themeName);
+		} catch (err) {
+			const message = (err === null || err === void 0 ? void 0 : err.message) ? String(err.message) : String(err);
+			const lower = message.toLowerCase();
+			const looksLikeMissingThemeError = lower.includes("theme") && lower.includes("not found");
+			if (typeof highlighter.loadTheme === "function" && looksLikeMissingThemeError) {
+				await highlighter.loadTheme(themeName);
+				await highlighter.setTheme(themeName);
+				return;
+			}
+			throw err;
+		}
+	}
 	async function setThemeInternal(theme, force = false) {
 		const themeName = typeof theme === "string" ? theme : theme.name;
-		if (!force && themeName === lastAppliedTheme) return;
-		const _p = setThemeRegisterPromise(registerMonacoThemes(themes, languages$1));
-		if (_p) await _p.catch(() => void 0);
+		globalThemeRequestSeq += 1;
+		const token = globalThemeRequestSeq;
+		requestedThemeName = themeName;
+		globalRequestedThemeName = themeName;
+		if (!force && themeName === globalAppliedThemeName) return;
+		if (token !== globalThemeRequestSeq) return;
+		await registerMonacoThemes(themes, languages$1).catch(() => void 0);
+		if (token !== globalThemeRequestSeq) return;
 		const availableNames = themes.map((t) => typeof t === "string" ? t : t.name);
 		if (!availableNames.includes(themeName)) try {
 			const extended = availableNames.concat(themeName);
-			const maybeHighlighter = await setThemeRegisterPromise(registerMonacoThemes(extended, languages$1));
-			if (maybeHighlighter && typeof maybeHighlighter.setTheme === "function") try {
-				await maybeHighlighter.setTheme(themeName);
-			} catch {}
+			const maybeHighlighter = await registerMonacoThemes(extended, languages$1);
+			await tryLoadAndSetShikiTheme(maybeHighlighter, themeName).catch(() => void 0);
 		} catch {
 			console.warn(`Theme "${themeName}" is not registered and automatic registration failed. Available themes: ${availableNames.join(", ")}`);
 			return;
 		}
+		if (token !== globalThemeRequestSeq) return;
 		try {
 			monaco_shim_exports.editor.setTheme(themeName);
 			lastAppliedTheme = themeName;
+			globalAppliedThemeName = themeName;
 		} catch {
 			try {
 				const maybeHighlighter = await registerMonacoThemes(themes, languages$1);
+				if (token !== globalThemeRequestSeq) return;
 				monaco_shim_exports.editor.setTheme(themeName);
 				lastAppliedTheme = themeName;
-				if (maybeHighlighter && typeof maybeHighlighter.setTheme === "function") await maybeHighlighter.setTheme(themeName).catch(() => void 0);
+				globalAppliedThemeName = themeName;
+				await tryLoadAndSetShikiTheme(maybeHighlighter, themeName).catch(() => void 0);
 			} catch (err2) {
 				console.warn(`Failed to set theme "${themeName}":`, err2);
 				return;
 			}
 		}
+		if (token !== globalThemeRequestSeq) return;
 		try {
 			if (typeof monacoOptions.onThemeChange === "function") await monacoOptions.onThemeChange(themeName);
 		} catch (err) {
@@ -2298,8 +2368,7 @@ function useMonaco(monacoOptions = {}) {
 	async function ensureThemeRegistered(themeName) {
 		const availableNames = themes.map((t) => typeof t === "string" ? t : t.name);
 		const list = availableNames.includes(themeName) ? themes : themes.concat(themeName);
-		const p = setThemeRegisterPromise(registerMonacoThemes(list, languages$1));
-		if (p) await p;
+		await registerMonacoThemes(list, languages$1);
 	}
 	function hasVerticalScrollbar() {
 		if (!editorView) return false;
@@ -2341,7 +2410,7 @@ function useMonaco(monacoOptions = {}) {
 			const ds = monacoOptions.onBeforeCreate(monaco_shim_exports);
 			if (ds) disposals.push(...ds);
 		}
-		const initialThemeName = monacoOptions.theme ?? currentTheme.value;
+		const initialThemeName = requestedThemeName ?? monacoOptions.theme ?? globalRequestedThemeName ?? currentTheme.value;
 		await ensureThemeRegistered(initialThemeName);
 		editorMgr = new EditorManager(monacoOptions, maxHeightValue, maxHeightCSS, autoScrollOnUpdate, autoScrollInitial, autoScrollThresholdPx, autoScrollThresholdLines, monacoOptions.revealDebounceMs);
 		editorView = await editorMgr.createEditor(container, code, language, initialThemeName);
@@ -2373,7 +2442,7 @@ function useMonaco(monacoOptions = {}) {
 			const ds = monacoOptions.onBeforeCreate(monaco_shim_exports);
 			if (ds) disposals.push(...ds);
 		}
-		const initialThemeName = monacoOptions.theme ?? currentTheme.value;
+		const initialThemeName = requestedThemeName ?? monacoOptions.theme ?? globalRequestedThemeName ?? currentTheme.value;
 		await ensureThemeRegistered(initialThemeName);
 		try {
 			monaco_shim_exports.editor.setTheme(initialThemeName);
@@ -2668,7 +2737,7 @@ function useMonaco(monacoOptions = {}) {
 			} else console.warn(`Language "${language}" is not registered. Available languages: ${languages$1.join(", ")}`);
 		},
 		getCurrentTheme() {
-			return currentTheme.value;
+			return globalAppliedThemeName ?? requestedThemeName ?? globalRequestedThemeName ?? currentTheme.value;
 		},
 		getEditor() {
 			return monaco_shim_exports.editor;

package/dist/index.js

@@ -1965,9 +1965,7 @@ function arraysEqual(a, b) {
 
 //#endregion
 //#region src/utils/registerMonacoThemes.ts
-let themesRegistered = false;
 let languagesRegistered = false;
-let currentThemes = [];
 let currentLanguages = [];
 let themeRegisterPromise = null;
 let registrationQueue = Promise.resolve();
@@ -1980,6 +1978,54 @@ function setThemeRegisterPromise(p) {
 	return themeRegisterPromise = p;
 }
 const highlighterCache = /* @__PURE__ */ new Map();
+let monacoHighlighterPromise = null;
+let lastPatchedHighlighter = null;
+const monacoThemeByKey = /* @__PURE__ */ new Map();
+const monacoLanguageSet = /* @__PURE__ */ new Set();
+function themeKey(t) {
+	return typeof t === "string" ? t : t.name ?? JSON.stringify(t);
+}
+async function ensureMonacoHighlighter(themes, languages$1) {
+	for (const t of themes) monacoThemeByKey.set(themeKey(t), t);
+	for (const l of languages$1) monacoLanguageSet.add(l);
+	if (!monacoHighlighterPromise) {
+		const initialThemes = Array.from(monacoThemeByKey.values());
+		const initialLangs = Array.from(monacoLanguageSet.values());
+		monacoHighlighterPromise = createHighlighter({
+			themes: initialThemes,
+			langs: initialLangs
+		}).then((h$1) => h$1);
+	}
+	const h = await monacoHighlighterPromise;
+	const wantsThemes = Array.from(monacoThemeByKey.values());
+	const wantsLangs = Array.from(monacoLanguageSet.values());
+	const canLoadTheme = typeof h.loadTheme === "function";
+	const canLoadLanguage = typeof h.loadLanguage === "function";
+	if (canLoadTheme || canLoadLanguage) {
+		if (canLoadTheme) for (const t of themes) {
+			const k = themeKey(t);
+			if (!h.__streamMonacoLoadedThemes) h.__streamMonacoLoadedThemes = /* @__PURE__ */ new Set();
+			const loaded = h.__streamMonacoLoadedThemes;
+			if (loaded.has(k)) continue;
+			await h.loadTheme(t);
+			loaded.add(k);
+		}
+		if (canLoadLanguage) for (const l of languages$1) {
+			if (!h.__streamMonacoLoadedLangs) h.__streamMonacoLoadedLangs = /* @__PURE__ */ new Set();
+			const loaded = h.__streamMonacoLoadedLangs;
+			if (loaded.has(l)) continue;
+			await h.loadLanguage(l);
+			loaded.add(l);
+		}
+		return h;
+	}
+	const p = createHighlighter({
+		themes: wantsThemes,
+		langs: wantsLangs
+	}).then((hh) => hh);
+	monacoHighlighterPromise = p;
+	return p;
+}
 /**
 * Clear all cached shiki highlighters.
 *
@@ -2054,15 +2100,12 @@ async function getOrCreateHighlighter(themes, languages$1) {
 async function registerMonacoThemes(themes, languages$1) {
 	return enqueueRegistration(async () => {
 		registerMonacoLanguages(languages$1);
-		if (themesRegistered && arraysEqual(themes, currentThemes) && arraysEqual(languages$1, currentLanguages)) {
-			const existing = highlighterCache.get(serializeThemes(themes));
-			return existing ? existing.promise : Promise.resolve(null);
-		}
 		const p = (async () => {
-			const highlighter = await getOrCreateHighlighter(themes, languages$1);
-			shikiToMonaco(highlighter, monaco_shim_exports);
-			themesRegistered = true;
-			currentThemes = themes.slice();
+			const highlighter = await ensureMonacoHighlighter(themes, languages$1);
+			if (lastPatchedHighlighter !== highlighter) {
+				shikiToMonaco(highlighter, monaco_shim_exports);
+				lastPatchedHighlighter = highlighter;
+			}
 			currentLanguages = languages$1.slice();
 			return highlighter;
 		})();
@@ -2097,6 +2140,9 @@ let RevealStrategy = /* @__PURE__ */ function(RevealStrategy$1) {
 
 //#endregion
 //#region src/index.ts
+let globalRequestedThemeName = null;
+let globalThemeRequestSeq = 0;
+let globalAppliedThemeName = null;
 /**
 * useMonaco 组合式函数
 *
@@ -2227,40 +2273,64 @@ function useMonaco(monacoOptions = {}) {
 	const cachedComputedHeight = null;
 	const appendBuffer = [];
 	let appendBufferScheduled = false;
-	let lastAppliedTheme = null;
 	const currentTheme = computed$1(() => monacoOptions.theme ?? (typeof themes[0] === "string" ? themes[0] : themes[0].name));
+	let requestedThemeName = monacoOptions.theme ?? globalRequestedThemeName ?? currentTheme.value;
 	let themeWatcher = null;
 	const rafScheduler = createRafScheduler();
+	async function tryLoadAndSetShikiTheme(highlighter, themeName) {
+		if (!highlighter || typeof highlighter.setTheme !== "function") return;
+		try {
+			await highlighter.setTheme(themeName);
+		} catch (err) {
+			const message = (err === null || err === void 0 ? void 0 : err.message) ? String(err.message) : String(err);
+			const lower = message.toLowerCase();
+			const looksLikeMissingThemeError = lower.includes("theme") && lower.includes("not found");
+			if (typeof highlighter.loadTheme === "function" && looksLikeMissingThemeError) {
+				await highlighter.loadTheme(themeName);
+				await highlighter.setTheme(themeName);
+				return;
+			}
+			throw err;
+		}
+	}
 	async function setThemeInternal(theme, force = false) {
 		const themeName = typeof theme === "string" ? theme : theme.name;
-		if (!force && themeName === lastAppliedTheme) return;
-		const _p = setThemeRegisterPromise(registerMonacoThemes(themes, languages$1));
-		if (_p) await _p.catch(() => void 0);
+		globalThemeRequestSeq += 1;
+		const token = globalThemeRequestSeq;
+		requestedThemeName = themeName;
+		globalRequestedThemeName = themeName;
+		if (!force && themeName === globalAppliedThemeName) return;
+		if (token !== globalThemeRequestSeq) return;
+		await registerMonacoThemes(themes, languages$1).catch(() => void 0);
+		if (token !== globalThemeRequestSeq) return;
 		const availableNames = themes.map((t) => typeof t === "string" ? t : t.name);
 		if (!availableNames.includes(themeName)) try {
 			const extended = availableNames.concat(themeName);
-			const maybeHighlighter = await setThemeRegisterPromise(registerMonacoThemes(extended, languages$1));
-			if (maybeHighlighter && typeof maybeHighlighter.setTheme === "function") try {
-				await maybeHighlighter.setTheme(themeName);
-			} catch {}
+			const maybeHighlighter = await registerMonacoThemes(extended, languages$1);
+			await tryLoadAndSetShikiTheme(maybeHighlighter, themeName).catch(() => void 0);
 		} catch {
 			console.warn(`Theme "${themeName}" is not registered and automatic registration failed. Available themes: ${availableNames.join(", ")}`);
 			return;
 		}
+		if (token !== globalThemeRequestSeq) return;
 		try {
 			monaco_shim_exports.editor.setTheme(themeName);
 			lastAppliedTheme = themeName;
+			globalAppliedThemeName = themeName;
 		} catch {
 			try {
 				const maybeHighlighter = await registerMonacoThemes(themes, languages$1);
+				if (token !== globalThemeRequestSeq) return;
 				monaco_shim_exports.editor.setTheme(themeName);
 				lastAppliedTheme = themeName;
-				if (maybeHighlighter && typeof maybeHighlighter.setTheme === "function") await maybeHighlighter.setTheme(themeName).catch(() => void 0);
+				globalAppliedThemeName = themeName;
+				await tryLoadAndSetShikiTheme(maybeHighlighter, themeName).catch(() => void 0);
 			} catch (err2) {
 				console.warn(`Failed to set theme "${themeName}":`, err2);
 				return;
 			}
 		}
+		if (token !== globalThemeRequestSeq) return;
 		try {
 			if (typeof monacoOptions.onThemeChange === "function") await monacoOptions.onThemeChange(themeName);
 		} catch (err) {
@@ -2270,8 +2340,7 @@ function useMonaco(monacoOptions = {}) {
 	async function ensureThemeRegistered(themeName) {
 		const availableNames = themes.map((t) => typeof t === "string" ? t : t.name);
 		const list = availableNames.includes(themeName) ? themes : themes.concat(themeName);
-		const p = setThemeRegisterPromise(registerMonacoThemes(list, languages$1));
-		if (p) await p;
+		await registerMonacoThemes(list, languages$1);
 	}
 	function hasVerticalScrollbar() {
 		if (!editorView) return false;
@@ -2313,7 +2382,7 @@ function useMonaco(monacoOptions = {}) {
 			const ds = monacoOptions.onBeforeCreate(monaco_shim_exports);
 			if (ds) disposals.push(...ds);
 		}
-		const initialThemeName = monacoOptions.theme ?? currentTheme.value;
+		const initialThemeName = requestedThemeName ?? monacoOptions.theme ?? globalRequestedThemeName ?? currentTheme.value;
 		await ensureThemeRegistered(initialThemeName);
 		editorMgr = new EditorManager(monacoOptions, maxHeightValue, maxHeightCSS, autoScrollOnUpdate, autoScrollInitial, autoScrollThresholdPx, autoScrollThresholdLines, monacoOptions.revealDebounceMs);
 		editorView = await editorMgr.createEditor(container, code, language, initialThemeName);
@@ -2345,7 +2414,7 @@ function useMonaco(monacoOptions = {}) {
 			const ds = monacoOptions.onBeforeCreate(monaco_shim_exports);
 			if (ds) disposals.push(...ds);
 		}
-		const initialThemeName = monacoOptions.theme ?? currentTheme.value;
+		const initialThemeName = requestedThemeName ?? monacoOptions.theme ?? globalRequestedThemeName ?? currentTheme.value;
 		await ensureThemeRegistered(initialThemeName);
 		try {
 			monaco_shim_exports.editor.setTheme(initialThemeName);
@@ -2640,7 +2709,7 @@ function useMonaco(monacoOptions = {}) {
 			} else console.warn(`Language "${language}" is not registered. Available languages: ${languages$1.join(", ")}`);
 		},
 		getCurrentTheme() {
-			return currentTheme.value;
+			return globalAppliedThemeName ?? requestedThemeName ?? globalRequestedThemeName ?? currentTheme.value;
 		},
 		getEditor() {
 			return monaco_shim_exports.editor;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-monaco",
   "type": "module",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "A framework-agnostic library for integrating Monaco Editor with Shiki highlighting, optimized for streaming updates.",
   "author": "Simon He",
   "license": "MIT",