windmill-components 1.85.0 → 1.87.0

package/dist/components/Dropdown.svelte

@@ -0,0 +1,113 @@
+<script>import { createEventDispatcher } from 'svelte';
+import Icon from 'svelte-awesome';
+import { MoreVertical } from 'lucide-svelte';
+import { Button, Menu } from './common';
+import { goto } from '$app/navigation';
+import { twMerge } from 'tailwind-merge';
+export let dropdownItems = [];
+export let name = undefined;
+export let placement = 'bottom-start';
+export let btnClasses = '';
+$: buttonClass = twMerge('!border-0 bg-transparent !p-[6px]', btnClasses);
+const dispatch = createEventDispatcher();
+function computeDropdowns() {
+    if (typeof dropdownItems === 'function') {
+        return dropdownItems();
+    }
+    else {
+        return dropdownItems;
+    }
+}
+</script>
+
+<Menu {placement} let:close>
+	<Button
+		nonCaptureEvent
+		color="dark"
+		variant="border"
+		size="xs"
+		btnClasses={buttonClass}
+		{...$$restProps}
+		slot="trigger"
+	>
+		{#if !$$slots.default}
+			<MoreVertical size={20} />
+		{:else}
+			<slot />
+		{/if}
+	</Button>
+	{#if dropdownItems}
+		{#each computeDropdowns() as item, i}
+			{#if item.action}
+				<button
+					on:click|preventDefault|stopPropagation={(event) => {
+						if (!item.disabled) {
+							close()
+							item.action && item.action(event)
+							dispatch('click', { item: item?.eventName })
+						}
+					}}
+					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-200' : ''}
+					 {item.separatorTop ? 'border-t' : ''} {item.separatorBottom ? 'border-b' : ''} {item.type ==
+					'delete'
+						? 'text-red-500'
+						: ''}"
+					role="menuitem"
+					tabindex="-1"
+					id="user-menu-item-{name}-{i}}"
+					disabled={item.disabled}
+				>
+					{#if item.icon}
+						<Icon
+							data={item.icon}
+							scale={0.6}
+							class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
+						/>
+					{/if}
+					{item.displayName}
+				</button>
+			{:else if item.href && !item.disabled}
+				<a
+					href={item.href}
+					on:click|stopPropagation|preventDefault={() => goto(item.href ?? '')}
+					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}}"
+					class:disabled={item.disabled}
+				>
+					{#if item.icon}
+						<Icon
+							data={item.icon}
+							scale={0.6}
+							class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
+						/>
+					{/if}
+					{item.displayName}
+				</a>
+			{:else}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<span
+					class:bg-gray-200={item.disabled}
+					class="block font-semibold 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|stopPropagation
+				>
+					{#if item.icon}
+						<Icon
+							data={item.icon}
+							scale={0.6}
+							class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
+						/>
+					{/if}
+					{item.displayName}
+				</span>
+			{/if}
+		{/each}
+	{/if}
+</Menu>

package/dist/components/Dropdown.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type { DropdownItem } from '../utils';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        dropdownItems?: DropdownItem[] | (() => DropdownItem[]) | undefined;
+        name?: string | undefined;
+        placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end" | undefined;
+        btnClasses?: string | undefined;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type DropdownProps = typeof __propDef.props;
+export type DropdownEvents = typeof __propDef.events;
+export type DropdownSlots = typeof __propDef.slots;
+export default class Dropdown extends SvelteComponentTyped<DropdownProps, DropdownEvents, DropdownSlots> {
+}
+export {};

package/dist/components/Editor.svelte

@@ -0,0 +1,495 @@
+<script context="module">import getDialogServiceOverride from 'vscode/service-override/dialogs';
+import getNotificationServiceOverride from 'vscode/service-override/notifications';
+import { StandaloneServices } from 'vscode/services';
+try {
+    StandaloneServices?.initialize({
+        ...getNotificationServiceOverride(document.body),
+        ...getDialogServiceOverride()
+    });
+}
+catch (e) {
+    console.error(e);
+}
+</script>
+
+<script>import { browser } from '$app/environment';
+import { page } from '$app/stores';
+import { sendUserToast } from '../utils';
+import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+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/python/python.contribution';
+import 'monaco-editor/esm/vs/basic-languages/go/go.contribution';
+import 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution';
+import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
+import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
+import { MonacoLanguageClient, MonacoServices } from 'monaco-languageclient';
+import { toSocket, WebSocketMessageReader, WebSocketMessageWriter } from 'vscode-ws-jsonrpc';
+import { CloseAction, ErrorAction, RequestType } from 'vscode-languageclient';
+import * as vscode from 'vscode';
+languages.typescript.typescriptDefaults.setModeConfiguration({
+    completionItems: false,
+    definitions: false,
+    hovers: false
+});
+meditor.defineTheme('myTheme', {
+    base: 'vs',
+    inherit: true,
+    rules: [],
+    colors: {
+        'editorLineNumber.foreground': '#999',
+        'editorGutter.background': '#F9FAFB'
+    }
+});
+meditor.setTheme('myTheme');
+import { createHash as randomHash, editorConfig, langToExt, updateOptions } from '../editorUtils';
+import { BASH_INIT_CODE, DENO_INIT_CODE_CLEAR, GO_INIT_CODE, PYTHON_INIT_CODE_CLEAR } from '../script_helpers';
+import { dirtyStore } from './common/confirmationModal/dirtyStore';
+import { buildWorkerDefinition } from './build_workers';
+import { workspaceStore } from '../stores';
+import { UserService } from '../gen';
+let divEl = null;
+let editor;
+export let lang;
+export let code = '';
+export let cmdEnterAction = undefined;
+export let formatAction = undefined;
+export let automaticLayout = true;
+export let websocketAlive = { pyright: false, black: false, deno: false, go: false };
+export let shouldBindKey = true;
+export let fixedOverflowWidgets = true;
+export let path = randomHash();
+if (path == '' || path == undefined || path.startsWith('/')) {
+    path = randomHash();
+}
+let initialPath = path;
+$: path != initialPath && handlePathChange();
+let websockets = [];
+let websocketInterval;
+let lastWsAttempt = new Date();
+let nbWsAttempt = 0;
+let disposeMethod;
+const dispatch = createEventDispatcher();
+const uri = lang == 'go' ? `file:///tmp/monaco/${randomHash()}.go` : `file:///${path}.${langToExt(lang)}`;
+// if (lang != 'typescript') {
+buildWorkerDefinition('../../../workers', import.meta.url, false);
+// }
+export function getCode() {
+    return editor?.getValue() ?? '';
+}
+export function insertAtCursor(code) {
+    if (editor) {
+        editor.trigger('keyboard', 'type', { text: code });
+    }
+}
+export function insertAtBeginning(code) {
+    if (editor) {
+        const range = { startLineNumber: 1, startColumn: 1, endLineNumber: 1, endColumn: 1 };
+        const op = { range: range, text: code, forceMoveMarkers: true };
+        editor.executeEdits('external', [op]);
+    }
+}
+export function insertAtLine(code, line) {
+    if (editor) {
+        const range = { startLineNumber: line, startColumn: 1, endLineNumber: line, endColumn: 1 };
+        const op = { range: range, text: code, forceMoveMarkers: true };
+        editor.executeEdits('external', [op]);
+    }
+}
+export function setCode(ncode, noHistory = false) {
+    code = ncode;
+    if (noHistory) {
+        editor?.setValue(ncode);
+    }
+    else {
+        if (editor?.getModel()) {
+            // editor.setValue(ncode)
+            editor.pushUndoStop();
+            editor.executeEdits('set', [
+                {
+                    range: editor.getModel().getFullModelRange(),
+                    text: ncode
+                }
+            ]);
+            editor.pushUndoStop();
+        }
+    }
+}
+export function format() {
+    if (editor) {
+        code = getCode();
+        editor?.getAction('editor.action.formatDocument')?.run();
+        if (formatAction) {
+            formatAction();
+        }
+    }
+}
+export async function clearContent() {
+    if (editor) {
+        if (lang == 'typescript') {
+            setCode(DENO_INIT_CODE_CLEAR);
+        }
+        else if (lang == 'python') {
+            setCode(PYTHON_INIT_CODE_CLEAR);
+        }
+        else if (lang == 'go') {
+            setCode(GO_INIT_CODE);
+        }
+        else if (lang == 'shell') {
+            setCode(BASH_INIT_CODE);
+        }
+    }
+}
+let command = undefined;
+let monacoServices = undefined;
+export async function reloadWebsocket() {
+    await closeWebsockets();
+    monacoServices = MonacoServices.install();
+    function createLanguageClient(transports, name, initializationOptions, middlewareOptions) {
+        const client = new MonacoLanguageClient({
+            name: name,
+            clientOptions: {
+                documentSelector: [lang],
+                errorHandler: {
+                    error: () => ({ action: ErrorAction.Continue }),
+                    closed: () => ({
+                        action: CloseAction.Restart
+                    })
+                },
+                markdown: {
+                    isTrusted: true
+                },
+                initializationOptions,
+                middleware: {
+                    workspace: {
+                        configuration: middlewareOptions ??
+                            ((params, token, next) => {
+                                return [{ enabled: true }];
+                            })
+                    }
+                }
+            },
+            connectionProvider: {
+                get: () => {
+                    return Promise.resolve(transports);
+                }
+            }
+        });
+        return client;
+    }
+    async function connectToLanguageServer(url, name, initOptions, middlewareOptions) {
+        try {
+            const webSocket = new WebSocket(url);
+            webSocket.onopen = async () => {
+                const socket = toSocket(webSocket);
+                const reader = new WebSocketMessageReader(socket);
+                const writer = new WebSocketMessageWriter(socket);
+                const languageClient = createLanguageClient({ reader, writer }, name, initOptions, middlewareOptions);
+                // if (middlewareOptions != undefined) {
+                // 	languageClient.registerNotUsedFeatures()
+                // }
+                websockets.push([languageClient, webSocket]);
+                // HACK ALERT: for some reasons, the client need to be restarted to take into account the 'go get <dep>' command
+                // the only way I could figure out to listen for this event is this. I'm sure there is a better way to do this
+                if (name == 'go') {
+                    const om = webSocket.onmessage;
+                    webSocket.onmessage = (e) => {
+                        om && om.apply(webSocket, [e]);
+                        const js = JSON.parse(e.data);
+                        if (js.method == 'window/showMessage' && js.params.message == 'completed') {
+                            console.log('reloading websocket after go get');
+                            reloadWebsocket();
+                        }
+                    };
+                }
+                reader.onClose(async () => {
+                    try {
+                        console.log('CLOSE');
+                        websocketAlive[name] = false;
+                        await languageClient.stop();
+                    }
+                    catch (err) {
+                        console.error(err);
+                    }
+                });
+                socket.onClose((_code, _reason) => {
+                    websocketAlive[name] = false;
+                });
+                try {
+                    console.log('starting client');
+                    await languageClient.start();
+                    console.log('started client');
+                }
+                catch (err) {
+                    console.log('err at client');
+                    console.error(err);
+                    return;
+                }
+                lastWsAttempt = new Date();
+                nbWsAttempt = 0;
+                if (name == 'deno') {
+                    command && command.dispose();
+                    command = undefined;
+                    try {
+                        command = vscode.commands.registerCommand('deno.cache', (uris = []) => {
+                            languageClient.sendRequest(new RequestType('deno/cache'), {
+                                referrer: { uri },
+                                uris: uris.map((uri) => ({ uri }))
+                            });
+                        });
+                    }
+                    catch (err) {
+                        console.error(err);
+                    }
+                }
+                websocketAlive[name] = true;
+            };
+        }
+        catch (err) {
+            console.error(`connection to ${name} language server failed`);
+        }
+    }
+    const wsProtocol = $page.url.protocol == 'https:' ? 'wss' : 'ws';
+    let encodedImportMap = '';
+    if (lang == 'typescript') {
+        if (path && path.split('/').length > 2) {
+            let expiration = new Date();
+            expiration.setHours(expiration.getHours() + 2);
+            const token = await UserService.createToken({
+                requestBody: { label: 'Ephemeral lsp token', expiration: expiration.toISOString() }
+            });
+            let root = $page.url.protocol +
+                '//' +
+                $page.url.host +
+                '/api/scripts_u/tokened_raw/' +
+                $workspaceStore +
+                '/' +
+                token;
+            const importMap = {
+                imports: {
+                    'file:///': root + '/'
+                }
+            };
+            let path_splitted = path.split('/');
+            for (let c = 0; c < path_splitted.length; c++) {
+                let key = 'file://./';
+                for (let i = 0; i < c; i++) {
+                    key += '../';
+                }
+                let url = path_splitted.slice(0, -c - 1).join('/');
+                let ending = c == path_splitted.length - 1 ? '' : '/';
+                importMap['imports'][key] = `${root}/${url}${ending}`;
+            }
+            encodedImportMap = 'data:text/plain;base64,' + btoa(JSON.stringify(importMap));
+        }
+        await connectToLanguageServer(`${wsProtocol}://${$page.url.host}/ws/deno`, 'deno', {
+            certificateStores: null,
+            enablePaths: [],
+            config: null,
+            importMap: encodedImportMap,
+            internalDebug: false,
+            lint: false,
+            path: null,
+            tlsCertificate: null,
+            unsafelyIgnoreCertificateErrors: null,
+            unstable: true,
+            enable: true,
+            codeLens: {
+                implementations: true,
+                references: true,
+                referencesAllFunction: false
+            },
+            suggest: {
+                autoImports: true,
+                completeFunctionCalls: false,
+                names: true,
+                paths: true,
+                imports: {
+                    autoDiscover: true,
+                    hosts: {
+                        'https://deno.land': true
+                    }
+                }
+            }
+        }, () => {
+            return [
+                {
+                    enable: true
+                }
+            ];
+        });
+    }
+    else if (lang === 'python') {
+        await connectToLanguageServer(`${wsProtocol}://${$page.url.host}/ws/pyright`, 'pyright', {}, (params, token, next) => {
+            if (params.items.find((x) => x.section === 'python')) {
+                return [
+                    {
+                        analysis: {
+                            useLibraryCodeForTypes: true,
+                            autoImportCompletions: true,
+                            diagnosticSeverityOverrides: { reportMissingImports: 'none' },
+                            typeCheckingMode: 'basic'
+                        }
+                    }
+                ];
+            }
+            if (params.items.find((x) => x.section === 'python.analysis')) {
+                return [
+                    {
+                        useLibraryCodeForTypes: true,
+                        autoImportCompletions: true,
+                        diagnosticSeverityOverrides: { reportMissingImports: 'none' },
+                        typeCheckingMode: 'basic'
+                    }
+                ];
+            }
+            return next(params, token);
+        });
+        connectToLanguageServer(`${wsProtocol}://${$page.url.host}/ws/black`, 'black', {
+            formatters: {
+                black: {
+                    command: 'black',
+                    args: ['--quiet', '-']
+                }
+            },
+            formatFiletypes: {
+                python: 'black'
+            }
+        }, undefined);
+    }
+    else if (lang === 'go') {
+        connectToLanguageServer(`${wsProtocol}://${$page.url.host}/ws/go`, 'go', {
+            'build.allowImplicitNetworkAccess': true
+        }, undefined);
+    }
+    websocketInterval && clearInterval(websocketInterval);
+    websocketInterval = setInterval(() => {
+        if (document.visibilityState == 'visible') {
+            if (!lastWsAttempt ||
+                (new Date().getTime() - lastWsAttempt.getTime() > 60000 && nbWsAttempt < 2)) {
+                if (!websocketAlive.black &&
+                    !websocketAlive.deno &&
+                    !websocketAlive.pyright &&
+                    !websocketAlive.go) {
+                    console.log('reconnecting to language servers');
+                    lastWsAttempt = new Date();
+                    nbWsAttempt++;
+                    reloadWebsocket();
+                }
+                else {
+                    if (nbWsAttempt >= 2) {
+                        sendUserToast('Giving up on establishing smart assistant connection', true);
+                        clearInterval(websocketInterval);
+                    }
+                }
+            }
+        }
+    }, 5000);
+}
+let pathTimeout = undefined;
+function handlePathChange() {
+    initialPath = path;
+    pathTimeout && clearTimeout(pathTimeout);
+    pathTimeout = setTimeout(reloadWebsocket, 3000);
+}
+async function closeWebsockets() {
+    command && command.dispose();
+    command = undefined;
+    monacoServices && monacoServices.dispose();
+    monacoServices = undefined;
+    for (const x of websockets) {
+        try {
+            await x[0].stop();
+            x[1].close();
+        }
+        catch (err) {
+            try {
+                x[1].close();
+            }
+            catch (err) { }
+            console.log('error disposing websocket', err);
+        }
+    }
+    websockets = [];
+    websocketInterval && clearInterval(websocketInterval);
+}
+let widgets = document.getElementById('monaco-widgets-root') ?? undefined;
+async function loadMonaco() {
+    const model = meditor.createModel(code, lang, mUri.parse(uri));
+    model.updateOptions(lang == 'python' ? { tabSize: 4, insertSpaces: true } : updateOptions);
+    editor = meditor.create(divEl, {
+        ...editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets),
+        overflowWidgetsDomNode: widgets,
+        tabSize: lang == 'python' ? 4 : 2
+    });
+    let timeoutModel = undefined;
+    editor.onDidChangeModelContent((event) => {
+        $dirtyStore = true;
+        timeoutModel && clearTimeout(timeoutModel);
+        timeoutModel = setTimeout(() => {
+            code = getCode();
+            dispatch('change', code);
+        }, 500);
+    });
+    editor.onDidFocusEditorText(() => {
+        dispatch('focus');
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, function () {
+            code = getCode();
+            shouldBindKey && format && format();
+        });
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.Enter, function () {
+            code = getCode();
+            shouldBindKey && cmdEnterAction && cmdEnterAction();
+        });
+        if (!websocketAlive.black &&
+            !websocketAlive.deno &&
+            !websocketAlive.pyright &&
+            !websocketAlive.go &&
+            !websocketInterval) {
+            reloadWebsocket();
+        }
+    });
+    reloadWebsocket();
+    return () => {
+        try {
+            closeWebsockets();
+            model.dispose();
+            editor && editor.dispose();
+        }
+        catch (err) {
+            console.log('error disposing editor', err);
+        }
+    };
+}
+export function addAction(id, label, callback, keybindings = []) {
+    editor?.addAction({
+        id,
+        label,
+        keybindings,
+        contextMenuGroupId: 'navigation',
+        run: function (editor) {
+            callback(editor);
+        }
+    });
+}
+onMount(() => {
+    if (browser) {
+        loadMonaco().then((x) => (disposeMethod = x));
+    }
+});
+onDestroy(() => {
+    disposeMethod && disposeMethod();
+    websocketInterval && clearInterval(websocketInterval);
+});
+</script>
+
+<div bind:this={divEl} class="{$$props.class} editor" />
+
+<style>
+	.editor {
+    border-radius: 0.375rem;
+    border-width: 1px;
+    --tw-border-opacity: 1;
+    border-color: rgb(249 250 251 / var(--tw-border-opacity));
+    padding: 0px
+}</style>

package/dist/components/Editor.svelte.d.ts

@@ -0,0 +1,58 @@
+import { SvelteComponentTyped } from "svelte";
+import 'monaco-editor/esm/vs/editor/edcore.main';
+import { editor as meditor } from 'monaco-editor/esm/vs/editor/editor.api';
+import 'monaco-editor/esm/vs/basic-languages/python/python.contribution';
+import 'monaco-editor/esm/vs/basic-languages/go/go.contribution';
+import 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution';
+import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
+import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        lang: 'typescript' | 'python' | 'go' | 'shell';
+        code?: string | undefined;
+        cmdEnterAction?: (() => void) | undefined;
+        formatAction?: (() => void) | undefined;
+        automaticLayout?: boolean | undefined;
+        websocketAlive?: {
+            pyright: boolean;
+            black: boolean;
+            deno: boolean;
+            go: boolean;
+        } | undefined;
+        shouldBindKey?: boolean | undefined;
+        fixedOverflowWidgets?: boolean | undefined;
+        path?: string | undefined;
+        getCode?: (() => string) | undefined;
+        insertAtCursor?: ((code: string) => void) | undefined;
+        insertAtBeginning?: ((code: string) => void) | undefined;
+        insertAtLine?: ((code: string, line: number) => void) | undefined;
+        setCode?: ((ncode: string, noHistory?: boolean) => void) | undefined;
+        format?: (() => void) | undefined;
+        clearContent?: (() => Promise<void>) | undefined;
+        reloadWebsocket?: (() => Promise<void>) | undefined;
+        addAction?: ((id: string, label: string, callback: (editor: meditor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void) | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+        focus: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EditorProps = typeof __propDef.props;
+export type EditorEvents = typeof __propDef.events;
+export type EditorSlots = typeof __propDef.slots;
+export default class Editor extends SvelteComponentTyped<EditorProps, EditorEvents, EditorSlots> {
+    get getCode(): () => string;
+    get insertAtCursor(): (code: string) => void;
+    get insertAtBeginning(): (code: string) => void;
+    get insertAtLine(): (code: string, line: number) => void;
+    get setCode(): (ncode: string, noHistory?: boolean) => void;
+    get format(): () => void;
+    get clearContent(): () => Promise<void>;
+    get reloadWebsocket(): () => Promise<void>;
+    get addAction(): (id: string, label: string, callback: (editor: meditor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void;
+}
+export {};