windmill-components 1.35.1 → 1.35.42

package/components/ArgInput.svelte

@@ -4,13 +4,13 @@ import { setInputCat as computeInputCat } from '../utils';
 import { Button, Tooltip } from 'flowbite-svelte';
 import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
-import Editor from './Editor.svelte';
 import FieldHeader from './FieldHeader.svelte';
 import ObjectResourceInput from './ObjectResourceInput.svelte';
 import ObjectTypeNarrowing from './ObjectTypeNarrowing.svelte';
 import ResourcePicker from './ResourcePicker.svelte';
 import StringTypeNarrowing from './StringTypeNarrowing.svelte';
 import SchemaForm from './SchemaForm.svelte';
+import SimpleEditor from './SimpleEditor.svelte';
 export let label = '';
 export let value;
 export let defaultValue = undefined;
@@ -275,7 +275,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				<input class="inline-block" type="datetime-local" bind:value />
 			{:else if inputCat == 'sql'}
 				<div class="border rounded mb-4 w-full border-gray-700">
-					<Editor
+					<SimpleEditor
 						on:focus={() => dispatch('focus')}
 						on:blur={() => dispatch('blur')}
 						bind:this={editor}

package/components/ArgInput.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import { type InputCat } from '../utils';
-import Editor from './Editor.svelte';
 import type { SchemaProperty } from '../common';
+import SimpleEditor from './SimpleEditor.svelte';
 declare const __propDef: {
     props: {
         label?: string | undefined;
@@ -27,7 +27,7 @@ declare const __propDef: {
         properties?: {
             [name: string]: SchemaProperty;
         } | undefined;
-        editor?: Editor | undefined;
+        editor?: SimpleEditor | undefined;
         evalValueToRaw?: (() => void) | undefined;
         inputCat?: InputCat | undefined;
     };

package/components/Editor.svelte

@@ -1,9 +1,4 @@
 <script context="module">import * as monaco from 'monaco-editor';
-monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
-    target: monaco.languages.typescript.ScriptTarget.Latest,
-    allowNonTsExtensions: true,
-    noLib: true
-});
 monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
     target: monaco.languages.typescript.ScriptTarget.Latest,
     allowNonTsExtensions: true,
@@ -14,25 +9,19 @@ monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
     noSuggestionDiagnostics: true,
     noSyntaxValidation: true
 });
-monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-    validate: true,
-    allowComments: false,
-    schemas: [],
-    enableSchemaRequest: true
-});
 </script>
 
 <script>import { browser, dev } from '$app/env';
 import { page } from '$app/stores';
 import { sendUserToast } from '../utils';
 import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-import jsonWorker from 'monaco-editor/esm/vs/language/json/json.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 getMessageServiceOverride from 'vscode/service-override/messages';
 import { StandaloneServices } from 'vscode/services';
 import { DENO_INIT_CODE_CLEAR, PYTHON_INIT_CODE_CLEAR } from '../script_helpers';
+import { createHash as randomHash, editorConfig, langToExt, updateOptions } from '../editorUtils';
 StandaloneServices.initialize({
     ...getMessageServiceOverride(document.body)
 });
@@ -41,13 +30,11 @@ let editor;
 export let deno = false;
 export let lang = deno ? 'typescript' : 'python';
 export let code = '';
-export let hash = (Math.random() + 1).toString(36).substring(2);
+export let hash = randomHash();
 export let cmdEnterAction = undefined;
 export let formatAction = undefined;
 export let automaticLayout = true;
 export let websocketAlive = { pyright: false, black: false, deno: false };
-export let extraLib = '';
-export let extraLibPath = '';
 export let shouldBindKey = true;
 let websockets = [];
 let websocketInterval;
@@ -64,10 +51,7 @@ if (browser) {
         // @ts-ignore
         self.MonacoEnvironment = {
             getWorker: function (_moduleId, label) {
-                if (label === 'json') {
-                    return new jsonWorker();
-                }
-                else if (label === 'typescript' || label === 'javascript') {
+                if (label === 'typescript' || label === 'javascript') {
                     return new tsWorker();
                 }
                 else {
@@ -85,22 +69,6 @@ export function insertAtCursor(code) {
         editor.trigger('keyboard', 'type', { text: code });
     }
 }
-function langToExt(lang) {
-    switch (lang) {
-        case 'typescript':
-            return 'ts';
-        case 'python':
-            return 'py';
-        case 'javascript':
-            return 'js';
-        case 'json':
-            return 'json';
-        case 'sql':
-            return 'sql';
-        default:
-            return 'unknown';
-    }
-}
 export function insertAtBeginning(code) {
     if (editor) {
         const range = { startLineNumber: 1, startColumn: 1, endLineNumber: 1, endColumn: 1 };
@@ -336,28 +304,8 @@ async function closeWebsockets() {
 }
 async function loadMonaco() {
     const model = monaco.editor.createModel(code, lang, monaco.Uri.parse(uri));
-    model.updateOptions({ tabSize: 2, insertSpaces: true });
-    editor = monaco.editor.create(divEl, {
-        model: model,
-        value: code,
-        language: lang,
-        automaticLayout,
-        readOnly: false,
-        fixedOverflowWidgets: true,
-        autoDetectHighContrast: true,
-        //lineNumbers: 'off',
-        //lineDecorationsWidth: 0,
-        lineNumbersMinChars: 4,
-        lineNumbers: (ln) => '<span class="pr-4 text-gray-400">' + ln + '</span>',
-        folding: false,
-        scrollBeyondLastLine: false,
-        minimap: {
-            enabled: false
-        },
-        lightbulb: {
-            enabled: true
-        }
-    });
+    model.updateOptions(updateOptions);
+    editor = monaco.editor.create(divEl, editorConfig(model, code, lang, automaticLayout));
     if (shouldBindKey) {
         editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
             format();
@@ -390,14 +338,6 @@ async function loadMonaco() {
     editor.onDidBlurEditorText(() => {
         dispatch('blur');
     });
-    if (lang == 'javascript' && extraLib != '' && extraLibPath != '') {
-        monaco.languages.typescript.javascriptDefaults.setExtraLibs([
-            {
-                content: extraLib,
-                filePath: extraLibPath
-            }
-        ]);
-    }
     if (lang == 'python' || deno) {
         reloadWebsocket();
     }
@@ -433,20 +373,5 @@ onDestroy(() => {
 		padding-left: 0px;
 		padding-right: 0px;
 		/* stylelint-disable-next-line unit-allowed-list */
-		height: 80vh;
-}
-
-	.small-editor {
-		/* stylelint-disable-next-line unit-allowed-list */
-		height: 26vh;
-	}
-
-	.few-lines-editor {
-		/* stylelint-disable-next-line unit-allowed-list */
-		height: 80px;
-	}
-
-	.two-lines-editor {
-		/* stylelint-disable-next-line unit-allowed-list */
-		height: 40px;
-	}</style>
+		height: 80vh
+}</style>

package/components/Editor.svelte.d.ts

@@ -14,8 +14,6 @@ declare const __propDef: {
             black: boolean;
             deno: boolean;
         } | undefined;
-        extraLib?: string | undefined;
-        extraLibPath?: string | undefined;
         shouldBindKey?: boolean | undefined;
         getCode?: (() => string) | undefined;
         insertAtCursor?: ((code: string) => void) | undefined;

package/components/IconedResourceType.svelte

@@ -42,7 +42,7 @@ export let width = '24px';
 	{:else if name === 'slack'}
 		<Slack {height} {width} />
 	{:else if name === 'github'}
-		<Icon data={GithubIcon} scale={1.4} />
+		<GithubIcon />
 	{:else if name === 'gmail'}
 		<GmailIcon {height} {width} />
 	{:else if name === 'gsheets'}

package/components/InputTransformForm.svelte

@@ -2,11 +2,11 @@
 import { Button, Tooltip } from 'flowbite-svelte';
 import Icon from 'svelte-awesome';
 import ArgInput from './ArgInput.svelte';
-import Editor from './Editor.svelte';
 import FieldHeader from './FieldHeader.svelte';
 import DynamicInputHelpBox from './flows/DynamicInputHelpBox.svelte';
 import { codeToStaticTemplate, getDefaultExpr, isCodeInjection } from './flows/utils';
 import OverlayPropertyPicker from './propertyPicker/OverlayPropertyPicker.svelte';
+import SimpleEditor from './SimpleEditor.svelte';
 import Toggle from './Toggle.svelte';
 export let schema;
 export let arg;
@@ -188,7 +188,7 @@ $: checked = propertyType == 'javascript';
 				}}
 			>
 				<div class="border rounded p-2 mt-2 border-gray-300">
-					<Editor
+					<SimpleEditor
 						bind:this={monacos[argName]}
 						on:focus={() => focusProp(argName, true)}
 						bind:code={arg.expr}

package/components/SchemaEditor.svelte

@@ -3,9 +3,9 @@ import { faPen, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { Button } from 'flowbite-svelte';
 import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
-import Editor from './Editor.svelte';
 import SchemaEditorProperty from './SchemaEditorProperty.svelte';
 import SchemaModal, { DEFAULT_PROPERTY, schemaToModal } from './SchemaModal.svelte';
+import SimpleEditor from './SimpleEditor.svelte';
 import TableCustom from './TableCustom.svelte';
 import Toggle from './Toggle.svelte';
 import Tooltip from './Tooltip.svelte';
@@ -208,7 +208,7 @@ function switchTab() {
 			</div>
 		{:else}
 			<div class="border rounded mt-4 p-2">
-				<Editor
+				<SimpleEditor
 					on:change={() => {
 						try {
 							schema = JSON.parse(schemaString)

package/components/SimpleEditor.svelte

@@ -0,0 +1,143 @@
+<script context="module">import * as monaco from 'monaco-editor';
+monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+    target: monaco.languages.typescript.ScriptTarget.Latest,
+    allowNonTsExtensions: true,
+    noLib: true
+});
+monaco.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 { buildWorkerDefinition } from 'monaco-editor-workers';
+import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+import { createHash, editorConfig, langToExt, updateOptions } from '../editorUtils';
+let divEl = null;
+let editor;
+export let lang;
+export let code = '';
+export let hash = createHash();
+export let cmdEnterAction = undefined;
+export let formatAction = undefined;
+export let automaticLayout = true;
+export let extraLib = '';
+export let extraLibPath = '';
+export let shouldBindKey = true;
+const dispatch = createEventDispatcher();
+const uri = `file:///${hash}.${langToExt(lang)}`;
+if (browser) {
+    if (dev) {
+        buildWorkerDefinition('../../../node_modules/monaco-editor-workers/dist/workers', import.meta.url, false);
+    }
+    else {
+        // @ts-ignore
+        self.MonacoEnvironment = {
+            getWorker: function (_moduleId, label) {
+                if (label === 'json') {
+                    return new jsonWorker();
+                }
+                else {
+                    return new editorWorker();
+                }
+            }
+        };
+    }
+}
+export function getCode() {
+    return editor?.getValue() ?? '';
+}
+export function insertAtCursor(code) {
+    if (editor) {
+        editor.trigger('keyboard', 'type', { text: code });
+    }
+}
+export function setCode(ncode) {
+    code = ncode;
+    if (editor) {
+        editor.setValue(ncode);
+    }
+}
+function format() {
+    if (editor) {
+        code = getCode();
+        editor.getAction('editor.action.formatDocument').run();
+        if (formatAction) {
+            formatAction();
+        }
+    }
+}
+async function loadMonaco() {
+    const model = monaco.editor.createModel(code, lang, monaco.Uri.parse(uri));
+    model.updateOptions(updateOptions);
+    editor = monaco.editor.create(divEl, editorConfig(model, code, lang, automaticLayout));
+    if (shouldBindKey) {
+        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
+            format();
+        });
+        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, function () {
+            if (cmdEnterAction) {
+                cmdEnterAction();
+            }
+        });
+    }
+    let timeoutModel = undefined;
+    editor.onDidChangeModelContent((event) => {
+        timeoutModel && clearTimeout(timeoutModel);
+        timeoutModel = setTimeout(() => {
+            code = getCode();
+        }, 500);
+        dispatch('change');
+    });
+    editor.onDidFocusEditorText(() => {
+        dispatch('focus');
+    });
+    editor.onDidBlurEditorText(() => {
+        dispatch('blur');
+    });
+    if (lang == 'javascript' && extraLib != '' && extraLibPath != '') {
+        monaco.languages.typescript.javascriptDefaults.setExtraLibs([
+            {
+                content: extraLib,
+                filePath: extraLibPath
+            }
+        ]);
+    }
+}
+onMount(() => {
+    if (browser) {
+        loadMonaco();
+    }
+});
+onDestroy(() => {
+    try {
+        editor && editor.dispose();
+    }
+    catch (err) { }
+});
+</script>
+
+<div bind:this={divEl} class={$$props.class} />
+
+<style>
+	.editor {
+		padding-left: 0px;
+		padding-right: 0px;
+		/* stylelint-disable-next-line unit-allowed-list */
+		height: 80vh;
+}
+
+	.small-editor {
+		/* stylelint-disable-next-line unit-allowed-list */
+		height: 26vh;
+	}
+
+	.few-lines-editor {
+		/* stylelint-disable-next-line unit-allowed-list */
+		height: 80px;
+	}</style>

package/components/SimpleEditor.svelte.d.ts

@@ -0,0 +1,35 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        lang: string;
+        code?: string | undefined;
+        hash?: string | undefined;
+        cmdEnterAction?: (() => void) | undefined;
+        formatAction?: (() => void) | undefined;
+        automaticLayout?: boolean | undefined;
+        extraLib?: string | undefined;
+        extraLibPath?: string | undefined;
+        shouldBindKey?: boolean | undefined;
+        getCode?: (() => string) | undefined;
+        insertAtCursor?: ((code: string) => void) | undefined;
+        setCode?: ((ncode: string) => void) | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+        focus: CustomEvent<any>;
+        blur: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SimpleEditorProps = typeof __propDef.props;
+export declare type SimpleEditorEvents = typeof __propDef.events;
+export declare type SimpleEditorSlots = typeof __propDef.slots;
+export default class SimpleEditor extends SvelteComponentTyped<SimpleEditorProps, SimpleEditorEvents, SimpleEditorSlots> {
+    get getCode(): () => string;
+    get insertAtCursor(): (code: string) => void;
+    get setCode(): (ncode: string) => void;
+}
+export {};

package/components/flows/FlowSettings.svelte

@@ -4,9 +4,9 @@ import { Button } from 'flowbite-svelte';
 import Icon from 'svelte-awesome';
 import Menu from '../common/menu/Menu.svelte';
 import MenuItem from '../common/menu/MenuItem.svelte';
-import Editor from '../Editor.svelte';
 import FlowViewer from '../FlowViewer.svelte';
 import Modal from '../Modal.svelte';
+import SimpleEditor from '../SimpleEditor.svelte';
 import CollapseLink from './../CollapseLink.svelte';
 import CronInput from './../CronInput.svelte';
 import FlowBox from './../flows/FlowBox.svelte';
@@ -32,7 +32,7 @@ let jsonValue = '';
 <Modal bind:this={jsonSetter}>
 	<div slot="title">Import JSON</div>
 	<div slot="content" class="h-full">
-		<Editor bind:code={jsonValue} lang={'json'} class="h-full" />
+		<SimpleEditor bind:code={jsonValue} lang="json" class="h-full" />
 	</div>
 	<div slot="submission">
 		<button

package/editorUtils.d.ts

@@ -0,0 +1,25 @@
+export declare function editorConfig(model: any, code: string, lang: string, automaticLayout: boolean): {
+    model: any;
+    value: string;
+    language: string;
+    automaticLayout: boolean;
+    readOnly: boolean;
+    fixedOverflowWidgets: boolean;
+    autoDetectHighContrast: boolean;
+    lineNumbersMinChars: number;
+    lineNumbers: (ln: any) => string;
+    folding: boolean;
+    scrollBeyondLastLine: boolean;
+    minimap: {
+        enabled: boolean;
+    };
+    lightbulb: {
+        enabled: boolean;
+    };
+};
+export declare function createHash(): string;
+export declare function langToExt(lang: string): string;
+export declare const updateOptions: {
+    tabSize: number;
+    insertSpaces: boolean;
+};

package/editorUtils.js

@@ -0,0 +1,43 @@
+export function editorConfig(model, code, lang, automaticLayout) {
+    return {
+        model,
+        value: code,
+        language: lang,
+        automaticLayout,
+        readOnly: false,
+        fixedOverflowWidgets: true,
+        autoDetectHighContrast: true,
+        //lineNumbers: 'off',
+        //lineDecorationsWidth: 0,
+        lineNumbersMinChars: 4,
+        lineNumbers: (ln) => '<span class="pr-4 text-gray-400">' + ln + '</span>',
+        folding: false,
+        scrollBeyondLastLine: false,
+        minimap: {
+            enabled: false
+        },
+        lightbulb: {
+            enabled: true
+        }
+    };
+}
+export function createHash() {
+    return (Math.random() + 1).toString(36).substring(2);
+}
+export function langToExt(lang) {
+    switch (lang) {
+        case 'javascript':
+            return 'js';
+        case 'json':
+            return 'json';
+        case 'sql':
+            return 'sql';
+        case 'typescript':
+            return 'ts';
+        case 'python':
+            return 'py';
+        default:
+            return 'unknown';
+    }
+}
+export const updateOptions = { tabSize: 2, insertSpaces: true };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "windmill-components",
-  "version": "1.35.1",
+  "version": "1.35.42",
   "devDependencies": {
     "@playwright/test": "^1.25.1",
     "@sveltejs/adapter-static": "^1.0.0-next.39",
@@ -116,6 +116,7 @@
     "./components/ScriptSchema.svelte": "./components/ScriptSchema.svelte",
     "./components/ShareModal.svelte": "./components/ShareModal.svelte",
     "./components/SharedBadge.svelte": "./components/SharedBadge.svelte",
+    "./components/SimpleEditor.svelte": "./components/SimpleEditor.svelte",
     "./components/StringTypeNarrowing.svelte": "./components/StringTypeNarrowing.svelte",
     "./components/Switch.svelte": "./components/Switch.svelte",
     "./components/TableCustom.svelte": "./components/TableCustom.svelte",
@@ -186,6 +187,7 @@
     "./components/sidebar/SidebarContent.svelte": "./components/sidebar/SidebarContent.svelte",
     "./components/sidebar/UserMenu.svelte": "./components/sidebar/UserMenu.svelte",
     "./components/sidebar/WorkspaceMenu.svelte": "./components/sidebar/WorkspaceMenu.svelte",
+    "./editorUtils": "./editorUtils.js",
     "./gen/core/ApiError": "./gen/core/ApiError.js",
     "./gen/core/ApiRequestOptions": "./gen/core/ApiRequestOptions.js",
     "./gen/core/ApiResult": "./gen/core/ApiResult.js",