trim imports from monaco

frontend/src/lib/components/Editor.svelte

@@ -28,19 +28,19 @@
 	} from 'monaco-languageclient'
 	import { createEventDispatcher, onDestroy, onMount } from 'svelte'
 
-	import * as monaco from 'monaco-editor'
+	import { languages, editor as meditor, KeyCode, KeyMod, Uri as mUri } from 'monaco-editor'
 
-	monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
-		target: monaco.languages.typescript.ScriptTarget.Latest,
+	languages.typescript.typescriptDefaults.setCompilerOptions({
+		target: languages.typescript.ScriptTarget.Latest,
 		allowNonTsExtensions: true,
 		noLib: true
 	})
-	monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+	languages.typescript.typescriptDefaults.setDiagnosticsOptions({
 		noSemanticValidation: true,
 		noSuggestionDiagnostics: true,
 		noSyntaxValidation: true
 	})
-	monaco.editor.defineTheme('myTheme', {
+	meditor.defineTheme('myTheme', {
 		base: 'vs',
 		inherit: true,
 		rules: [],
@@ -49,7 +49,7 @@
 			'editorGutter.background': '#F9FAFB'
 		}
 	})
-	monaco.editor.setTheme('myTheme')
+	meditor.setTheme('myTheme')
 
 	import {
 		BASH_INIT_CODE,
@@ -66,7 +66,7 @@
 	import { dirtyStore } from './common/confirmationModal/dirtyStore'
 
 	let divEl: HTMLDivElement | null = null
-	let editor: monaco.editor.IStandaloneCodeEditor
+	let editor: meditor.IStandaloneCodeEditor
 
 	export let lang: 'typescript' | 'python' | 'go' | 'shell'
 	export let code: string = ''
@@ -406,10 +406,10 @@
 	}
 
 	async function loadMonaco() {
-		const model = monaco.editor.createModel(code, lang, monaco.Uri.parse(uri))
+		const model = meditor.createModel(code, lang, mUri.parse(uri))
 
 		model.updateOptions(updateOptions)
-		editor = monaco.editor.create(
+		editor = meditor.create(
 			divEl as HTMLDivElement,
 			editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets)
 		)
@@ -428,12 +428,12 @@
 		editor.onDidFocusEditorText(() => {
 			dispatch('focus')
 
-			editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
+			editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, function () {
 				code = getCode()
 				shouldBindKey && format && format()
 			})
 
-			editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, function () {
+			editor.addCommand(KeyMod.CtrlCmd | KeyCode.Enter, function () {
 				code = getCode()
 				shouldBindKey && cmdEnterAction && cmdEnterAction()
 			})
@@ -469,7 +469,7 @@
 	export function addAction(
 		id: string,
 		label: string,
-		callback: (editor: monaco.editor.IStandaloneCodeEditor) => void,
+		callback: (editor: meditor.IStandaloneCodeEditor) => void,
 		keybindings: number[] = []
 	) {
 		editor.addAction({
@@ -478,7 +478,7 @@
 			keybindings,
 			contextMenuGroupId: 'navigation',
 
-			run: function (editor: monaco.editor.IStandaloneCodeEditor) {
+			run: function (editor: meditor.IStandaloneCodeEditor) {
 				callback(editor)
 			}
 		})

frontend/src/lib/components/SimpleEditor.svelte

@@ -10,16 +10,17 @@
 
 	import { createEventDispatcher, onDestroy, onMount } from 'svelte'
 	import { createHash, editorConfig, langToExt, updateOptions } from '$lib/editorUtils'
-	import * as monaco from 'monaco-editor'
+	import { languages, editor as meditor, KeyCode, KeyMod, Uri as mUri } from 'monaco-editor'
+
 	import libStdContent from '$lib/es5.d.ts.txt?raw'
 
-	monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
-		target: monaco.languages.typescript.ScriptTarget.Latest,
+	languages.typescript.javascriptDefaults.setCompilerOptions({
+		target: languages.typescript.ScriptTarget.Latest,
 		allowNonTsExtensions: true,
 		noLib: true
 	})
 
-	monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+	languages.json.jsonDefaults.setDiagnosticsOptions({
 		validate: true,
 		allowComments: false,
 		schemas: [],
@@ -27,8 +28,8 @@
 	})
 
 	let divEl: HTMLDivElement | null = null
-	let editor: monaco.editor.IStandaloneCodeEditor
-	let model: monaco.editor.ITextModel
+	let editor: meditor.IStandaloneCodeEditor
+	let model: meditor.ITextModel
 
 	export let lang: string
 	export let code: string = ''
@@ -100,11 +101,11 @@
 
 	let width = 0
 	async function loadMonaco() {
-		model = monaco.editor.createModel(code, lang, monaco.Uri.parse(uri))
+		model = meditor.createModel(code, lang, mUri.parse(uri))
 
 		model.updateOptions(updateOptions)
 
-		editor = monaco.editor.create(
+		editor = meditor.create(
 			divEl as HTMLDivElement,
 			editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets)
 		)
@@ -137,12 +138,12 @@
 		}
 
 		editor.onDidFocusEditorText(() => {
-			editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
+			editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, function () {
 				code = getCode()
 				shouldBindKey && format && format()
 			})
 
-			editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, function () {
+			editor.addCommand(KeyMod.CtrlCmd | KeyCode.Enter, function () {
 				code = getCode()
 				shouldBindKey && cmdEnterAction && cmdEnterAction()
 			})
@@ -157,7 +158,7 @@
 		if (lang == 'javascript') {
 			const stdLib = { content: libStdContent, filePath: 'es5.d.ts' }
 			if (extraLib != '') {
-				monaco.languages.typescript.javascriptDefaults.setExtraLibs([
+				languages.typescript.javascriptDefaults.setExtraLibs([
 					{
 						content: extraLib,
 						filePath: 'windmill.d.ts'
@@ -165,7 +166,7 @@
 					stdLib
 				])
 			} else {
-				monaco.languages.typescript.javascriptDefaults.setExtraLibs([stdLib])
+				languages.typescript.javascriptDefaults.setExtraLibs([stdLib])
 			}
 		}
 	}

frontend/src/lib/components/TemplateEditor.svelte

@@ -15,16 +15,17 @@
 		updateOptions
 	} from '$lib/editorUtils'
 
-	import * as monaco from 'monaco-editor'
+	import { languages, editor as meditor, Uri as mUri, Range } from 'monaco-editor'
+
 	import libStdContent from '$lib/es5.d.ts.txt?raw'
 
-	monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
-		target: monaco.languages.typescript.ScriptTarget.Latest,
+	languages.typescript.javascriptDefaults.setCompilerOptions({
+		target: languages.typescript.ScriptTarget.Latest,
 		allowNonTsExtensions: true,
 		noLib: true
 	})
 
-	monaco.languages.register({ id: 'template' })
+	languages.register({ id: 'template' })
 
 	export const conf = {
 		wordPattern:
@@ -356,15 +357,15 @@
 	}
 
 	// Register a tokens provider for the language
-	monaco.languages.registerTokensProviderFactory('template', {
-		create: () => language as monaco.languages.IMonarchLanguage
+	languages.registerTokensProviderFactory('template', {
+		create: () => language as languages.IMonarchLanguage
 	})
 
-	monaco.languages.setLanguageConfiguration('template', conf)
+	languages.setLanguageConfiguration('template', conf)
 
 	let divEl: HTMLDivElement | null = null
-	let editor: monaco.editor.IStandaloneCodeEditor
-	let model: monaco.editor.ITextModel
+	let editor: meditor.IStandaloneCodeEditor
+	let model: meditor.ITextModel
 
 	export let code: string = ''
 	export let hash: string = createHash()
@@ -417,11 +418,11 @@
 
 	let width = 0
 	async function loadMonaco() {
-		model = monaco.editor.createModel(code, lang, monaco.Uri.parse(uri))
+		model = meditor.createModel(code, lang, mUri.parse(uri))
 
 		model.updateOptions(updateOptions)
 
-		editor = monaco.editor.create(divEl as HTMLDivElement, {
+		editor = meditor.create(divEl as HTMLDivElement, {
 			...editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets),
 			lineNumbers: 'off',
 			fontSize: 16,
@@ -431,7 +432,7 @@
 
 		const stdLib = { content: libStdContent, filePath: 'es5.d.ts' }
 		if (extraLib != '') {
-			monaco.languages.typescript.javascriptDefaults.setExtraLibs([
+			languages.typescript.javascriptDefaults.setExtraLibs([
 				{
 					content: extraLib,
 					filePath: 'windmill.d.ts'
@@ -439,14 +440,14 @@
 				stdLib
 			])
 		} else {
-			monaco.languages.typescript.javascriptDefaults.setExtraLibs([stdLib])
+			languages.typescript.javascriptDefaults.setExtraLibs([stdLib])
 		}
 
-		extraModel = monaco.editor.createModel('`' + model.getValue() + '`', 'javascript')
-		const worker = await monaco.languages.typescript.getJavaScriptWorker()
+		extraModel = meditor.createModel('`' + model.getValue() + '`', 'javascript')
+		const worker = await languages.typescript.getJavaScriptWorker()
 		const client = await worker(extraModel.uri)
 
-		cip = monaco.languages.registerCompletionItemProvider('template', {
+		cip = languages.registerCompletionItemProvider('template', {
 			triggerCharacters: ['.'],
 
 			provideCompletionItems: async (model, position) => {
@@ -458,7 +459,7 @@
 					return { suggestions: [] }
 				}
 				const wordInfo = model.getWordUntilPosition(position)
-				const wordRange = new monaco.Range(
+				const wordRange = new Range(
 					position.lineNumber,
 					wordInfo.startColumn,
 					position.lineNumber,
@@ -474,12 +475,12 @@
 							const p2 = model.getPositionAt(
 								entry.replacementSpan.start + entry.replacementSpan.length
 							)
-							range = new monaco.Range(p1.lineNumber, p1.column, p2.lineNumber, p2.column)
+							range = new Range(p1.lineNumber, p1.column, p2.lineNumber, p2.column)
 						}
 
-						const tags: monaco.languages.CompletionItemTag[] = []
+						const tags: languages.CompletionItemTag[] = []
 						if (entry.kindModifiers?.indexOf('deprecated') !== -1) {
-							tags.push(monaco.languages.CompletionItemTag.Deprecated)
+							tags.push(languages.CompletionItemTag.Deprecated)
 						}
 						return {
 							uri: model.uri,
@@ -495,7 +496,7 @@
 					})
 				return { suggestions }
 			},
-			resolveCompletionItem: async (item: monaco.languages.CompletionItem, token: any) => {
+			resolveCompletionItem: async (item: languages.CompletionItem, token: any) => {
 				extraModel.setValue('`' + model.getValue() + '`')
 
 				const myItem = <any>item