windmill-components 1.55.2 → 1.56.2

package/assets/app.css

@@ -0,0 +1,54 @@
+/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	@font-face {
+		font-family: 'Inter';
+		src: url('/Inter-Variable.ttf');
+		font-weight: 100 900;
+		font-display: swap;
+	}
+
+	.splitpanes--vertical > .splitpanes__pane {
+		transition: none !important;
+	}
+
+	.splitpanes--horizontal > .splitpanes__pane {
+		transition: none !important;
+	}
+
+	.monaco-workbench > .notifications-toasts.visible {
+		display: none !important;
+	}
+
+	.nowrap pre code.hljs {
+		whitespace: normal !important;
+	}
+
+	svelte-virtual-list-row {
+		overflow: visible !important;
+	}
+
+	svelte-virtual-list-contents > * + * {
+		border-top-width: 1px !important;
+		border-bottom-width: 0px !important;
+	}
+
+	.monaco-editor textarea:focus {
+		box-shadow: none !important;
+	}
+
+	.templatable-editor span.mtk20 {
+		color: black !important;
+	}
+}
+
+@layer components {
+	/* Flow graph viewer -> Svelvet library internal class overwrite */
+	.Node {
+		display: flex !important;
+		cursor: pointer !important;
+	}
+}

package/components/CenteredModal.svelte

@@ -1,10 +1,11 @@
 <script>import { SettingsService } from '../gen';
+import { onMount } from 'svelte';
 import WindmillIcon from './icons/WindmillIcon.svelte';
 export let subtitle = undefined;
 export let title = 'Windmill';
 let version = '';
-SettingsService.backendVersion().then((x) => {
-    version = x;
+onMount(async () => {
+    version = await SettingsService.backendVersion();
 });
 </script>
 

package/components/Dropdown.svelte

@@ -20,8 +20,7 @@ const dispatch = createEventDispatcher();
 		{#each dropdownItems as item, i}
 			{#if item.action}
 				<button
-					on:click={(event) => {
-						event.preventDefault()
+					on:click|preventDefault|stopPropagation={(event) => {
 						if (!item.disabled) {
 							close()
 							item.action && item.action(event)
@@ -30,7 +29,7 @@ const dispatch = createEventDispatcher();
 					}}
 					class="block w-full  whitespace-nowrap hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30
 					 px-4 py-2 text-sm text-gray-700 text-left 
-					 {item.disabled ? 'bg-gray-100' : ''}
+					 {item.disabled ? 'bg-gray-200' : ''}
 					 {item.separatorTop ? 'border-t' : ''} {item.separatorBottom ? 'border-b' : ''} {item.type ==
 					'delete'
 						? 'text-red-500'
@@ -52,14 +51,9 @@ const dispatch = createEventDispatcher();
 			{:else if item.href && !item.disabled}
 				<a
 					href={item.href}
-					on:click={(e) => {
-						if (!item.disabled) {
-							close()
-						} else {
-							e.preventDefault()
-						}
-					}}
-					class="block w-full px-4 font-semibold  py-2 text-sm text-gray-700 hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30"
+					on:click|stopPropagation
+					class="block w-full px-4 font-semibold text-left  py-2 text-sm text-gray-700 hover:drop-shadow-sm hover:bg-gray-50 hover:bg-opacity-30
+					{item.disabled ? 'bg-gray-200' : ''}"
 					role="menuitem"
 					tabindex="-1"
 					id="user-menu-item-{name}-{i}}"
@@ -77,11 +71,11 @@ const dispatch = createEventDispatcher();
 			{:else}
 				<span
 					class:bg-gray-50={item.disabled}
-					class="block  px-4 py-2 text-sm text-gray-700 cursor-auto"
+					class="block  text-left px-4 py-2 text-sm text-gray-700 cursor-auto"
 					role="menuitem"
 					tabindex="-1"
 					id="user-menu-item-{name}-{i}}"
-					on:click|preventDefault
+					on:click|preventDefault|stopPropagation
 				>
 					{#if item.icon}
 						<Icon

package/components/Editor.svelte

@@ -1,26 +1,7 @@
-<script context="module">import * as monaco from 'monaco-editor';
-monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
-    target: monaco.languages.typescript.ScriptTarget.Latest,
-    allowNonTsExtensions: true,
-    noLib: true
-});
-monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
-    noSemanticValidation: true,
-    noSuggestionDiagnostics: true,
-    noSyntaxValidation: true
-});
-monaco.editor.defineTheme('myTheme', {
-    base: 'vs',
-    inherit: true,
-    rules: [],
-    colors: {
-        'editorLineNumber.foreground': '#999',
-        'editorGutter.background': '#F9FAFB'
-    }
-});
-monaco.editor.setTheme('myTheme');
+<script context="module">import getMessageServiceOverride from 'vscode/service-override/messages';
+import { StandaloneServices } from 'vscode/services';
 try {
-    StandaloneServices.initialize({
+    StandaloneServices?.initialize({
         ...getMessageServiceOverride(document.body)
     });
 }
@@ -29,18 +10,37 @@ catch (e) {
 }
 </script>
 
-<script>import { browser, dev } from '$app/env';
+<script>import { browser, dev } from '$app/environment';
 import { page } from '$app/stores';
 import { sendUserToast } from '../utils';
 import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
 import { buildWorkerDefinition } from 'monaco-editor-workers';
-import getMessageServiceOverride from 'vscode/service-override/messages';
 import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+import { languages, editor as meditor, KeyCode, KeyMod, Uri as mUri } from 'monaco-editor';
+languages.typescript.typescriptDefaults.setCompilerOptions({
+    target: languages.typescript.ScriptTarget.Latest,
+    allowNonTsExtensions: true,
+    noLib: true
+});
+languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+    noSemanticValidation: true,
+    noSuggestionDiagnostics: true,
+    noSyntaxValidation: true
+});
+meditor.defineTheme('myTheme', {
+    base: 'vs',
+    inherit: true,
+    rules: [],
+    colors: {
+        'editorLineNumber.foreground': '#999',
+        'editorGutter.background': '#F9FAFB'
+    }
+});
+meditor.setTheme('myTheme');
 import { BASH_INIT_CODE, DENO_INIT_CODE_CLEAR, GO_INIT_CODE, PYTHON_INIT_CODE_CLEAR } from '../script_helpers';
 import { createHash as randomHash, editorConfig, langToExt, updateOptions } from '../editorUtils';
 import { dirtyStore } from './common/confirmationModal/dirtyStore';
-import { StandaloneServices } from 'vscode/services';
 let divEl = null;
 let editor;
 export let lang;
@@ -352,9 +352,9 @@ async function closeWebsockets() {
     websocketInterval && clearInterval(websocketInterval);
 }
 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(divEl, editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets));
+    editor = meditor.create(divEl, editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets));
     let timeoutModel = undefined;
     editor.onDidChangeModelContent((event) => {
         $dirtyStore = true;
@@ -366,11 +366,11 @@ async function loadMonaco() {
     });
     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();
         });

package/components/Editor.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import * as monaco from 'monaco-editor';
+import { editor as meditor } from 'monaco-editor';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -24,7 +24,7 @@ declare const __propDef: {
         setCode?: ((ncode: string) => void) | undefined;
         clearContent?: (() => Promise<void>) | undefined;
         reloadWebsocket?: (() => Promise<void>) | undefined;
-        addAction?: ((id: string, label: string, callback: (editor: monaco.editor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void) | undefined;
+        addAction?: ((id: string, label: string, callback: (editor: meditor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void) | undefined;
     };
     events: {
         change: CustomEvent<any>;
@@ -46,6 +46,6 @@ export default class Editor extends SvelteComponentTyped<EditorProps, EditorEven
     get setCode(): (ncode: string) => void;
     get clearContent(): () => Promise<void>;
     get reloadWebsocket(): () => Promise<void>;
-    get addAction(): (id: string, label: string, callback: (editor: monaco.editor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void;
+    get addAction(): (id: string, label: string, callback: (editor: meditor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void;
 }
 export {};

package/components/FlowPreviewContent.svelte

@@ -16,7 +16,7 @@ export let previewMode;
 export let open;
 export let jobId = undefined;
 export let job = undefined;
-let isValid = false;
+let isValid = true;
 let isRunning = false;
 let jobProgressReset;
 const { selectedId, previewArgs } = getContext('FlowEditorContext');
@@ -89,7 +89,7 @@ $: if (job?.type === 'CompletedJob') {
 	<div class="flex flex-row justify-between w-full items-center gap-x-2">
 		<button
 			on:click={() => dispatch('close')}
-			class="hover:bg-gray-200 bg-gray-100 rounded-full w-8 h-8 flex items-center justify-center transition-all"
+			class="hover:bg-gray-200 bg-gray-100 rounded-full w-16 h-8 flex items-center justify-center transition-all"
 		>
 			<Icon data={faClose} class="text-gray-500" />
 		</button>

package/components/FlowStatusViewer.svelte

@@ -1,9 +1,9 @@
 <script>import { FlowStatusModule, Job, JobService } from '../gen';
-import { workspaceStore } from '../stores';
+import { userStore, workspaceStore } from '../stores';
 import FlowJobResult from './FlowJobResult.svelte';
 import FlowPreviewStatus from './preview/FlowPreviewStatus.svelte';
 import Icon from 'svelte-awesome';
-import { faChevronDown, faChevronUp, faHourglassHalf } from '@fortawesome/free-solid-svg-icons';
+import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import { onDestroy } from 'svelte';
 import { Button, Tab } from './common';
@@ -11,8 +11,10 @@ import DisplayResult from './DisplayResult.svelte';
 import Tabs from './common/tabs/Tabs.svelte';
 import { FlowGraph } from './graph';
 import ModuleStatus from './ModuleStatus.svelte';
-import { displayDate, truncateRev } from '../utils';
+import { displayDate, isOwner, pluralize, truncateRev } from '../utils';
 import JobArgs from './JobArgs.svelte';
+import Tooltip from './Tooltip.svelte';
+import SimpleEditor from './SimpleEditor.svelte';
 const dispatch = createEventDispatcher();
 export let jobId;
 export let flowState = undefined;
@@ -21,6 +23,8 @@ export let job = undefined;
 export let flowModuleStates = {};
 let localFlowModuleStates = {};
 export let retry_status = {};
+export let suspend_status = undefined;
+export let is_owner = false;
 let selectedNode = undefined;
 let jobResults = [];
 let jobFailures = [];
@@ -44,6 +48,7 @@ $: {
     }
 }
 $: updateFailCount(job?.flow_status?.retry?.fail_count);
+$: suspend_status = job?.flow_status?.modules?.[job?.flow_status.step]?.count;
 function updateFailCount(count) {
     if (count) {
         retry_status[jobId ?? ''] = count;
@@ -103,11 +108,12 @@ async function loadJobInProgress() {
     }
 }
 $: job && dispatch('jobsLoaded', job);
-function updateJobId() {
+async function updateJobId() {
     if (jobId !== job?.id) {
         retry_status = {};
         localFlowModuleStates = {};
-        loadJobInProgress();
+        await loadJobInProgress();
+        job?.script_path && loadOwner(job.script_path);
     }
 }
 $: jobId && updateJobId();
@@ -115,7 +121,11 @@ $: isListJob = flowJobIds && Array.isArray(flowJobIds?.flowJobs);
 onDestroy(() => {
     timeout && clearTimeout(timeout);
 });
+async function loadOwner(path) {
+    is_owner = await isOwner(path, $userStore, $workspaceStore);
+}
 let selected = 'graph';
+let payload = '"a test payload in json"';
 </script>
 
 {#if job}
@@ -134,6 +144,41 @@ let selected = 'graph';
 					<div class="w-full h-full">
 						<FlowJobResult result={job.result} logs={job.logs ?? ''} />
 					</div>
+				{:else if job.flow_status?.modules?.[job?.flow_status?.step].type === FlowStatusModule.type.WAITING_FOR_EVENTS}
+					<div class="w-full h-full mt-2 text-sm text-gray-600">
+						<p>Waiting for approval from the previous step</p>
+						<div>
+							{#if is_owner}
+								<div class="flex flex-row gap-2 mt-2">
+									<div>
+										<Button
+											color="green"
+											variant="border"
+											on:click={async () =>
+												await JobService.resumeSuspendedFlowAsOwner({
+													workspace: $workspaceStore ?? '',
+													id: job?.id ?? '',
+													requestBody: JSON.parse(payload)
+												})}
+											>Resume <Tooltip
+												>Since you are an owner of this flow, you can send resume events without
+												necessarily knowing the resume id sent by the approval step</Tooltip
+											></Button
+										>
+									</div>
+									<div class="w-full border rounded-lg border-gray-600 p-2">
+										<SimpleEditor automaticLayout lang="json" bind:code={payload} autoHeight />
+									</div>
+									<Tooltip
+										>The payload is optional, it is passed to the following step through the
+										`resume` variable</Tooltip
+									>
+								</div>
+							{:else}
+								You cannot resume the job without the resume id since you are not an owner of {job.script_path}
+							{/if}
+						</div>
+					</div>
 				{:else if job.logs}
 					<div class="text-xs p-4 bg-gray-50 overflow-auto max-h-80 border">
 						<pre class="w-full">{job.logs}</pre>
@@ -183,6 +228,7 @@ let selected = 'graph';
 					</Button>
 					<div class="border p-6" class:hidden={forloop_selected != loopJobId}>
 						<svelte:self
+							bind:suspend_status
 							bind:retry_status
 							bind:flowState
 							bind:flowModuleStates={localFlowModuleStates}
@@ -254,6 +300,7 @@ let selected = 'graph';
 						<li class="w-full border border-gray-600 p-6 space-y-2 bg-blue-50/50">
 							{#if [FlowStatusModule.type.IN_PROGRESS, FlowStatusModule.type.SUCCESS, FlowStatusModule.type.FAILURE].includes(mod.type)}
 								<svelte:self
+									bind:suspend_status
 									bind:retry_status
 									bind:flowState
 									bind:flowModuleStates={localFlowModuleStates}
@@ -314,6 +361,11 @@ let selected = 'graph';
 								Retry in progress, # of failed attempts: {count}
 							</span>
 						{/each}
+						{#if suspend_status}
+							<span class="text-sm">
+								Flow suspended, waiting for {pluralize(suspend_status, 'approval')}
+							</span>
+						{/if}
 					</div>
 
 					<FlowGraph

package/components/FlowStatusViewer.svelte.d.ts

@@ -13,6 +13,8 @@ declare const __propDef: {
         job?: Job | undefined;
         flowModuleStates?: Record<string, GraphModuleState> | undefined;
         retry_status?: Record<string, number> | undefined;
+        suspend_status?: number | undefined;
+        is_owner?: boolean | undefined;
     };
     events: {
         jobsLoaded: CustomEvent<any>;

package/components/InputTransformForm.svelte

@@ -8,7 +8,7 @@ import { Button, ToggleButton, ToggleButtonGroup } from './common';
 import { faCode } from '@fortawesome/free-solid-svg-icons';
 import TemplateEditor from './TemplateEditor.svelte';
 import Tooltip from './Tooltip.svelte';
-import { escape } from 'svelte/internal';
+import { setInputCat as computeInputCat } from '../utils';
 export let schema;
 export let arg;
 export let argName;
@@ -18,9 +18,10 @@ export let previousModuleId;
 export let pickForField = undefined;
 export let variableEditor = undefined;
 export let itemPicker = undefined;
-export let monaco = undefined;
+let monaco = undefined;
+let monacoTemplate = undefined;
 let argInput = undefined;
-let inputCat = 'object';
+let inputCat = computeInputCat(schema.properties[argName].type, schema.properties[argName].format, schema.properties[argName].items?.type, schema.properties[argName].enum, schema.properties[argName].contentEncoding);
 let propertyType = getPropertyType(arg);
 function getPropertyType(arg) {
     let type = arg?.type ?? 'static';
@@ -58,6 +59,7 @@ function connectProperty(rawValue) {
     if (isStaticTemplate(inputCat)) {
         arg.value = `\$\{${rawValue}}`;
         setPropertyType(arg.value);
+        monacoTemplate?.setCode(arg.value);
     }
     else {
         arg.expr = getDefaultExpr(undefined, previousModuleId, rawValue);
@@ -71,6 +73,7 @@ function onFocus() {
         focusProp(argName, 'append', (path) => {
             const toAppend = `\$\{${path}}`;
             arg.value = `${arg.value ?? ''}${toAppend}`;
+            monacoTemplate?.setCode(arg.value);
             setPropertyType(arg.value);
             argInput?.focus();
             return false;
@@ -203,8 +206,13 @@ const closeBracket = '}';
 			</span>
 		{/if}
 		{#if isStaticTemplate(inputCat) && propertyType == 'static'}
-			<div class="py-1">
-				<TemplateEditor {extraLib} on:focus={onFocus} bind:code={arg.value} />
+			<div class="py-1 rounded border border-1 border-gray-500">
+				<TemplateEditor
+					bind:this={monacoTemplate}
+					{extraLib}
+					on:focus={onFocus}
+					bind:code={arg.value}
+				/>
 			</div>
 		{:else if propertyType === undefined || propertyType == 'static'}
 			<ArgInput

package/components/InputTransformForm.svelte.d.ts

@@ -1,6 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Schema } from '../common';
-import SimpleEditor from './SimpleEditor.svelte';
 import type VariableEditor from './VariableEditor.svelte';
 import type ItemPicker from './ItemPicker.svelte';
 import type { InputTransform } from '../gen';
@@ -15,7 +14,6 @@ declare const __propDef: {
         pickForField?: string | undefined;
         variableEditor?: VariableEditor | undefined;
         itemPicker?: ItemPicker | undefined;
-        monaco?: SimpleEditor | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/ModulePreview.svelte

@@ -1,4 +1,5 @@
-<script>import { getScriptByPath, sendUserToast, truncateRev } from '../utils';
+<script>import { ScriptService } from '../gen';
+import { getScriptByPath, sendUserToast, truncateRev } from '../utils';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import RunForm from './RunForm.svelte';
 import TestJobLoader from './TestJobLoader.svelte';
@@ -9,6 +10,7 @@ import { faRotateRight } from '@fortawesome/free-solid-svg-icons';
 import { flowStateStore } from './flows/flowState';
 import { flowStore } from './flows/flowStore';
 import { Alert } from './common';
+import { workspaceStore } from '../stores';
 let testJobLoader;
 // Test
 let testIsLoading = false;
@@ -25,7 +27,9 @@ export async function runTest(args) {
         await testJobLoader?.runPreview(val.path, val.content, val.language, args);
     }
     else if (val.type == 'script') {
-        const script = await getScriptByPath(val.path);
+        const script = val.hash
+            ? await ScriptService.getScriptByHash({ workspace: $workspaceStore, hash: val.hash })
+            : await getScriptByPath(val.path);
         await testJobLoader?.runPreview(val.path, script.content, script.language, args);
     }
     else {

package/components/ModulePreview.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Schema } from '../common';
-import type { FlowModule } from '../gen';
+import { type FlowModule } from '../gen';
 declare const __propDef: {
     props: {
         mod: FlowModule;

package/components/RunForm.svelte

@@ -120,7 +120,7 @@ let invisible_to_owner;
 		</div>
 	{/if}
 	{#if schedulable}
-		<div class="flex justify-between mt-2 md:mt-6 mb-6">
+		<div class="flex gap-2 items-center flex-wrap justify-between mt-2 md:mt-6 mb-6">
 			<Button
 				color="light"
 				size="sm"
@@ -142,13 +142,15 @@ let invisible_to_owner;
 					>
 				</div>
 			{/if}
-			<Button
-				btnClasses="!px-6 !py-1"
-				disabled={!isValid}
-				on:click={() => runAction(scheduledForStr, args, invisible_to_owner)}
-			>
-				{scheduledForStr ? 'Schedule run to a later time' : buttonText}
-			</Button>
+			<div class="flex-row-reverse flex grow">
+				<Button
+					btnClasses="!px-6 !py-1"
+					disabled={!isValid}
+					on:click={() => runAction(scheduledForStr, args, invisible_to_owner)}
+				>
+					{scheduledForStr ? 'Schedule run to a later time' : buttonText}
+				</Button>
+			</div>
 		</div>
 	{:else if !topButton}
 		<Button

package/components/ScheduleEditor.svelte

@@ -6,7 +6,7 @@
 	}
 </script>
 
-<script>import { sendUserToast, formatCron, canWrite } from '../utils';
+<script>import { sendUserToast, formatCron, canWrite, emptyString } from '../utils';
 import { ScriptService, Script, ScheduleService, FlowService } from '../gen';
 import Toggle from './Toggle.svelte';
 import Path from './Path.svelte';
@@ -151,7 +151,7 @@ let drawer;
 			{/if}
 			<Button
 				startIcon={{ icon: faSave }}
-				disabled={!allowSchedule || pathError != ''}
+				disabled={!allowSchedule || pathError != '' || emptyString(script_path)}
 				on:click={scheduleScript}
 			>
 				{edit ? 'Save' : 'Schedule'}

package/components/SimpleEditor.svelte

@@ -1,26 +1,24 @@
-<script context="module">import * as monaco from 'monaco-editor';
+<script>import { browser, dev } from '$app/environment';
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+import yamlWorker from 'monaco-yaml/yaml.worker?worker';
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+import { buildWorkerDefinition } from 'monaco-editor-workers';
+import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+import { createHash, editorConfig, langToExt, updateOptions } from '../editorUtils';
+import { languages, editor as meditor, KeyCode, KeyMod, Uri as mUri } from 'monaco-editor';
 import libStdContent from '../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: [],
     enableSchemaRequest: true
 });
-</script>
-
-<script>import { browser, dev } from '$app/env';
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
-import yamlWorker from 'monaco-yaml/yaml.worker?worker';
-import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
-import { buildWorkerDefinition } from 'monaco-editor-workers';
-import { createEventDispatcher, onDestroy, onMount } from 'svelte';
-import { createHash, editorConfig, langToExt, updateOptions } from '../editorUtils';
 let divEl = null;
 let editor;
 let model;
@@ -86,9 +84,9 @@ function format() {
 }
 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, editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets));
+    editor = meditor.create(divEl, editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets));
     let timeoutModel = undefined;
     editor.onDidChangeModelContent((event) => {
         timeoutModel && clearTimeout(timeoutModel);
@@ -116,11 +114,11 @@ async function loadMonaco() {
         updateHeight();
     }
     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();
         });
@@ -133,7 +131,7 @@ async function loadMonaco() {
     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'
@@ -142,7 +140,7 @@ async function loadMonaco() {
             ]);
         }
         else {
-            monaco.languages.typescript.javascriptDefaults.setExtraLibs([stdLib]);
+            languages.typescript.javascriptDefaults.setExtraLibs([stdLib]);
         }
     }
 }