fix: improve list component force recompute

frontend/src/lib/components/apps/components/buttons/AppButton.svelte

@@ -85,7 +85,7 @@
 		}
 
 		if (!runnableComponent) {
-			runnableWrapper?.onSuccess?.()
+			runnableWrapper?.handleSideEffect(true)
 		} else {
 			await runnableComponent?.runComponent()
 		}

frontend/src/lib/components/apps/components/buttons/AppFormButton.svelte

@@ -110,7 +110,7 @@
 					}}
 					on:click={async () => {
 						if (!runnableComponent) {
-							runnableWrapper?.onSuccess()
+							runnableWrapper?.handleSideEffect(true)
 						} else {
 							await runnableComponent?.runComponent()
 						}

frontend/src/lib/components/apps/components/helpers/HiddenComponent.svelte

@@ -16,7 +16,7 @@
 
 	export function onSuccess() {
 		if (runnable.recomputeIds) {
-			runnable.recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb())
+			runnable.recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb?.map((cb) => cb()))
 		}
 	}
 

frontend/src/lib/components/apps/components/helpers/RefreshButton.svelte

@@ -8,7 +8,7 @@
 	const { runnableComponents } = getContext<AppViewerContext>('AppViewerContext')
 
 	async function refresh() {
-		await $runnableComponents[componentId]?.cb?.()
+		await $runnableComponents[componentId]?.cb?.map((cb) => cb())
 	}
 </script>
 

frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte

@@ -377,7 +377,7 @@
 		$runnableComponents[id] = {
 			autoRefresh: autoRefresh && recomputableByRefreshButton,
 			refreshOnStart: refreshOnStart,
-			cb: cancellableRun
+			cb: [...($runnableComponents[id]?.cb ?? []), cancellableRun]
 		}
 
 		if (!$initialized.initializedComponents.includes(id)) {
@@ -388,7 +388,10 @@
 	onDestroy(() => {
 		$initialized.initializedComponents = $initialized.initializedComponents.filter((c) => c !== id)
 		$errorByComponent = clearErrorByComponentId(id, $errorByComponent)
-		delete $runnableComponents[id]
+		$runnableComponents[id] = {
+			...$runnableComponents[id],
+			cb: $runnableComponents[id].cb.filter((cb) => cb !== cancellableRun)
+		}
 		$runnableComponents = $runnableComponents
 	})
 

frontend/src/lib/components/apps/components/helpers/RunnableWrapper.svelte

@@ -84,7 +84,7 @@
 		const sideEffect = success ? doOnSuccess : doOnError
 
 		if (recomputeIds && success) {
-			recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb())
+			recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb.map((cb) => cb()))
 		}
 		if (!sideEffect) return
 

frontend/src/lib/components/apps/components/helpers/eval.ts

@@ -99,7 +99,7 @@ export async function eval_like(
 		}
 	>,
 	worldStore: World | undefined,
-	runnableComponents: Record<string, { cb?: () => void }>
+	runnableComponents: Record<string, { cb?: (() => void)[] }>
 ) {
 	const proxiedState = new Proxy(state, {
 		set(target, key, value) {
@@ -136,7 +136,7 @@ export async function eval_like(
 			controlComponents[id]?.setTab?.(index)
 		},
 		(id) => {
-			runnableComponents[id]?.cb?.()
+			runnableComponents[id]?.cb?.forEach((f) => f())
 		},
 		(id) => {
 			return controlComponents[id]?.agGrid

frontend/src/lib/components/apps/components/inputs/AppCheckbox.svelte

@@ -63,7 +63,7 @@
 			listInputs(id, value)
 		}
 		if (recomputeIds) {
-			recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb())
+			recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb()))
 		}
 	}
 

frontend/src/lib/components/apps/components/inputs/AppSelect.svelte

@@ -113,7 +113,7 @@
 			listInputs(id, result)
 		}
 		if (recomputeIds) {
-			recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb())
+			recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((f) => f()))
 		}
 	}
 

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

@@ -50,7 +50,7 @@
 		loading = true
 
 		const promises = Object.keys($runnableComponents)
-			.map((id) => {
+			.flatMap((id) => {
 				if (
 					!$runnableComponents?.[id]?.autoRefresh &&
 					(!isFirstLoad || !$runnableComponents?.[id]?.refreshOnStart)
@@ -58,7 +58,7 @@
 					return
 				}
 
-				return $runnableComponents?.[id]?.cb?.()
+				return $runnableComponents?.[id]?.cb?.map((f) => f())
 			})
 			.filter(Boolean)
 

frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte

@@ -214,7 +214,7 @@
 							inlineScript.content = editor?.getCode() ?? ''
 						}
 						runLoading = true
-						await $runnableComponents[id]?.cb?.(inlineScript)
+						await Promise.all($runnableComponents[id]?.cb?.map((f) => f?.(inlineScript)) ?? [])
 						runLoading = false
 					}}
 					on:change={async (e) => {
@@ -241,7 +241,9 @@
 					lang="javascript"
 					cmdEnterAction={async () => {
 						runLoading = true
-						await $runnableComponents[id]?.cb?.(!transformer ? inlineScript : undefined)
+						await await Promise.all(
+							$runnableComponents[id]?.cb?.map((f) => f(!transformer ? inlineScript : undefined))
+						)
 						runLoading = false
 					}}
 					on:change={() => {

frontend/src/lib/components/apps/editor/inlineScriptsPanel/RunButton.svelte

@@ -11,7 +11,7 @@
 	export let hideShortcut = false
 
 	const { runnableComponents } = getContext<AppViewerContext>('AppViewerContext')
-	let cancelable: CancelablePromise<void> | undefined = undefined
+	let cancelable: CancelablePromise<void>[] | undefined = undefined
 </script>
 
 {#if $runnableComponents[id] != undefined}
@@ -25,8 +25,8 @@
 			on:click={async () => {
 				runLoading = true
 				try {
-					cancelable = $runnableComponents[id]?.cb?.(inlineScript)
-					await cancelable
+					cancelable = $runnableComponents[id]?.cb?.map((f) => f(inlineScript))
+					await Promise.all(cancelable)
 				} catch {}
 				runLoading = false
 			}}
@@ -48,7 +48,7 @@
 			variant="border"
 			btnClasses="!px-2 !py-1.5"
 			on:click={async () => {
-				cancelable?.cancel()
+				cancelable?.forEach((f) => f.cancel())
 				runLoading = false
 			}}
 		>

frontend/src/lib/components/apps/types.ts

@@ -176,7 +176,7 @@ export type AppViewerContext = {
 			{
 				autoRefresh: boolean
 				refreshOnStart?: boolean
-				cb: (inlineScript?: InlineScript) => CancelablePromise<void>
+				cb: ((inlineScript?: InlineScript) => CancelablePromise<void>)[]
 			}
 		>
 	>

frontend/src/lib/components/apps/utils.ts

@@ -227,7 +227,7 @@ declare const iter: {index: number, value: any};
 }
 
 export function getAllScriptNames(app: App): string[] {
-	const names = app.grid.reduce((acc, gridItem: GridItem) => {
+	const names = allItems(app.grid, app?.subgrids).reduce((acc, gridItem: GridItem) => {
 		const { componentInput } = gridItem.data
 
 		if (