update monaco to 24 (#7462)

* monaco24

* update

* update

* update

* update

* update

* update

* remove graphql support

* diff more pro-eminent

frontend/package.json

@@ -84,13 +84,13 @@
 	"dependencies": {
 		"@anthropic-ai/sdk": "^0.60.0",
 		"@aws-crypto/sha256-js": "^4.0.0",
-		"@codingame/monaco-vscode-editor-api": "=21.6.0",
-		"@codingame/monaco-vscode-languages-service-override": "=21.6.0",
-		"@codingame/monaco-vscode-standalone-css-language-features": "=21.6.0",
-		"@codingame/monaco-vscode-standalone-html-language-features": "=21.6.0",
-		"@codingame/monaco-vscode-standalone-json-language-features": "=21.6.0",
-		"@codingame/monaco-vscode-standalone-languages": "=21.6.0",
-		"@codingame/monaco-vscode-standalone-typescript-language-features": "=21.6.0",
+		"@codingame/monaco-vscode-editor-api": "=24.2.0",
+		"@codingame/monaco-vscode-languages-service-override": "=24.2.0",
+		"@codingame/monaco-vscode-standalone-css-language-features": "=24.2.0",
+		"@codingame/monaco-vscode-standalone-html-language-features": "=24.2.0",
+		"@codingame/monaco-vscode-standalone-json-language-features": "=24.2.0",
+		"@codingame/monaco-vscode-standalone-languages": "=24.2.0",
+		"@codingame/monaco-vscode-standalone-typescript-language-features": "=24.2.0",
 		"@json2csv/plainjs": "^7.0.6",
 		"@leeoniya/ufuzzy": "^1.0.8",
 		"@redocly/json-to-json-schema": "^0.0.1",
@@ -122,9 +122,9 @@
 		"lru-cache": "^11.1.0",
 		"lucide-svelte": "^0.540.0",
 		"minimatch": "^10.0.1",
-		"monaco-editor": "npm:@codingame/monaco-vscode-editor-api@=21.6.0",
-		"monaco-graphql": "=1.6.0",
-		"monaco-languageclient": "10.1.0",
+		"monaco-editor": "npm:@codingame/monaco-vscode-editor-api@=24.2.0",
+		"monaco-graphql": "=1.7.3",
+		"monaco-languageclient": "10.5.0",
 		"monaco-vim": "^0.4.1",
 		"ol": "^7.4.0",
 		"openai": "^6.9.1",
@@ -142,7 +142,7 @@
 		"svelte-exmarkdown": "^5.0.0",
 		"svelte-infinite-loading": "^1.4.0",
 		"tailwind-merge": "^1.13.2",
-		"vscode": "npm:@codingame/monaco-vscode-extension-api@=21.6.0",
+		"vscode": "npm:@codingame/monaco-vscode-extension-api@=24.2.0",
 		"vscode-languageclient": "~9.0.1",
 		"vscode-uri": "~3.1.0",
 		"vscode-ws-jsonrpc": "~3.5.0",

frontend/src/lib/components/Editor.svelte

@@ -1,6 +1,7 @@
 <script module>
 	import '@codingame/monaco-vscode-standalone-languages'
 	import '@codingame/monaco-vscode-standalone-typescript-language-features'
+	import { typescriptDefaults } from '@codingame/monaco-vscode-standalone-typescript-language-features'
 </script>
 
 <script lang="ts">
@@ -54,8 +55,8 @@
 		MONACO_Y_PADDING
 	} from '$lib/components/vscode'
 
-	import { initializeMode } from 'monaco-graphql/esm/initializeMode.js'
-	import type { MonacoGraphQLAPI } from 'monaco-graphql/esm/api.js'
+	// import { initializeMode } from 'monaco-graphql/esm/initializeMode.js'
+	// import type { MonacoGraphQLAPI } from 'monaco-graphql/esm/api.js'
 
 	import {
 		editor as meditor,
@@ -198,7 +199,7 @@
 	let nbWsAttempt = 0
 	let disposeMethod: (() => void) | undefined
 	const dispatch = createEventDispatcher()
-	let graphqlService: MonacoGraphQLAPI | undefined = undefined
+	// let graphqlService: MonacoGraphQLAPI | undefined = undefined
 
 	let dbSchema: DBSchema | undefined = $state(undefined)
 
@@ -606,7 +607,7 @@
 		sqlSchemaCompletor?.dispose()
 	}
 	function disposeGaphqlService() {
-		graphqlService = undefined
+		// graphqlService = undefined
 	}
 
 	function addDBSchemaCompletions() {
@@ -616,14 +617,16 @@
 		}
 		console.log('adding db schema completions', schemaLang)
 		if (schemaLang === 'graphql') {
-			graphqlService ||= initializeMode()
-			console.log('setting schema config', schema)
-			graphqlService?.setSchemaConfig([
-				{
-					uri: 'my-schema.graphql',
-					introspectionJSON: schema
-				}
-			])
+			//graphql depreciated until https://github.com/graphql/graphiql/issues/4104 is fixed with monaco > 0.52.2
+			// languages.register({ id: 'graphql' })
+			// graphqlService ||= initializeMode()
+			// console.log('setting schema config', schema)
+			// graphqlService?.setSchemaConfig([
+			// 	{
+			// 		uri: 'my-schema.graphql',
+			// 		introspectionJSON: schema
+			// 	}
+			// ])
 		} else {
 			if (sqlSchemaCompletor) {
 				sqlSchemaCompletor.dispose()
@@ -1582,7 +1585,7 @@
 		const isDucklakeOptional = ducklakeNames.includes('main')
 		const isDataTableOptional = datatableNames.includes('main')
 
-		let disposeTs = languages.typescript.typescriptDefaults.addExtraLib(
+		let disposeTs = typescriptDefaults.addExtraLib(
 			`export {};
 			declare module 'windmill-client' {
 				import { type DatatableSqlTemplateFunction, type SqlTemplateFunction } from 'windmill-client';
@@ -1613,14 +1616,14 @@
 				scriptLang === 'bunnative' ? 'bun' : scriptLang
 			)
 
-			languages.typescript.typescriptDefaults.addExtraLib(namespace, 'rt.d.ts')
+			typescriptDefaults.addExtraLib(namespace, 'rt.d.ts')
 		}
 	}
 
 	async function setTypescriptExtraLibs() {
 		if (extraLib) {
 			const uri = mUri.parse('file:///extraLib.d.ts')
-			languages.typescript.typescriptDefaults.addExtraLib(extraLib, uri.toString())
+			typescriptDefaults.addExtraLib(extraLib, uri.toString())
 		}
 
 		if (
@@ -1634,7 +1637,7 @@
 				const path = 'file://' + _path
 				let uri = mUri.parse(path)
 				console.log('adding library to runtime', path)
-				languages.typescript.typescriptDefaults.addExtraLib(code, path)
+				typescriptDefaults.addExtraLib(code, path)
 				try {
 					await vscode.workspace.fs.writeFile(uri, new TextEncoder().encode(code))
 				} catch (e) {

frontend/src/lib/components/EditorBar.svelte

@@ -1032,7 +1032,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 			{#if customUi?.diffMode != false}
 				<div class="flex items-center px-3">
 					<Toggle
-						options={{ right: '' }}
+						options={{ right: 'Diff' }}
 						size="sm"
 						checked={diffMode}
 						disabled={!lastDeployedCode}

frontend/src/lib/components/SimpleEditor.svelte

@@ -7,6 +7,7 @@
 	import '@codingame/monaco-vscode-standalone-css-language-features'
 	import '@codingame/monaco-vscode-standalone-typescript-language-features'
 	import '@codingame/monaco-vscode-standalone-html-language-features'
+	import { javascriptDefaults } from '@codingame/monaco-vscode-standalone-typescript-language-features'
 </script>
 
 <script lang="ts">
@@ -553,7 +554,7 @@
 				}
 				previousExtraLib = extraLib
 			}
-			languages.typescript.javascriptDefaults.setExtraLibs(libs)
+			javascriptDefaults.setExtraLibs(libs)
 		}
 	}
 

frontend/src/lib/components/TemplateEditor.svelte

@@ -1,5 +1,9 @@
 <script module>
 	import '@codingame/monaco-vscode-standalone-typescript-language-features'
+	import {
+		javascriptDefaults,
+		getJavaScriptWorker
+	} from '@codingame/monaco-vscode-standalone-typescript-language-features'
 </script>
 
 <script lang="ts">
@@ -15,7 +19,7 @@
 
 	import libStdContent from '$lib/es6.d.ts.txt?raw'
 	import { editor as meditor, Uri as mUri, languages, Range, KeyMod, KeyCode } from 'monaco-editor'
-	import { createEventDispatcher, getContext, onDestroy, onMount } from 'svelte'
+	import { createEventDispatcher, getContext, onDestroy, onMount, untrack } from 'svelte'
 	import type { AppViewerContext } from './apps/types'
 	import { writable } from 'svelte/store'
 	// import '@codingame/monaco-vscode-standalone-languages'
@@ -358,8 +362,8 @@
 		}
 	}
 
-	let divEl: HTMLDivElement | null = null
-	let editor: meditor.IStandaloneCodeEditor
+	let divEl: HTMLDivElement | null = $state(null)
+	let editor: meditor.IStandaloneCodeEditor | undefined = $state(undefined)
 	let model: meditor.ITextModel
 
 	const { componentControl, selectedComponent } = getContext<AppViewerContext>(
@@ -375,14 +379,29 @@
 		}
 	}
 
-	export let code: string = ''
-	export let hash: string = createHash()
-	export let automaticLayout = true
-	export let extraLib: string = ''
-	export let autoHeight = true
-	export let fixedOverflowWidgets = true
-	export let fontSize = 12
-	export let loadAsync = false
+	interface Props {
+		code?: string
+		hash?: string
+		automaticLayout?: boolean
+		extraLib?: string
+		autoHeight?: boolean
+		fixedOverflowWidgets?: boolean
+		fontSize?: number
+		loadAsync?: boolean
+		class?: string | undefined
+	}
+
+	let {
+		code = $bindable(),
+		hash = createHash(),
+		automaticLayout = true,
+		extraLib = '',
+		autoHeight = true,
+		fixedOverflowWidgets = true,
+		fontSize = 12,
+		loadAsync = false,
+		class: clazz = ''
+	}: Props = $props()
 
 	let yPadding = MONACO_Y_PADDING
 
@@ -419,10 +438,10 @@
 	let cip
 	let extraModel
 
-	let width = 0
+	let width = $state(0)
 	// let widgets: HTMLElement | undefined = document.getElementById('monaco-widgets-root') ?? undefined
 
-	let initialized = false
+	let initialized = $state(false)
 
 	let jsLoader: number | undefined = undefined
 	let timeoutModel: number | undefined = undefined
@@ -440,13 +459,13 @@
 
 		languages.setLanguageConfiguration('template', conf)
 
-		model = meditor.createModel(code, lang, mUri.parse(uri))
+		model = meditor.createModel(code ?? '', lang, mUri.parse(uri))
 
 		model.updateOptions(updateOptions)
 
 		try {
 			editor = meditor.create(divEl as HTMLDivElement, {
-				...editorConfig(code, lang, automaticLayout, fixedOverflowWidgets, false),
+				...editorConfig(code ?? '', lang, automaticLayout, fixedOverflowWidgets, false),
 				model,
 				// overflowWidgetsDomNode: widgets,
 				// lineNumbers: 'on',
@@ -497,9 +516,9 @@
 		editor.onDidFocusEditorText(() => {
 			dispatch('focus')
 
-			editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, function () {})
+			editor?.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, function () {})
 
-			editor.addCommand(KeyMod.CtrlCmd | KeyMod.Shift | KeyCode.Digit7, function () {})
+			editor?.addCommand(KeyMod.CtrlCmd | KeyMod.Shift | KeyCode.Digit7, function () {})
 		})
 
 		function updateCode() {
@@ -522,12 +541,12 @@
 
 		if (autoHeight) {
 			const updateHeight = () => {
-				const contentHeight = Math.min(1000, editor.getContentHeight())
+				const contentHeight = Math.min(1000, editor?.getContentHeight() ?? 0)
 				if (divEl) {
 					divEl.style.height = `${contentHeight}px`
 				}
 				try {
-					editor.layout({ width, height: contentHeight })
+					editor?.layout({ width, height: contentHeight })
 				} catch {}
 			}
 			editor.onDidContentSizeChange(updateHeight)
@@ -548,7 +567,7 @@
 		jsLoader = setTimeout(async () => {
 			jsLoader = undefined
 			try {
-				const worker = await languages.typescript.getJavaScriptWorker()
+				const worker = await getJavaScriptWorker()
 				const client = await worker(extraModel.uri)
 
 				cip = languages.registerCompletionItemProvider('template', {
@@ -637,8 +656,8 @@
 		editor?.focus()
 	}
 
-	let isFocus = false
-	let mounted = false
+	let isFocus = $state(false)
+	let mounted = $state(false)
 	let loadTimeout: number | undefined = undefined
 	onMount(async () => {
 		try {
@@ -658,8 +677,6 @@
 		}
 	})
 
-	$: mounted && extraLib && initialized && loadExtraLib()
-
 	function loadExtraLib() {
 		const stdLib = { content: libStdContent, filePath: 'es6.d.ts' }
 		const libs = [stdLib]
@@ -669,7 +686,7 @@
 				filePath: 'windmill.d.ts'
 			})
 		}
-		languages.typescript.javascriptDefaults.setExtraLibs(libs)
+		javascriptDefaults.setExtraLibs(libs)
 	}
 
 	onDestroy(() => {
@@ -684,16 +701,15 @@
 			extraModel && extraModel.dispose()
 		} catch (err) {}
 	})
+	$effect(() => {
+		mounted && extraLib && initialized && untrack(() => loadExtraLib())
+	})
 </script>
 
 <EditorTheme />
 
 <div
-	class={twMerge(
-		inputBorderClass({ forceFocus: isFocus }),
-		'rounded-md overflow-auto pl-2',
-		$$props.class
-	)}
+	class={twMerge(inputBorderClass({ forceFocus: isFocus }), 'rounded-md overflow-auto pl-2', clazz)}
 >
 	{#if !editor}
 		<FakeMonacoPlaceHolder autoheight showNumbers={false} {code} {fontSize} />

frontend/src/lib/components/copilot/autocomplete/Autocompletor.ts

@@ -8,6 +8,7 @@ import { setGlobalCSS } from '../shared'
 import { get } from 'svelte/store'
 import type { MonacoLanguageClient } from 'monaco-languageclient'
 import { copilotInfo } from '$lib/aiStore'
+import { getTypeScriptWorker } from '@codingame/monaco-vscode-standalone-typescript-language-features'
 
 // max ratio of completions to context window
 const COMPLETIONS_MAX_RATIO = 0.1
@@ -174,17 +175,17 @@ export class Autocompletor {
 								additionalTextEdits:
 									endsWithNewLine && !multiline
 										? [
-											{
-												range: toEol,
-												text: ''
-											}
-										]
+												{
+													range: toEol,
+													text: ''
+												}
+											]
 										: []
 							}
 						]
 					}
 				},
-				disposeInlineCompletions: () => { },
+				disposeInlineCompletions: () => {}
 			}
 		)
 
@@ -340,7 +341,7 @@ export class Autocompletor {
 		try {
 			const offs = model.getOffsetAt(position)
 
-			const workerFactory = await languages.typescript.getTypeScriptWorker()
+			const workerFactory = await getTypeScriptWorker()
 			const worker = await workerFactory(model.uri)
 			const info = await worker.getCompletionsAtPosition(model.uri.toString(), offs)
 

frontend/src/lib/components/monacoLanguagesOptions.ts

@@ -1,17 +1,24 @@
-import { languages } from 'monaco-editor'
 import processStdContent from '$lib/process.d.ts.txt?raw'
+import { jsonDefaults } from '@codingame/monaco-vscode-standalone-json-language-features'
+import {
+	javascriptDefaults,
+	JsxEmit,
+	ModuleResolutionKind,
+	ScriptTarget,
+	typescriptDefaults
+} from '@codingame/monaco-vscode-standalone-typescript-language-features'
 
 let jsonInitialized = false
 export function setMonacoJsonOptions() {
 	if (jsonInitialized) return
 	jsonInitialized = true
-	languages.json.jsonDefaults.setDiagnosticsOptions({
+	jsonDefaults.setDiagnosticsOptions({
 		validate: true,
 		allowComments: false,
 		schemas: [],
 		enableSchemaRequest: true
 	})
-	languages.json.jsonDefaults.setModeConfiguration({
+	jsonDefaults.setModeConfiguration({
 		documentRangeFormattingEdits: false,
 		documentFormattingEdits: true,
 		hovers: true,
@@ -31,9 +38,9 @@ export function setMonacoTypescriptOptions() {
 	if (typescriptInitialized) return
 	typescriptInitialized = true
 
-	languages.typescript.typescriptDefaults.addExtraLib(processStdContent, 'process.d.ts')
+	typescriptDefaults.addExtraLib(processStdContent, 'process.d.ts')
 
-	languages.typescript.typescriptDefaults.setModeConfiguration({
+	typescriptDefaults.setModeConfiguration({
 		completionItems: true,
 		hovers: true,
 		documentSymbols: true,
@@ -50,7 +57,7 @@ export function setMonacoTypescriptOptions() {
 	})
 
 	// languages.typescript.javascriptDefaults.setEagerModelSync(true)
-	languages.typescript.typescriptDefaults.setEagerModelSync(true)
+	typescriptDefaults.setEagerModelSync(true)
 
 	// languages.typescript.javascriptDefaults.setDiagnosticsOptions({
 	// 	noSemanticValidation: false,
@@ -59,7 +66,7 @@ export function setMonacoTypescriptOptions() {
 	// 	diagnosticCodesToIgnore: [1108]
 	// })
 
-	languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+	typescriptDefaults.setDiagnosticsOptions({
 		noSemanticValidation: false,
 		noSyntaxValidation: false,
 
@@ -67,8 +74,8 @@ export function setMonacoTypescriptOptions() {
 		diagnosticCodesToIgnore: [1108, 7006, 7034, 7019, 7005]
 	})
 
-	languages.typescript.typescriptDefaults.setCompilerOptions({
-		target: languages.typescript.ScriptTarget.Latest,
+	typescriptDefaults.setCompilerOptions({
+		target: ScriptTarget.Latest,
 		allowNonTsExtensions: true,
 		noSemanticValidation: false,
 		noSyntaxValidation: false,
@@ -92,8 +99,8 @@ export function setMonacoTypescriptOptions() {
 		noLib: false,
 		allowImportingTsExtensions: true,
 		allowSyntheticDefaultImports: true,
-		moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs,
-		jsx: languages.typescript.JsxEmit.React
+		moduleResolution: ModuleResolutionKind.NodeJs,
+		jsx: JsxEmit.React
 	})
 }
 
@@ -102,14 +109,14 @@ export function setMonacoJavascriptOptions() {
 	if (javascriptInitialized) return
 	javascriptInitialized = true
 
-	languages.typescript.javascriptDefaults.setCompilerOptions({
-		target: languages.typescript.ScriptTarget.Latest,
+	javascriptDefaults.setCompilerOptions({
+		target: ScriptTarget.Latest,
 		allowNonTsExtensions: true,
 		noSemanticValidation: false,
 		noLib: true,
-		moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
+		moduleResolution: ModuleResolutionKind.NodeJs
 	})
-	languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+	javascriptDefaults.setDiagnosticsOptions({
 		noSemanticValidation: false,
 		noSyntaxValidation: false,
 		noSuggestionDiagnostics: false,

frontend/src/lib/components/sqlTypeService.ts

@@ -6,9 +6,13 @@
  */
 
 import type { InferAssetsSqlQueryDetails } from '$lib/infer'
-import { languages, Uri, editor, MarkerSeverity } from 'monaco-editor'
+import {
+	getTypeScriptWorker,
+	type TypeScriptWorker
+} from '@codingame/monaco-vscode-standalone-typescript-language-features'
+import { Uri, editor, MarkerSeverity } from 'monaco-editor'
 
-type ExtendedTypeScriptWorker = languages.typescript.TypeScriptWorker & {
+type ExtendedTypeScriptWorker = TypeScriptWorker & {
 	updateSqlQueries: (fileUri: string, queries: InferAssetsSqlQueryDetails[]) => Promise<void>
 }
 
@@ -22,7 +26,7 @@ async function getWorkerClient(): Promise<(...uris: Uri[]) => Promise<ExtendedTy
 	try {
 		// Get or create the worker client
 		if (!_workerClient) {
-			_workerClient = (await languages.typescript.getTypeScriptWorker()) as any
+			_workerClient = (await getTypeScriptWorker()) as any
 		}
 		return _workerClient!
 	} catch (error) {
@@ -123,7 +127,7 @@ export async function updateSqlQueriesInWorker(
 async function revalidateModel(model: editor.ITextModel) {
 	if (!model || model.isDisposed()) return
 
-	const getWorker = await languages.typescript.getTypeScriptWorker()
+	const getWorker = await getTypeScriptWorker()
 	const worker = await getWorker(model.uri)
 	const diagnostics = (
 		await Promise.all([
@@ -149,7 +153,7 @@ async function revalidateModel(model: editor.ITextModel) {
 }
 
 function flattenDiagnosticMessageText(
-	messageText: string | languages.typescript.DiagnosticMessageChain | undefined,
+	messageText: string | any | undefined,
 	newLine: string
 ): string {
 	if (typeof messageText === 'string') {

frontend/src/lib/components/vscode.ts

@@ -14,7 +14,6 @@ import { getCssColor } from '$lib/utils'
 
 export function buildWorkerDefinition() {
 	const envEnhanced = getEnhancedMonacoEnvironment()
-
 	const getWorker = (moduleId: string, label: string) => {
 		console.log(`getWorker: moduleId: ${moduleId} label: ${label}`)
 
@@ -59,13 +58,10 @@ export function buildWorkerDefinition() {
 			},
 			typescript: () => {
 				// Use our custom TypeScript worker with SQL type inference plugin
-				return new Worker(
-					new URL('../monaco_workers/sqlTypePlugin.worker.js', import.meta.url),
-					{
-						type: 'module',
-						name: 'typescript-sql-aware'
-					}
-				)
+				return new Worker(new URL('../monaco_workers/sqlTypePlugin.worker.js', import.meta.url), {
+					type: 'module',
+					name: 'typescript-sql-aware'
+				})
 			},
 			json: () => {
 				return new Worker(
@@ -99,13 +95,13 @@ export function buildWorkerDefinition() {
 						type: 'module'
 					}
 				)
-			},
-			graphql: () => {
-				console.log('Creating graphql worker')
-				return new Worker(new URL(`../monaco_workers/graphql.worker.bundle.js`, import.meta.url), {
-					name: 'graphql'
-				})
 			}
+			// 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) {
@@ -129,6 +125,7 @@ export async function initializeVscode(caller?: string, htmlContainer?: HTMLElem
 				viewsConfig: {
 					$type: 'EditorService'
 				},
+
 				serviceOverrides: {
 					// ...getLogServiceOverride()
 					// ...getThemeServiceOverride(),