From 90d6f573e316f86f6a998d73b3cba1b03a5d15dc Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Mon, 22 Jul 2024 23:28:28 +0100
Subject: [PATCH] fix: dynamic event delegation for stateful call expressions
 (#12549)

---
 .changeset/chilled-ladybugs-invite.md         |  5 ++++
 .../3-transform/client/visitors/template.js   |  6 ++++-
 .../dynamic-hof-delegated-event/_config.js    | 24 +++++++++++++++++++
 .../dynamic-hof-delegated-event/main.svelte   | 15 ++++++++++++
 4 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/chilled-ladybugs-invite.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/dynamic-hof-delegated-event/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/dynamic-hof-delegated-event/main.svelte

diff --git a/.changeset/chilled-ladybugs-invite.md b/.changeset/chilled-ladybugs-invite.md
new file mode 100644
index 0000000000..3074d919a0
--- /dev/null
+++ b/.changeset/chilled-ladybugs-invite.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: dynamic event delegation for stateful call expressions
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
index 84c0ad0ed5..a1ae1fba9a 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
@@ -1169,7 +1169,11 @@ function serialize_event_handler(node, { state, visit }) {
 			} else {
 				handler = /** @type {Expression} */ (visit(handler));
 			}
-		} else if (handler.type === 'ConditionalExpression' || handler.type === 'LogicalExpression') {
+		} else if (
+			handler.type === 'CallExpression' ||
+			handler.type === 'ConditionalExpression' ||
+			handler.type === 'LogicalExpression'
+		) {
 			handler = dynamic_handler();
 		} else {
 			handler = /** @type {Expression} */ (visit(handler));
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-hof-delegated-event/_config.js b/packages/svelte/tests/runtime-runes/samples/dynamic-hof-delegated-event/_config.js
new file mode 100644
index 0000000000..cb37111379
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-hof-delegated-event/_config.js
@@ -0,0 +1,24 @@
+import { flushSync } from 'svelte';
+import { test, ok } from '../../test';
+
+export default test({
+	mode: ['client'],
+	async test({ assert, target, logs }) {
+		const [btn1, btn2, btn3] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			btn1.click();
+			btn2.click();
+		});
+
+		assert.deepEqual(logs, ['AA', 'AB']);
+
+		flushSync(() => {
+			btn3.click();
+			btn1.click();
+			btn2.click();
+		});
+
+		assert.deepEqual(logs, ['AA', 'AB', 'BA', 'BB']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-hof-delegated-event/main.svelte b/packages/svelte/tests/runtime-runes/samples/dynamic-hof-delegated-event/main.svelte
new file mode 100644
index 0000000000..9f6f1c1fef
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-hof-delegated-event/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	let hof = $state((name) => () => console.log('A' + name));
+	const member = $derived({
+		hof
+	});
+	function change() {
+		hof = (name) => () => console.log('B' + name);
+	}
+</script>
+
+<button onclick={hof('A')}>A</button>
+<button onclick={member.hof('B')}>B</button>
+
+<br />
+<button onclick={change}>change</button>