chore: update monaco/vscode (#5770)

frontend/package.json

@@ -80,12 +80,13 @@
 	"type": "module",
 	"dependencies": {
 		"@aws-crypto/sha256-js": "^4.0.0",
-		"@codingame/monaco-vscode-configuration-service-override": "~11.1.2",
-		"@codingame/monaco-vscode-standalone-css-language-features": "~11.1.2",
-		"@codingame/monaco-vscode-standalone-html-language-features": "^11.1.2",
-		"@codingame/monaco-vscode-standalone-json-language-features": "~11.1.2",
-		"@codingame/monaco-vscode-standalone-languages": "~11.1.2",
-		"@codingame/monaco-vscode-standalone-typescript-language-features": "~11.1.2",
+		"@codingame/monaco-vscode-configuration-service-override": "~16.1.1",
+		"@codingame/monaco-vscode-standalone-css-language-features": "~16.1.1",
+		"@codingame/monaco-vscode-standalone-html-language-features": "^16.1.1",
+		"@codingame/monaco-vscode-standalone-json-language-features": "~16.1.1",
+		"@codingame/monaco-vscode-standalone-languages": "~16.1.1",
+		"@codingame/monaco-vscode-standalone-typescript-language-features": "~16.1.1",
+		"@codingame/monaco-vscode-editor-api": "~16.1.1",
 		"@json2csv/plainjs": "^7.0.6",
 		"@leeoniya/ufuzzy": "^1.0.8",
 		"@popperjs/core": "^2.11.6",
@@ -113,10 +114,10 @@
 		"idb": "^8.0.2",
 		"lucide-svelte": "^0.399.0",
 		"minimatch": "^10.0.1",
-		"monaco-editor": "npm:@codingame/monaco-vscode-editor-api@~11.1.2",
-		"monaco-editor-wrapper": "6.1.1",
+		"monaco-editor": "npm:@codingame/monaco-vscode-editor-api@~16.1.1",
+		"monaco-editor-wrapper": "6.7.0",
 		"monaco-graphql": "^1.6.0",
-		"monaco-languageclient": "9.1.1",
+		"monaco-languageclient": "9.6.0",
 		"monaco-vim": "^0.4.1",
 		"ol": "^7.4.0",
 		"openai": "^4.87.1",
@@ -132,9 +133,9 @@
 		"svelte-infinite-loading": "^1.4.0",
 		"svelte-tiny-virtual-list": "^2.0.5",
 		"tailwind-merge": "^1.13.2",
-		"vscode": "npm:@codingame/monaco-vscode-api@~11.1.2",
+		"vscode": "npm:@codingame/monaco-vscode-extension-api@~16.1.1",
 		"vscode-languageclient": "~9.0.1",
-		"vscode-uri": "~3.0.8",
+		"vscode-uri": "~3.1.0",
 		"vscode-ws-jsonrpc": "~3.4.0",
 		"windmill-parser-wasm-csharp": "^1.437.1",
 		"windmill-parser-wasm-go": "^1.429.0",

frontend/src/lib/components/ArgInput.svelte

@@ -547,7 +547,7 @@
 								bind:selected={value}
 								options={itemsType?.multiselect ?? []}
 								selectedOptionsDraggable={true}
-								on:open={() => {
+								onopen={() => {
 									dispatch('focus')
 								}}
 							/>
@@ -568,7 +568,7 @@
 								}
 								options={itemsType?.enum ?? []}
 								selectedOptionsDraggable={true}
-								on:open={() => {
+								onopen={() => {
 									dispatch('focus')
 								}}
 							/>

frontend/src/lib/components/AutoscalingConfigEditor.svelte

@@ -207,25 +207,23 @@
 								<MultiSelect
 									outerDivClass="text-secondary !bg-surface-disabled !border-0"
 									selected={config.custom_tags}
-									on:change={(e) => {
-										console.log(e.detail.type, config?.custom_tags)
-										if (e.detail && config?.custom_tags) {
-											if (e.detail.type === 'add') {
+									onchange={(e) => {
+										console.log(e.type, config?.custom_tags)
+										if (e && config?.custom_tags) {
+											if (e.type === 'add') {
 												config.custom_tags = [
 													...config.custom_tags,
-													...(e.detail.option ? [e.detail.option.toString()] : [])
+													...(e.option ? [e.option.toString()] : [])
 												]
-											} else if (e.detail.type === 'remove') {
-												config.custom_tags = config.custom_tags.filter((t) => t !== e.detail.option)
+											} else if (e.type === 'remove') {
+												config.custom_tags = config.custom_tags.filter((t) => t !== e.option)
 												if (config?.custom_tags && config.custom_tags.length == 0) {
 													config.custom_tags = undefined
 												}
-											} else if (e.detail.type === 'removeAll') {
+											} else if (e.type === 'removeAll') {
 												config.custom_tags = undefined
 											} else {
-												console.error(
-													`Priority tags multiselect - unknown event type: '${e.detail.type}'`
-												)
+												console.error(`Priority tags multiselect - unknown event type: '${e.type}'`)
 											}
 											dispatch('dirty')
 										}

frontend/src/lib/components/DiffEditor.svelte

@@ -2,18 +2,15 @@
 	import { BROWSER } from 'esm-env'
 	import { createEventDispatcher, onMount } from 'svelte'
 
-	// import '@codingame/monaco-vscode-standalone-languages'
+	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 { initializeVscode } from './vscode'
 	import EditorTheme from './EditorTheme.svelte'
-	import { buildWorkerDefinition } from '$lib/monaco_workers/build_workers'
 	import Button from '$lib/components/common/button/Button.svelte'
 
-	buildWorkerDefinition()
-
 	const SIDE_BY_SIDE_MIN_WIDTH = 700
 
 	export let automaticLayout = true

frontend/src/lib/components/Editor.svelte

@@ -112,7 +112,6 @@
 		updateOptions,
 		extToLang
 	} from '$lib/editorUtils'
-	import type { Disposable } from 'vscode'
 	import { workspaceStore } from '$lib/stores'
 	import { type Preview, ResourceService, UserService } from '$lib/gen'
 	import type { Text } from 'yjs'
@@ -143,7 +142,6 @@
 	import { setupTypeAcquisition, type DepsToGet } from '$lib/ata/index'
 	import { initWasmTs } from '$lib/infer'
 	import { initVim } from './monaco_keybindings'
-	import { buildWorkerDefinition } from '$lib/monaco_workers/build_workers'
 	import { parseTypescriptDeps } from '$lib/relative_imports'
 
 	import { scriptLangToEditorLang } from '$lib/scripts'
@@ -219,7 +217,6 @@
 
 	console.log('uri', uri)
 
-	buildWorkerDefinition()
 
 	function computeUri(filePath: string, scriptLang: string | undefined) {
 		let file
@@ -435,9 +432,9 @@
 		return scriptLang
 	}
 
-	let command: Disposable | undefined = undefined
+	let command: IDisposable | undefined = undefined
 
-	let sqlTypeCompletor: Disposable | undefined = undefined
+	let sqlTypeCompletor: IDisposable | undefined = undefined
 
 	$: initialized && lang === 'sql' && scriptLang
 		? addSqlTypeCompletions()
@@ -498,7 +495,7 @@
 		})
 	}
 
-	let sqlSchemaCompletor: Disposable | undefined = undefined
+	let sqlSchemaCompletor: IDisposable | undefined = undefined
 
 	function updateSchema() {
 		const newSchemaRes = lang === 'graphql' ? args?.api : args?.database
@@ -636,7 +633,7 @@
 
 	$: $reviewingChanges && autocompletor?.reject()
 
-	let completorDisposable: Disposable | undefined = undefined
+	let completorDisposable: IDisposable | undefined = undefined
 	let autocompletor: Autocompletor | undefined = undefined
 	function addSuperCompletor(editor: meditor.IStandaloneCodeEditor) {
 		try {

frontend/src/lib/components/FlowStatusViewerInner.svelte

@@ -495,7 +495,6 @@
 
 	async function updateJobId() {
 		if (jobId !== job?.id) {
-			console.log('updating job id', globalDurationStatuses.length)
 			$localModuleStates = {}
 			flowTimeline?.reset()
 			timeout && clearTimeout(timeout)

frontend/src/lib/components/GraphqlSchemaViewer.svelte

@@ -2,7 +2,6 @@
 	import { BROWSER } from 'esm-env'
 
 	import { editor as meditor } from 'monaco-editor'
-	// import '@codingame/monaco-vscode-standalone-languages'
 
 	import { onDestroy, onMount } from 'svelte'
 

frontend/src/lib/components/SimpleEditor.svelte

@@ -2,7 +2,7 @@
 	let cssClassesLoaded = $state(false)
 	let tailwindClassesLoaded = $state(false)
 
-	// import '@codingame/monaco-vscode-standalone-languages'
+	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'
@@ -54,7 +54,6 @@
 		type IDisposable
 	} from 'monaco-editor'
 
-
 	import { allClasses } from './apps/editor/componentsPanel/cssUtils'
 
 	import { createEventDispatcher, onDestroy, onMount } from 'svelte'
@@ -65,7 +64,6 @@
 	import EditorTheme from './EditorTheme.svelte'
 	import { vimMode } from '$lib/stores'
 	import { initVim } from './monaco_keybindings'
-	import { buildWorkerDefinition } from '$lib/monaco_workers/build_workers'
 	import FakeMonacoPlaceHolder from './FakeMonacoPlaceHolder.svelte'
 	// import { createConfiguredEditor } from 'vscode/monaco'
 	// import type { IStandaloneCodeEditor } from 'vscode/vscode/vs/editor/standalone/browser/standaloneCodeEditor'
@@ -131,8 +129,6 @@
 
 	const uri = `file:///${hash}.${langToExt(lang)}`
 
-	buildWorkerDefinition()
-
 	export function getCode(): string {
 		return editor?.getValue() ?? ''
 	}

frontend/src/lib/components/TemplateEditor.svelte

@@ -14,11 +14,11 @@
 	import type { AppViewerContext } from './apps/types'
 	import { writable } from 'svelte/store'
 	// import '@codingame/monaco-vscode-standalone-languages'
-	import '@codingame/monaco-vscode-standalone-typescript-language-features'
+
+	// 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'
 	import FakeMonacoPlaceHolder from './FakeMonacoPlaceHolder.svelte'
 
 	export const conf = {
@@ -386,8 +386,6 @@
 
 	const uri = `file:///${hash}.ts`
 
-	buildWorkerDefinition()
-
 	export function insertAtCursor(code: string): void {
 		if (editor) {
 			editor.trigger('keyboard', 'type', { text: code })

frontend/src/lib/components/WorkerGroup.svelte

@@ -367,28 +367,26 @@
 									outerDivClass="text-secondary !bg-surface-disabled !border-0"
 									disabled={!$enterpriseLicense}
 									bind:selected={selectedPriorityTags}
-									on:change={(e) => {
-										if (e.detail.type === 'add') {
+									onchange={(e) => {
+										if (e.type === 'add') {
 											if (nconfig.priority_tags) {
-												if (e.detail.option && typeof e.detail.option !== 'object') {
-													nconfig.priority_tags[e.detail.option] = 100
+												if (e.option && typeof e.option !== 'object') {
+													nconfig.priority_tags[e.option] = 100
 												}
 											}
 											dirty = true
-										} else if (e.detail.type === 'remove') {
+										} else if (e.type === 'remove') {
 											if (nconfig.priority_tags) {
-												if (e.detail.option && typeof e.detail.option !== 'object') {
-													delete nconfig.priority_tags[e.detail.option]
+												if (e.option && typeof e.option !== 'object') {
+													delete nconfig.priority_tags[e.option]
 												}
 											}
 											dirty = true
-										} else if (e.detail.type === 'removeAll') {
-											nconfig.priority_tags = undefined
+										} else if (e.type === 'removeAll') {
+											nconfig.priority_tags = new Map<string, number>()
 											dirty = true
 										} else {
-											console.error(
-												`Priority tags multiselect - unknown event type: '${e.detail.type}'`
-											)
+											console.error(`Priority tags multiselect - unknown event type: '${e.type}'`)
 										}
 									}}
 									options={nconfig?.worker_tags}

frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte

@@ -157,34 +157,35 @@
 				options={Array.isArray(items) ? items : []}
 				placeholder={resolvedConfig.placeholder}
 				allowUserOptions={resolvedConfig.create}
-				on:change={(event) => {
-					if (event?.detail?.type === 'removeAll') {
+				onchange={(event) => {
+					if (event?.type === 'removeAll') {
 						outputs?.result.set([])
 					} else {
 						outputs?.result.set([...(value ?? [])])
 					}
 				}}
-				on:open={() => {
+				onopen={() => {
 					$selectedComponent = [id]
 					open = true
 				}}
-				on:close={() => {
+				onclose={() => {
 					open = false
 				}}
-				let:option
 			>
-				<!-- needed because portal doesn't work for mouseup event en mobile -->
-				<!-- svelte-ignore a11y-no-static-element-interactions -->
-				<div
-					class="w-full"
-					on:mouseup|stopPropagation
-					on:pointerdown|stopPropagation={(e) => {
-						let newe = new MouseEvent('mouseup')
-						e.target?.['parentElement']?.dispatchEvent(newe)
-					}}
-				>
-					{option}
-				</div>
+				{#snippet children({ option })}
+					<!-- needed because portal doesn't work for mouseup event en mobile -->
+					<!-- svelte-ignore a11y-no-static-element-interactions -->
+					<div
+						class="w-full"
+						on:mouseup|stopPropagation
+						on:pointerdown|stopPropagation={(e) => {
+							let newe = new MouseEvent('mouseup')
+							e.target?.['parentElement']?.dispatchEvent(newe)
+						}}
+					>
+						{option}
+					</div>
+				{/snippet}
 			</MultiSelect>
 			<Portal name="app-multiselect">
 				<div use:floatingContent class="z5000" hidden={!open}>

frontend/src/lib/components/triggers/postgres/RelationPicker.svelte

@@ -128,19 +128,19 @@
 												selected={table_to_track.columns_name ?? []}
 												placeholder="Select columns"
 												--sms-options-margin="4px"
-												on:change={(e) => {
-													const option = e.detail.option?.toString()
-													if (e.detail.type === 'add') {
+												onchange={(e) => {
+													const option = e.option?.toString()
+													if (e.type === 'add') {
 														option && table_to_track.columns_name?.push(option)
-													} else if (e.detail.type === 'remove') {
+													} else if (e.type === 'remove') {
 														table_to_track.columns_name = table_to_track.columns_name?.filter(
 															(column) => column !== option
 														)
-													} else if (e.detail.type === 'removeAll') {
+													} else if (e.type === 'removeAll') {
 														table_to_track.columns_name = []
 													} else {
 														console.error(
-															`Priority tags multiselect - unknown event type: '${e.detail.type}'`
+															`Priority tags multiselect - unknown event type: '${e.type}'`
 														)
 													}
 												}}

frontend/src/lib/components/vscode.ts

@@ -9,6 +9,114 @@ import { editor as meditor } from 'monaco-editor/esm/vs/editor/editor.api'
 export let isInitialized = false
 export let isInitializing = false
 
+import { getEnhancedMonacoEnvironment } from 'monaco-languageclient/vscode/services'
+
+export function buildWorkerDefinition() {
+	const envEnhanced = getEnhancedMonacoEnvironment()
+
+	const getWorker = (moduleId: string, label: string) => {
+		console.log(`getWorker: moduleId: ${moduleId} label: ${label}`)
+
+		let selector = label
+
+		// const defaultTextEditorWorker = () => new Worker(
+		// 	new URL('@codingame/monaco-vscode-editor-api/esm/vs/editor/editor.worker.js', import.meta.url),
+		// 	{ type: 'module' }
+		// );
+		// const defaultTextMateWorker = () => new Worker(
+		// 	new URL('@codingame/monaco-vscode-textmate-service-override/worker', import.meta.url),
+		// 	{ type: 'module' }
+		// );
+
+		let workerLoaders = {
+			TextEditorWorker: () => {
+				return new Worker(
+					new URL(
+						'@codingame/monaco-vscode-editor-api/esm/vs/editor/editor.worker.js',
+						import.meta.url
+					),
+					{
+						type: 'module'
+					}
+				)
+			},
+			// javascript: () => {
+			// 	return new Worker(new URL('monaco-editor-wrapper/workers/module/ts', import.meta.url), {
+			// 		type: 'module'
+			// 	})
+			// },
+			javascript: () => {
+				return new Worker(
+					new URL(
+						'@codingame/monaco-vscode-standalone-typescript-language-features/worker',
+						import.meta.url
+					),
+					{
+						type: 'module'
+					}
+				)
+			},
+			typescript: () => {
+				return new Worker(
+					new URL(
+						'@codingame/monaco-vscode-standalone-typescript-language-features/worker',
+						import.meta.url
+					),
+					{
+						type: 'module'
+					}
+				)
+			},
+			json: () => {
+				return new Worker(
+					new URL(
+						'@codingame/monaco-vscode-standalone-json-language-features/worker',
+						import.meta.url
+					),
+					{
+						type: 'module'
+					}
+				)
+			},
+			html: () => {
+				return new Worker(
+					new URL(
+						'@codingame/monaco-vscode-standalone-html-language-features/worker',
+						import.meta.url
+					),
+					{
+						type: 'module'
+					}
+				)
+			},
+			css: () => {
+				return new Worker(
+					new URL(
+						'@codingame/monaco-vscode-standalone-css-language-features/worker',
+						import.meta.url
+					),
+					{
+						type: 'module'
+					}
+				)
+			},
+			graphql: () => {
+				console.log('Creating graphql worker')
+				return new Worker(new URL(`../monaco_workers/graphql.worker.bundle.js`, import.meta.url), {
+					name: 'graphql'
+				})
+			}
+		}
+		const workerFunc = workerLoaders[selector]
+		if (workerFunc !== undefined) {
+			return workerFunc()
+		} else {
+			throw new Error(`Unimplemented worker ${label} (${moduleId})`)
+		}
+	}
+	envEnhanced.getWorker = getWorker
+}
+
 export async function initializeVscode(caller?: string, htmlContainer?: HTMLElement) {
 	if (!isInitialized && !isInitializing) {
 		console.log(`Initializing vscode-api from ${caller ?? 'unknown'}`)
@@ -16,20 +124,25 @@ export async function initializeVscode(caller?: string, htmlContainer?: HTMLElem
 
 		try {
 			// init vscode-api
-			await initServices({
-				serviceOverrides: {
-					// ...getThemeServiceOverride(),
-					// ...getTextmateServiceOverride()
-					...getConfigurationServiceOverride(),
-					...getMonarchServiceOverride()
+			await initServices(
+				{
+					serviceOverrides: {
+						// ...getThemeServiceOverride(),
+						// ...getTextmateServiceOverride()
+						...getConfigurationServiceOverride(),
+						...getMonarchServiceOverride()
+					},
+					enableExtHostWorker: false,
+					userConfiguration: {
+						json: JSON.stringify({
+							'editor.experimental.asyncTokenization': true
+						})
+					}
 				},
-				enableExtHostWorker: false,
-				userConfiguration: {
-					json: JSON.stringify({
-						'editor.experimental.asyncTokenization': true
-					})
+				{
+					monacoWorkerFactory: buildWorkerDefinition
 				}
-			})
+			)
 
 			isInitialized = true
 			meditor.defineTheme('nord', {

frontend/src/lib/editorUtils.ts

@@ -1,5 +1,7 @@
 import { languages } from 'monaco-editor/esm/vs/editor/editor.api'
-import { ShowLightbulbIconMode } from 'vscode/vscode/vs/editor/common/config/editorOptions'
+
+import { editor as meditor } from 'monaco-editor/esm/vs/editor/editor.api'
+
 export function editorConfig(
 	code: string,
 	lang: string,
@@ -22,7 +24,7 @@ export function editorConfig(
 			enabled: false
 		},
 		lightbulb: {
-			enabled: ShowLightbulbIconMode.On
+			enabled: meditor.ShowLightbulbIconMode.On
 		},
 		suggest: {
 			showKeywords: true

frontend/src/lib/monaco_workers/build_workers.ts

@@ -1,61 +0,0 @@
-import { initEnhancedMonacoEnvironment } from 'monaco-languageclient/vscode/services'
-
-// 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() {
-	const envEnhanced = initEnhancedMonacoEnvironment()
-
-	const getWorker = (moduleId: string, label: string) => {
-		console.log(`getWorker: moduleId: ${moduleId} label: ${label}`)
-
-		let selector = label
-		let 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'
-				})
-			}
-		}
-		const workerFunc = workerLoaders[selector]
-		if (workerFunc !== undefined) {
-			return workerFunc()
-		} else {
-			throw new Error(`Unimplemented worker ${label} (${moduleId})`)
-		}
-	}
-	envEnhanced.getWorker = getWorker
-}

frontend/vite.config.js

@@ -48,7 +48,7 @@ const config = {
 		__pkg__: version
 	},
 	optimizeDeps: {
-		include: ['highlight.js', 'highlight.js/lib/core', 'monaco-vim'],
+		include: ['highlight.js', 'highlight.js/lib/core', 'monaco-vim', 'monaco-editor-wrapper'],
 		exclude: [
 			'@codingame/monaco-vscode-standalone-typescript-language-features',
 			'@codingame/monaco-vscode-standalone-languages'
@@ -64,7 +64,7 @@ const config = {
 		alias: {
 			path: 'path-browserify',
 			'monaco-editor/esm/vs/editor/contrib/hover/browser/hover':
-				'vscode/vscode/vs/editor/contrib/hover/browser/hoverContribution'
+				'monaco-editor/esm/vs/editor/contrib/hover/browser/hoverContribution'
 		},
 		dedupe: ['vscode', 'monaco-editor']
 	},