From a2fbef20500de2b0bd0027da6b510e6fdfc6b8a3 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Wed, 21 Feb 2024 15:13:45 +0000
Subject: [PATCH] fix: improve import event handler support (#10592)

* fix: improve import event handler support

* simplify
---
 .changeset/yellow-taxis-double.md             |  5 +++++
 .../3-transform/client/visitors/template.js   |  1 +
 .../samples/event-attribute-import/_config.js | 20 +++++++++++++++++++
 .../samples/event-attribute-import/event.js   | 14 +++++++++++++
 .../event-attribute-import/main.svelte        |  6 ++++++
 5 files changed, 46 insertions(+)
 create mode 100644 .changeset/yellow-taxis-double.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-attribute-import/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-attribute-import/event.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-attribute-import/main.svelte

diff --git a/.changeset/yellow-taxis-double.md b/.changeset/yellow-taxis-double.md
new file mode 100644
index 0000000000..b8c37c5a89
--- /dev/null
+++ b/.changeset/yellow-taxis-double.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: improve import event handler support
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 d33be2fdce..fd48fda1b7 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
@@ -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' ||
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-import/_config.js b/packages/svelte/tests/runtime-runes/samples/event-attribute-import/_config.js
new file mode 100644
index 0000000000..66bda3def6
--- /dev/null
+++ b/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']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-import/event.js b/packages/svelte/tests/runtime-runes/samples/event-attribute-import/event.js
new file mode 100644
index 0000000000..978f672d30
--- /dev/null
+++ 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
+};
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-import/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-attribute-import/main.svelte
new file mode 100644
index 0000000000..1b743653a7
--- /dev/null
+++ b/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>