From d6a0c026d4abdb14a5582fe2ec2a9a47dadffef7 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Tue, 24 Jun 2025 09:02:32 +0200
Subject: [PATCH] app nits

---
 .../settingsPanel/ComponentPanel.svelte       | 31 +++++++++++++------
 .../editor/settingsPanel/EventHandlers.svelte |  8 +++--
 .../inputEditor/EvalV2InputEditor.svelte      |  1 +
 3 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index ec5a794bb5..2b0c2c0fe5 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -180,6 +180,26 @@
 			componentSettings.item.data.componentInput = appInput
 		}
 	}
+
+	let templateChangeTimeout: NodeJS.Timeout | undefined = undefined
+	function onTemplateChange(e: CustomEvent<{ code: string }>) {
+		if (componentSettings?.item.data.componentInput?.type === 'templatev2') {
+			if (templateChangeTimeout) {
+				clearTimeout(templateChangeTimeout)
+			}
+			templateChangeTimeout = setTimeout(() => {
+				if (componentSettings?.item.data.componentInput?.type === 'templatev2') {
+					inferDeps(
+						'`' + e.detail.code + '`',
+						$worldStore.outputsById,
+						componentSettings?.item.data.componentInput,
+						app
+					)
+					console.log('inferred deps for', componentSettings?.item.data.id)
+				}
+			}, 200)
+		}
+	}
 </script>
 
 <svelte:window onkeydown={keydown} />
@@ -284,16 +304,7 @@
 										fontSize={12}
 										bind:code={componentSettings.item.data.componentInput.eval}
 										{extraLib}
-										on:change={(e) => {
-											if (componentSettings?.item.data.componentInput?.type === 'templatev2') {
-												inferDeps(
-													'`' + e.detail.code + '`',
-													$worldStore.outputsById,
-													componentSettings?.item.data.componentInput,
-													app
-												)
-											}
-										}}
+										on:change={onTemplateChange}
 									/>
 								</div>
 								{#if componentSettings.item.data?.componentInput?.type === 'templatev2'}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/EventHandlers.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/EventHandlers.svelte
index 8a0e4acafc..86ef1df579 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/EventHandlers.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/EventHandlers.svelte
@@ -6,8 +6,12 @@
 
 	const { runnableComponents } = getContext<AppViewerContext>('AppViewerContext')
 
-	export let item: GridItem
-	export let ownId: string
+	interface Props {
+		item: GridItem
+		ownId: string
+	}
+
+	let { item = $bindable(), ownId }: Props = $props()
 
 	const componentsWithEventHandler = [
 		'modalcomponent',
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte
index dd9c7aebb6..e8185281d4 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/EvalV2InputEditor.svelte
@@ -68,6 +68,7 @@
 	}
 
 	function inferDepsFromCode(code: string) {
+		console.log('inferDepsFromCode', id)
 		if (componentInput) {
 			inferDeps(code, $worldStore.outputsById, componentInput, app)
 		}