windmill-labs · rubenfiszel · Jun 12, 2025 · May 29, 2025 · May 29, 2025 · May 29, 2025
@@ -93,7 +93,7 @@
 		"@redocly/json-to-json-schema": "^0.0.1",
 		"@tanstack/svelte-table": "npm:tanstack-table-8-svelte-5@^0.1",
 		"@windmill-labs/svelte-dnd-action": "^0.9.48",
-		"@xyflow/svelte": "^0.1.15",
+		"@xyflow/svelte": "^1.0.0",
 		"ag-charts-community": "^9.0.1",
 		"ag-charts-enterprise": "^9.0.1",
 		"ag-grid-community": "^31.3.4",

@@ -489,7 +489,7 @@
 
 	const previewArgsStore = writable<Record<string, any>>({})
 	const scriptEditorDrawer = writable(undefined)
-	const moving = writable<{ module: FlowModule; modules: FlowModule[] } | undefined>(undefined)
+	const moving = writable<{ id: string } | undefined>(undefined)
 	const history = initHistory($flowStore)
 
 	const testStepStore = writable<Record<string, any>>({})

@@ -507,7 +507,7 @@
 
 				<div class="text-secondary text-xs flex gap-2.5 z-10 items-center">
 					{#if customUi?.disableAiFix !== true}
-						<slot name="copilot-fix" />
+						<slot name="copilot_fix" />
 					{/if}
 					{#if toolbarLocation === 'self'}
 						<!-- TODO : When svelte 5 is released, use a snippet to pass the toolbar to a parent -->

@@ -56,7 +56,9 @@
 	export let shouldDispatchChanges: boolean = false
 	export let isValid: boolean = true
 	export let customUi: EditableSchemaFormUi | undefined = undefined
+	export let pannelExtraButtonWidth: number = 0
 
+	// export let openEditTab: () => void = () => {}
 	const dispatch = createEventDispatcher()
 	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
 
@@ -210,6 +212,11 @@
 	let error: string | undefined = undefined
 	let editor: SimpleEditor | undefined = undefined
 
+	export function updateJson() {
+		schemaString = JSON.stringify(schema, null, '\t')
+		editor?.setCode(schemaString)
+	}
+
 	const editTabDefaultSize = noPreview ? 100 : 50
 	editPanelSize = editTab ? (editPanelInitialSize ?? editTabDefaultSize) : 0
 	let inputPanelSize = 100 - editPanelSize
@@ -218,7 +225,7 @@
 	})
 	let inputPanelSizeSmooth = tweened(inputPanelSize, { duration: 150 })
 
-	function openEditTab() {
+	function openEditTabFn() {
 		if (editPanelSize > 0) return
 		editPanelSizeSmooth.set(editTabDefaultSize)
 		inputPanelSizeSmooth.set(100 - editTabDefaultSize)
@@ -236,15 +243,9 @@
 	}
 	$: updatePanelSizes($editPanelSizeSmooth, $inputPanelSizeSmooth)
 
-	$: !!editTab ? openEditTab() : closeEditTab()
+	$: !!editTab ? openEditTabFn() : closeEditTab()
 
 	let panelButtonWidth: number = 0
-	export let pannelExtraButtonWidth: number = 0
-
-	export function updateJson() {
-		schemaString = JSON.stringify(schema, null, '\t')
-		editor?.setCode(schemaString)
-	}
 </script>
 
 <div class="w-full h-full">

@@ -13,10 +13,10 @@
 	const { flowStore, flowStateStore } = getContext<FlowEditorContext>('FlowEditorContext')
 
 	const dispatch = createEventDispatcher()
-	let schema: Record<string, any> | undefined = undefined
+	let schema: Record<string, any> | undefined = $state(undefined)
 
-	let error: string | undefined = undefined
-	let mod: any | undefined = undefined
+	let error: string | undefined = $state(undefined)
+	let mod: any | undefined = $state(undefined)
 	async function loadSchema() {
 		try {
 			const res = await getFirstStepSchema($flowStateStore, flowStore)
@@ -27,7 +27,9 @@
 			error = e
 		}
 	}
-	$: $flowStore && $flowStateStore && loadSchema()
+	$effect(() => {
+		$flowStore && $flowStateStore && loadSchema()
+	})
 
 	function handleClick() {
 		selected = !selected
@@ -39,7 +41,7 @@
 		dispatch('select', undefined)
 	})
 
-	let selected: boolean = false
+	let selected: boolean = $state(false)
 
 	function handleKeydown(event: KeyboardEvent) {
 		if (event.key === 'Escape' && selected) {
@@ -50,14 +52,16 @@
 		}
 	}
 
-	let firstUpdate = true
-	$: if (schema && !selected && firstUpdate) {
-		firstUpdate = false
-		setTimeout(() => {
-			selected = true
-			dispatch('select', schema)
-		}, 200)
-	}
+	let firstUpdate = $state(true)
+	$effect(() => {
+		if (schema && !selected && firstUpdate) {
+			firstUpdate = false
+			setTimeout(() => {
+				selected = true
+				dispatch('select', schema)
+			}, 200)
+		}
+	})
 
 	export function resetSelected(dispatchEvent?: boolean) {
 		selected = false
@@ -67,7 +71,7 @@
 	}
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
+<svelte:window onkeydown={handleKeydown} />
 
 <div class="h-full">
 	{#if schema && mod}
@@ -77,10 +81,10 @@
 				selected ? 'bg-surface-selected' : 'hover:bg-surface-hover'
 			)}
 			disabled={!schema}
-			on:click={handleClick}
+			onclick={handleClick}
 		>
 			<FlowModuleSchemaItemViewer
-				on:click={handleClick}
+				onclick={handleClick}
 				deletable={false}
 				id={mod.id}
 				label={mod.summary ||
@@ -90,24 +94,26 @@
 						: 'To be defined')}
 				path={`path` in mod.value && mod.summary ? mod.value.path : ''}
 			>
-				<div slot="icon">
-					{#if mod.value.type === 'rawscript'}
-						<LanguageIcon lang={mod.value.language} width={16} height={16} />
-					{:else if mod.value.type === 'script'}
-						{#if mod.value.path.startsWith('hub/')}
-							<div>
-								<IconedResourceType
-									width="20px"
-									height="20px"
-									name={mod.value.path.split('/')[2]}
-									silent={true}
-								/>
-							</div>
-						{:else}
-							<Building size={14} />
+				{#snippet icon()}
+					<div>
+						{#if mod.value.type === 'rawscript'}
+							<LanguageIcon lang={mod.value.language} width={16} height={16} />
+						{:else if mod.value.type === 'script'}
+							{#if mod.value.path.startsWith('hub/')}
+								<div>
+									<IconedResourceType
+										width="20px"
+										height="20px"
+										name={mod.value.path.split('/')[2]}
+										silent={true}
+									/>
+								</div>
+							{:else}
+								<Building size={14} />
+							{/if}
 						{/if}
-					{/if}
-				</div>
+					</div>
+				{/snippet}
 			</FlowModuleSchemaItemViewer>
 		</button>
 	{:else}

@@ -510,7 +510,7 @@
 
 	const previewArgsStore = writable<Record<string, any>>(initialArgs)
 	const scriptEditorDrawer = writable<ScriptEditorDrawer | undefined>(undefined)
-	const moving = writable<{ module: FlowModule; modules: FlowModule[] } | undefined>(undefined)
+	const moving = writable<{ id: string } | undefined>(undefined)
 	const history = initHistory($flowStore)
 	const pathStore = writable<string>(pathStoreInit ?? initialPath)
 	const captureOn = writable<boolean>(false)

@@ -29,7 +29,7 @@
 	import Alert from './common/alert/Alert.svelte'
 	import FlowGraphViewerStep from './FlowGraphViewerStep.svelte'
 	import FlowGraphV2 from './graph/FlowGraphV2.svelte'
-	import { buildPrefix } from './graph/graphBuilder'
+	import { buildPrefix } from './graph/graphBuilder.svelte'
 
 	const dispatch = createEventDispatcher()
 

@@ -69,7 +69,7 @@
 			{disableMock}
 			{disableHistory}
 		>
-			<svelte:fragment slot="copilot-fix">
+			<svelte:fragment slot="copilot_fix">
 				{#if lang && editor && diffEditor && $testStepStore[mod.id] && selectedJob && 'result' in selectedJob && selectedJob.result && typeof selectedJob.result == 'object' && `error` in selectedJob.result && selectedJob.result.error}
 					<ScriptFix
 						error={JSON.stringify(selectedJob.result.error)}

@@ -94,7 +94,7 @@
 <div class="h-fit">
 	<div class="relative z-[100000] w-full">
 		<div class="absolute" style="right: calc({100 - inputPanelSize}%); top: -1px;">
-			<SideBarTab expandRight={rightPanelOpen} {dropdownItems} fullMenu={true} noTrigger={true} />
+			<SideBarTab {dropdownItems} fullMenu={true} noTrigger={true} />
 		</div>
 	</div>
 	<Splitpanes class={!rightPanelOpen ? 'splitter-hidden' : ''}>

@@ -4,8 +4,12 @@
 
 	import EditableSchemaForm from './EditableSchemaForm.svelte'
 
-	export let schema: Schema | any
-	export let customUi: EditableSchemaFormUi | undefined = undefined
+	interface Props {
+		schema: Schema | any
+		customUi?: EditableSchemaFormUi | undefined
+	}
+
+	let { schema = $bindable(), customUi = undefined }: Props = $props()
 
 	export function setSchema(newSchema: Schema) {
 		schema = newSchema

@@ -610,16 +610,20 @@
 
 	let mounted = false
 	onMount(async () => {
-		if (BROWSER) {
-			if (loadAsync) {
-				setTimeout(async () => {
+		try {
+			if (BROWSER) {
+				if (loadAsync) {
+					setTimeout(async () => {
+						await loadMonaco()
+						mounted = true
+					}, 0)
+				} else {
 					await loadMonaco()
 					mounted = true
-				}, 0)
-			} else {
-				await loadMonaco()
-				mounted = true
+				}
 			}
+		} catch (e) {
+			console.error('Error loading monaco:', e)
 		}
 	})
 

@@ -49,7 +49,7 @@
 							bind:component
 							{paneHeight}
 							{paneWidth}
-							on:render={() => {
+							onrender={() => {
-							onrender={() => {
+							on:render={() => {
-							onrender={() => {
+							on:render={() => {
 								renderCount++
 							}}
 						/>