fix: ensure event precedence when spreading event attributes

Author: trueadm

packages/svelte/src/compiler/phases/3-transform/client/types.d.ts

@@ -42,7 +42,9 @@ export interface ComponentClientTransformState extends ClientTransformState {
 		/** Used if condition for singular prop is false (see comment above) */
 		grouped: Statement;
 	}[];
-	/** Stuff that happens after the render effect (bindings, events, actions) */
+	/** Stuff that happens just before the render effect (events) */
+	readonly before_update: Statement[];
+	/** Stuff that happens after the render effect (bindings, actions) */
 	readonly after_update: Statement[];
 	/** The HTML template string */
 	readonly template: string[];

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

@@ -954,6 +954,7 @@ function create_block(parent, name, nodes, context) {
 		init: [],
 		update: [],
 		update_effects: [],
+		before_update: [],
 		after_update: [],
 		template: [],
 		metadata: {
@@ -1035,6 +1036,8 @@ function create_block(parent, name, nodes, context) {
 		}
 	}
 
+	body.push(...state.before_update);
+
 	if (state.update.length > 0 || state.update_effects.length > 0) {
 		/** @type {import('estree').Statement | undefined} */
 		let update;
@@ -1220,7 +1223,7 @@ function serialize_event(node, context) {
 				delegated_assignment = handler;
 			}
 
-			state.after_update.push(
+			state.before_update.push(
 				b.stmt(
 					b.assignment(
 						'=',
@@ -1951,6 +1954,7 @@ export const template_visitors = {
 				init: [],
 				update: [],
 				update_effects: [],
+				before_update: [],
 				after_update: []
 			}
 		};
@@ -1998,6 +2002,7 @@ export const template_visitors = {
 
 		/** @type {import('estree').Statement[]} */
 		const inner = inner_context.state.init;
+		inner.push(...inner_context.state.before_update);
 		if (inner_context.state.update.length > 0 || inner_context.state.update_effects.length > 0) {
 			if (inner_context.state.update_effects.length > 0) {
 				for (const render of inner_context.state.update_effects) {

packages/svelte/src/internal/client/render.js

@@ -2881,6 +2881,12 @@ export function spread_attributes(dom, prev, attrs, css_hash) {
 				dom.removeEventListener(event_name, /** @type {any} */ (prev[key]), opts);
 			}
 			if (value != null) {
+				const delegated_property = '__' + event_name;
+				// @ts-expect-error internal event property
+				if (dom[delegated_property]) {
+					// @ts-expect-error internal event property
+					dom[delegated_property] = undefined;
+				}
 				dom.addEventListener(event_name, value, opts);
 			}
 		} else if (value == null) {

packages/svelte/tests/runtime-runes/samples/event-attribute-spread-collision/Button.svelte

@@ -0,0 +1,7 @@
+<script>
+	const {log, ...restProps} = $props();
+</script>
+
+<button onclick={() => log.push('internal!')} {...restProps}>
+	<slot />
+</button>

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

@@ -0,0 +1,16 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>Test</button>`,
+
+	async test({ assert, target, component }) {
+		const [b1] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			b1?.click();
+		});
+
+		assert.deepEqual(component.log, ['external!']);
+	}
+});

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

@@ -0,0 +1,7 @@
+<script>
+	import Button from "./Button.svelte";
+
+	const {log = []} = $props();
+</script>
+
+<Button log={log} onclick={() => log.push('external!')}>Test</Button>