From dd9abea2a1059cbead398c5578bfd07a3c3ddd69 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Thu, 21 Nov 2024 16:40:10 +0000
Subject: [PATCH] fix: ensure spread attribute events are attached
 synchronously (#14387)

* fix: ensure spread attribute events are attached synchronously

* fix: ensure spread attribute events are attached synchronously

* Update .changeset/rich-worms-burn.md

Co-authored-by: Rich Harris <rich.harris@vercel.com>

* simplify

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/rich-worms-burn.md                 |  5 ++++
 .../client/dom/elements/attributes.js         | 27 ++-----------------
 .../samples/event-spread-timing/_config.js    |  7 +++++
 .../samples/event-spread-timing/main.svelte   |  7 +++++
 4 files changed, 21 insertions(+), 25 deletions(-)
 create mode 100644 .changeset/rich-worms-burn.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-spread-timing/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-spread-timing/main.svelte

diff --git a/.changeset/rich-worms-burn.md b/.changeset/rich-worms-burn.md
new file mode 100644
index 0000000000..8ec3af516a
--- /dev/null
+++ b/.changeset/rich-worms-burn.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: attach spread attribute events synchronously
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index 545cab20f8..d927af543f 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -5,7 +5,7 @@ import { create_event, delegate } from './events.js';
 import { add_form_reset_listener, autofocus } from './misc.js';
 import * as w from '../../warnings.js';
 import { LOADING_ATTR_SYMBOL } from '../../constants.js';
-import { queue_idle_task, queue_micro_task } from '../task.js';
+import { queue_idle_task } from '../task.js';
 import { is_capture_event, is_delegated, normalize_attribute } from '../../../../utils.js';
 import {
 	active_effect,
@@ -209,8 +209,6 @@ export function set_attributes(
 
 	// @ts-expect-error
 	var attributes = /** @type {Record<string, unknown>} **/ (element.__attributes ??= {});
-	/** @type {Array<[string, any, () => void]>} */
-	var events = [];
 
 	// since key is captured we use const
 	for (const key in next) {
@@ -277,15 +275,7 @@ export function set_attributes(
 						current[key].call(this, evt);
 					}
 
-					if (!prev) {
-						events.push([
-							key,
-							value,
-							() => (current[event_handle_key] = create_event(event_name, element, handle, opts))
-						]);
-					} else {
-						current[event_handle_key] = create_event(event_name, element, handle, opts);
-					}
+					current[event_handle_key] = create_event(event_name, element, handle, opts);
 				} else {
 					// @ts-ignore
 					element[`__${event_name}`] = value;
@@ -325,19 +315,6 @@ export function set_attributes(
 		}
 	}
 
-	// On the first run, ensure that events are added after bindings so
-	// that their listeners fire after the binding listeners
-	if (!prev) {
-		queue_micro_task(() => {
-			if (!element.isConnected) return;
-			for (const [key, value, evt] of events) {
-				if (current[key] === value) {
-					evt();
-				}
-			}
-		});
-	}
-
 	return current;
 }
 
diff --git a/packages/svelte/tests/runtime-runes/samples/event-spread-timing/_config.js b/packages/svelte/tests/runtime-runes/samples/event-spread-timing/_config.js
new file mode 100644
index 0000000000..bde384b51b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-spread-timing/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	test({ assert, logs }) {
+		assert.deepEqual(logs, ['onfocus']);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-spread-timing/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-spread-timing/main.svelte
new file mode 100644
index 0000000000..bb04abce83
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-spread-timing/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	const focus = (input) => {
+		input.focus();
+	};
+</script>
+
+<input {...({})} onfocus={() => console.log("onfocus")} use:focus />