fix: update monaco-editor to latest monaco/language-client (#4285)

* all

* all

* all

* recomment useless extralib imports

* small impr

frontend/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "windmill-components",
-	"version": "1.383.1",
+	"version": "1.383.8",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
@@ -17,6 +17,7 @@
 		"filter-classes": "node filterTailwindClasses.js"
 	},
 	"devDependencies": {
+		"@windmill-labs/esbuild-import-meta-url-plugin": "0.0.0-semantic-release",
 		"@floating-ui/core": "^1.3.1",
 		"@hey-api/openapi-ts": "^0.43.0",
 		"@playwright/test": "^1.34.3",
@@ -72,25 +73,25 @@
 		"@rgossiaux/svelte-headlessui": {
 			"svelte": "$svelte"
 		},
-		"ag-grid-svelte": {
-			"svelte": "$svelte"
+		"monaco-graphql": {
+			"monaco-editor": "$monaco-editor"
 		},
 		"svelte-chartjs": {
 			"svelte": "$svelte"
-		},
-		"svelte-timezone-picker": {
-			"svelte": "$svelte"
-		},
-		"monaco-editor": "$monaco-editor",
-		"vscode": "$vscode"
-	},
-	"resolutions": {
-		"monaco-editor": "npm:@codingame/monaco-editor-treemended@>=1.83.5 <1.84.0",
-		"vscode": "npm:@codingame/monaco-vscode-api@>=1.83.5 <1.84.0"
+		}
 	},
 	"type": "module",
 	"dependencies": {
 		"@aws-crypto/sha256-js": "^4.0.0",
+		"@codingame/monaco-vscode-configuration-service-override": "~8.0.2",
+		"@codingame/monaco-vscode-files-service-override": "~8.0.2",
+		"@codingame/monaco-vscode-keybindings-service-override": "~8.0.2",
+		"@codingame/monaco-vscode-lifecycle-service-override": "~8.0.2",
+		"@codingame/monaco-vscode-localization-service-override": "~8.0.2",
+		"@codingame/monaco-vscode-standalone-json-language-features": "~8.0.2",
+		"@codingame/monaco-vscode-standalone-languages": "~8.0.2",
+		"@codingame/monaco-vscode-standalone-css-language-features": "~8.0.2",
+		"@codingame/monaco-vscode-standalone-typescript-language-features": "~8.0.2",
 		"@json2csv/plainjs": "^7.0.6",
 		"@leeoniya/ufuzzy": "^1.0.8",
 		"@popperjs/core": "^2.11.6",
@@ -117,9 +118,10 @@
 		"highlight.js": "^11.8.0",
 		"lucide-svelte": "^0.293.0",
 		"minimatch": "^10.0.1",
-		"monaco-editor": "npm:@codingame/monaco-editor-treemended@>=1.83.5 <1.84.0",
-		"monaco-graphql": "^1.5.1",
-		"monaco-languageclient": "~7.0.1",
+		"monaco-editor": "npm:@codingame/monaco-vscode-editor-api@~8.0.2",
+		"monaco-editor-wrapper": "^5.5.2",
+		"monaco-graphql": "^1.6.0",
+		"monaco-languageclient": "~8.8.2",
 		"ol": "^7.4.0",
 		"openai": "^4.47.1",
 		"p-limit": "^6.1.0",
@@ -132,10 +134,10 @@
 		"svelte-infinite-loading": "^1.3.8",
 		"svelte-tiny-virtual-list": "^2.0.5",
 		"tailwind-merge": "^1.13.2",
-		"vscode": "npm:@codingame/monaco-vscode-api@>=1.83.5 <1.84.0",
+		"vscode": "npm:@codingame/monaco-vscode-api@~8.0.2",
 		"vscode-languageclient": "~9.0.1",
 		"vscode-uri": "~3.0.8",
-		"vscode-ws-jsonrpc": "~3.1.0",
+		"vscode-ws-jsonrpc": "~3.3.2",
 		"windmill-parser-wasm": "^1.367.2",
 		"windmill-sql-datatype-parser-wasm": "^1.318.0",
 		"y-monaco": "^0.1.4",

frontend/src/lib/components/DiffDrawer.svelte

@@ -209,6 +209,7 @@
 							{#key diffType}
 								{#if contentType === 'content'}
 									<DiffEditor
+										open={true}
 										automaticLayout
 										class="h-full"
 										defaultLang={lang}
@@ -219,6 +220,7 @@
 									/>
 								{:else if contentType === 'metadata'}
 									<DiffEditor
+										open={true}
 										automaticLayout
 										class="h-full"
 										defaultLang="yaml"

frontend/src/lib/components/DiffEditor.svelte

@@ -2,13 +2,11 @@
 	import { BROWSER } from 'esm-env'
 	import { onMount } from 'svelte'
 
+	import '@codingame/monaco-vscode-standalone-languages'
+	import '@codingame/monaco-vscode-standalone-json-language-features'
+	import '@codingame/monaco-vscode-standalone-typescript-language-features'
 	import { editor as meditor } from 'monaco-editor'
-	import 'monaco-editor/esm/vs/basic-languages/python/python.contribution'
-	import 'monaco-editor/esm/vs/basic-languages/go/go.contribution'
-	import 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution'
-	import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution'
-	import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution'
-	import 'monaco-editor/esm/vs/language/typescript/monaco.contribution'
+
 	import { initializeVscode } from './vscode'
 	import EditorTheme from './EditorTheme.svelte'
 	import { buildWorkerDefinition } from './build_workers'
@@ -29,6 +27,7 @@
 	let diffDivEl: HTMLDivElement | null = null
 	let editorWidth: number = SIDE_BY_SIDE_MIN_WIDTH
 
+	export let open = false
 	async function loadDiffEditor() {
 		await initializeVscode()
 
@@ -55,7 +54,10 @@
 			defaultModified !== undefined &&
 			defaultLang !== undefined
 		) {
+			console.log('SETUP')
 			setupModel(defaultLang, defaultOriginal, defaultModified, defaultModifiedLang)
+		} else {
+			console.log('NO SETUP', defaultOriginal, defaultModified, defaultLang)
 		}
 	}
 
@@ -78,7 +80,9 @@
 	}
 
 	export function setOriginal(code: string) {
+		console.log('setOriginal', code)
 		diffEditor?.getModel()?.original?.setValue(code)
+		defaultOriginal = code
 	}
 
 	export function getOriginal(): string {
@@ -87,6 +91,7 @@
 
 	export function setModified(code: string) {
 		diffEditor?.getModel()?.modified?.setValue(code)
+		defaultModified = code
 	}
 
 	export function getModified(): string {
@@ -94,10 +99,11 @@
 	}
 
 	export function show(): void {
-		diffDivEl?.classList.remove('hidden')
+		console.log('show')
+		open = true
 	}
 	export function hide(): void {
-		diffDivEl?.classList.add('hidden')
+		open = false
 	}
 
 	function onWidthChange(editorWidth: number) {
@@ -106,9 +112,10 @@
 
 	$: onWidthChange(editorWidth)
 
+	$: open && diffDivEl && loadDiffEditor()
+
 	onMount(() => {
 		if (BROWSER) {
-			loadDiffEditor()
 			return () => {
 				diffEditor?.dispose()
 			}
@@ -116,6 +123,7 @@
 	})
 </script>
 
-<EditorTheme />
-
-<div bind:this={diffDivEl} class="{$$props.class} editor" bind:clientWidth={editorWidth} />
+{#if open}
+	<EditorTheme />
+	<div bind:this={diffDivEl} class="{$$props.class} editor" bind:clientWidth={editorWidth} />
+{/if}

frontend/src/lib/components/Editor.svelte

@@ -1,3 +1,106 @@
+<!-- <script lang="ts"></script> -->
+
+<script context="module">
+	import '@codingame/monaco-vscode-standalone-languages'
+	import '@codingame/monaco-vscode-standalone-typescript-language-features'
+
+	import processStdContent from '$lib/process.d.ts.txt?raw'
+	import windmillFetchContent from '$lib/windmill_fetch.d.ts.txt?raw'
+
+	languages.typescript.typescriptDefaults.addExtraLib(processStdContent, 'process.d.ts')
+
+	// languages.typescript.javascriptDefaults.setModeConfiguration({
+	// 	completionItems: true,
+	// 	hovers: true,
+	// 	documentSymbols: true,
+	// 	definitions: true,
+	// 	references: true,
+	// 	documentHighlights: true,
+	// 	rename: true,
+	// 	diagnostics: true,
+	// 	documentRangeFormattingEdits: true,
+	// 	signatureHelp: true,
+	// 	onTypeFormattingEdits: true,
+	// 	codeActions: true,
+	// 	inlayHints: true
+	// })
+
+	languages.typescript.typescriptDefaults.setModeConfiguration({
+		completionItems: true,
+		hovers: true,
+		documentSymbols: true,
+		definitions: true,
+		references: true,
+		documentHighlights: true,
+		rename: true,
+		diagnostics: true,
+		documentRangeFormattingEdits: true,
+		signatureHelp: true,
+		onTypeFormattingEdits: true,
+		codeActions: true,
+		inlayHints: true
+	})
+
+	// languages.typescript.javascriptDefaults.setEagerModelSync(true)
+	languages.typescript.typescriptDefaults.setEagerModelSync(true)
+
+	// languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+	// 	noSemanticValidation: false,
+	// 	noSyntaxValidation: false,
+	// 	noSuggestionDiagnostics: false,
+	// 	diagnosticCodesToIgnore: [1108]
+	// })
+
+	languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+		noSemanticValidation: false,
+		noSyntaxValidation: false,
+		noSuggestionDiagnostics: false,
+		diagnosticCodesToIgnore: [1108]
+	})
+
+	languages.typescript.typescriptDefaults.setCompilerOptions({
+		target: languages.typescript.ScriptTarget.Latest,
+		allowNonTsExtensions: true,
+		noSemanticValidation: false,
+		noSyntaxValidation: false,
+		completionItems: true,
+		hovers: true,
+		documentSymbols: true,
+		definitions: true,
+		references: true,
+		documentHighlights: true,
+		rename: true,
+		diagnostics: true,
+		documentRangeFormattingEdits: true,
+		signatureHelp: true,
+		onTypeFormattingEdits: true,
+		codeActions: true,
+		inlayHints: true,
+		checkJs: true,
+		allowJs: true,
+		noUnusedLocals: true,
+		strict: true,
+		noLib: false,
+		allowImportingTsExtensions: true,
+		moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
+	})
+
+	// languages.typescript.javascriptDefaults.setCompilerOptions({
+	// 	target: languages.typescript.ScriptTarget.Latest,
+	// 	allowNonTsExtensions: true,
+	// 	noSemanticValidation: false,
+	// 	noSyntaxValidation: false,
+	// 	allowImportingTsExtensions: true,
+	// 	checkJs: true,
+	// 	allowJs: true,
+	// 	noUnusedParameters: true,
+	// 	noUnusedLocals: true,
+	// 	strict: true,
+	// 	noLib: true,
+	// 	moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
+	// })
+</script>
+
 <script lang="ts">
 	import { BROWSER } from 'esm-env'
 
@@ -5,33 +108,15 @@
 
 	import { createEventDispatcher, onDestroy, onMount } from 'svelte'
 
-	import * as vscode from 'vscode'
-
-	import {
-		editor as meditor,
-		languages,
-		KeyCode,
-		KeyMod,
-		Uri as mUri,
-		type IRange
-	} from 'monaco-editor'
-	import 'monaco-editor/esm/vs/basic-languages/python/python.contribution'
-	import 'monaco-editor/esm/vs/basic-languages/go/go.contribution'
-	import 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution'
-	import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution'
-	import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution'
-	import 'monaco-editor/esm/vs/basic-languages/graphql/graphql.contribution'
-	import 'monaco-editor/esm/vs/basic-languages/powershell/powershell.contribution'
-	import 'monaco-editor/esm/vs/basic-languages/php/php.contribution'
-	import 'monaco-editor/esm/vs/language/typescript/monaco.contribution'
-	import 'monaco-editor/esm/vs/basic-languages/css/css.contribution'
-
 	// import libStdContent from '$lib/es6.d.ts.txt?raw'
 	// import domContent from '$lib/dom.d.ts.txt?raw'
 
 	// import denoFetchContent from '$lib/deno_fetch.d.ts.txt?raw'
-	import processStdContent from '$lib/process.d.ts.txt?raw'
-	import windmillFetchContent from '$lib/windmill_fetch.d.ts.txt?raw'
+
+	import * as vscode from 'vscode'
+	// import '@codingame/monaco-vscode-typescript-basics-default-extension'
+	// import '@codingame/monaco-vscode-typescript-language-features-default-extension'
+	// import 'vscode/localExtensionHost'
 
 	import { MonacoLanguageClient } from 'monaco-languageclient'
 
@@ -55,15 +140,25 @@
 	} from '$lib/editorUtils'
 	import type { Disposable } from 'vscode'
 	import type { DocumentUri, MessageTransports } from 'vscode-languageclient'
-	import { buildWorkerDefinition } from './build_workers'
+	import { buildWorkerDefinition } from '$lib/components/build_workers'
 	import { workspaceStore } from '$lib/stores'
 	import { type Preview, UserService } from '$lib/gen'
 	import type { Text } from 'yjs'
+	import { initializeVscode } from '$lib/components/vscode'
+
 	import { initializeMode } from 'monaco-graphql/esm/initializeMode.js'
-	import type { MonacoGraphQLAPI } from 'monaco-graphql/esm/api.js'
 	import { sleep } from '$lib/utils'
-	import { editorCodeCompletion } from './copilot/completion'
-	import { initializeVscode } from './vscode'
+	import { editorCodeCompletion } from '$lib/components/copilot/completion'
+	import {
+		editor as meditor,
+		languages,
+		KeyCode,
+		KeyMod,
+		Uri as mUri,
+		type IRange
+	} from 'monaco-editor'
+	import type { MonacoGraphQLAPI } from 'monaco-graphql/esm/api.js'
+
 	import EditorTheme from './EditorTheme.svelte'
 	import {
 		BIGQUERY_TYPES,
@@ -74,10 +169,11 @@
 	} from '$lib/consts'
 	import { setupTypeAcquisition } from '$lib/ata/index'
 	import { initWasm, parseDeps } from '$lib/infer'
+
 	// import EditorTheme from './EditorTheme.svelte'
 
 	let divEl: HTMLDivElement | null = null
-	let editor: meditor.IStandaloneCodeEditor
+	let editor: meditor.IStandaloneCodeEditor | null = null
 
 	export let lang:
 		| 'typescript'
@@ -463,6 +559,7 @@
 	let copilotCompletor: Disposable | undefined = undefined
 	let copilotTs = Date.now()
 	let abortController: AbortController | undefined = undefined
+
 	function addCopilotSuggestions() {
 		if (copilotCompletor) {
 			copilotCompletor.dispose()
@@ -948,7 +1045,8 @@
 	async function loadMonaco() {
 		try {
 			console.log("Loading Monaco's language client")
-			await initializeVscode()
+			await initializeVscode('editor')
+			console.log('done loading Monaco and vscode')
 		} catch (e) {
 			console.log('error initializing services', e)
 		}
@@ -958,99 +1056,6 @@
 
 		initialized = true
 
-		languages.typescript.typescriptDefaults.setCompilerOptions({
-			target: languages.typescript.ScriptTarget.Latest,
-			allowNonTsExtensions: true,
-			noSemanticValidation: false,
-			noSyntaxValidation: false,
-			completionItems: true,
-			hovers: true,
-			documentSymbols: true,
-			definitions: true,
-			references: true,
-			documentHighlights: true,
-			rename: true,
-			diagnostics: true,
-			documentRangeFormattingEdits: true,
-			signatureHelp: true,
-			onTypeFormattingEdits: true,
-			codeActions: true,
-			inlayHints: true,
-			checkJs: true,
-			allowJs: true,
-			noUnusedLocals: true,
-			strict: true,
-			noLib: false,
-			allowImportingTsExtensions: true,
-			moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
-		})
-
-		languages.typescript.typescriptDefaults.addExtraLib(processStdContent, 'process.d.ts')
-
-		languages.typescript.javascriptDefaults.setModeConfiguration({
-			completionItems: true,
-			hovers: true,
-			documentSymbols: true,
-			definitions: true,
-			references: true,
-			documentHighlights: true,
-			rename: true,
-			diagnostics: true,
-			documentRangeFormattingEdits: true,
-			signatureHelp: true,
-			onTypeFormattingEdits: true,
-			codeActions: true,
-			inlayHints: true
-		})
-
-		languages.typescript.typescriptDefaults.setModeConfiguration({
-			completionItems: true,
-			hovers: true,
-			documentSymbols: true,
-			definitions: true,
-			references: true,
-			documentHighlights: true,
-			rename: true,
-			diagnostics: true,
-			documentRangeFormattingEdits: true,
-			signatureHelp: true,
-			onTypeFormattingEdits: true,
-			codeActions: true,
-			inlayHints: true
-		})
-
-		languages.typescript.javascriptDefaults.setEagerModelSync(true)
-		languages.typescript.typescriptDefaults.setEagerModelSync(true)
-
-		languages.typescript.javascriptDefaults.setDiagnosticsOptions({
-			noSemanticValidation: false,
-			noSyntaxValidation: false,
-			noSuggestionDiagnostics: false,
-			diagnosticCodesToIgnore: [1108]
-		})
-
-		languages.typescript.typescriptDefaults.setDiagnosticsOptions({
-			noSemanticValidation: false,
-			noSyntaxValidation: false,
-			noSuggestionDiagnostics: false,
-			diagnosticCodesToIgnore: [1108]
-		})
-
-		languages.typescript.javascriptDefaults.setCompilerOptions({
-			target: languages.typescript.ScriptTarget.Latest,
-			allowNonTsExtensions: true,
-			noSemanticValidation: false,
-			noSyntaxValidation: false,
-			allowImportingTsExtensions: true,
-			checkJs: true,
-			allowJs: true,
-			noUnusedParameters: true,
-			noUnusedLocals: true,
-			strict: true,
-			noLib: true,
-			moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
-		})
-
 		try {
 			model = meditor.createModel(code, lang, mUri.parse(uri))
 		} catch (err) {
@@ -1075,7 +1080,7 @@
 		let timeoutModel: NodeJS.Timeout | undefined = undefined
 		let ataModel: NodeJS.Timeout | undefined = undefined
 
-		editor.onDidChangeModelContent((event) => {
+		editor?.onDidChangeModelContent((event) => {
 			timeoutModel && clearTimeout(timeoutModel)
 			timeoutModel = setTimeout(() => {
 				let ncode = getCode()
@@ -1091,24 +1096,24 @@
 			}, 1000)
 		})
 
-		editor.onDidBlurEditorText(() => {
+		editor?.onDidBlurEditorText(() => {
 			dispatch('blur')
 		})
 
-		editor.onDidFocusEditorText(() => {
+		editor?.onDidFocusEditorText(() => {
 			dispatch('focus')
 
-			editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, function () {
+			editor?.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, function () {
 				code = getCode()
 				shouldBindKey && format && format()
 			})
 
-			editor.addCommand(KeyMod.CtrlCmd | KeyCode.Enter, function () {
+			editor?.addCommand(KeyMod.CtrlCmd | KeyCode.Enter, function () {
 				code = getCode()
 				shouldBindKey && cmdEnterAction && cmdEnterAction()
 			})
 
-			editor.addCommand(KeyMod.CtrlCmd | KeyMod.Shift | KeyCode.Digit7, function () {
+			editor?.addCommand(KeyMod.CtrlCmd | KeyMod.Shift | KeyCode.Digit7, function () {
 				// CMD + slash (toggle comment) on some EU keyboards
 				editor?.trigger('keyboard', 'editor.action.commentLine', {})
 			})

frontend/src/lib/components/EditorTheme.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
+	import { isInitialized } from './vscode'
+
 	import { editor as meditor } from 'monaco-editor/esm/vs/editor/editor.api'
 
 	import { onMount } from 'svelte'
 	import DarkModeObserver from './DarkModeObserver.svelte'
-	import { isInitialized } from './vscode'
 
 	function onThemeChange() {
 		if (isInitialized) {

frontend/src/lib/components/ScriptEditor.svelte

@@ -318,10 +318,11 @@
 						{args}
 					/>
 					<DiffEditor
+						class="h-full"
 						bind:this={diffEditor}
 						automaticLayout
+						defaultLang={scriptLangToEditorLang(lang)}
 						{fixedOverflowWidgets}
-						class="hidden h-full"
 					/>
 				{/key}
 			</div>

frontend/src/lib/components/SimpleEditor.svelte

@@ -1,6 +1,31 @@
 <script context="module">
 	let cssClassesLoaded = writable(false)
 	let tailwindClassesLoaded = writable(false)
+
+	import '@codingame/monaco-vscode-standalone-languages'
+	import '@codingame/monaco-vscode-standalone-json-language-features'
+	import '@codingame/monaco-vscode-standalone-css-language-features'
+	import '@codingame/monaco-vscode-standalone-typescript-language-features'
+
+	languages.typescript.javascriptDefaults.setCompilerOptions({
+		target: languages.typescript.ScriptTarget.Latest,
+		allowNonTsExtensions: true,
+		noSemanticValidation: false,
+		noLib: true,
+		moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
+	})
+	languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+		noSemanticValidation: false,
+		noSyntaxValidation: false,
+		noSuggestionDiagnostics: false,
+		diagnosticCodesToIgnore: [1108]
+	})
+	languages.json.jsonDefaults.setDiagnosticsOptions({
+		validate: true,
+		allowComments: false,
+		schemas: [],
+		enableSchemaRequest: true
+	})
 </script>
 
 <script lang="ts">
@@ -15,14 +40,11 @@
 		languages,
 		type IRange
 	} from 'monaco-editor'
-	import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution'
-	import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution'
-	import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'
-	import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution'
-	import 'monaco-editor/esm/vs/language/typescript/monaco.contribution'
-	import 'monaco-editor/esm/vs/language/json/monaco.contribution'
-	import 'monaco-editor/esm/vs/basic-languages/css/css.contribution'
-	import 'monaco-editor/esm/vs/language/css/monaco.contribution'
+
+	import '@codingame/monaco-vscode-standalone-languages'
+	import '@codingame/monaco-vscode-standalone-json-language-features'
+	import '@codingame/monaco-vscode-standalone-css-language-features'
+	import '@codingame/monaco-vscode-standalone-typescript-language-features'
 
 	import { allClasses } from './apps/editor/componentsPanel/cssUtils'
 
@@ -61,7 +83,7 @@
 
 	const uri = `file:///${hash}.${langToExt(lang)}`
 
-	buildWorkerDefinition('../../../workers', import.meta.url, false)
+	buildWorkerDefinition('../../../workers', import.meta.url)
 
 	export function getCode(): string {
 		return editor?.getValue() ?? ''
@@ -138,27 +160,29 @@
 	async function loadMonaco() {
 		await initializeVscode()
 		initialized = true
-		languages.typescript.javascriptDefaults.setCompilerOptions({
-			target: languages.typescript.ScriptTarget.Latest,
-			allowNonTsExtensions: true,
-			noSemanticValidation: false,
-			noLib: true,
-			moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
-		})
-		languages.typescript.javascriptDefaults.setDiagnosticsOptions({
-			noSemanticValidation: false,
-			noSyntaxValidation: false,
-			noSuggestionDiagnostics: false,
-			diagnosticCodesToIgnore: [1108]
-		})
-
-		languages.json.jsonDefaults.setDiagnosticsOptions({
-			validate: true,
-			allowComments: false,
-			schemas: [],
-			enableSchemaRequest: true
-		})
 
+		// if (lang === 'javascript') {
+		// 	languages.typescript.javascriptDefaults.setCompilerOptions({
+		// 		target: languages.typescript.ScriptTarget.Latest,
+		// 		allowNonTsExtensions: true,
+		// 		noSemanticValidation: false,
+		// 		noLib: true,
+		// 		moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
+		// 	})
+		// 	languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+		// 		noSemanticValidation: false,
+		// 		noSyntaxValidation: false,
+		// 		noSuggestionDiagnostics: false,
+		// 		diagnosticCodesToIgnore: [1108]
+		// 	})
+		// } else if (lang === 'json') {
+		// 	languages.json.jsonDefaults.setDiagnosticsOptions({
+		// 		validate: true,
+		// 		allowComments: false,
+		// 		schemas: [],
+		// 		enableSchemaRequest: true
+		// 	})
+		// }
 		try {
 			model = meditor.createModel(code, lang, mUri.parse(uri))
 		} catch (err) {

frontend/src/lib/components/TemplateEditor.svelte

@@ -14,9 +14,9 @@
 	import type { AppViewerContext } from './apps/types'
 	import { writable } from 'svelte/store'
 	import { buildWorkerDefinition } from './build_workers'
-	import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'
-	import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution'
-	import 'monaco-editor/esm/vs/language/typescript/monaco.contribution'
+	import '@codingame/monaco-vscode-standalone-languages'
+	import '@codingame/monaco-vscode-standalone-typescript-language-features'
+
 	import { initializeVscode } from './vscode'
 	import EditorTheme from './EditorTheme.svelte'
 
@@ -414,7 +414,9 @@
 	let jsLoader: NodeJS.Timeout | undefined = undefined
 
 	async function loadMonaco() {
-		await initializeVscode()
+		console.log('init template')
+		await initializeVscode('templateEditor')
+		console.log('initialized')
 		initialized = true
 		languages.typescript.javascriptDefaults.setCompilerOptions({
 			target: languages.typescript.ScriptTarget.Latest,

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte

@@ -370,10 +370,12 @@
 				{/if}
 
 				<DiffEditor
+					open={false}
 					bind:this={diffEditor}
-					class="hidden h-full"
+					class="h-full"
 					automaticLayout
 					fixedOverflowWidgets
+					defaultLang={scriptLangToEditorLang(inlineScript?.language)}
 				/>
 			{/if}
 		</div>

frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/JsonEditor.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import '@codingame/monaco-vscode-standalone-json-language-features'
+
 	import SimpleEditor from '$lib/components/SimpleEditor.svelte'
 	export let code: string | undefined
 	export let value: any = undefined

frontend/src/lib/components/build_workers.ts

@@ -1,82 +1,48 @@
-import type { Environment } from 'monaco-editor/esm/vs/editor/editor.api.js'
+import { useWorkerFactory } from 'monaco-editor-wrapper/workerFactory'
+import cssWorker from 'monaco-editor-wrapper/workers/module/css?worker'
+import htmlWorker from 'monaco-editor-wrapper/workers/module/html?worker'
+import tsWorker from 'monaco-editor-wrapper/workers/module/ts?worker'
+import jsonWorker from 'monaco-editor-wrapper/workers/module/json?worker'
+import editorWorker from 'monaco-editor-wrapper/workers/module/editor?worker'
 
-// inline to make it a library component easy to be imported until this if fixed: https://github.com/vitejs/vite/pull/16418
-// import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker&inline'
-// import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker&inline'
-// import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker&inline'
-// import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker&inline'
-// import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker&inline'
-
-import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
-import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
-import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
-import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
-
-interface MonacoEnvironmentEnhanced extends Environment {
-	workerOverrideGlobals: WorkerOverrideGlobals
-}
-
-type WorkerOverrideGlobals = {
-	basePath: string
-	workerPath: string
-	workerOptions: WorkerOptions
-}
-
-export function buildWorkerDefinition(
-	workerPath: string,
-	basePath: string,
-	useModuleWorker: boolean
-) {
-	const monWin = self as Window
-	const workerOverrideGlobals: WorkerOverrideGlobals = {
-		basePath: basePath,
-		workerPath: workerPath,
-		workerOptions: {
-			type: useModuleWorker ? 'module' : 'classic'
-		}
-	}
-
-	if (!monWin.MonacoEnvironment) {
-		monWin.MonacoEnvironment = {
-			workerOverrideGlobals: workerOverrideGlobals,
-			createTrustedTypesPolicy: (_policyName: string) => {
-				return undefined
-			}
-		} as MonacoEnvironmentEnhanced
-	}
-	const monEnv = monWin.MonacoEnvironment as MonacoEnvironmentEnhanced
-	monEnv.workerOverrideGlobals = workerOverrideGlobals
-
-	const getWorker = (_: string, label: string) => {
-		console.log('getWorker: workerId: ' + _ + ' label: ' + label)
-
-		switch (label) {
-			case 'template':
-			case 'typescript':
-			case 'javascript':
-				return new tsWorker()
-			case 'html':
-			case 'handlebars':
-			case 'razor':
-				return new htmlWorker()
-			case 'css':
-			case 'scss':
-			case 'less':
-				return new cssWorker()
-			case 'json':
-				return new jsonWorker()
-			case 'graphql':
-				const workerFilename = `graphql.worker.bundle.js`
-				const workerPathLocal = `${workerOverrideGlobals.workerPath}/${workerFilename}`
-				const workerUrl = new URL(workerPathLocal, workerOverrideGlobals.basePath)
-				return new Worker(workerUrl.href, {
-					name: label
-				})
-			default:
+export function buildWorkerDefinition(workerPath: string, basePath: string, ...args: any[]) {
+	useWorkerFactory({
+		ignoreMapping: true,
+		workerLoaders: {
+			editorWorkerService: () => {
+				console.log('editorWorkerService')
 				return new editorWorker()
-		}
-	}
+			},
+			javascript: () => {
+				console.log('javascript')
+				return new tsWorker()
+			},
 
-	monWin.MonacoEnvironment.getWorker = getWorker
+			typescript: () => {
+				console.log('typescript')
+				return new tsWorker()
+			},
+			json: () => {
+				console.log('json')
+				return new jsonWorker()
+			},
+			html: () => {
+				console.log('html')
+				return new htmlWorker()
+			},
+			css: () => {
+				console.log('html')
+				return new cssWorker()
+			},
+			graphql: () => {
+				console.log('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/components/flows/content/FlowModuleComponent.svelte

@@ -334,10 +334,12 @@
 										)}
 									/>
 									<DiffEditor
+										open={false}
 										bind:this={diffEditor}
 										automaticLayout
 										fixedOverflowWidgets
-										class="hidden h-full"
+										defaultLang={scriptLangToEditorLang(flowModule.value.language)}
+										class="h-full"
 									/>
 								{/key}
 							{/if}

frontend/src/lib/components/flows/content/FlowModuleScript.svelte

@@ -69,6 +69,7 @@
 		{#if showDiff}
 			{#key previousCode + code}
 				<DiffEditor
+					open={true}
 					class="h-screen"
 					readOnly
 					automaticLayout

frontend/src/lib/components/vscode.ts

@@ -1,20 +1,32 @@
-import { initServices } from 'monaco-languageclient'
-import { LogLevel } from 'vscode/services'
+import { initServices } from 'monaco-languageclient/vscode/services'
+// import getThemeServiceOverride from '@codingame/monaco-vscode-theme-service-override'
+// import getTextmateServiceOverride from '@codingame/monaco-vscode-textmate-service-override'
+import getMonarchServiceOverride from '@codingame/monaco-vscode-monarch-service-override'
+import '@codingame/monaco-vscode-standalone-typescript-language-features'
 import { editor as meditor } from 'monaco-editor/esm/vs/editor/editor.api'
+
 export let isInitialized = false
 export let isInitializing = false
 
-export async function initializeVscode() {
-	if (!isInitialized) {
+export async function initializeVscode(caller?: string) {
+	if (!isInitialized && !isInitializing) {
+		console.log(`Initializing vscode-api from ${caller ?? 'unknown'}`)
 		isInitializing = true
 
-		isInitialized = true
 		try {
 			// init vscode-api
 			await initServices({
-				debugLogging: true,
-				logLevel: LogLevel.Info
+				serviceConfig: {
+					userServices: {
+						// ...getThemeServiceOverride(),
+						// ...getTextmateServiceOverride()
+						...getMonarchServiceOverride()
+					},
+					debugLogging: true,
+					enableExtHostWorker: false
+				}
 			})
+			isInitialized = true
 			meditor.defineTheme('nord', {
 				base: 'vs-dark',
 				inherit: true,
@@ -125,11 +137,13 @@ export async function initializeVscode() {
 				meditor.setTheme('myTheme')
 			}
 		} catch (e) {
+			console.error('Failed to initialize monaco services', e)
 		} finally {
+			isInitialized = true
 			isInitializing = false
 		}
 	} else {
-		while (isInitializing) {
+		while (isInitializing && !isInitialized) {
 			console.log('Waiting for initialization of monaco services')
 			await new Promise((resolve) => setTimeout(resolve, 100))
 		}

frontend/src/lib/editorUtils.ts

@@ -1,4 +1,5 @@
 import { languages } from 'monaco-editor/esm/vs/editor/editor.api'
+import { ShowLightbulbIconMode } from 'vscode/vscode/vs/editor/common/config/editorOptions'
 export function editorConfig(
 	code: string,
 	lang: string,
@@ -21,7 +22,7 @@ export function editorConfig(
 			enabled: false
 		},
 		lightbulb: {
-			enabled: true
+			enabled: ShowLightbulbIconMode.On
 		},
 		suggest: {
 			showKeywords: true
@@ -29,6 +30,10 @@ export function editorConfig(
 		bracketPairColorization: {
 			enabled: true
 		},
+		'workbench.colorTheme': 'Default Dark Modern',
+		workbench: {
+			colorTheme: 'Default Dark Modern'
+		},
 		'bracketPairColorization.enabled': true,
 		matchBrackets: 'always' as 'always'
 	}

frontend/src/lib/scripts.ts

@@ -4,10 +4,12 @@ import type { Schema, SupportedLanguage } from './common'
 import { FlowService, type Script, ScriptService, ScheduleService } from './gen'
 import { workspaceStore } from './stores'
 
-export function scriptLangToEditorLang(lang: Script['language'] | 'bunnative' | undefined) {
+export function scriptLangToEditorLang(
+	lang: Script['language'] | 'bunnative' | 'frontend' | undefined
+) {
 	if (lang == 'deno') {
 		return 'typescript'
-	} else if (lang == 'bun' || lang == 'bunnative') {
+	} else if (lang == 'bun' || lang == 'bunnative' || lang == 'frontend') {
 		return 'typescript'
 	} else if (lang == 'nativets') {
 		return 'typescript'

frontend/src/routes/test_dev_page_2/+page.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+	import { initializeMode } from 'monaco-graphql/esm/initializeMode.js'
+	initializeMode()
+</script>

frontend/vite.config.js

@@ -3,6 +3,7 @@ import { readFileSync } from 'fs'
 import { fileURLToPath } from 'url'
 import circleDependency from 'vite-plugin-circular-dependency'
 // import mkcert from 'vite-plugin-mkcert'
+import importMetaUrlPlugin from '@windmill-labs/esbuild-import-meta-url-plugin'
 
 const file = fileURLToPath(new URL('package.json', import.meta.url))
 const json = readFileSync(file, 'utf8')
@@ -39,13 +40,23 @@ const config = {
 		__pkg__: version
 	},
 	optimizeDeps: {
-		include: ['highlight.js', 'highlight.js/lib/core']
+		include: ['highlight.js', 'highlight.js/lib/core'],
+		exclude: [
+			'@codingame/monaco-vscode-standalone-typescript-language-features',
+			'@codingame/monaco-vscode-standalone-languages',
+			'monaco-graphql'
+		],
+		esbuildOptions: {
+			plugins: [importMetaUrlPlugin]
+		}
 	},
 	resolve: {
 		alias: {
-			path: 'path-browserify'
+			path: 'path-browserify',
+			'vscode/vscode/vs/editor/contrib/hover/browser/hover':
+				'vscode/vscode/vs/editor/contrib/hover/browser/hoverController'
 		},
-		dedupe: ['monaco-editor', 'vscode']
+		dedupe: ['vscode', 'monaco-editor']
 	},
 	assetsInclude: ['**/*.wasm']
 }