From ca34d384d68e6ac846a0eee4430b1e54898060c5 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 24 Sep 2024 10:30:16 -0400
Subject: [PATCH] ensure modifier order is stable and matches svelte 4

---
 packages/svelte/src/compiler/migrate/index.js | 43 ++++++++++---------
 .../samples/event-handlers/input.svelte       |  1 +
 .../samples/event-handlers/output.svelte      |  1 +
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js
index fdce00c1d2..2a243a2b0a 100644
--- a/packages/svelte/src/compiler/migrate/index.js
+++ b/packages/svelte/src/compiler/migrate/index.js
@@ -699,6 +699,16 @@ function extract_type_and_comment(declarator, str, path) {
 	return { type: 'any', comment };
 }
 
+// Ensure modifiers are applied in the same order as Svelte 4
+const modifier_order = [
+	'preventDefault',
+	'stopPropagation',
+	'stopImmediatePropagation',
+	'self',
+	'trusted',
+	'once'
+];
+
 /**
  * @param {AST.RegularElement | AST.SvelteElement | AST.SvelteWindow | AST.SvelteDocument | AST.SvelteBody} element
  * @param {State} state
@@ -734,11 +744,6 @@ function handle_events(element, state) {
 			const needs_line_delete =
 				state.str.original.substring(new_line_index, node.start).trim() === '' && i !== 0;
 
-			// always move once as the first modifier
-			const sorted_modifier = [...node.modifiers].sort((a, b) =>
-				a === 'once' ? 1 : b === 'once' ? -1 : 0
-			);
-
 			let body = `${state.names.bubble}('${node.name}')`;
 
 			if (node.expression) {
@@ -753,26 +758,22 @@ function handle_events(element, state) {
 				);
 			}
 
-			let has_passive = false;
-			let has_nonpassive = false;
+			const has_passive = node.modifiers.includes('passive');
+			const has_nonpassive = node.modifiers.includes('nonpassive');
 
-			for (const modifier of sorted_modifier) {
-				has_passive ||= modifier === 'passive';
-				has_nonpassive ||= modifier === 'nonpassive';
-				if (modifier !== 'capture' && modifier !== 'passive' && modifier !== 'nonpassive') {
-					state.legacy_imports.add(modifier);
-					body = `${state.names[modifier]}(${body})`;
-				}
+			const modifiers = modifier_order.filter((modifier) => node.modifiers.includes(modifier));
+
+			for (const modifier of modifiers) {
+				state.legacy_imports.add(modifier);
+				body = `${state.names[modifier]}(${body})`;
 			}
+
 			if (has_passive || has_nonpassive) {
-				if (has_passive) {
-					state.legacy_imports.add('passive');
-				}
-				if (has_nonpassive) {
-					state.legacy_imports.add('nonpassive');
-				}
+				const action = has_passive ? 'passive' : 'nonpassive';
+				state.legacy_imports.add(action);
+
 				explicit_passive_handlers.push({
-					handler: `use:${has_nonpassive ? state.names.nonpassive : state.names.passive}={['${node.name}', () => ${body}]}`,
+					handler: `use:${action}={['${node.name}', () => ${body}]}`,
 					indent,
 					needs_line_delete
 				});
diff --git a/packages/svelte/tests/migrate/samples/event-handlers/input.svelte b/packages/svelte/tests/migrate/samples/event-handlers/input.svelte
index 0f58c83899..fe659dedba 100644
--- a/packages/svelte/tests/migrate/samples/event-handlers/input.svelte
+++ b/packages/svelte/tests/migrate/samples/event-handlers/input.svelte
@@ -24,6 +24,7 @@
 <button on:click|stopPropagation|stopImmediatePropagation={() => {}}>click me</button>
 <button on:click|stopImmediatePropagation|self={() => ''}>click me</button>
 <button on:click|self|trusted={() => ''}>click me</button>
+<button on:click|trusted|self={() => ''}>click me</button>
 <button on:click|trusted|once={() => ''}>click me</button>
 <button on:click|once|preventDefault={() => ''}>click me</button>
 
diff --git a/packages/svelte/tests/migrate/samples/event-handlers/output.svelte b/packages/svelte/tests/migrate/samples/event-handlers/output.svelte
index 6fe7b4d214..a2d56530c2 100644
--- a/packages/svelte/tests/migrate/samples/event-handlers/output.svelte
+++ b/packages/svelte/tests/migrate/samples/event-handlers/output.svelte
@@ -39,6 +39,7 @@
 <button onclick={stopImmediatePropagation(stopPropagation(() => {}))}>click me</button>
 <button onclick={self(stopImmediatePropagation(() => ''))}>click me</button>
 <button onclick={trusted(self(() => ''))}>click me</button>
+<button onclick={trusted(self(() => ''))}>click me</button>
 <button onclick={once(trusted(() => ''))}>click me</button>
 <button onclick={once(preventDefault(() => ''))}>click me</button>