windmill-components 1.13.27 → 1.22.42

package/components/DisplayResult.svelte

@@ -50,52 +50,58 @@ function inferResultKind(result) {
 <svelte:head>
 	{@html github}
 </svelte:head>
-{#if Object.keys(result).length > 0}<div>
-		The result keys are: <b>{Object.keys(result).join(', ')}</b>
-	</div>
-{/if}
-{#if resultKind == 'table-col'}
-	<div class="grid grid-flow-col-dense border border-gray-200 rounded-md ">
-		{#each Object.keys(result) as col}
-			<div class="flex flex-col  min-w-full">
-				<div class="px-12 text-left uppercase border-b bg-gray-50 overflow-hidden rounded-t-md ">
-					{col}
-				</div>
-				{#each result[col] as item}
-					<div class="px-12 text-left">{item}</div>
-				{/each}
-			</div>
-		{/each}
-	</div>
-{:else if resultKind == 'table-row'}<div
-		class="grid grid-flow-col-dense border border-gray-200 rounded-md "
-	>
-		<TableCustom>
-			<tbody slot="body">
-				{#each asListOfList(Object.values(result)[0]) as row}
-					<tr>
-						{#each row as v}
-							<td>{v ?? ''}</td>
+{#if result}
+	{#if Object.keys(result).length > 0}<div>
+			The result keys are: <b>{Object.keys(result).join(', ')}</b>
+		</div>
+	{/if}
+	{#if resultKind == 'table-col'}
+		<div class="grid grid-flow-col-dense border border-gray-200 rounded-md ">
+			{#each Object.keys(result) as col}
+				<div class="flex flex-col  min-w-full">
+					<div class="px-12 text-left uppercase border-b bg-gray-50 overflow-hidden rounded-t-md ">
+						{col}
+					</div>
+					{#if Array.isArray(result[col])}
+						{#each result[col] as item}
+							<div class="px-12 text-left">
+								{typeof item === 'string' ? item : JSON.stringify(item)}
+							</div>
 						{/each}
-					</tr>
-				{/each}
-			</tbody>
-		</TableCustom>
-	</div>
-{:else if resultKind == 'png'}
-	<div class="h-full">
-		Result is an image: <img
-			alt="png rendered"
-			class="w-auto h-full"
-			src="data:image/png;base64,{result.png}"
-		/>
-	</div>
-{:else if resultKind == 'file'}
-	<div>
-		Result is a file: <a
-			download="windmill.file"
-			href="data:application/octet-stream;base64,{result.file}">Download</a
+					{/if}
+				</div>
+			{/each}
+		</div>
+	{:else if resultKind == 'table-row'}<div
+			class="grid grid-flow-col-dense border border-gray-200 rounded-md "
 		>
-	</div>
-{:else}<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
+			<TableCustom>
+				<tbody slot="body">
+					{#each asListOfList(Object.values(result)[0]) as row}
+						<tr>
+							{#each row as v}
+								<td>{v ?? ''}</td>
+							{/each}
+						</tr>
+					{/each}
+				</tbody>
+			</TableCustom>
+		</div>
+	{:else if resultKind == 'png'}
+		<div class="h-full">
+			Result is an image: <img
+				alt="png rendered"
+				class="w-auto h-full"
+				src="data:image/png;base64,{result.png}"
+			/>
+		</div>
+	{:else if resultKind == 'file'}
+		<div>
+			Result is a file: <a
+				download="windmill.file"
+				href="data:application/octet-stream;base64,{result.file}">Download</a
+			>
+		</div>
+	{:else}<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
+	{/if}
 {/if}

package/components/Editor.svelte

@@ -1,39 +1,48 @@
-<script>import { page } from '$app/stores';
-import { browser } from '$app/env';
-import { onDestroy, onMount } from 'svelte';
+<script>import { browser, dev } from '$app/env';
+import { page } from '$app/stores';
+import { buildExtraLib, 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 { createEventDispatcher } from 'svelte';
-const dispatch = createEventDispatcher();
+import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+import { buildWorkerDefinition } from 'monaco-editor-workers';
 let divEl = null;
 let editor;
 export let deno = false;
 export let lang = deno ? 'typescript' : 'python';
-export let code;
+export let code = '';
 export let hash = (Math.random() + 1).toString(36).substring(2);
 export let cmdEnterAction = undefined;
 export let formatAction = undefined;
 export let automaticLayout = true;
 export let websocketAlive = { pyright: false, black: false, deno: false };
+export let extraLib = lang == 'typescript' && !deno ? buildExtraLib() : '';
+export let extraLibPath = 'file:///node_modules/@types/windmill/index.d.ts';
 let websockets = [];
+let websocketInterval;
 let uri = '';
 let disposeMethod;
+const dispatch = createEventDispatcher();
 if (browser) {
-    // @ts-ignore
-    self.MonacoEnvironment = {
-        getWorker: function (_moduleId, label) {
-            if (label === 'json') {
-                return new jsonWorker();
-            }
-            else if (label === 'typescript' || label === 'javascript') {
-                return new tsWorker();
-            }
-            else {
-                return new editorWorker();
+    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 if (label === 'typescript' || label === 'javascript') {
+                    return new tsWorker();
+                }
+                else {
+                    return new editorWorker();
+                }
             }
-        }
-    };
+        };
+    }
 }
 export function getCode() {
     return editor?.getValue();
@@ -73,16 +82,17 @@ export async function reloadWebsocket() {
         const { MonacoLanguageClient } = await import('monaco-languageclient');
         const { CloseAction, ErrorAction } = await import('vscode-languageclient');
         const vscode = await import('vscode');
-        const { RequestType, toSocket, WebSocketMessageReader, WebSocketMessageWriter } = await import('@codingame/monaco-jsonrpc');
+        const { toSocket, WebSocketMessageReader, WebSocketMessageWriter } = await import('vscode-ws-jsonrpc');
+        const { RequestType } = await import('vscode-jsonrpc');
         function createLanguageClient(transports, name, initializationOptions) {
             const client = new MonacoLanguageClient({
                 name: name,
                 clientOptions: {
                     documentSelector: deno ? ['typescript'] : ['python'],
                     errorHandler: {
-                        error: () => ({ action: ErrorAction.Shutdown }),
+                        error: () => ({ action: ErrorAction.Continue }),
                         closed: () => ({
-                            action: CloseAction.Restart
+                            action: CloseAction.DoNotRestart
                         })
                     },
                     markdown: {
@@ -120,15 +130,29 @@ export async function reloadWebsocket() {
                     const writer = new WebSocketMessageWriter(socket);
                     const languageClient = createLanguageClient({ reader, writer }, name, options);
                     languageClient.start();
+                    reader.onClose(() => {
+                        try {
+                            languageClient.stop();
+                        }
+                        catch (err) {
+                            console.error(err);
+                        }
+                    });
                     socket.onClose((_code, _reason) => {
                         websocketAlive[name] = false;
                     });
-                    vscode.commands.registerCommand('deno.cache', (uris = []) => {
-                        languageClient.sendRequest(new RequestType('deno/cache'), {
-                            referrer: { uri },
-                            uris: uris.map((uri) => ({ uri }))
+                    if (name == 'deno') {
+                        vscode.commands.getCommands().then((v) => {
+                            if (!v.includes('deno.cache')) {
+                                vscode.commands.registerCommand('deno.cache', (uris = []) => {
+                                    languageClient.sendRequest(new RequestType('deno/cache'), {
+                                        referrer: { uri },
+                                        uris: uris.map((uri) => ({ uri }))
+                                    });
+                                });
+                            }
                         });
-                    });
+                    }
                     websocketAlive[name] = true;
                 };
             }
@@ -191,6 +215,15 @@ export async function reloadWebsocket() {
                 }
             });
         }
+        websocketInterval && clearInterval(websocketInterval);
+        websocketInterval = setInterval(() => {
+            if (document.visibilityState == 'visible') {
+                if (!websocketAlive.black && !websocketAlive.deno && !websocketAlive.pyright) {
+                    sendUserToast('Smart assistant got disconnected. Reconnecting to windmill language server for smart assistance');
+                    reloadWebsocket();
+                }
+            }
+        }, 5000);
     }
 }
 function closeWebsockets() {
@@ -203,6 +236,7 @@ function closeWebsockets() {
         }
     }
     websockets = [];
+    websocketInterval && clearInterval(websocketInterval);
 }
 async function loadMonaco() {
     const monaco = await import('monaco-editor');
@@ -245,6 +279,12 @@ async function loadMonaco() {
         scrollBeyondLastLine: false,
         minimap: {
             enabled: false
+        },
+        scrollbar: {
+            alwaysConsumeMouseWheel: false
+        },
+        lightbulb: {
+            enabled: true
         }
     });
     editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
@@ -281,47 +321,12 @@ async function loadMonaco() {
             });
         }
         else {
-            monaco.languages.typescript.typescriptDefaults.addExtraLib(`
-/**
- * get variable (including secret) at path
- * @param {string} path - path of the variable (e.g: g/all/pretty_secret)
- */
-export function variable(path: string): string;
-
-/**
- * get resource at path
- * @param {string} path - path of the resource (e.g: g/all/my_resource)
- */
-export function resource(path: string): any;
-
-/**
- * get result of step n.
- * If n is negative, for instance -1, it is the step just before this one.
- * Step 0 is flow input.
- * @param {number} n - step number.
- */
-export function step(n: number): any;
-
-/**
- * flow input as an object
- */
-export const flow_input: any;
-
-/**
- * previous result as an object
- */
-export const previous_result: any;
-
-/**
- * static params of this same step
- */
-export const params: any;
-				`, 'file:///node_modules/@types/windmill/index.d.ts');
+            monaco.languages.typescript.typescriptDefaults.addExtraLib(extraLib, extraLibPath);
         }
     }
     if (lang == 'python' || deno) {
         const { MonacoServices } = await import('monaco-languageclient');
-        MonacoServices.install(monaco);
+        MonacoServices.install();
     }
     reloadWebsocket();
     return () => {

package/components/Editor.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         deno?: boolean | undefined;
         lang?: string | undefined;
-        code: string;
+        code?: string | undefined;
         hash?: string | undefined;
         cmdEnterAction?: (() => void) | undefined;
         formatAction?: (() => void) | undefined;
@@ -14,6 +14,8 @@ declare const __propDef: {
             black: boolean;
             deno: boolean;
         } | undefined;
+        extraLib?: string | undefined;
+        extraLibPath?: string | undefined;
         getCode?: (() => string) | undefined;
         insertAtCursor?: ((code: string) => void) | undefined;
         insertAtBeginning?: ((code: string) => void) | undefined;

package/components/EditorBar.svelte

@@ -0,0 +1,204 @@
+<script>import { ResourceService, ScriptService, VariableService } from '../gen';
+import { getScriptByPath, loadHubScripts, sendUserToast } from '../utils';
+import Icon from 'svelte-awesome';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import { workspaceStore, hubScripts } from '../stores';
+import ItemPicker from './ItemPicker.svelte';
+import VariableEditor from './VariableEditor.svelte';
+import ResourceEditor from './ResourceEditor.svelte';
+import { Highlight } from 'svelte-highlight';
+import { python, typescript } from 'svelte-highlight/languages';
+import github from 'svelte-highlight/styles/github';
+import Modal from './Modal.svelte';
+export let lang;
+export let editor;
+export let websocketAlive;
+let variablePicker;
+let resourcePicker;
+let scriptPicker;
+let variableEditor;
+let resourceEditor;
+let codeViewer;
+let codeLang = 'deno';
+let codeContent = '';
+async function loadVariables() {
+    let r = [];
+    const variables = (await VariableService.listVariable({ workspace: $workspaceStore ?? 'NO_W' })).map((x) => {
+        return { name: x.path, ...x };
+    });
+    const rvariables = await VariableService.listContextualVariables({
+        workspace: $workspaceStore ?? 'NO_W'
+    });
+    r = r.concat(variables).concat(rvariables);
+    return r;
+}
+async function loadScripts() {
+    const workspaceScripts = await ScriptService.listScripts({
+        workspace: $workspaceStore ?? 'NO_W'
+    });
+    await loadHubScripts();
+    const hubScripts_ = $hubScripts ?? [];
+    return workspaceScripts.concat(hubScripts_);
+}
+</script>
+
+<svelte:head>
+	{@html github}
+</svelte:head>
+
+<ItemPicker
+	bind:this={scriptPicker}
+	pickCallback={async (path, _) => {
+		const { language, content } = await getScriptByPath(path ?? '')
+		codeContent = content
+		codeLang = language
+		codeViewer.openModal()
+	}}
+	closeOnClick={false}
+	itemName="script"
+	extraField="summary"
+	loadItems={loadScripts}
+/>
+
+<Modal bind:this={codeViewer}>
+	<div slot="title">Code</div>
+	<div slot="content">
+		{#if codeLang == 'python3'}
+			<Highlight language={python} code={codeContent} />
+		{:else if codeLang == 'deno'}
+			<Highlight language={typescript} code={codeContent} />
+		{/if}
+	</div></Modal
+>
+
+<ItemPicker
+	bind:this={variablePicker}
+	pickCallback={(path, name) => {
+		if (!path) {
+			if (lang == 'deno') {
+				editor.insertAtCursor(`Deno.env.get('${name}')`)
+			} else {
+				if (!editor.getCode().includes('import os')) {
+					editor.insertAtBeginning('import os\n')
+				}
+				editor.insertAtCursor(`os.environ.get("${name}")`)
+			}
+			sendUserToast(`${name} inserted at cursor`)
+		} else {
+			if (lang == 'deno') {
+				if (!editor.getCode().includes('import * as wmill from')) {
+					editor.insertAtBeginning(
+						`import * as wmill from 'https://deno.land/x/windmill@v${__pkg__.version}/index.ts'\n`
+					)
+				}
+				editor.insertAtCursor(`(await wmill.getVariable('${path}'))`)
+			} else {
+				if (!editor.getCode().includes('import wmill')) {
+					editor.insertAtBeginning('import wmill\n')
+				}
+				editor.insertAtCursor(`wmill.get_variable("${path}")`)
+			}
+			sendUserToast(`${name} inserted at cursor`)
+		}
+	}}
+	itemName="Variable"
+	extraField="name"
+	loadItems={loadVariables}
+>
+	<div slot="submission" class="flex flex-row">
+		<div class="text-xs mr-2 align-middle">
+			The variable you were looking for does not exist yet?
+		</div>
+		<button
+			class="default-button-secondary"
+			type="button"
+			on:click={() => {
+				variableEditor.initNew()
+			}}
+		>
+			Create a new variable
+		</button>
+	</div>
+</ItemPicker>
+
+<ItemPicker
+	bind:this={resourcePicker}
+	pickCallback={(path, _) => {
+		if (lang == 'deno') {
+			if (!editor.getCode().includes('import * as wmill from')) {
+				editor.insertAtBeginning(
+					`import * as wmill from 'https://deno.land/x/windmill@v${__pkg__.version}/index.ts'\n`
+				)
+			}
+			editor.insertAtCursor(`(await wmill.getResource('${path}'))`)
+		} else {
+			if (!editor.getCode().includes('import wmill')) {
+				editor.insertAtBeginning('import wmill\n')
+			}
+			editor.insertAtCursor(`wmill.get_resource("${path}")`)
+		}
+		sendUserToast(`${path} inserted at cursor`)
+	}}
+	itemName="Resource"
+	extraField="resource_type"
+	loadItems={async () =>
+		await ResourceService.listResource({ workspace: $workspaceStore ?? 'NO_W' })}
+>
+	<div slot="submission" class="flex flex-row">
+		<div class="text-xs mr-2 align-middle">
+			The resource you were looking for does not exist yet?
+		</div>
+		<button
+			class="default-button-secondary"
+			type="button"
+			on:click={() => {
+				resourceEditor.initNew()
+			}}
+		>
+			Create a new resource
+		</button>
+	</div>
+</ItemPicker>
+
+<ResourceEditor bind:this={resourceEditor} on:refresh={resourcePicker.openModal} />
+
+<VariableEditor bind:this={variableEditor} on:create={variablePicker.openModal} />
+
+<div class="flex flex-row justify-around w-full">
+	<button
+		class="default-button-secondary font-semibold py-px mr-2 text-xs align-middle max-h-8"
+		on:click|stopPropagation={() => {
+			variablePicker.openModal()
+		}}
+		>Variable picker <Icon data={faSearch} scale={0.7} />
+	</button>
+
+	<button
+		class="default-button-secondary font-semibold py-px text-xs mr-2 align-middle max-h-8"
+		on:click|stopPropagation={() => {
+			resourcePicker.openModal()
+		}}
+		>Resource picker <Icon data={faSearch} scale={0.7} />
+	</button>
+	<button
+		class="default-button-secondary font-semibold py-px text-xs mr-2 align-middle max-h-8"
+		on:click|stopPropagation={() => {
+			scriptPicker.openModal()
+		}}
+		>Script explorer <Icon data={faSearch} scale={0.7} />
+	</button>
+
+	<button
+		class="default-button-secondary py-px max-h-8 text-xs"
+		on:click|stopPropagation={() => {
+			editor.reloadWebsocket()
+		}}
+	>
+		Reload assistants (status: {#if lang == 'deno'}<span
+				class={websocketAlive.deno ? 'text-green-600' : 'text-red-600'}>deno</span
+			>{:else if lang == 'python3'}<span
+				class={websocketAlive.pyright ? 'text-green-600' : 'text-red-600'}>pyright</span
+			>
+			<span class={websocketAlive.black ? 'text-green-600' : 'text-red-600'}> black</span>{/if})
+	</button>
+</div>

package/components/EditorBar.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type Editor from './Editor.svelte';
+declare const __propDef: {
+    props: {
+        lang: 'python3' | 'deno';
+        editor: Editor;
+        websocketAlive: {
+            pyright: boolean;
+            black: boolean;
+            deno: boolean;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type EditorBarProps = typeof __propDef.props;
+export declare type EditorBarEvents = typeof __propDef.events;
+export declare type EditorBarSlots = typeof __propDef.slots;
+export default class EditorBar extends SvelteComponentTyped<EditorBarProps, EditorBarEvents, EditorBarSlots> {
+}
+export {};