From fe6e4e2b05b8099d27483b7b5f14c1d757c934d3 Mon Sep 17 00:00:00 2001
From: Craig Jennings <1683368+craig-jennings@users.noreply.github.com>
Date: Mon, 22 Apr 2024 13:16:02 -0500
Subject: [PATCH] fix: avoid hoisting error by using 'let' instead of 'var'
 (#11291)

Fixes #11284
---
 .changeset/plenty-starfishes-dress.md               |  5 +++++
 .../src/internal/client/dom/elements/attributes.js  |  7 ++++---
 .../samples/event-attribute-after-spread/_config.js | 13 +++++++++++++
 .../event-attribute-after-spread/main.svelte        |  7 +++++++
 4 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/plenty-starfishes-dress.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-attribute-after-spread/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-attribute-after-spread/main.svelte

diff --git a/.changeset/plenty-starfishes-dress.md b/.changeset/plenty-starfishes-dress.md
new file mode 100644
index 0000000000..38b2201e9e
--- /dev/null
+++ b/.changeset/plenty-starfishes-dress.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: avoid hoisting error by using 'let' instead of 'var'
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index 67e336744f..58519d9baa 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -111,7 +111,8 @@ export function set_attributes(element, prev, next, lowercase_attributes, css_ha
 	var events = [];
 
 	for (key in next) {
-		var value = next[key];
+		// let instead of var because referenced in a closure
+		let value = next[key];
 		if (value === prev?.[key]) continue;
 
 		var prefix = key[0] + key[1]; // this is faster than key.slice(0, 2)
@@ -119,8 +120,8 @@ export function set_attributes(element, prev, next, lowercase_attributes, css_ha
 
 		if (prefix === 'on') {
 			/** @type {{ capture?: true }} */
-			var opts = {};
-			var event_name = key.slice(2);
+			const opts = {};
+			let event_name = key.slice(2);
 			var delegated = DelegatedEvents.includes(event_name);
 
 			if (
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-after-spread/_config.js b/packages/svelte/tests/runtime-runes/samples/event-attribute-after-spread/_config.js
new file mode 100644
index 0000000000..09975947e6
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute-after-spread/_config.js
@@ -0,0 +1,13 @@
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const input = target.querySelector('input');
+
+		input?.dispatchEvent(new Event('input', { bubbles: true }));
+
+		await Promise.resolve();
+
+		assert.htmlEqual(target.innerHTML, 'true <input class="hello">');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-after-spread/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-attribute-after-spread/main.svelte
new file mode 100644
index 0000000000..c854071f3e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute-after-spread/main.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	const props = {};
+	let changed = $state(false);
+</script>
+
+{changed}
+<input {...props} oninput={() => (changed = true)} class="hello" />