From 4dab80e24d2d2a16cf45f569e26e3baa07486b97 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 14 Jun 2025 12:31:46 +0200
Subject: [PATCH] fix schemaform default handling

---
 .../apps/components/buttons/AppButton.svelte  | 97 ++++++++++++-------
 .../components/buttons/AppSchemaForm.svelte   |  7 +-
 .../helpers/RunnableComponent.svelte          |  2 +-
 3 files changed, 67 insertions(+), 39 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
index 5ad842ba6c..da53a8c6e9 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppButton.svelte
@@ -22,25 +22,45 @@
 	import ConfirmationModal from '$lib/components/common/confirmationModal/ConfirmationModal.svelte'
 	import Portal from '$lib/components/Portal.svelte'
 
-	export let id: string
-	export let componentInput: AppInput | undefined
-	export let configuration: RichConfigurations
-	export let recomputeIds: string[] | undefined = undefined
-	export let extraQueryParams: Record<string, any> = {}
-	export let horizontalAlignment: 'left' | 'center' | 'right' | undefined = undefined
-	export let verticalAlignment: 'top' | 'center' | 'bottom' | undefined = undefined
-	export let noWFull = false
-	export let preclickAction: (() => Promise<void>) | undefined = undefined
-	export let customCss: ComponentCustomCSS<'buttoncomponent'> | undefined = undefined
-	export let render: boolean
-	export let errorHandledByComponent: boolean | undefined = false
-	export let extraKey: string | undefined = undefined
-	export let isMenuItem: boolean = false
-	export let noInitialize = false
-	export let replaceCallback: boolean = false
+	interface Props {
+		id: string
+		componentInput: AppInput | undefined
+		configuration: RichConfigurations
+		recomputeIds?: string[] | undefined
+		extraQueryParams?: Record<string, any>
+		horizontalAlignment?: 'left' | 'center' | 'right' | undefined
+		verticalAlignment?: 'top' | 'center' | 'bottom' | undefined
+		noWFull?: boolean
+		preclickAction?: (() => Promise<void>) | undefined
+		customCss?: ComponentCustomCSS<'buttoncomponent'> | undefined
+		render: boolean
+		errorHandledByComponent?: boolean | undefined
+		extraKey?: string | undefined
+		isMenuItem?: boolean
+		noInitialize?: boolean
+		replaceCallback?: boolean
+		controls?: { left: () => boolean; right: () => boolean | string } | undefined
+	}
 
-	export let controls: { left: () => boolean; right: () => boolean | string } | undefined =
-		undefined
+	let {
+		id,
+		componentInput,
+		configuration,
+		recomputeIds = undefined,
+		extraQueryParams = {},
+		horizontalAlignment = undefined,
+		verticalAlignment = undefined,
+		noWFull = false,
+		preclickAction = undefined,
+		customCss = undefined,
+		render,
+		errorHandledByComponent = $bindable(false),
+		extraKey = undefined,
+		isMenuItem = false,
+		noInitialize = false,
+		replaceCallback = false,
+		controls = undefined
+	}: Props = $props()
 
 	const { worldStore, app, componentControl, selectedComponent } =
 		getContext<AppViewerContext>('AppViewerContext')
@@ -49,13 +69,10 @@
 	const iterContext = getContext<ListContext>('ListWrapperContext')
 	const listInputs: ListInputs | undefined = getContext<ListInputs>('ListInputs')
 
-	let resolvedConfig = initConfig(
-		components['buttoncomponent'].initialData.configuration,
-		configuration
+	let resolvedConfig = $state(
+		initConfig(components['buttoncomponent'].initialData.configuration, configuration)
 	)
 
-	$: errorHandledByComponent = resolvedConfig?.onError?.selected !== 'errorOverlay'
-
 	let outputs = initOutput($worldStore, id, {
 		result: undefined,
 		loading: false,
@@ -66,15 +83,12 @@
 		$componentControl[id] = controls
 	}
 
-	let runnableComponent: RunnableComponent
+	let runnableComponent: RunnableComponent | undefined = $state()
 
-	let confirmedCallback: (() => void) | undefined = undefined
+	let confirmedCallback: (() => void) | undefined = $state(undefined)
 
-	let beforeIconComponent: any
-	let afterIconComponent: any
-
-	$: resolvedConfig.beforeIcon && beforeIconComponent && handleBeforeIcon()
-	$: resolvedConfig.afterIcon && afterIconComponent && handleAfterIcon()
+	let beforeIconComponent: any = $state()
+	let afterIconComponent: any = $state()
 
 	function getIconSize() {
 		switch (resolvedConfig.size as 'xs' | 'xs2' | 'xs3' | 'sm' | 'md' | 'lg' | 'xl') {
@@ -127,10 +141,7 @@
 	})
 
 	let errors: Record<string, string> = {}
-	$: errorsMessage = Object.values(errors)
-		.filter((x) => x != '')
-		.join('\n')
-	let runnableWrapper: RunnableWrapper
+	let runnableWrapper: RunnableWrapper | undefined = $state()
 
 	async function handleClick(event: CustomEvent) {
 		event?.stopPropagation()
@@ -162,9 +173,23 @@
 			await action()
 		}
 	}
-	let loading = false
+	let loading = $state(false)
 
-	let css = initCss($app.css?.buttoncomponent, customCss)
+	let css = $state(initCss($app.css?.buttoncomponent, customCss))
+	$effect(() => {
+		errorHandledByComponent = resolvedConfig?.onError?.selected !== 'errorOverlay'
+	})
+	$effect(() => {
+		resolvedConfig.beforeIcon && beforeIconComponent && handleBeforeIcon()
+	})
+	$effect(() => {
+		resolvedConfig.afterIcon && afterIconComponent && handleAfterIcon()
+	})
+	let errorsMessage = $derived(
+		Object.values(errors)
+			.filter((x) => x != '')
+			.join('\n')
+	)
 </script>
 
 {#each Object.entries(components['buttoncomponent'].initialData.configuration) as [key, initialConfig] (key)}
diff --git a/frontend/src/lib/components/apps/components/buttons/AppSchemaForm.svelte b/frontend/src/lib/components/apps/components/buttons/AppSchemaForm.svelte
index ec038ab492..e1150f6495 100644
--- a/frontend/src/lib/components/apps/components/buttons/AppSchemaForm.svelte
+++ b/frontend/src/lib/components/apps/components/buttons/AppSchemaForm.svelte
@@ -136,8 +136,11 @@
 	})
 	$effect(() => {
 		resolvedConfig.defaultValues &&
-			!deepEqual(previousDefault, resolvedConfig.defaultValues) &&
-			onDefaultChange()
+			!deepEqual(
+				untrack(() => previousDefault),
+				resolvedConfig.defaultValues
+			) &&
+			untrack(() => onDefaultChange())
 	})
 </script>
 
diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
index d6a825f0e2..ec8a876444 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
@@ -559,7 +559,7 @@
 	}
 
 	function updateResult(res) {
-		outputs.result?.set(res)
+		outputs.result?.set($state.snapshot(res))
 		result = res
 	}