windmill-components 1.89.0 → 1.103.0

package/package/components/ScriptBuilder.svelte

@@ -1,15 +1,15 @@
-<script>import { Script, ScriptService, WorkerService } from '../gen';
+<script>import { DraftService, NewScript, Script, ScriptService, WorkerService } from '../gen';
 import { goto } from '$app/navigation';
 import { page } from '$app/stores';
 import { inferArgs } from '../infer';
 import { initialCode } from '../script_helpers';
 import { userStore, workerTags, workspaceStore } from '../stores';
-import { emptySchema, encodeState, sendUserToast, setQueryWithoutLoad } from '../utils';
+import { emptySchema, encodeState, getModifierKey, setQueryWithoutLoad } from '../utils';
 import Path from './Path.svelte';
 import ScriptEditor from './ScriptEditor.svelte';
 import ScriptSchema from './ScriptSchema.svelte';
 import { dirtyStore } from './common/confirmationModal/dirtyStore';
-import { Badge, Button, Drawer } from './common';
+import { Badge, Button, Drawer, Kbd } from './common';
 import { faSave } from '@fortawesome/free-solid-svg-icons';
 import LanguageIcon from './common/languageIcons/LanguageIcon.svelte';
 import Tooltip from './Tooltip.svelte';
@@ -17,6 +17,9 @@ import DrawerContent from './common/drawer/DrawerContent.svelte';
 import { Pen } from 'lucide-svelte';
 import autosize from 'svelte-autosize';
 import { SCRIPT_SHOW_BASH, SCRIPT_SHOW_GO, SCRIPT_SHOW_PSQL, SCRIPT_CUSTOMISE_SHOW_KIND } from '../consts';
+import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte';
+import { sendUserToast } from '../toast';
+import { isCloudHosted } from '../cloud';
 export let script;
 export let initialPath = '';
 export let template = 'script';
@@ -55,21 +58,25 @@ const scriptKindOptions = [
     {
         value: Script.kind.TRIGGER,
         title: 'Trigger',
-        desc: 'First module of flows to trigger them based on external changes. These kind of scripts are usually running on a schedule to periodically look for changes.'
+        desc: 'First module of flows to trigger them based on external changes. These kind of scripts are usually running on a schedule to periodically look for changes.',
+        documentationLink: 'https://docs.windmill.dev/docs/flows/flow_trigger'
     },
     {
         value: Script.kind.APPROVAL,
         title: 'Approval',
-        desc: 'Send notifications externally to ask for approval to continue a flow.'
+        desc: 'Send notifications externally to ask for approval to continue a flow.',
+        documentationLink: 'https://docs.windmill.dev/docs/flows/flow_approval'
     },
     {
         value: Script.kind.FAILURE,
         title: 'Error Handler',
-        desc: 'Handle errors in flows after all retry attempts have been exhausted.'
+        desc: 'Handle errors in flows after all retry attempts have been exhausted.',
+        documentationLink: 'https://docs.windmill.dev/docs/flows/flow_error_handler'
     }
 ];
 let pathError = '';
 let loadingSave = false;
+let loadingDraft = false;
 $: setQueryWithoutLoad($page.url, [{ key: 'state', value: encodeState(script) }]);
 if (script.content == '') {
     initContent(script.language, script.kind, template);
@@ -78,18 +85,7 @@ function initContent(language, kind, template) {
     script.content = initialCode(language, kind, template);
     scriptEditor?.inferSchema(script.content, language);
 }
-async function leaveF(leave, newHash) {
-    if (leave) {
-        history.replaceState(history.state, '', `/scripts/edit/${newHash}`);
-        goto(`/scripts/get/${newHash}?workspace=${$workspaceStore}`);
-    }
-    else {
-        await goto(`/scripts/edit/${newHash}`);
-        script.hash = newHash;
-        topHash = undefined;
-    }
-}
-async function editScript(leave) {
+async function editScript() {
     loadingSave = true;
     try {
         $dirtyStore = false;
@@ -108,7 +104,7 @@ async function editScript(leave) {
                 summary: script.summary,
                 description: script.description ?? '',
                 content: script.content,
-                parent_hash: script.hash != '' ? topHash ?? script.hash : undefined,
+                parent_hash: topHash,
                 schema: script.schema,
                 is_template: script.is_template,
                 language: script.language,
@@ -116,37 +112,94 @@ async function editScript(leave) {
                 tag: script.tag
             }
         });
-        leaveF(leave, newHash);
+        history.replaceState(history.state, '', `/scripts/edit/${script.path}`);
+        goto(`/scripts/get/${newHash}?workspace=${$workspaceStore}`);
     }
     catch (error) {
         sendUserToast(`Error while saving the script: ${error.body || error.message}`, true);
     }
     loadingSave = false;
 }
-function computeDropdownItems() {
-    let dropdownItems = [];
-    if ($dirtyStore) {
-        dropdownItems.push({
-            label: 'Save and see details',
-            onClick: () => editScript(true)
+async function saveDraft() {
+    loadingDraft = true;
+    try {
+        $dirtyStore = false;
+        localStorage.removeItem(script.path);
+        script.schema = script.schema ?? emptySchema();
+        try {
+            await inferArgs(script.language, script.content, script.schema);
+        }
+        catch (error) {
+            sendUserToast(`The main signature was not parsable. This script is considered to be without main function`);
+        }
+        if (initialPath == '') {
+            await ScriptService.createScript({
+                workspace: $workspaceStore,
+                requestBody: {
+                    path: script.path,
+                    summary: script.summary,
+                    description: script.description ?? '',
+                    content: script.content,
+                    schema: script.schema,
+                    is_template: script.is_template,
+                    language: script.language,
+                    kind: script.kind,
+                    tag: script.tag,
+                    draft_only: true
+                }
+            });
+        }
+        await DraftService.createDraft({
+            workspace: $workspaceStore,
+            requestBody: {
+                path: initialPath == '' ? script.path : initialPath,
+                typ: 'script',
+                value: script
+            }
         });
+        if (initialPath == '') {
+            $dirtyStore = false;
+            goto(`/scripts/edit/${script.path}`);
+        }
+        sendUserToast('Saved as draft');
+    }
+    catch (error) {
+        sendUserToast(`Error while saving the script as a draft: ${error.body || error.message}`, true);
     }
-    dropdownItems.push({
-        label: 'See details',
-        onClick: () => leaveF(true, script.hash)
-    });
-    if (initialPath != '') {
-        dropdownItems.push({
+    loadingDraft = false;
+}
+function computeDropdownItems() {
+    let dropdownItems = [
+        {
             label: 'Fork',
             onClick: () => {
                 window.open(`/scripts/add?template=${initialPath}`);
             }
-        });
-    }
+        },
+        {
+            label: 'Exit & See details',
+            onClick: () => {
+                goto(`/scripts/get/${initialPath}?workspace=${$workspaceStore}`);
+            }
+        }
+    ];
     return dropdownItems;
 }
+function onKeyDown(event) {
+    switch (event.key) {
+        case 's':
+            if (event.ctrlKey || event.metaKey) {
+                saveDraft();
+                event.preventDefault();
+            }
+            break;
+    }
+}
 </script>
 
+<svelte:window on:keydown={onKeyDown} />
+
+<UnsavedConfirmationModal />
 {#if !$userStore?.operator}
 	<Drawer placement="right" bind:open={metadataOpen} size="800px">
 		<DrawerContent title="Metadata" on:close={() => (metadataOpen = false)}>
@@ -215,6 +268,39 @@ function computeDropdownItems() {
 						<LanguageIcon lang="pgsql" /><span class="ml-2 py-2">PostgreSQL</span>
 					</Button>
 				{/if}
+				<Button
+					size="sm"
+					variant="border"
+					color={template == 'docker' ? 'blue' : 'dark'}
+					btnClasses={template == 'docker' ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
+					disabled={lockedLanguage}
+					on:click={() => {
+						if (isCloudHosted()) {
+							sendUserToast(
+								'You cannot use Docker scripts on the multi-tenant platform. Use a dedicated instance or self-host windmill instead.',
+								true,
+								[
+									{
+										label: 'Learn more',
+										callback: () => {
+											window.open('https://docs.windmill.dev/docs/advanced/docker', '_blank')
+										}
+									}
+								]
+							)
+							return
+						}
+						let lastTemplate = template
+						template = 'docker'
+						initContent(Script.language.BASH, script.kind, template)
+						script.language = Script.language.BASH
+						if (lastTemplate != template) {
+							setCode(script.content)
+						}
+					}}
+				>
+					<LanguageIcon lang="docker" /><span class="ml-2 py-2">Docker</span>
+				</Button>
 				<!-- <Button
 					size="sm"
 					variant="border"
@@ -335,14 +421,22 @@ function computeDropdownItems() {
 						Customise
 					</Button>
 					<Button
-						color="dark"
+						loading={loadingDraft}
+						size="sm"
+						startIcon={{ icon: faSave }}
+						on:click={() => saveDraft()}
+					>
+						Save draft&nbsp;<Kbd small>{getModifierKey()}</Kbd>
+						<Kbd small>S</Kbd>
+					</Button>
+					<Button
 						loading={loadingSave}
 						size="sm"
 						startIcon={{ icon: faSave }}
-						on:click={() => editScript(false)}
-						dropdownItems={computeDropdownItems}
+						on:click={() => editScript()}
+						dropdownItems={initialPath != '' ? computeDropdownItems : undefined}
 					>
-						Save
+						Deploy
 					</Button>
 				</div>
 			</div>
@@ -359,7 +453,7 @@ function computeDropdownItems() {
 						</Tooltip>
 					</h2>
 					<div class="flex flex-wrap gap-2">
-						{#each scriptKindOptions as { value, title, desc }}
+						{#each scriptKindOptions as { value, title, desc, documentationLink }}
 							{@const isPicked = script.kind === value}
 							<Button
 								size="sm"
@@ -375,7 +469,7 @@ function computeDropdownItems() {
 							>
 								{title}
 								{#if desc}
-									<Tooltip class="mb-0.5 ml-1">
+									<Tooltip {documentationLink} class="mb-0.5 ml-1">
 										{desc}
 									</Tooltip>
 								{/if}
@@ -393,6 +487,9 @@ function computeDropdownItems() {
 			</DrawerContent>
 		</Drawer>
 		<ScriptEditor
+			on:format={() => {
+				saveDraft()
+			}}
 			bind:editor
 			bind:this={scriptEditor}
 			bind:schema={script.schema}

package/package/components/ScriptBuilder.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import { Script } from '../gen';
+import { NewScript } from '../gen';
 declare const __propDef: {
     props: {
-        script: Script;
+        script: NewScript;
         initialPath?: string | undefined;
-        template?: "script" | "pgsql" | "mysql" | undefined;
+        template?: "script" | "pgsql" | "mysql" | "docker" | undefined;
         initialArgs?: Record<string, any> | undefined;
         lockedLanguage?: boolean | undefined;
         topHash?: string | undefined;

package/package/components/ScriptEditor.svelte

@@ -1,6 +1,6 @@
 <script>import { CompletedJob, Job, JobService } from '../gen';
 import { userStore, workspaceStore } from '../stores';
-import { emptySchema, scriptLangToEditorLang } from '../utils';
+import { emptySchema, getModifierKey } from '../utils';
 import { faPlay } from '@fortawesome/free-solid-svg-icons';
 import Editor from './Editor.svelte';
 import { inferArgs } from '../infer';
@@ -10,10 +10,11 @@ import LogPanel from './scriptEditor/LogPanel.svelte';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import EditorBar, { EDITOR_BAR_WIDTH_THRESHOLD } from './EditorBar.svelte';
 import TestJobLoader from './TestJobLoader.svelte';
-import { onMount } from 'svelte';
+import { createEventDispatcher, onMount } from 'svelte';
 import { Button, Kbd } from './common';
 import SplitPanesWrapper from './splitPanes/SplitPanesWrapper.svelte';
 import WindmillIcon from './icons/WindmillIcon.svelte';
+import { scriptLangToEditorLang } from '../scripts';
 // Exported
 export let schema = emptySchema();
 export let code;
@@ -25,7 +26,14 @@ export let initialArgs = {};
 export let fixedOverflowWidgets = true;
 export let noSyncFromGithub = false;
 export let editor = undefined;
-let websocketAlive = { pyright: false, black: false, deno: false, go: false };
+let websocketAlive = {
+    pyright: false,
+    black: false,
+    deno: false,
+    go: false,
+    ruff: false,
+    shellcheck: false
+};
 let width = 1200;
 let testJobLoader;
 // Test args input
@@ -35,9 +43,7 @@ let isValid = true;
 let testIsLoading = false;
 let testJob;
 let pastPreviews = [];
-let lastSave;
 let validCode = true;
-$: lastSave = localStorage.getItem(path ?? 'last_save');
 function onKeyDown(event) {
     if ((event.ctrlKey || event.metaKey) && event.key == 'Enter') {
         event.preventDefault();
@@ -59,7 +65,7 @@ export async function inferSchema(code, nlang) {
     schema = schema ?? emptySchema();
     let isDefault = [];
     Object.entries(args).forEach(([k, v]) => {
-        if (schema.properties[k].default == v) {
+        if (schema.properties?.[k]?.default == v) {
             isDefault.push(k);
         }
     });
@@ -84,6 +90,7 @@ onMount(() => {
     inferSchema(code);
     loadPastTests();
 });
+const dispatch = createEventDispatcher();
 function asKind(str) {
     return str;
 }
@@ -115,7 +122,7 @@ function asKind(str) {
 					href="https://github.com/windmill-labs/windmill/tree/main/cli"
 					color="light"
 					size="xs"
-					btnClasses="mr-1 hidden md:block"
+					btnClasses="mr-1 hidden lg:block"
 					startIcon={{
 						icon: faGithub
 					}}
@@ -150,7 +157,7 @@ function asKind(str) {
 							} catch (e) {
 								console.error('Could not save last_save to local storage', e)
 							}
-							lastSave = code
+							dispatch('format')
 						}}
 						class="flex flex-1 h-full !overflow-visible"
 						lang={scriptLangToEditorLang(lang)}
@@ -162,7 +169,7 @@ function asKind(str) {
 		</Pane>
 		<Pane size={40} minSize={10}>
 			<div class="flex flex-col h-full">
-				<div class="px-2 w-full border-b py-1">
+				<div class="flex justify-center pt-1">
 					{#if testIsLoading}
 						<Button on:click={testJobLoader?.cancelJob} btnClasses="w-full" color="red" size="xs">
 							<WindmillIcon
@@ -176,6 +183,7 @@ function asKind(str) {
 						</Button>
 					{:else}
 						<Button
+							color="dark"
 							on:click={runTest}
 							btnClasses="w-full"
 							size="xs"
@@ -187,7 +195,8 @@ function asKind(str) {
 							{#if testIsLoading}
 								Running
 							{:else}
-								Test <Kbd class="ml-4 text-5xs -my-0.5">Ctrl+Enter</Kbd>
+								Test&nbsp;<Kbd small>{getModifierKey()}</Kbd>
+								<Kbd small><span class="text-lg font-bold">⏎</span></Kbd>
 							{/if}
 						</Button>
 					{/if}
@@ -201,14 +210,7 @@ function asKind(str) {
 						</div>
 					</Pane>
 					<Pane size={67}>
-						<LogPanel
-							{path}
-							{lang}
-							previewJob={testJob}
-							{pastPreviews}
-							previewIsLoading={testIsLoading}
-							bind:lastSave
-						/>
+						<LogPanel {lang} previewJob={testJob} {pastPreviews} previewIsLoading={testIsLoading} />
 					</Pane>
 				</Splitpanes>
 			</div>

package/package/components/ScriptEditor.svelte.d.ts

@@ -17,6 +17,8 @@ declare const __propDef: {
         inferSchema?: ((code: string, nlang?: 'go' | 'bash' | 'python3' | 'deno') => Promise<void>) | undefined;
     };
     events: {
+        format: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/ScriptPicker.svelte

@@ -2,7 +2,7 @@
 import { hubScripts, workspaceStore } from '../stores';
 import { createEventDispatcher } from 'svelte';
 import Select from 'svelte-select';
-import { getScriptByPath } from '../utils';
+import { getScriptByPath } from '../scripts';
 import RadioButton from './RadioButton.svelte';
 import { Button, Drawer, DrawerContent } from './common';
 import HighlightCode from './HighlightCode.svelte';
@@ -60,7 +60,7 @@ $: itemKind && $workspaceStore && loadItems();
 	</DrawerContent>
 </Drawer>
 
-<div class="flex flex-row  items-center gap-4 w-full">
+<div class="flex flex-row items-center gap-4 w-full">
 	{#if options.length > 1}
 		<div class="w-80 mt-1">
 			<RadioButton {disabled} bind:value={itemKind} {options} />

package/package/components/ScriptSchema.svelte

@@ -17,7 +17,7 @@ export function setSchema(newSchema) {
 		<svelte:fragment slot="content">
 			<TabContent value="ui">
 				<div class="mt-4" />
-				<SchemaForm {schema} editableSchema={true} />
+				<SchemaForm bind:schema editableSchema={true} />
 			</TabContent>
 			<TabContent value="jsonschema">
 				<Highlight language={json} code={JSON.stringify(schema, null, 4)} />

package/package/components/ShareModal.svelte

@@ -1,6 +1,5 @@
 <script>import TableCustom from './TableCustom.svelte';
 import { GranularAclService } from '../gen/services/GranularAclService';
-import { isOwner, sendUserToast } from '../utils';
 import { GroupService, UserService } from '../gen';
 import { createEventDispatcher } from 'svelte';
 import AutoComplete from 'simple-svelte-autocomplete';
@@ -8,6 +7,8 @@ import { userStore, workspaceStore } from '../stores';
 import { Alert, Button, Drawer, ToggleButton, ToggleButtonGroup } from './common';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import Tooltip from './Tooltip.svelte';
+import { sendUserToast } from '../toast';
+import { isOwner } from '../utils';
 const dispatch = createEventDispatcher();
 let kind;
 let path = '';

package/package/components/ShareModal.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        openDrawer?: ((newPath: string, kind_l: "flow" | "script" | "resource" | "app" | "group_" | "schedule" | "variable") => Promise<void>) | undefined;
+        openDrawer?: ((newPath: string, kind_l: "flow" | "script" | "resource" | "app" | "raw_app" | "group_" | "schedule" | "variable") => Promise<void>) | undefined;
     };
     events: {
         change: CustomEvent<any>;
@@ -14,6 +14,6 @@ export type ShareModalProps = typeof __propDef.props;
 export type ShareModalEvents = typeof __propDef.events;
 export type ShareModalSlots = typeof __propDef.slots;
 export default class ShareModal extends SvelteComponentTyped<ShareModalProps, ShareModalEvents, ShareModalSlots> {
-    get openDrawer(): (newPath: string, kind_l: "flow" | "script" | "resource" | "app" | "group_" | "schedule" | "variable") => Promise<void>;
+    get openDrawer(): (newPath: string, kind_l: "flow" | "script" | "resource" | "app" | "raw_app" | "group_" | "schedule" | "variable") => Promise<void>;
 }
 export {};

package/package/components/SimpleEditor.svelte

@@ -1,7 +1,8 @@
-<script>import { browser } from '$app/environment';
+<script>import { BROWSER } from 'esm-env';
 import { createHash, editorConfig, langToExt, updateOptions } from '../editorUtils';
 import 'monaco-editor/esm/vs/editor/edcore.main';
 import { editor as meditor, KeyCode, KeyMod, Uri as mUri, languages } from 'monaco-editor/esm/vs/editor/editor.api';
+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/typescript/typescript.contribution';
 import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';
@@ -127,6 +128,8 @@ async function loadMonaco() {
     editor.onDidBlurEditorText(() => {
         code = getCode();
     });
+}
+function loadExtraLib() {
     if (lang == 'javascript') {
         const stdLib = { content: libStdContent, filePath: 'es5.d.ts' };
         if (extraLib != '') {
@@ -143,11 +146,14 @@ async function loadMonaco() {
         }
     }
 }
-onMount(() => {
-    if (browser) {
-        loadMonaco();
+let mounted = false;
+onMount(async () => {
+    if (BROWSER) {
+        mounted = true;
+        await loadMonaco();
     }
 });
+$: mounted && extraLib && loadExtraLib();
 onDestroy(() => {
     try {
         model && model.dispose();

package/package/components/SimpleEditor.svelte.d.ts

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import 'monaco-editor/esm/vs/editor/edcore.main';
+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/typescript/typescript.contribution';
 import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';

package/package/components/Star.svelte

@@ -1,6 +1,6 @@
 <script>import { FavoriteService } from '../gen';
 import { starStore } from '../stores';
-import { sendUserToast } from '../utils';
+import { sendUserToast } from '../toast';
 import { createEventDispatcher } from 'svelte';
 import { Star, StarOff } from 'lucide-svelte';
 export let path;

package/package/components/Star.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         path: string;
-        kind: 'flow' | 'app' | 'script';
+        kind: 'flow' | 'app' | 'script' | 'raw_app';
         starred?: boolean | undefined;
         workspace_id: string;
     };

package/package/components/SuperadminSettings.svelte

@@ -3,7 +3,7 @@ import TableCustom from './TableCustom.svelte';
 import PageHeader from './PageHeader.svelte';
 import InviteGlobalUser from './InviteGlobalUser.svelte';
 import { Badge, Drawer, DrawerContent } from './common';
-import { sendUserToast } from '../utils';
+import { sendUserToast } from '../toast';
 import SearchItems from './SearchItems.svelte';
 import { page } from '$app/stores';
 import { goto } from '$app/navigation';
@@ -46,7 +46,7 @@ async function listUsers() {
 	<DrawerContent overflow_y={false} title="Superadmin Settings" on:close={closeDrawer}>
 		<div class="flex flex-col h-full">
 			<div>
-				<div class="text-xs pt-1 text-gray-500 ">
+				<div class="text-xs pt-1 text-gray-500">
 					Windmill {version}
 				</div>
 

package/package/components/TemplateEditor.svelte

@@ -1,8 +1,8 @@
-<script>import { browser } from '$app/environment';
+<script>import { BROWSER } from 'esm-env';
 import { convertKind, createDocumentationString, createHash, displayPartsToString, editorConfig, updateOptions } from '../editorUtils';
 import libStdContent from '../es5.d.ts.txt?raw';
 import 'monaco-editor/esm/vs/editor/edcore.main';
-import { editor as meditor, Uri as mUri, languages, Range } from 'monaco-editor/esm/vs/editor/editor.api';
+import { editor as meditor, Uri as mUri, languages, Range, KeyMod, KeyCode } from 'monaco-editor/esm/vs/editor/editor.api';
 import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
 import { createEventDispatcher, getContext, onDestroy, onMount } from 'svelte';
 import { writable } from 'svelte/store';
@@ -385,19 +385,10 @@ async function loadMonaco() {
         suggestOnTriggerCharacters: true,
         lineDecorationsWidth: 14
     });
-    const stdLib = { content: libStdContent, filePath: 'es5.d.ts' };
-    if (extraLib != '') {
-        languages.typescript.javascriptDefaults.setExtraLibs([
-            {
-                content: extraLib,
-                filePath: 'windmill.d.ts'
-            },
-            stdLib
-        ]);
-    }
-    else {
-        languages.typescript.javascriptDefaults.setExtraLibs([stdLib]);
-    }
+    editor.onDidFocusEditorText(() => {
+        dispatch('focus');
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, function () { });
+    });
     extraModel = meditor.createModel('`' + model.getValue() + '`', 'javascript');
     const worker = await languages.typescript.getJavaScriptWorker();
     const client = await worker(extraModel.uri);
@@ -492,11 +483,29 @@ async function loadMonaco() {
 export function focus() {
     editor?.focus();
 }
-onMount(() => {
-    if (browser) {
-        loadMonaco();
+let mounted = false;
+onMount(async () => {
+    if (BROWSER) {
+        await loadMonaco();
+        mounted = true;
     }
 });
+$: mounted && extraLib && loadExtraLib();
+function loadExtraLib() {
+    const stdLib = { content: libStdContent, filePath: 'es5.d.ts' };
+    if (extraLib != '') {
+        languages.typescript.javascriptDefaults.setExtraLibs([
+            {
+                content: extraLib,
+                filePath: 'windmill.d.ts'
+            },
+            stdLib
+        ]);
+    }
+    else {
+        languages.typescript.javascriptDefaults.setExtraLibs([stdLib]);
+    }
+}
 onDestroy(() => {
     try {
         model && model.dispose();

package/package/components/TemplateEditor.svelte.d.ts

@@ -104,8 +104,8 @@ declare const __propDef: {
         focus?: (() => void) | undefined;
     };
     events: {
-        change: CustomEvent<any>;
         focus: CustomEvent<any>;
+        change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };