all

frontend/package-lock.json

@@ -1,13 +1,12 @@
 {
 	"name": "windmill-components",
-	"version": "1.493.2",
+	"version": "1.493.10",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "windmill-components",
-			"version": "1.493.2",
-			"hasInstallScript": true,
+			"version": "1.493.10",
 			"license": "AGPL-3.0",
 			"dependencies": {
 				"@aws-crypto/sha256-js": "^4.0.0",
@@ -145,7 +144,7 @@
 				"fsevents": "^2.3.3"
 			},
 			"peerDependencies": {
-				"svelte": "^4.0.0"
+				"svelte": "^5.0.0"
 			}
 		},
 		"node_modules/@alloc/quick-lru": {

frontend/package.json

@@ -1,11 +1,10 @@
 {
 	"name": "windmill-components",
-	"version": "1.493.2",
+	"version": "1.493.10",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
 		"preview": "vite preview",
-		"postinstall": "node scripts/untar_ui_builder.js && node scripts/patch_files.js",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --threshold warning",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
@@ -155,7 +154,7 @@
 		"zod": "^3.24.2"
 	},
 	"peerDependencies": {
-		"svelte": "^4.0.0"
+		"svelte": "^5.0.0"
 	},
 	"exports": {
 		"./package.json": "./package.json",
@@ -375,11 +374,16 @@
 		"./tailwindUtils": {
 			"types": "./package/components/apps/editor/componentsPanel/tailwindUtils.d.ts",
 			"default": "./package/components/apps/editor/componentsPanel/tailwindUtils.js"
+		},
+		"./components/custom_ui": {
+			"types": "./package/components/custom_ui.d.ts",
+			"default": "./package/components/custom_ui.js"
 		}
 	},
 	"files": [
 		"dist",
-		"package"
+		"package",
+		"scripts"
 	],
 	"license": "AGPL-3.0",
 	"svelte": "./dist/index.js",
@@ -513,6 +517,9 @@
 			],
 			"tailwindUtils": [
 				"./package/components/apps/editor/componentsPanel/tailwindUtils.d.ts"
+			],
+			"components/custom_ui": [
+				"./package/components/custom_ui.d.ts"
 			]
 		}
 	},

frontend/scripts/untar_ui_builder.js

@@ -1,3 +1,14 @@
+// Check if this script is being run from the package root
+const isTopLevel = !process.env.npm_config_global && process.env.INIT_CWD === process.cwd()
+
+if (isTopLevel) {
+	console.log('Running postinstall: direct install')
+	// Your postinstall logic here
+} else {
+	console.log('Skipping postinstall: installed as dependency')
+	process.exit(0)
+}
+
 import path from 'path'
 import fs from 'fs'
 
@@ -18,17 +29,6 @@ const response = await fetch(tarUrl)
 const buffer = await response.arrayBuffer()
 await fs.promises.writeFile(outputTarPath, Buffer.from(buffer))
 
-// Check if this script is being run from the package root
-const isRootInstall = process.cwd() + '/scripts' === __dirname
-
-if (isRootInstall) {
-	console.log('Running postinstall: direct install')
-	// Your postinstall logic here
-} else {
-	console.log('Skipping postinstall: installed as dependency')
-	process.exit(0)
-}
-
 // Create extract directory if it doesn't exist
 try {
 	await fs.promises.mkdir(extractTo, { recursive: true })

frontend/src/lib/components/FlowBuilder.svelte

@@ -48,7 +48,6 @@
 	import type { FlowEditorContext, FlowInput, FlowInputEditorState } from './flows/types'
 	import { cleanInputs, emptyFlowModuleState } from './flows/utils'
 	import { Calendar, Pen, Save, DiffIcon, HistoryIcon, FileJson, type Icon } from 'lucide-svelte'
-	import { createEventDispatcher } from 'svelte'
 	import Awareness from './Awareness.svelte'
 	import { getAllModules } from './flows/flowExplorer'
 	import {
@@ -102,6 +101,24 @@
 	export let setSavedraftCb: ((cb: () => void) => void) | undefined = undefined
 	export let draftTriggersFromUrl: Trigger[] | undefined = undefined
 	export let selectedTriggerIndexFromUrl: number | undefined = undefined
+	export let onevent: {
+		deploy?: (path: string) => void
+		deployError?: (error: Error) => void
+		saveInitial?: (path: string) => void
+		saveDraft?: ({
+			path,
+			savedAtNewPath,
+			newFlow
+		}: {
+			path: string
+			savedAtNewPath: boolean
+			newFlow: boolean
+		}) => void
+		saveDraftError?: (error: Error) => void
+		saveDraftOnlyAtNewPath?: ({ path, selectedId }: { path: string; selectedId: string }) => void
+		seeDetails?: (path: string) => void
+		historyRestore?: () => void
+	} = {}
 
 	let initialPathStore = writable(initialPath)
 	$: initialPathStore.set(initialPath)
@@ -165,8 +182,6 @@
 		}
 	}
 
-	const dispatch = createEventDispatcher()
-
 	const primaryScheduleStore = writable<ScheduleTrigger | undefined | false>(savedPrimarySchedule) // kept for legacy reasons
 	const triggersCount = writable<TriggersCount | undefined>(undefined)
 	const simplifiedPoll = writable(false)
@@ -288,18 +303,19 @@
 
 			let savedAtNewPath = false
 			if (newFlow) {
-				dispatch('saveInitial', $pathStore)
+				onevent.saveInitial?.($pathStore)
 			} else if (savedFlow?.draft_only && $pathStore !== initialPath) {
 				savedAtNewPath = true
 				initialPath = $pathStore
 				// this is so we can use the flow builder outside of sveltekit
-				dispatch('saveDraftOnlyAtNewPath', { path: $pathStore, selectedId: getSelectedId() })
+				onevent.saveDraftOnlyAtNewPath?.({ path: $pathStore, selectedId: getSelectedId() })
 			}
-			dispatch('saveDraft', { path: $pathStore, savedAtNewPath, newFlow })
+
+			onevent.saveDraft?.({ path: $pathStore, savedAtNewPath, newFlow })
 			sendUserToast('Saved as draft')
 		} catch (error) {
 			sendUserToast(`Error while saving the flow as a draft: ${error.body || error.message}`, true)
-			dispatch('saveDraftError', error)
+			onevent.saveDraftError?.(error)
 		}
 		loadingDraft = false
 	}
@@ -463,9 +479,9 @@
 			} as Flow
 			setDraftTriggers([])
 			loadingSave = false
-			dispatch('deploy', $pathStore)
+			onevent.deploy?.($pathStore)
 		} catch (err) {
-			dispatch('deployError', err)
+			onevent.deployError?.(err)
 			sendUserToast(`The flow could not be saved: ${err.body}`, true)
 			loadingSave = false
 		}
@@ -662,7 +678,7 @@
 		if (savedFlow?.draft_only === false || savedFlow?.draft_only === undefined) {
 			dropdownItems.push({
 				label: 'Exit & see details',
-				onClick: () => dispatch('details', $pathStore)
+				onClick: () => onevent.seeDetails?.($pathStore)
 			})
 		}
 
@@ -1262,7 +1278,11 @@
 	{#if !$userStore?.operator}
 		<FlowCopilotDrawer {getHubCompletions} {genFlow} bind:flowCopilotMode />
 		{#if $pathStore}
-			<FlowHistory bind:this={flowHistory} path={$pathStore} on:historyRestore />
+			<FlowHistory
+				bind:this={flowHistory}
+				path={$pathStore}
+				onHistoryRestore={() => onevent.historyRestore?.()}
+			/>
 		{/if}
 		<FlowYamlEditor bind:drawer={yamlEditorDrawer} />
 		<FlowImportExportMenu bind:drawer={jsonViewerDrawer} />

frontend/src/lib/components/ScriptBuilder.svelte

@@ -67,7 +67,7 @@
 	import { writable } from 'svelte/store'
 	import { defaultScriptLanguages, processLangs } from '$lib/scripts'
 	import DefaultScripts from './DefaultScripts.svelte'
-	import { createEventDispatcher, onMount, setContext } from 'svelte'
+	import { onMount, setContext } from 'svelte'
 	import Summary from './Summary.svelte'
 	import type { ScriptBuilderWhitelabelCustomUi } from './custom_ui'
 	import DeployOverrideConfirmationModal from '$lib/components/common/confirmationModal/DeployOverrideConfirmationModal.svelte'
@@ -111,6 +111,22 @@
 	export let savedPrimarySchedule: ScheduleTrigger | undefined = undefined
 	export let functionExports: ((exports: ScriptBuilderFunctionExports) => void) | undefined =
 		undefined
+	export let onevent: {
+		deploy?: (newHash: string) => void
+		deployError?: (error: Error) => void
+		saveInitial?: (path: string) => void
+		saveDraft?: ({
+			path,
+			savedAtNewPath,
+			script
+		}: {
+			path: string
+			savedAtNewPath: boolean
+			script: NewScript
+		}) => void
+		saveDraftError?: (error: Error) => void
+		seeDetails?: (path: string) => void
+	} = {}
 
 	export function getInitialAndModifiedValues(): SavedAndModifiedValue {
 		return {
@@ -182,8 +198,6 @@
 		loadTriggers()
 	}
 
-	const dispatch = createEventDispatcher()
-
 	$: initialPath != '' && loadTriggers()
 
 	onMount(() => {
@@ -565,10 +579,10 @@
 				script.parent_hash = newHash
 				sendUserToast('Deployed')
 			} else {
-				dispatch('deploy', newHash)
+				onevent.deploy?.(newHash)
 			}
 		} catch (error) {
-			dispatch('deployError', error)
+			onevent.deployError?.(error)
 			sendUserToast(`Error while saving the script: ${error.body || error.message}`, true)
 		}
 		loadingSave = false
@@ -700,9 +714,9 @@
 			if (initialPath == '' || (savedScript?.draft_only && script.path !== initialPath)) {
 				savedAtNewPath = true
 				initialPath = script.path
-				dispatch('saveInitial', script.path)
+				onevent.saveInitial?.(script.path)
 			}
-			dispatch('saveDraft', { path: script.path, savedAtNewPath, script })
+			onevent.saveDraft?.({ path: script.path, savedAtNewPath, script })
 
 			sendUserToast('Saved as draft')
 		} catch (error) {
@@ -710,7 +724,7 @@
 				`Error while saving the script as a draft: ${error.body || error.message}`,
 				true
 			)
-			dispatch('saveDraftError', error)
+			onevent.saveDraftError?.(error)
 		}
 		loadingDraft = false
 	}
@@ -768,7 +782,7 @@
 									{
 										label: 'Exit & See details',
 										onClick: () => {
-											dispatch('seeDetails', initialPath)
+											onevent.seeDetails?.(initialPath)
 										}
 									}
 								]

frontend/src/lib/components/ScriptEditor.svelte

@@ -13,7 +13,7 @@
 	import EditorBar, { EDITOR_BAR_WIDTH_THRESHOLD } from './EditorBar.svelte'
 	import TestJobLoader from './TestJobLoader.svelte'
 	import JobProgressBar from '$lib/components/jobs/JobProgressBar.svelte'
-	import { createEventDispatcher, onDestroy, onMount } from 'svelte'
+	import { onDestroy, onMount } from 'svelte'
 	import { Button } from './common'
 	import SplitPanesWrapper from './splitPanes/SplitPanesWrapper.svelte'
 	import WindmillIcon from './icons/WindmillIcon.svelte'
@@ -43,7 +43,6 @@
 	import HideButton from './apps/editor/settingsPanel/HideButton.svelte'
 	import { base } from '$lib/base'
 	import { SUPPORTED_CHAT_SCRIPT_LANGUAGES } from './copilot/chat/core'
-	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
 
 	// Exported
 	export let schema: Schema | any = emptySchema()
@@ -73,6 +72,7 @@
 	export let stablePathForCaptures: string = ''
 	export let lastSavedCode: string | undefined = undefined
 	export let lastDeployedCode: string | undefined = undefined
+	export let 
 
 	let showHistoryDrawer = false
 
@@ -87,8 +87,6 @@
 		shellcheck: false
 	}
 
-	const dispatch = createEventDispatcher()
-	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
 
 	$: watchChanges &&
 		(code != undefined || schema != undefined) &&

frontend/src/lib/components/apps/editor/AppEditor.svelte

@@ -79,6 +79,10 @@
 		path: string,
 		opt?: Record<string, any>
 	) => window.history.pushState(null, '', path)
+	export let onevent: {
+		savedNewAppPath?: (path: string) => void
+		restore?: (app: App) => void
+	} = {}
 
 	migrateApp(app)
 
@@ -785,8 +789,7 @@
 	$: forceDeactivatePanzoom = isModifierKeyPressed && handMode
 </script>
 
-<svelte:head>
-</svelte:head>
+<svelte:head></svelte:head>
 
 <DarkModeObserver on:change={onThemeChange} />
 
@@ -806,7 +809,7 @@
 		<AppEditorHeader
 			{newPath}
 			{newApp}
-			on:restore
+			on:restore={(e) => onevent.restore?.(e.detail)}
 			{policy}
 			{fromHub}
 			bind:this={appEditorHeader}
@@ -816,7 +819,7 @@
 			leftPanelHidden={leftPanelSize === 0}
 			rightPanelHidden={rightPanelSize === 0}
 			bottomPanelHidden={runnablePanelSize === 0}
-			on:savedNewAppPath
+			on:savedNewAppPath={(e) => onevent.savedNewAppPath?.(e.detail)}
 			on:showLeftPanel={() => showLeftPanel()}
 			on:showRightPanel={() => showRightPanel()}
 			on:hideLeftPanel={() => hideLeftPanel()}

frontend/src/lib/components/flows/FlowHistory.svelte

@@ -1,18 +1,20 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte'
 	import Drawer from '../common/drawer/Drawer.svelte'
 	import DrawerContent from '../common/drawer/DrawerContent.svelte'
 
 	import FlowHistoryInner from './FlowHistoryInner.svelte'
 
-	export let path: string
-	let drawer: Drawer
-
-	export function open() {
-		drawer.openDrawer()
+	interface Props {
+		path: string
+		onHistoryRestore: () => void
 	}
 
-	const dispatch = createEventDispatcher()
+	let { path, onHistoryRestore }: Props = $props()
+	let drawer: Drawer | undefined = undefined
+
+	export function open() {
+		drawer?.openDrawer()
+	}
 </script>
 
 <Drawer bind:this={drawer} size="1200px">
@@ -26,8 +28,8 @@
 		<FlowHistoryInner
 			allowFork
 			on:historyRestore={() => {
-				drawer.closeDrawer()
-				dispatch('historyRestore')
+				drawer?.closeDrawer()
+				onHistoryRestore()
 			}}
 			{path}
 		/>

frontend/src/routes/(root)/(logged)/flows/add/+page.svelte

@@ -165,14 +165,16 @@
 <!-- <div id="monaco-widgets-root" class="monaco-editor" style="z-index: 1200;" /> -->
 
 <FlowBuilder
-	on:saveInitial={(e) => {
-		goto(`/flows/edit/${e.detail}?selected=${getSelectedId?.()}`)
-	}}
-	on:deploy={(e) => {
-		goto(`/flows/get/${e.detail}?workspace=${$workspaceStore}`)
-	}}
-	on:details={(e) => {
-		goto(`/flows/get/${e.detail}?workspace=${$workspaceStore}`)
+	onevent={{
+		saveInitial: (path) => {
+			goto(`/flows/edit/${path}?selected=${getSelectedId?.()}`)
+		},
+		deploy: (path) => {
+			goto(`/flows/get/${path}?workspace=${$workspaceStore}`)
+		},
+		seeDetails: (path) => {
+			goto(`/flows/get/${path}?workspace=${$workspaceStore}`)
+		}
 	}}
 	{initialPath}
 	{pathStoreInit}

frontend/src/routes/(root)/(logged)/flows/edit/[...path]/+page.svelte

@@ -244,18 +244,19 @@
 
 <DiffDrawer bind:this={diffDrawer} {restoreDeployed} {restoreDraft} />
 <FlowBuilder
-	on:deploy={(e) => {
-		goto(`/flows/get/${e.detail}?workspace=${$workspaceStore}`)
-	}}
-	on:details={(e) => {
-		goto(`/flows/get/${e.detail}?workspace=${$workspaceStore}`)
-	}}
-	on:saveDraftOnlyAtNewPath={(e) => {
-		const { path, selectedId } = e.detail
-		goto(`/flows/edit/${path}?selected=${selectedId}`)
-	}}
-	on:historyRestore={() => {
-		loadFlow()
+	onevent={{
+		deploy: (path) => {
+			goto(`/flows/get/${path}?workspace=${$workspaceStore}`)
+		},
+		seeDetails: (path) => {
+			goto(`/flows/get/${path}?workspace=${$workspaceStore}`)
+		},
+		saveDraftOnlyAtNewPath: ({ path, selectedId }) => {
+			goto(`/flows/edit/${path}?selected=${selectedId}`)
+		},
+		historyRestore: () => {
+			loadFlow()
+		}
 	}}
 	{flowStore}
 	{flowStateStore}

frontend/src/routes/(root)/(logged)/scripts/add/+page.svelte

@@ -108,13 +108,13 @@
 	{initialArgs}
 	bind:this={scriptBuilder}
 	lockedLanguage={templatePath != null || hubPath != null}
-	on:deploy={(e) => {
-		let newHash = e.detail
-		goto(`/scripts/get/${newHash}?workspace=${$workspaceStore}`)
-	}}
-	on:saveInitial={(e) => {
-		let path = e.detail
-		goto(`/scripts/edit/${path}`)
+	onevent={{
+		deploy: (newHash) => {
+			goto(`/scripts/get/${newHash}?workspace=${$workspaceStore}`)
+		},
+		saveInitial: (path) => {
+			goto(`/scripts/edit/${path}`)
+		}
 	}}
 	bind:getInitialAndModifiedValues
 	searchParams={$page.url.searchParams}

frontend/src/routes/(root)/(logged)/scripts/edit/[...path]/+page.svelte

@@ -27,7 +27,6 @@
 
 	let scriptLoadedFromUrl = initialState != undefined ? decodeState(initialState) : undefined
 
-
 	let script: (NewScript & { draft_triggers?: Trigger[] }) | undefined = undefined
 
 	let initialPath: string = ''
@@ -218,19 +217,18 @@
 		{diffDrawer}
 		{savedPrimarySchedule}
 		searchParams={$page.url.searchParams}
-		on:deploy={(e) => {
-			let newHash = e.detail
-			goto(`/scripts/get/${newHash}?workspace=${$workspaceStore}`)
+		onevent={{
+			deploy: (newHash) => {
+				goto(`/scripts/get/${newHash}?workspace=${$workspaceStore}`)
+			},
+			saveInitial: (path) => {
+				goto(`/scripts/edit/${path}`)
+			},
+			saveDraft: ({ path, savedAtNewPath, script }) => {
+				goto(`/scripts/edit/${path}`)
+			}
 		}}
 		bind:getInitialAndModifiedValues
-		on:saveInitial={(e) => {
-			let path = e.detail
-			goto(`/scripts/edit/${path}`)
-		}}
-		on:seeDetails={(e) => {
-			let path = e.detail
-			goto(`/scripts/get/${path}?workspace=${$workspaceStore}`)
-		}}
 		replaceStateFn={(path) => {
 			replaceState(path, $page.state)
 		}}