Fix JSON syntax highlighting by using vite monaco plugin (#514)

Author: jeddy3

package-lock.json

@@ -113,7 +113,8 @@
     "stylelint-use-logical-spec": "^5.0.1",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.46.2",
-    "vite": "^7.1.12"
+    "vite": "^7.1.12",
+    "vite-plugin-monaco-editor-esm": "^2.0.2"
   },
   "engines": {
     "node": "24"

package.json

@@ -1,28 +1,15 @@
-import type * as _monaco from 'monaco-editor';
-type Monaco = typeof _monaco;
-import { version as monacoVersion } from 'monaco-editor/package.json';
-
+import * as monaco from 'monaco-editor';
 import schemaStylelintrc from '../schema/stylelintrc.json';
 
+type Monaco = typeof monaco;
+
 let monacoPromise: Promise<Monaco> | null = null;
 
 /** Load the Monaco editor object. */
 export function loadMonaco(): Promise<Monaco> {
 	return (
 		monacoPromise ||
 		(monacoPromise = (async () => {
-			const rawMonaco: Monaco | { m: Monaco } =
-				(await loadMonacoFromEsmCdn()) || (await loadModuleFromMonaco('vs/editor/editor.main'));
-
-			let monaco: Monaco;
-
-			if ('m' in rawMonaco) {
-				// Support for [email protected]
-				monaco = rawMonaco.m || rawMonaco;
-			} else {
-				monaco = rawMonaco;
-			}
-
 			monaco.languages.css.cssDefaults.setOptions({
 				validate: false, //Turn off CSS built-in validation.
 			});
@@ -52,77 +39,6 @@ export function loadMonaco(): Promise<Monaco> {
 	);
 }
 
-async function loadMonacoFromEsmCdn(): Promise<Monaco | null> {
-	try {
-		const result = await import(`https://cdn.jsdelivr.net/npm/monaco-editor@${monacoVersion}/+esm`);
-
-		const link = document.createElement('link');
-
-		link.rel = 'stylesheet';
-		link.href = `https://cdn.jsdelivr.net/npm/monaco-editor@${monacoVersion}/min/vs/editor/editor.main.css`;
-		document.head.append(link);
-
-		return result as Monaco;
-	} catch (e: unknown) {
-		console.warn('Failed to load Monaco editor from ESM CDN.', e);
-
-		return null;
-	}
-}
-
-async function loadModuleFromMonaco<T>(moduleName: string): Promise<T> {
-	await setupMonaco();
-
-	return new Promise((resolve) => {
-		if (typeof window !== 'undefined') {
-			// @ts-expect-error -- global Monaco's require
-			window.require([moduleName], (r: T) => {
-				resolve(r);
-			});
-		}
-	});
-}
-
-async function setupMonaco(): Promise<void> {
-	if (typeof window !== 'undefined') {
-		const monacoScript =
-			Array.from(document.head.querySelectorAll('script')).find(
-				(script) => script.src && script.src.includes('monaco') && script.src.includes('vs/loader'),
-			) ||
-			// If the script tag that loads the Monaco editor is not found, insert the script tag.
-			(await appendMonacoEditorScript());
-
-		// @ts-expect-error -- global Monaco's require
-		window.require.config({ paths: { vs: monacoScript.src.replace(/\/vs\/.*$/u, '/vs') } });
-	}
-}
-
-/** Appends a script tag that loads the Monaco editor. */
-async function appendMonacoEditorScript(): Promise<HTMLScriptElement> {
-	const script = document.createElement('script');
-
-	return new Promise((resolve) => {
-		script.src = `https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.53.0/min/vs/loader.min.js`;
-		script.onload = () => {
-			script.onload = null;
-
-			watch();
-
-			function watch() {
-				// @ts-expect-error -- global Monaco's require
-				if (window.require) {
-					resolve(script);
-
-					return;
-				}
-
-				setTimeout(watch, 200);
-			}
-		};
-		document.head.append(script);
-	});
-}
-
 function setupEnhancedLanguages(monaco: Monaco) {
 	monaco.languages.register({ id: 'astro' });
 	monaco.languages.registerTokensProviderFactory('astro', {

src/monaco-editor/monaco-loader.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from 'vite';
+import monacoEditorPlugin from 'vite-plugin-monaco-editor-esm';
 
 export default defineConfig(() => ({
 	server: {
@@ -7,4 +8,9 @@ export default defineConfig(() => ({
 			'Cross-Origin-Opener-Policy': 'same-origin',
 		},
 	},
+	plugins: [
+		monacoEditorPlugin({
+			languageWorkers: ['editorWorkerService', 'css', 'html', 'json', 'typescript'],
+		}),
+	],
 }));