fix: dynamic event delegation for stateful call expressions

Author: paoloricciuti

.changeset/brown-moons-sleep.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: dynamic event delegation for stateful call expressions

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

@@ -1143,8 +1143,19 @@ function serialize_event_handler(node, { state, visit }) {
 				])
 			);
 
-		if (handler.type === 'Identifier' || handler.type === 'MemberExpression') {
-			const id = object(handler);
+		if (
+			handler.type === 'Identifier' ||
+			handler.type === 'MemberExpression' ||
+			(handler.type === 'CallExpression' &&
+				(handler.callee.type === 'Identifier' || handler.callee.type === 'MemberExpression'))
+		) {
+			const id = object(
+				handler.type === 'CallExpression'
+					? /** @type {import("estree").Identifier | import("estree").MemberExpression} */ (
+							handler.callee
+						)
+					: handler
+			);
 			const binding = id === null ? null : state.scope.get(id.name);
 			if (
 				binding !== null &&

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']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/dynamic-hof-delegated-event/main.svelte

@@ -0,0 +1,17 @@
+<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>