windmill-components 1.510.1 → 1.511.0

package/package/components/flows/content/FlowModuleSleep.svelte

@@ -7,25 +7,24 @@ import PropPickerWrapper from '../propPicker/PropPickerWrapper.svelte';
 import { SecondsInput } from '../../common';
 import Section from '../../Section.svelte';
 import Label from '../../Label.svelte';
-export let flowModule;
-export let previousModuleId;
+let { flowModule = $bindable(), previousModuleId } = $props();
 const { selectedId, flowStateStore } = getContext('FlowEditorContext');
-let schema = emptySchema();
+let schema = $state(emptySchema());
 schema.properties['sleep'] = {
     type: 'number'
 };
-let editor = undefined;
+let editor = $state(undefined);
 const result = $flowStateStore[$selectedId]?.previewResult ?? {};
-$: isSleepEnabled = Boolean(flowModule.sleep);
+let isSleepEnabled = $derived(Boolean(flowModule.sleep));
 </script>
 
 <Section label="Sleep" class="w-full">
-	<svelte:fragment slot="header">
+	{#snippet header()}
 		<Tooltip documentationLink="https://www.windmill.dev/docs/flows/sleep">
 			If defined, at the end of the step, the flow will sleep for a number of seconds before
 			scheduling the next job (if any, no effect if the step is the last one).
 		</Tooltip>
-	</svelte:fragment>
+	{/snippet}
 
 	<Toggle
 		checked={isSleepEnabled}

package/package/components/flows/content/FlowModuleSleep.svelte.d.ts

@@ -1,22 +1,8 @@
 import type { FlowModule } from '../../../gen';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowModuleSleep: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     flowModule: FlowModule;
     previousModuleId: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowModuleSleep = InstanceType<typeof FlowModuleSleep>;
+}
+declare const FlowModuleSleep: import("svelte").Component<Props, {}, "flowModule">;
+type FlowModuleSleep = ReturnType<typeof FlowModuleSleep>;
 export default FlowModuleSleep;

package/package/components/flows/content/FlowModuleSuspend.svelte

@@ -1,7 +1,8 @@
-<script lang="ts">import Toggle from '../../Toggle.svelte';
+<script lang="ts">import { run } from 'svelte/legacy';
+import Toggle from '../../Toggle.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import InputTransformForm from '../../InputTransformForm.svelte';
-import { getContext, tick } from 'svelte';
+import { getContext, tick, untrack } from 'svelte';
 import { Alert, Tab, Tabs } from '../../common';
 import { GroupService } from '../../../gen';
 import { emptySchema, emptyString } from '../../../utils';
@@ -15,13 +16,12 @@ import EditableSchemaDrawer from '../../schema/EditableSchemaDrawer.svelte';
 import AddProperty from '../../schema/AddProperty.svelte';
 const { selectedId, flowStateStore } = getContext('FlowEditorContext');
 const result = $flowStateStore[$selectedId]?.previewResult ?? {};
-let editor = undefined;
-export let flowModule;
-export let previousModuleId;
-let schema = emptySchema();
-let allUserGroups = [];
-let suspendTabSelected = 'core';
-$: isSuspendEnabled = Boolean(flowModule.suspend);
+let editor = $state(undefined);
+let { flowModule = $bindable(), previousModuleId } = $props();
+let schema = $state(emptySchema());
+let allUserGroups = $state([]);
+let suspendTabSelected = $state('core');
+let isSuspendEnabled = $derived(Boolean(flowModule.suspend));
 async function loadGroups() {
     allUserGroups = await GroupService.listGroupNames({ workspace: $workspaceStore });
     schema.properties['groups'] = {
@@ -32,19 +32,21 @@ async function loadGroups() {
         }
     };
 }
-$: {
+run(() => {
     if ($workspaceStore && allUserGroups.length === 0) {
-        loadGroups();
+        untrack(() => {
+            loadGroups();
+        });
     }
-}
-let jsonView = false;
+});
+let jsonView = $state(false);
 </script>
 
 <Section label="Suspend/Approval/Prompt" class="w-full">
-	<svelte:fragment slot="action">
+	{#snippet action()}
 		<SuspendDrawer text="Approval/Prompt helpers" />
-	</svelte:fragment>
-	<svelte:fragment slot="header">
+	{/snippet}
+	{#snippet header()}
 		<div class="flex flex-row items-center gap-2">
 			<Tooltip documentationLink="https://www.windmill.dev/docs/flows/flow_approval">
 				If defined, at the end of the step, the flow will be suspended until it receives external
@@ -69,7 +71,7 @@ let jsonView = false;
 				}}
 			/>
 		</div>
-	</svelte:fragment>
+	{/snippet}
 
 	<div class="overflow-x-auto scrollbar-hidden">
 		<Tabs bind:selected={suspendTabSelected}>

package/package/components/flows/content/FlowModuleSuspend.svelte.d.ts

@@ -1,22 +1,8 @@
 import { type FlowModule } from '../../../gen';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowModuleSuspend: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     flowModule: FlowModule;
     previousModuleId: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowModuleSuspend = InstanceType<typeof FlowModuleSuspend>;
+}
+declare const FlowModuleSuspend: import("svelte").Component<Props, {}, "flowModule">;
+type FlowModuleSuspend = ReturnType<typeof FlowModuleSuspend>;
 export default FlowModuleSuspend;

package/package/components/flows/content/FlowModuleTimeout.svelte

@@ -2,17 +2,17 @@
 import Toggle from '../../Toggle.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import { Alert, SecondsInput } from '../../common';
-export let flowModule;
-$: istimeoutEnabled = Boolean(flowModule.timeout);
+let { flowModule = $bindable() } = $props();
+let istimeoutEnabled = $derived(Boolean(flowModule.timeout));
 </script>
 
 <Section label="Timeout">
-	<svelte:fragment slot="header">
+	{#snippet header()}
 		<Tooltip>
 			If defined, the custom timeout will be used instead of the instance timeout for the step. The
 			step's timeout cannot be greater than the instance timeout.
 		</Tooltip>
-	</svelte:fragment>
+	{/snippet}
 
 	<Toggle
 		checked={istimeoutEnabled}

package/package/components/flows/content/FlowModuleTimeout.svelte.d.ts

@@ -1,21 +1,7 @@
 import type { FlowModule } from '../../../gen';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FlowModuleTimeout: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     flowModule: FlowModule;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FlowModuleTimeout = InstanceType<typeof FlowModuleTimeout>;
+}
+declare const FlowModuleTimeout: import("svelte").Component<Props, {}, "flowModule">;
+type FlowModuleTimeout = ReturnType<typeof FlowModuleTimeout>;
 export default FlowModuleTimeout;

package/package/components/triggers/gcp/GcpTriggerEditorInner.svelte

@@ -220,14 +220,14 @@ $effect(() => {
 	</Drawer>
 {:else}
 	<Section label={!customLabel ? 'GCP Pub/Sub trigger' : ''} headerClass="grow min-w-0 h-[30px]">
-		<svelte:fragment slot="header">
+		{#snippet header()}
 			{#if customLabel}
 				{@render customLabel()}
 			{/if}
-		</svelte:fragment>
-		<svelte:fragment slot="action">
+		{/snippet}
+		{#snippet action()}
 			{@render actionsButtons()}
-		</svelte:fragment>
+		{/snippet}
 		{@render config()}
 	</Section>
 {/if}

package/package/components/triggers/http/OpenAPISpecGenerator.svelte

@@ -181,7 +181,7 @@ export function openDrawer() {
 			</Label>
 
 			<Label label="Example cURL">
-				<svelte:fragment slot="header">
+				{#snippet header()}
 					<Tooltip>
 						Use this cURL command to call the OpenAPI generation endpoint.
 
@@ -197,7 +197,7 @@ export function openDrawer() {
 
 						<br />
 					</Tooltip>
-				</svelte:fragment>
+				{/snippet}
 				<CopyableCodeBlock
 					code={`token=${emptyString(token) ? '' : token}; \\
 curl -X POST "${window.location.origin}${base}/api/w/${$workspaceStore!}/openapi/generate" \\

package/package/components/triggers/http/RouteEditorConfigSection.svelte

@@ -10,19 +10,10 @@ import { getHttpRoute } from './utils';
 import { isCloudHosted } from '../../../cloud';
 import Toggle from '../../Toggle.svelte';
 import TestingBadge from '../testingBadge.svelte';
-export let initialTriggerPath = undefined;
-export let dirtyRoutePath = false;
-export let route_path;
-export let http_method;
-export let can_write = false;
-export let static_asset_config = undefined;
-export let headless = false;
-export let workspaced_route = false;
-export let isValid = false;
-export let isDraftOnly = true;
-export let showTestingBadge = false;
+import { untrack } from 'svelte';
+let { initialTriggerPath = undefined, dirtyRoutePath = $bindable(false), route_path = $bindable(), http_method = $bindable(), can_write = false, static_asset_config = $bindable(undefined), headless = false, workspaced_route = $bindable(false), isValid = $bindable(false), isDraftOnly = true, showTestingBadge = false } = $props();
 let validateTimeout = undefined;
-let routeError = '';
+let routeError = $state('');
 async function validateRoute(routePath, method, workspaced_route) {
     if (validateTimeout) {
         clearTimeout(validateTimeout);
@@ -51,22 +42,34 @@ async function routeExists(route_path, method, workspaced_route) {
         }
     });
 }
-$: validateRoute(route_path, http_method, workspaced_route);
-$: isValid = routeError === '';
-$: fullRoute = getHttpRoute('r', route_path, workspaced_route, $workspaceStore ?? '');
-$: !http_method && (http_method = 'post');
-$: route_path === undefined && (route_path = '');
-$: userIsAdmin = $userStore?.is_admin || $userStore?.is_super_admin;
-$: userCanEditConfig = userIsAdmin || isDraftOnly; // User can edit config if they are admin or if the trigger is a draft which will not be saved
+$effect.pre(() => {
+    ;
+    [route_path, http_method, workspaced_route];
+    untrack(() => {
+        validateRoute(route_path, http_method, workspaced_route);
+    });
+});
+$effect.pre(() => {
+    isValid = routeError === '';
+});
+let fullRoute = $derived(getHttpRoute('r', route_path, workspaced_route, $workspaceStore ?? ''));
+$effect.pre(() => {
+    !http_method && (http_method = 'post');
+});
+$effect.pre(() => {
+    route_path === undefined && (route_path = '');
+});
+let userIsAdmin = $derived($userStore?.is_admin || $userStore?.is_super_admin);
+let userCanEditConfig = $derived(userIsAdmin || isDraftOnly); // User can edit config if they are admin or if the trigger is a draft which will not be saved
 </script>
 
 <div>
 	<Section label="HTTP" {headless}>
-		<svelte:fragment slot="header">
+		{#snippet header()}
 			{#if showTestingBadge}
 				<TestingBadge />
 			{/if}
-		</svelte:fragment>
+		{/snippet}
 		{#if !userCanEditConfig && isDraftOnly}
 			<Alert type="info" title="Admin only" collapsible size="xs">
 				Route endpoints can only be edited by workspace admins
@@ -83,7 +86,7 @@ $: userCanEditConfig = userIsAdmin || isDraftOnly; // User can edit config if th
 						</div>
 						<div class="text-2xs text-tertiary"> ':myparam' for path params </div>
 					</div>
-					<!-- svelte-ignore a11y-autofocus -->
+					<!-- svelte-ignore a11y_autofocus -->
 					<input
 						type="text"
 						autocomplete="off"
@@ -92,7 +95,7 @@ $: userCanEditConfig = userIsAdmin || isDraftOnly; // User can edit config if th
 						class={routeError === ''
 							? ''
 							: 'border border-red-700 bg-red-100 border-opacity-30 focus:border-red-700 focus:border-opacity-30 focus-visible:ring-red-700 focus-visible:ring-opacity-25 focus-visible:border-red-700'}
-						on:input={() => {
+						oninput={() => {
 							dirtyRoutePath = true
 						}}
 					/>

package/package/components/triggers/http/RouteEditorConfigSection.svelte.d.ts

@@ -1,21 +1,8 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const RouteEditorConfigSection: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     initialTriggerPath?: string | undefined;
     dirtyRoutePath?: boolean;
     route_path: string | undefined;
-    http_method: "get" | "post" | "put" | "patch" | "delete" | undefined;
+    http_method: 'get' | 'post' | 'put' | 'patch' | 'delete' | undefined;
     can_write?: boolean;
     static_asset_config?: {
         s3: string;
@@ -27,8 +14,7 @@ declare const RouteEditorConfigSection: $$__sveltets_2_IsomorphicComponent<{
     isValid?: boolean;
     isDraftOnly?: boolean;
     showTestingBadge?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type RouteEditorConfigSection = InstanceType<typeof RouteEditorConfigSection>;
+}
+declare const RouteEditorConfigSection: import("svelte").Component<Props, {}, "route_path" | "http_method" | "workspaced_route" | "static_asset_config" | "isValid" | "dirtyRoutePath">;
+type RouteEditorConfigSection = ReturnType<typeof RouteEditorConfigSection>;
 export default RouteEditorConfigSection;

package/package/components/triggers/http/RouteEditorInner.svelte

@@ -73,11 +73,11 @@ let error_handler_path = $state();
 let error_handler_args = $state({});
 let retry = $state();
 // Component references
-let s3FilePicker = $state(null);
-let s3Editor = $state(null);
-let variablePicker = $state(null);
-let variableEditor = $state(null);
-let drawer = $state(null);
+let s3FilePicker = $state(undefined);
+let s3Editor = $state(undefined);
+let variablePicker = $state(undefined);
+let variableEditor = $state(undefined);
+let drawer = $state(undefined);
 let initialConfig = undefined;
 let deploymentLoading = $state(false);
 let optionTabSelected = $state('request_options');
@@ -435,7 +435,7 @@ $effect(() => {
 								{#if s3FileUploadRawMode}
 									{#if can_write}
 										<JsonEditor
-											bind:editor={s3Editor as any}
+											bind:editor={s3Editor}
 											code={JSON.stringify(static_asset_config ?? { s3: '' }, null, 2)}
 											bind:value={static_asset_config}
 										/>
@@ -545,7 +545,7 @@ $effect(() => {
 										{#if !static_asset_config}
 											<div class="flex flex-row justify-between">
 												<Label label="Request type" class="w-full">
-													<svelte:fragment slot="action">
+													{#snippet action()}
 														<ToggleButtonGroup
 															class="w-auto h-full"
 															selected={is_async ? 'async' : 'sync'}
@@ -571,12 +571,12 @@ $effect(() => {
 																/>
 															{/snippet}
 														</ToggleButtonGroup>
-													</svelte:fragment>
+													{/snippet}
 												</Label>
 											</div>
 										{/if}
 										<Label label="Authentication" class="w-full">
-											<svelte:fragment slot="action">
+											{#snippet action()}
 												<ToggleButtonGroup
 													class="w-auto h-full"
 													bind:selected={authentication_method}
@@ -594,7 +594,7 @@ $effect(() => {
 														{#each authentication_options as option}
 															{#if option.value === 'signature'}
 																<Popover placement="top-end" usePointerDownOutside>
-																	<svelte:fragment slot="trigger">
+																	{#snippet trigger()}
 																		<ToggleButton
 																			label={option.label}
 																			value={option.value}
@@ -602,8 +602,8 @@ $effect(() => {
 																			{item}
 																			{disabled}
 																		/>
-																	</svelte:fragment>
-																	<svelte:fragment slot="content">
+																	{/snippet}
+																	{#snippet content()}
 																		<ToggleButtonGroup
 																			class="w-auto h-full"
 																			bind:selected={signature_options_type}
@@ -633,7 +633,7 @@ $effect(() => {
 																				/>
 																			{/snippet}
 																		</ToggleButtonGroup>
-																	</svelte:fragment>
+																	{/snippet}
 																</Popover>
 															{:else}
 																<ToggleButton
@@ -647,7 +647,7 @@ $effect(() => {
 														{/each}
 													{/snippet}
 												</ToggleButtonGroup>
-											</svelte:fragment>
+											{/snippet}
 										</Label>
 
 										{#each authentication_options as option}
@@ -777,14 +777,14 @@ $effect(() => {
 	</Drawer>
 {:else}
 	<Section label={!customLabel ? 'HTTP Route' : ''} headerClass="grow min-w-0 h-[30px]">
-		<svelte:fragment slot="header">
+		{#snippet header()}
 			{#if customLabel}
 				{@render customLabel()}
 			{/if}
-		</svelte:fragment>
-		<svelte:fragment slot="action">
+		{/snippet}
+		{#snippet action()}
 			{@render saveButton()}
-		</svelte:fragment>
+		{/snippet}
 		{#if description}
 			{@render description()}
 		{/if}

package/package/components/triggers/kafka/KafkaTriggerEditorInner.svelte

@@ -221,14 +221,14 @@ $effect(() => {
 	</Drawer>
 {:else}
 	<Section label={!customLabel ? 'Kafka trigger' : ''} headerClass="grow min-w-0 h-[30px]">
-		<svelte:fragment slot="header">
+		{#snippet header()}
 			{#if customLabel}
 				{@render customLabel()}
 			{/if}
-		</svelte:fragment>
-		<svelte:fragment slot="action">
+		{/snippet}
+		{#snippet action()}
 			{@render actionsButtons('xs')}
-		</svelte:fragment>
+		{/snippet}
 		{@render config()}
 	</Section>
 {/if}

package/package/components/triggers/mqtt/MqttTriggerEditorInner.svelte

@@ -243,14 +243,14 @@ $effect(() => {
 	</Drawer>
 {:else}
 	<Section label={!customLabel ? 'MQTT trigger' : ''} headerClass="grow min-w-0 h-[30px]">
-		<svelte:fragment slot="header">
+		{#snippet header()}
 			{#if customLabel}
 				{@render customLabel()}
 			{/if}
-		</svelte:fragment>
-		<svelte:fragment slot="action">
+		{/snippet}
+		{#snippet action()}
 			{@render actionsSnippet()}
-		</svelte:fragment>
+		{/snippet}
 		{@render config()}
 	</Section>
 {/if}

package/package/components/triggers/nats/NatsTriggerEditorInner.svelte

@@ -223,14 +223,14 @@ $effect(() => {
 	</Drawer>
 {:else}
 	<Section label={!customLabel ? 'NATS trigger' : ''} headerClass="grow min-w-0 h-[30px]">
-		<svelte:fragment slot="header">
+		{#snippet header()}
 			{#if customLabel}
 				{@render customLabel()}
 			{/if}
-		</svelte:fragment>
-		<svelte:fragment slot="action">
+		{/snippet}
+		{#snippet action()}
 			{@render actionsSnippet()}
-		</svelte:fragment>
+		{/snippet}
 		{@render config()}
 	</Section>
 {/if}

package/package/components/triggers/schedules/ScheduleEditorInner.svelte

@@ -1170,16 +1170,16 @@ $effect(() => {
 	</Drawer>
 {:else}
 	<Section label={!customLabel ? 'Schedule' : ''} headerClass="grow min-w-0 h-[30px]">
-		<svelte:fragment slot="header">
+		{#snippet header()}
 			{#if customLabel}
 				{@render customLabel()}
 			{/if}
-		</svelte:fragment>
-		<svelte:fragment slot="action">
+		{/snippet}
+		{#snippet action()}
 			<div class="flex flex-row gap-2 items-center">
 				{@render saveButton()}
 			</div>
-		</svelte:fragment>
+		{/snippet}
 		{#if docDescription}
 			{@render docDescription()}
 		{/if}

package/package/components/triggers/sqs/SqsTriggerEditorInner.svelte

@@ -220,14 +220,14 @@ $effect(() => {
 	</Drawer>
 {:else}
 	<Section label={!customLabel ? 'SQS trigger' : ''} headerClass="grow min-w-0 h-[30px]">
-		<svelte:fragment slot="header">
+		{#snippet header()}
 			{#if customLabel}
 				{@render customLabel()}
 			{/if}
-		</svelte:fragment>
-		<svelte:fragment slot="action">
+		{/snippet}
+		{#snippet action()}
 			{@render actionsSnippet()}
-		</svelte:fragment>
+		{/snippet}
 		{@render config()}
 	</Section>
 {/if}

package/package/components/triggers/websocket/WebsocketTriggerEditorInner.svelte

@@ -262,14 +262,14 @@ $effect(() => {
 	</Drawer>
 {:else}
 	<Section label={!customLabel ? 'WebSocket trigger' : ''} headerClass="grow min-w-0 h-[30px]">
-		<svelte:fragment slot="header">
+		{#snippet header()}
 			{#if customLabel}
 				{@render customLabel()}
 			{/if}
-		</svelte:fragment>
-		<svelte:fragment slot="action">
+		{/snippet}
+		{#snippet action()}
 			{@render actionsButtons()}
-		</svelte:fragment>
+		{/snippet}
 		{@render config()}
 	</Section>
 {/if}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "windmill-components",
-	"version": "1.510.1",
+	"version": "1.511.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",