windmill-components 1.383.8 → 1.389.1

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte

@@ -15,6 +15,7 @@ import ScriptGen from '../../../copilot/ScriptGen.svelte';
 import DiffEditor from '../../../DiffEditor.svelte';
 import { userStore } from '../../../../stores';
 import CacheTtlPopup from './CacheTtlPopup.svelte';
+import EditorSettings from '../../../EditorSettings.svelte';
 let inlineScriptEditorDrawer;
 export let inlineScript;
 export let name = undefined;
@@ -210,6 +211,7 @@ async function inferSuggestions(code) {
 					}, {})}
 					{transformer}
 				/>
+				<EditorSettings />
 
 				<Button
 					title="Delete"
@@ -306,6 +308,7 @@ async function inferSuggestions(code) {
 						bind:this={simpleEditor}
 						class="h-full max-w-full"
 						small
+						allowVim
 						{extraLib}
 						bind:code={inlineScript.content}
 						lang="javascript"
@@ -332,6 +335,7 @@ async function inferSuggestions(code) {
 					class="h-full"
 					automaticLayout
 					fixedOverflowWidgets
+					defaultLang={scriptLangToEditorLang(inlineScript?.language)}
 				/>
 			{/if}
 		</div>

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte

@@ -11,6 +11,7 @@ import { sendUserToast } from '../../../../toast';
 import { ScriptService } from '../../../../gen';
 import { workspaceStore } from '../../../../stores';
 import { findNextAvailablePath } from '../../../../path';
+import { twMerge } from 'tailwind-merge';
 const { app, runnableComponents } = getContext('AppViewerContext');
 const { selectedComponentInEditor } = getContext('AppEditorContext');
 function deleteBackgroundScript(index) {
@@ -83,12 +84,16 @@ async function createScriptFromInlineScript(id, runnable) {
     });
     $app = $app;
 }
+export let width = undefined;
 </script>
 
 <SplitPanesWrapper>
-	<Splitpanes class="!overflow-visible">
+	<Splitpanes
+		class={twMerge('!overflow-visible')}
+		style={width !== undefined ? `width:${width}px;` : ''}
+	>
 		<Pane size={25}>
-			<InlineScriptsPanelList />
+			<InlineScriptsPanelList on:hidePanel />
 		</Pane>
 		<Pane size={75}>
 			{#if !$selectedComponentInEditor}

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte.d.ts

@@ -1,7 +1,11 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        width?: number | undefined;
+    };
     events: {
+        hidePanel: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte

@@ -1,6 +1,6 @@
 <script>import { Badge, Button } from '../../../common';
 import { Plus } from 'lucide-svelte';
-import { getContext } from 'svelte';
+import { createEventDispatcher, getContext } from 'svelte';
 import Tooltip from '../../../Tooltip.svelte';
 import { BG_PREFIX, getAllScriptNames } from '../../utils';
 import PanelSection from '../settingsPanel/common/PanelSection.svelte';
@@ -10,6 +10,7 @@ import { tutorialsToDo } from '../../../../stores';
 import { ignoredTutorials } from '../../../tutorials/ignoredTutorials';
 import { tutorialInProgress } from '../../../../tutorialUtils';
 import DocLink from '../settingsPanel/DocLink.svelte';
+import HideButton from '../settingsPanel/HideButton.svelte';
 const PREFIX = 'script-selector-';
 const { app, selectedComponent } = getContext('AppViewerContext');
 const { selectedComponentInEditor } = getContext('AppEditorContext');
@@ -62,11 +63,22 @@ function createBackgroundScript() {
     selectScript(`${BG_PREFIX}${$app.hiddenInlineScripts.length - 1}`);
 }
 let appTutorials = undefined;
+const dispatch = createEventDispatcher();
 </script>
 
 <PanelSection title="Runnables" id="app-editor-runnable-panel">
 	<svelte:fragment slot="action">
-		<DocLink docLink="https://www.windmill.dev/docs/apps/app-runnable-panel#creating-a-runnable" />
+		<div class="flex flex-row gap-1">
+			<HideButton
+				direction="bottom"
+				on:click={() => {
+					dispatch('hidePanel')
+				}}
+			/>
+			<DocLink
+				docLink="https://www.windmill.dev/docs/apps/app-runnable-panel#creating-a-runnable"
+			/>
+		</div>
 	</svelte:fragment>
 	<div class="w-full flex flex-col gap-6 py-1">
 		<div>

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: Record<string, never>;
     events: {
         reload: CustomEvent<any>;
+        hidePanel: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -347,7 +347,11 @@ function transformToFrontend() {
 			/>
 		{:else if componentSettings.item.data.type === 'aggridcomponentee'}
 			<GridAgGridLicenseKey bind:license={componentSettings.item.data.license} />
-			<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
+			<TableActions
+				id={component.id}
+				bind:components={componentSettings.item.data.actions}
+				bind:actionsOrder={componentSettings.item.data.actionsOrder}
+			/>
 		{:else if componentSettings.item.data.type === 'agchartscomponentee'}
 			<GridAgChartsLicenseKe bind:license={componentSettings.item.data.license} />
 		{:else if componentSettings.item.data.type === 'steppercomponent'}
@@ -378,14 +382,30 @@ function transformToFrontend() {
 				bind:component={componentSettings.item.data}
 			/>
 		{:else if componentSettings.item.data.type === 'aggridcomponent'}
-			<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
+			<TableActions
+				id={component.id}
+				bind:components={componentSettings.item.data.actions}
+				bind:actionsOrder={componentSettings.item.data.actionsOrder}
+			/>
 		{:else if componentSettings.item.data.type === 'aggridinfinitecomponent'}
-			<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
+			<TableActions
+				id={component.id}
+				bind:components={componentSettings.item.data.actions}
+				bind:actionsOrder={componentSettings.item.data.actionsOrder}
+			/>
 		{:else if componentSettings.item.data.type === 'aggridinfinitecomponentee'}
 			<GridAgGridLicenseKey bind:license={componentSettings.item.data.license} />
-			<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
+			<TableActions
+				id={component.id}
+				bind:components={componentSettings.item.data.actions}
+				bind:actionsOrder={componentSettings.item.data.actionsOrder}
+			/>
 		{:else if componentSettings.item.data.type === 'dbexplorercomponent'}
-			<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
+			<TableActions
+				id={component.id}
+				bind:components={componentSettings.item.data.actions}
+				bind:actionsOrder={componentSettings.item.data.actionsOrder}
+			/>
 		{:else if componentSettings.item.data.type === 'tablecomponent' && Array.isArray(componentSettings.item.data.actionButtons)}
 			<TableActions id={component.id} bind:components={componentSettings.item.data.actionButtons} />
 		{:else if componentSettings.item.data.type === 'menucomponent' && Array.isArray(componentSettings.item.data.menuItems)}

package/package/components/apps/editor/settingsPanel/HideButton.svelte

@@ -0,0 +1,47 @@
+<script>import Popover from '../../../Popover.svelte';
+import { ButtonType } from '../../../common';
+import Button from '../../../common/button/Button.svelte';
+import { getModifierKey } from '../../../../utils';
+import { PanelBottomClose, PanelLeftClose, PanelRightClose } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
+export let btnClasses = undefined;
+export let size = 'xs';
+export let direction = 'right';
+export let hidden = false;
+const IconMap = {
+    left: PanelLeftClose,
+    right: PanelRightClose,
+    bottom: PanelBottomClose
+};
+const shortcuts = {
+    left: 'B',
+    right: 'U',
+    bottom: 'L'
+};
+</script>
+
+<Popover>
+	<svelte:fragment slot="text">
+		<div class="flex flex-row gap-1">
+			{hidden ? 'Show' : 'Hide '} the {direction} panel.
+
+			<div class="flex flex-row items-center !text-md opacity-60 gap-0 font-normal">
+				{getModifierKey()}{shortcuts[direction]}
+			</div>
+		</div>
+	</svelte:fragment>
+	<Button
+		iconOnly
+		startIcon={{
+			icon: IconMap[direction]
+		}}
+		{size}
+		btnClasses={twMerge(
+			'p-1 text-gray-300 hover:!text-gray-600 dark:text-gray-500 dark:hover:!text-gray-200 bg-transparent',
+			hidden ? 'bg-surface-selected !text-primary' : '',
+			btnClasses
+		)}
+		on:click
+		color="light"
+	/>
+</Popover>

package/package/components/apps/editor/settingsPanel/HideButton.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import { ButtonType } from '../../../common';
+declare const __propDef: {
+    props: {
+        btnClasses?: string | undefined;
+        size?: ButtonType.Size | undefined;
+        direction?: "bottom" | "right" | "left" | undefined;
+        hidden?: boolean | undefined;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type HideButtonProps = typeof __propDef.props;
+export type HideButtonEvents = typeof __propDef.events;
+export type HideButtonSlots = typeof __propDef.slots;
+export default class HideButton extends SvelteComponent<HideButtonProps, HideButtonEvents, HideButtonSlots> {
+}
+export {};

package/package/components/apps/editor/settingsPanel/TableActions.svelte

@@ -5,11 +5,14 @@ import { classNames, generateRandomString } from '../../../../utils';
 import { getContext, onMount } from 'svelte';
 import { appComponentFromType } from '../appUtils';
 import PanelSection from './common/PanelSection.svelte';
-import { GripVertical, Inspect, List, ToggleRightIcon } from 'lucide-svelte';
+import { GripVertical, Inspect, List, ToggleRightIcon, ListOrdered } from 'lucide-svelte';
 import { dragHandle, dragHandleZone } from '@windmill-labs/svelte-dnd-action';
 import CloseButton from '../../../common/CloseButton.svelte';
 import { flip } from 'svelte/animate';
+import TableActionsWizard from '../../../wizards/TableActionsWizard.svelte';
+import Alert from '../../../common/alert/Alert.svelte';
 export let components;
+export let actionsOrder = undefined;
 // Migration code:
 onMount(() => {
     if (components === undefined) {
@@ -65,6 +68,23 @@ function handleFinalize(e) {
 
 {#if components}
 	<PanelSection title={`Table Actions`}>
+		<svelte:fragment slot="action">
+			<TableActionsWizard bind:actionsOrder selectedId={$selectedComponent?.[0] ?? ''} {components}>
+				<svelte:fragment slot="trigger">
+					<Button
+						color="light"
+						size="xs2"
+						nonCaptureEvent={true}
+						btnClasses={actionsOrder ? 'bg-blue-100 dark:bg-blue-900' : 'text-primary'}
+						title="Edit order programmatically"
+					>
+						<div class="flex flex-row items-center gap-2 text-xs font-normal">
+							<ListOrdered size={16} />
+						</div>
+					</Button>
+				</svelte:fragment>
+			</TableActionsWizard>
+		</svelte:fragment>
 		{#if components.length == 0}
 			<span class="text-xs text-tertiary">No action buttons</span>
 		{/if}
@@ -116,9 +136,11 @@ function handleFinalize(e) {
 								<CloseButton small on:close={() => deleteComponent(component.id, index)} />
 							</div>
 						</div>
-						<div use:dragHandle class="handle w-4 h-4" aria-label="drag-handle">
-							<GripVertical size={16} />
-						</div>
+						{#if actionsOrder === undefined}
+							<div use:dragHandle class="handle w-4 h-4" aria-label="drag-handle">
+								<GripVertical size={16} />
+							</div>
+						{/if}
 					</div>
 				{/each}
 			</section>
@@ -155,5 +177,22 @@ function handleFinalize(e) {
 				+ <List size={14} />
 			</Button>
 		</div>
+		<div class="w-full flex flex-col">
+			{#if actionsOrder}
+				<Alert size="xs" title="Order managed programmatically" type="info">
+					Actions order is managed programmatically. Adding or removing an action will require you
+					to update the order manually.
+					<Button
+						btnClasses="mt-2"
+						size="xs2"
+						on:click={() => {
+							actionsOrder = undefined
+						}}
+					>
+						Disable order management
+					</Button>
+				</Alert>
+			{/if}
+		</div>
 	</PanelSection>
 {/if}

package/package/components/apps/editor/settingsPanel/TableActions.svelte.d.ts

@@ -1,9 +1,10 @@
 import { SvelteComponent } from "svelte";
-import type { BaseAppComponent } from '../../types';
+import type { BaseAppComponent, RichConfiguration } from '../../types';
 import type { ButtonComponent, CheckboxComponent, SelectComponent } from '../component';
 declare const __propDef: {
     props: {
         components: (BaseAppComponent & (ButtonComponent | CheckboxComponent | SelectComponent))[] | undefined;
+        actionsOrder?: RichConfiguration | undefined;
         id: string;
     };
     events: {

package/package/components/apps/editor/settingsPanel/inputEditor/JsonEditor.svelte

@@ -1,4 +1,5 @@
-<script>import SimpleEditor from '../../../../SimpleEditor.svelte';
+<script>import '@codingame/monaco-vscode-standalone-json-language-features';
+import SimpleEditor from '../../../../SimpleEditor.svelte';
 export let code;
 export let value = undefined;
 export let error = '';

package/package/components/apps/editor/settingsPanel/inputEditor/JsonEditor.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponent } from "svelte";
+import '@codingame/monaco-vscode-standalone-json-language-features';
 import SimpleEditor from '../../../../SimpleEditor.svelte';
 declare const __propDef: {
     props: {

package/package/components/apps/svelte-grid/Grid.svelte

@@ -93,7 +93,9 @@ const updateMatrix = ({ detail }) => {
                     ...shadows[id]
                 }
             };
-            sortedItems = moveItem(activeItem, sortedItems, getComputedCols);
+            let { items, overlap } = moveItem(activeItem, sortedItems, getComputedCols);
+            sortedItems = items;
+            overlapped = overlap ? id : undefined;
         }
     }
     for (let id of nselectedIds ?? []) {
@@ -140,6 +142,7 @@ export function handleInitMove({ detail }) {
         }
     });
 }
+let overlapped = undefined;
 </script>
 
 <div class="svlt-grid-container" style="height: {containerHeight}px" bind:this={container}>
@@ -169,9 +172,10 @@ export function handleInitMove({ detail }) {
 				{sensor}
 				container={scroller}
 				nativeContainer={container}
+				{overlapped}
 			>
 				{#if item[getComputedCols]}
-					<slot dataItem={item} hidden={false} />
+					<slot dataItem={item} hidden={false} {overlapped} />
 				{/if}
 			</MoveResize>
 		{/if}

package/package/components/apps/svelte-grid/Grid.svelte.d.ts

@@ -32,6 +32,7 @@ declare class __sveltets_Render<T> {
         default: {
             dataItem: FilledItem<T>;
             hidden: boolean;
+            overlapped: undefined;
         };
     };
 }

package/package/components/apps/svelte-grid/MoveResize.svelte

@@ -1,5 +1,6 @@
 <script>import { createEventDispatcher, getContext, onMount } from 'svelte';
 import { writable } from 'svelte/store';
+import { twMerge } from 'tailwind-merge';
 const dispatch = createEventDispatcher();
 export let sensor;
 export let width;
@@ -17,6 +18,7 @@ export let cols;
 export let nativeContainer;
 export let onTop;
 export let shadow = undefined;
+export let overlapped = undefined;
 const ctx = getContext('AppEditorContext');
 const { mode } = getContext('AppViewerContext');
 const scale = ctx ? ctx.scale : writable(100);
@@ -313,7 +315,10 @@ const resizePointerUp = (e) => {
 
 {#if xPerPx > 0 && (active || trans) && shadow}
 	<div
-		class="svlt-grid-shadow shadow-active"
+		class={twMerge(
+			'svlt-grid-shadow shadow-active',
+			overlapped ? 'svlte-grid-shadow-forbidden' : ''
+		)}
 		style="width: {shadow.w * xPerPx - gapX * 2}px; height: {shadow.h * yPerPx -
 			gapY * 2}px; transform: translate({shadow.x * xPerPx + gapX}px, {shadow.y * yPerPx +
 			gapY}px); "
@@ -399,9 +404,12 @@ const resizePointerUp = (e) => {
 
 	.svlt-grid-shadow {
 		position: absolute;
-		background: red;
 		will-change: transform;
-		background: pink;
 		backface-visibility: hidden;
 		-webkit-backface-visibility: hidden;
+		background: #93c4fdd0;
+	}
+
+	.svlte-grid-shadow-forbidden {
+		background: rgba(255, 99, 71, 0.2) !important;
 	}</style>

package/package/components/apps/svelte-grid/MoveResize.svelte.d.ts

@@ -22,6 +22,7 @@ declare const __propDef: {
             w: number;
             h: number;
         } | undefined;
+        overlapped?: string | undefined;
         inActivate?: (() => void) | undefined;
         initmove?: (() => void) | undefined;
         updateMove?: ((newCoordDiff: any, clientY: any) => void) | undefined;

package/package/components/apps/svelte-grid/utils/item.d.ts

@@ -5,7 +5,10 @@ export declare function findFreeSpaceForItem<T>(matrix: FilledItem<T>[][], item:
     x: number;
     y: number;
 };
-export declare function moveItem(active: any, items: any, cols: any): any;
+export declare function moveItem(active: any, items: any, cols: any): {
+    items: any;
+    overlap: boolean;
+};
 export declare function normalize(items: any, col: any): any;
 export declare function adjust<T>(items: FilledItem<T>[], col: any): FilledItem<T>[];
 export declare function getUndefinedItems(items: any, col: any, breakpoints: any): any;

package/package/components/apps/svelte-grid/utils/item.js

@@ -105,8 +105,12 @@ export function moveItem(active, items, cols) {
     // Getting whenever of these items is fixed
     const fixed = closeObj.find((value) => value[cols].fixed);
     // If found fixed, reset the active to its original position
-    if (fixed)
-        return items;
+    if (fixed) {
+        return {
+            items: items,
+            overlap: closeBlocks.length > 0
+        };
+    }
     // Update items
     items = updateItem(items, active, item, cols);
     // Create matrix of items expect close elements
@@ -130,7 +134,10 @@ export function moveItem(active, items, cols) {
         matrix = makeMatrixFromItemsIgnore(tempItems, getIgnoreItems, getRowsCount(tempItems, cols), cols);
     });
     // Return result
-    return tempItems;
+    return {
+        items: tempItems,
+        overlap: false
+    };
 }
 // Helper function
 export function normalize(items, col) {
@@ -138,7 +145,7 @@ export function normalize(items, col) {
     result.forEach((value) => {
         const getItem = value[col];
         if (!getItem.static) {
-            result = moveItem(getItem, result, col);
+            result = moveItem(getItem, result, col).items;
         }
     });
     return result;

package/package/components/build_workers.d.ts

@@ -1 +1 @@
-export declare function buildWorkerDefinition(...args: any[]): void;
+export declare function buildWorkerDefinition(workerPath: string, basePath: string, ...args: any[]): void;

package/package/components/build_workers.js

@@ -1,125 +1,10 @@
-// inline to make it a library component easy to be imported until this if fixed: https://github.com/vitejs/vite/pull/16418
-// import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker&inline'
-// import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker&inline'
-// import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker&inline'
-// import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker&inline'
-// import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker&inline'
-// import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
-// import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
-// import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
-// import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
-// import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
-// import type { Environment } from 'monaco-editor/esm/vs/editor/editor.api.js'
-// interface MonacoEnvironmentEnhanced extends Environment {
-// 	workerOverrideGlobals: WorkerOverrideGlobals
-// }
-// type WorkerOverrideGlobals = {
-// 	basePath: string
-// 	workerPath: string
-// 	workerOptions: WorkerOptions
-// }
-// export function buildWorkerDefinition(
-// 	workerPath: string,
-// 	basePath: string,
-// 	useModuleWorker: boolean
-// ) {
-// 	const monWin = self as Window
-// 	const workerOverrideGlobals: WorkerOverrideGlobals = {
-// 		basePath: basePath,
-// 		workerPath: workerPath,
-// 		workerOptions: {
-// 			type: useModuleWorker ? 'module' : 'classic'
-// 		}
-// 	}
-// 	if (!monWin.MonacoEnvironment) {
-// 		monWin.MonacoEnvironment = {
-// 			workerOverrideGlobals: workerOverrideGlobals,
-// 			createTrustedTypesPolicy: (_policyName: string) => {
-// 				return undefined
-// 			}
-// 		} as MonacoEnvironmentEnhanced
-// 	}
-// 	const monEnv = monWin.MonacoEnvironment as MonacoEnvironmentEnhanced
-// 	monEnv.workerOverrideGlobals = workerOverrideGlobals
-// 	const getWorker = (_: string, label: string) => {
-// 		console.log('getWorker: workerId: ' + _ + ' label: ' + label)
-// 		switch (label) {
-// 			case 'template':
-// 			case 'typescript':
-// 			case 'javascript':
-// 				return new tsWorker()
-// 			case 'html':
-// 			case 'handlebars':
-// 			case 'razor':
-// 				return new htmlWorker()
-// 			case 'css':
-// 			case 'scss':
-// 			case 'less':
-// 				return new cssWorker()
-// 			case 'json':
-// 				return new jsonWorker()
-// 			case 'graphql':
-// 				const workerFilename = `graphql.worker.bundle.js`
-// 				const workerPathLocal = `${workerOverrideGlobals.workerPath}/${workerFilename}`
-// 				const workerUrl = new URL(workerPathLocal, workerOverrideGlobals.basePath)
-// 				return new Worker(workerUrl.href, {
-// 					name: label
-// 				})
-// 			default:
-// 				return new editorWorker()
-// 		}
-// 	}
-// 	monWin.MonacoEnvironment.getWorker = getWorker
-// }
-// //
-// export type WorkerLoader = () => Worker
-// const workerLoaders: Partial<Record<string, WorkerLoader>> = {
-// 	editorWorkerService: () =>
-// 		new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url), {
-// 			type: 'module'
-// 		}),
-// 	textMateWorker: () =>
-// 		new Worker(
-// 			new URL('@codingame/monaco-vscode-textmate-service-override/worker', import.meta.url),
-// 			{ type: 'module' }
-// 		),
-// 	languageDetectionWorkerService: () =>
-// 		new Worker(
-// 			new URL(
-// 				'@codingame/monaco-vscode-language-detection-worker-service-override/worker',
-// 				import.meta.url
-// 			),
-// 			{ type: 'module' }
-// 		)
-// }
-// export function registerWorkerLoader(label: string, workerLoader: WorkerLoader): void {
-// 	workerLoaders[label] = workerLoader
-// }
-// export function buildWorkerDefinition() {
-// 	// Do not use monaco-editor-webpack-plugin because it doesn't handle properly cross origin workers
-// 	window.MonacoEnvironment = {
-// 		getWorker: function (moduleId, label) {
-// 			console.log('LOAD')
-// 			const workerFactory = workerLoaders[label]
-// 			if (workerFactory != null) {
-// 				return workerFactory()
-// 			}
-// 			throw new Error(`Unimplemented worker ${label} (${moduleId})`)
-// 		}
-// 	}
-// }
-// import { graphql } from 'graphql'
-import { useWorkerFactory } from '@windmill-labs/monaco-editor-wrapper/workerFactory';
-import cssWorker from '@windmill-labs/monaco-editor-wrapper/workers/module/css?worker';
-import htmlWorker from '@windmill-labs/monaco-editor-wrapper/workers/module/html?worker';
-import tsWorker from '@windmill-labs/monaco-editor-wrapper/workers/module/ts?worker';
-import jsonWorker from '@windmill-labs/monaco-editor-wrapper/workers/module/json?worker';
-import editorWorker from '@windmill-labs/monaco-editor-wrapper/workers/module/editor?worker';
-// import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
-// import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
-// import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
-// import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
-export function buildWorkerDefinition(...args) {
+import { useWorkerFactory } from 'monaco-editor-wrapper/workerFactory';
+import cssWorker from 'monaco-editor-wrapper/workers/module/css?worker';
+import htmlWorker from 'monaco-editor-wrapper/workers/module/html?worker';
+import tsWorker from 'monaco-editor-wrapper/workers/module/ts?worker';
+import jsonWorker from 'monaco-editor-wrapper/workers/module/json?worker';
+import editorWorker from 'monaco-editor-wrapper/workers/module/editor?worker';
+export function buildWorkerDefinition(workerPath, basePath, ...args) {
     useWorkerFactory({
         ignoreMapping: true,
         workerLoaders: {
@@ -146,6 +31,15 @@ export function buildWorkerDefinition(...args) {
             css: () => {
                 console.log('html');
                 return new cssWorker();
+            },
+            graphql: () => {
+                console.log('graphql');
+                const workerFilename = `graphql.worker.bundle.js`;
+                const workerPathLocal = `${workerPath}/${workerFilename}`;
+                const workerUrl = new URL(workerPathLocal, basePath);
+                return new Worker(workerUrl.href, {
+                    name: 'graphql'
+                });
             }
         }
     });

package/package/components/common/button/Button.svelte.d.ts

@@ -35,12 +35,12 @@ declare const __propDef: {
         } | undefined;
         dropdownItems?: {
             label: string;
-            onClick?: (() => void) | undefined;
+            onClick?: ((e?: Event) => void) | undefined;
             href?: string | undefined;
             icon?: any;
         }[] | (() => {
             label: string;
-            onClick?: (() => void) | undefined;
+            onClick?: ((e?: Event) => void) | undefined;
             href?: string | undefined;
             icon?: any;
         }[]) | undefined;