fix: improve import event handler support (#10592)

* fix: improve import event handler support

* simplify

Author: trueadm

.changeset/yellow-taxis-double.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: improve import event handler support

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

@@ -1314,6 +1314,7 @@ function serialize_event_handler(node, { state, visit }) {
 				binding !== null &&
 				(binding.kind === 'state' ||
 					binding.kind === 'frozen_state' ||
+					binding.declaration_kind === 'import' ||
 					binding.kind === 'legacy_reactive' ||
 					binding.kind === 'derived' ||
 					binding.kind === 'prop' ||

packages/svelte/tests/runtime-runes/samples/event-attribute-import/_config.js

@@ -0,0 +1,20 @@
+import { test } from '../../test';
+import { log, handler, log_a } from './event.js';
+
+export default test({
+	before_test() {
+		log.length = 0;
+		handler.value = log_a;
+	},
+
+	async test({ assert, target }) {
+		const [b1, b2] = target.querySelectorAll('button');
+
+		b1?.click();
+		assert.deepEqual(log, ['a']);
+
+		b2?.click();
+		b1?.click();
+		assert.deepEqual(log, ['a', 'b']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/event-attribute-import/event.js

@@ -0,0 +1,14 @@
+/** @type {any[]} */
+export const log = [];
+
+export const log_a = () => {
+	log.push('a');
+};
+
+export const log_b = () => {
+	log.push('b');
+};
+
+export const handler = {
+	value: log_a
+};

packages/svelte/tests/runtime-runes/samples/event-attribute-import/main.svelte

@@ -0,0 +1,6 @@
+<script>
+	import {handler, log_b} from './event.js';
+</script>
+
+<button onclick={handler.value}>click</button>
+<button onclick={() => handler.value = log_b}>change</button>