update how monaco workers is loaded (#4383)

* update

* update 2

* Update package.json

* all

* update

* update

* Update package.json

frontend/bundle_graphql_worker.sh

@@ -1 +1 @@
-npx esbuild node_modules/monaco-graphql/esm/graphql.worker --bundle --minify --outfile=static/workers/graphql.worker.bundle.js
+npx esbuild node_modules/monaco-graphql/esm/graphql.worker --bundle --minify --outfile=src/lib/monaco_workers/graphql.worker.bundle.js

frontend/src/lib/components/DiffEditor.svelte

@@ -9,9 +9,9 @@
 
 	import { initializeVscode } from './vscode'
 	import EditorTheme from './EditorTheme.svelte'
-	import { buildWorkerDefinition } from './build_workers'
+	import { buildWorkerDefinition } from '$lib/monaco_workers/build_workers'
 
-	buildWorkerDefinition('../../../workers', import.meta.url, false)
+	buildWorkerDefinition()
 
 	const SIDE_BY_SIDE_MIN_WIDTH = 700
 

frontend/src/lib/components/Editor.svelte

@@ -139,7 +139,6 @@
 	} from '$lib/editorUtils'
 	import type { Disposable } from 'vscode'
 	import type { DocumentUri, MessageTransports } from 'vscode-languageclient'
-	import { buildWorkerDefinition } from '$lib/components/build_workers'
 	import { workspaceStore } from '$lib/stores'
 	import { type Preview, UserService } from '$lib/gen'
 	import type { Text } from 'yjs'
@@ -170,6 +169,7 @@
 	import { setupTypeAcquisition } from '$lib/ata/index'
 	import { initWasmTs, parseDeps } from '$lib/infer'
 	import { initVim } from './monaco_keybindings'
+	import { buildWorkerDefinition } from '$lib/monaco_workers/build_workers'
 
 	// import EditorTheme from './EditorTheme.svelte'
 
@@ -248,7 +248,7 @@
 
 	console.log('uri', uri)
 
-	buildWorkerDefinition('../../../workers', import.meta.url, false)
+	buildWorkerDefinition()
 
 	export function getCode(): string {
 		return editor?.getValue() ?? ''

frontend/src/lib/components/SimpleEditor.svelte

@@ -53,12 +53,12 @@
 
 	import libStdContent from '$lib/es6.d.ts.txt?raw'
 	import domContent from '$lib/dom.d.ts.txt?raw'
-	import { buildWorkerDefinition } from './build_workers'
 	import { initializeVscode } from './vscode'
 	import EditorTheme from './EditorTheme.svelte'
 	import { writable } from 'svelte/store'
 	import { vimMode } from '$lib/stores'
 	import { initVim } from './monaco_keybindings'
+	import { buildWorkerDefinition } from '$lib/monaco_workers/build_workers'
 	// import { createConfiguredEditor } from 'vscode/monaco'
 	// import type { IStandaloneCodeEditor } from 'vscode/vscode/vs/editor/standalone/browser/standaloneCodeEditor'
 
@@ -87,7 +87,7 @@
 
 	const uri = `file:///${hash}.${langToExt(lang)}`
 
-	buildWorkerDefinition('../../../workers', import.meta.url)
+	buildWorkerDefinition()
 
 	export function getCode(): string {
 		return editor?.getValue() ?? ''

frontend/src/lib/components/TemplateEditor.svelte

@@ -13,12 +13,12 @@
 	import { createEventDispatcher, getContext, onDestroy, onMount } from 'svelte'
 	import type { AppViewerContext } from './apps/types'
 	import { writable } from 'svelte/store'
-	import { buildWorkerDefinition } from './build_workers'
 	import '@codingame/monaco-vscode-standalone-languages'
 	import '@codingame/monaco-vscode-standalone-typescript-language-features'
 
 	import { initializeVscode } from './vscode'
 	import EditorTheme from './EditorTheme.svelte'
+	import { buildWorkerDefinition } from '$lib/monaco_workers/build_workers'
 
 	export const conf = {
 		wordPattern:
@@ -384,7 +384,7 @@
 
 	const uri = `file:///${hash}.ts`
 
-	buildWorkerDefinition('../../../workers', import.meta.url, false)
+	buildWorkerDefinition()
 
 	export function insertAtCursor(code: string): void {
 		if (editor) {

frontend/src/lib/components/build_workers.ts

@@ -1,53 +0,0 @@
-import { useWorkerFactory } from 'monaco-editor-wrapper/workerFactory'
-
-import tsWorker from 'monaco-editor-wrapper/workers/module/ts?url'
-import cssWorker from 'monaco-editor-wrapper/workers/module/css?url'
-import htmlWorker from 'monaco-editor-wrapper/workers/module/html?url'
-import jsonWorker from 'monaco-editor-wrapper/workers/module/json?url'
-import editorWorker from 'monaco-editor-wrapper/workers/module/editor?url'
-
-export function buildWorkerDefinition(workerPath: string, basePath: string, ...args: any[]) {
-	useWorkerFactory({
-		ignoreMapping: true,
-		workerLoaders: {
-			editorWorkerService: () => {
-				return new Worker(new URL(editorWorker, import.meta.url), {
-					type: 'module'
-				})
-			},
-			javascript: () => {
-				return new Worker(new URL(tsWorker, import.meta.url), {
-					type: 'module'
-				})
-			},
-			typescript: () => {
-				return new Worker(new URL(tsWorker, import.meta.url), {
-					type: 'module'
-				})
-			},
-			json: () => {
-				return new Worker(new URL(jsonWorker, import.meta.url), {
-					type: 'module'
-				})
-			},
-			html: () => {
-				return new Worker(new URL(htmlWorker, import.meta.url), {
-					type: 'module'
-				})
-			},
-			css: () => {
-				return new Worker(new URL(cssWorker, import.meta.url), {
-					type: 'module'
-				})
-			},
-			graphql: () => {
-				const workerFilename = `graphql.worker.bundle.js`
-				const workerPathLocal = `${workerPath}/${workerFilename}`
-				const workerUrl = new URL(workerPathLocal, basePath)
-				return new Worker(workerUrl.href, {
-					name: 'graphql'
-				})
-			}
-		}
-	})
-}

frontend/src/lib/monaco_workers/build_workers.ts

@@ -0,0 +1,50 @@
+import { useWorkerFactory } from 'monaco-editor-wrapper/workerFactory'
+
+// import cssWorker from 'monaco-editor-wrapper/workers/module/css?worker&url'
+// import htmlWorker from 'monaco-editor-wrapper/workers/module/html?worker&url'
+// import jsonWorker from 'monaco-editor-wrapper/workers/module/json?worker&url'
+// import editorWorker from 'monaco-editor-wrapper/workers/module/editor?worker&url'
+
+export function buildWorkerDefinition() {
+	useWorkerFactory({
+		ignoreMapping: true,
+		workerLoaders: {
+			editorWorkerService: () => {
+				return new Worker(new URL('monaco-editor-wrapper/workers/module/editor', import.meta.url), {
+					type: 'module'
+				})
+			},
+			javascript: () => {
+				return new Worker(new URL('monaco-editor-wrapper/workers/module/ts', import.meta.url), {
+					type: 'module'
+				})
+			},
+			typescript: () => {
+				return new Worker(new URL('monaco-editor-wrapper/workers/module/ts', import.meta.url), {
+					type: 'module'
+				})
+			},
+			json: () => {
+				return new Worker(new URL('monaco-editor-wrapper/workers/module/json', import.meta.url), {
+					type: 'module'
+				})
+			},
+			html: () => {
+				return new Worker(new URL('monaco-editor-wrapper/workers/module/html', import.meta.url), {
+					type: 'module'
+				})
+			},
+			css: () => {
+				return new Worker(new URL('monaco-editor-wrapper/workers/module/css', import.meta.url), {
+					type: 'module'
+				})
+			},
+			graphql: () => {
+				console.log('Creating graphql worker')
+				return new Worker(new URL(`./graphql.worker.bundle.js`, import.meta.url), {
+					name: 'graphql'
+				})
+			}
+		}
+	})
+}