Add precompress option

package.json

@@ -1,6 +1,7 @@
 {
 	"name": "mermaid-live-editor",
 	"version": "2.0.67",
+	"type": "module",
 	"scripts": {
 		"dev": "svelte-kit dev --host 0.0.0.0",
 		"build": "svelte-kit build",
@@ -16,7 +17,7 @@
 	"devDependencies": {
 		"@cypress/snapshot": "^2.1.7",
 		"@sveltejs/adapter-static": "1.0.0-next.34",
-		"@sveltejs/kit": "1.0.0-next.354",
+		"@sveltejs/kit": "1.0.0-next.355",
 		"@types/mermaid": "^8.2.9",
 		"@types/pako": "^1.0.3",
 		"@typescript-eslint/eslint-plugin": "^4.33.0",
@@ -49,7 +50,6 @@
 		"tslib": "^2.4.0",
 		"typescript": "^4.7.3"
 	},
-	"type": "module",
 	"dependencies": {
 		"@analytics/google-analytics": "^0.5.3",
 		"@macfja/svelte-persistent-store": "^1.3.0",

src/app.html

@@ -16,28 +16,6 @@
 		<link
 			rel="stylesheet"
 			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
-		<link
-			rel="stylesheet"
-			href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.33.0/min/vs/editor/editor.main.min.css"
-			crossorigin="anonymous"
-			referrerpolicy="no-referrer" />
-		<script>
-			var require = {
-				paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.33.0/min/vs' }
-			};
-		</script>
-		<script
-			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.33.0/min/vs/loader.min.js"
-			crossorigin="anonymous"
-			referrerpolicy="no-referrer"></script>
-		<script
-			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.33.0/min/vs/editor/editor.main.nls.min.js"
-			crossorigin="anonymous"
-			referrerpolicy="no-referrer"></script>
-		<script
-			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.33.0/min/vs/editor/editor.main.js"
-			crossorigin="anonymous"
-			referrerpolicy="no-referrer"></script>
 
 		%sveltekit.head%
 	</head>

src/lib/components/editor.svelte

@@ -2,6 +2,7 @@
 	import type { EditorEvents } from '$lib/types';
 	import { stateStore } from '$lib/util/state';
 	import { themeStore } from '$lib/util/theme';
+
 	import type monaco from 'monaco-editor';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import initEditor from 'monaco-mermaid';
@@ -38,26 +39,43 @@
 	});
 
 	const dispatch = createEventDispatcher<EditorEvents>();
-	const loadMonaco = async () => {
-		let i = 0;
-		while (i++ < 10) {
-			try {
-				// @ts-ignore : This is a hack to handle a svelte-kit error when importing monaco.
-				Monaco = monaco;
-				return;
-			} catch {
-				await new Promise((r) => setTimeout(r, 500));
-			}
-		}
-		alert('Loading Monaco Editor failed. Please try refreshing the page.');
-	};
+
 	onMount(async () => {
-		try {
-			// @ts-ignore : This is a hack to handle a svelte-kit error when importing monaco.
-			Monaco = monaco;
-		} catch {
-			await loadMonaco(); // Fix https://github.com/mermaid-js/mermaid-live-editor/issues/175
-		}
+		// @ts-ignore
+		self.MonacoEnvironment = {
+			getWorker: function (workerId: string, label: string) {
+				const getWorkerModule = (moduleUrl: string, label: string): Worker => {
+					// @ts-ignore
+					return new Worker(self.MonacoEnvironment.getWorkerUrl(moduleUrl), {
+						name: label,
+						type: 'module'
+					});
+				};
+
+				switch (label) {
+					case 'json':
+						return getWorkerModule('/monaco-editor/esm/vs/language/json/json.worker?worker', label);
+					case 'css':
+					case 'scss':
+					case 'less':
+						return getWorkerModule('/monaco-editor/esm/vs/language/css/css.worker?worker', label);
+					case 'html':
+					case 'handlebars':
+					case 'razor':
+						return getWorkerModule('/monaco-editor/esm/vs/language/html/html.worker?worker', label);
+					case 'typescript':
+					case 'javascript':
+						return getWorkerModule(
+							'/monaco-editor/esm/vs/language/typescript/ts.worker?worker',
+							label
+						);
+					default:
+						return getWorkerModule('/monaco-editor/esm/vs/editor/editor.worker?worker', label);
+				}
+			}
+		};
+
+		Monaco = await import('monaco-editor');
 		initEditor(Monaco);
 		editor = Monaco.editor.create(divEl, editorOptions);
 		editor.onDidChangeModelContent(() => {
@@ -66,7 +84,7 @@
 				text
 			});
 		});
-		Monaco?.editor.setTheme($themeStore.isDark ? 'mermaid-dark' : 'mermaid');
+		Monaco.editor.setTheme($themeStore.isDark ? 'mermaid-dark' : 'mermaid');
 		const resizeObserver = new ResizeObserver((entries) => {
 			editor.layout({
 				height: entries[0].contentRect.height,

svelte.config.js

@@ -12,7 +12,8 @@ const config = {
 	],
 	kit: {
 		adapter: adapter({
-			pages: `docs`
+			pages: `docs`,
+			precompress: true
 		}),
 		paths: process.env['DEPLOY']
 			? {