From ccdf3a7ad40444f2530e8e9f180e29c11c529547 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Mon, 19 May 2025 11:32:11 +0200
Subject: [PATCH] fix: `@attach` opt's you into runes mode

---
 .changeset/famous-rocks-poke.md                |  5 +++++
 .../docs/03-template-syntax/09-@attach.md      |  3 +++
 .../docs/99-legacy/00-legacy-overview.md       |  2 +-
 .../src/compiler/phases/2-analyze/index.js     | 18 +++++++++++++++++-
 4 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/famous-rocks-poke.md

diff --git a/.changeset/famous-rocks-poke.md b/.changeset/famous-rocks-poke.md
new file mode 100644
index 0000000000..a3fc4aedc7
--- /dev/null
+++ b/.changeset/famous-rocks-poke.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: `@attach` opt's you into runes mode
diff --git a/documentation/docs/03-template-syntax/09-@attach.md b/documentation/docs/03-template-syntax/09-@attach.md
index 2df0882e34..a3832b6553 100644
--- a/documentation/docs/03-template-syntax/09-@attach.md
+++ b/documentation/docs/03-template-syntax/09-@attach.md
@@ -7,6 +7,9 @@ Attachments are functions that run when an element is mounted to the DOM. Option
 > [!NOTE]
 > Attachments are available in Svelte 5.29 and newer.
 
+> [!NOTE]
+> Attachments also opt you in for runes mode so if you use them in a legacy component you would have to also migrate that component.
+
 ```svelte
 <!--- file: App.svelte --->
 <script>
diff --git a/documentation/docs/99-legacy/00-legacy-overview.md b/documentation/docs/99-legacy/00-legacy-overview.md
index 638a77ec1a..891bbe2d56 100644
--- a/documentation/docs/99-legacy/00-legacy-overview.md
+++ b/documentation/docs/99-legacy/00-legacy-overview.md
@@ -9,6 +9,6 @@ The following pages document these features for
 - people still using Svelte 3/4
 - people using Svelte 5, but with components that haven't yet been migrated
 
-Since Svelte 3/4 syntax still works in Svelte 5, we will distinguish between _legacy mode_ and _runes mode_. Once a component is in runes mode (which you can opt into by using runes, or by explicitly setting the `runes: true` compiler option), legacy mode features are no longer available.
+Since Svelte 3/4 syntax still works in Svelte 5, we will distinguish between _legacy mode_ and _runes mode_. Once a component is in runes mode (which you can opt into by using runes or attachments, or by explicitly setting the `runes: true` compiler option), legacy mode features are no longer available.
 
 If you're exclusively interested in the Svelte 3/4 syntax, you can browse its documentation at [v4.svelte.dev](https://v4.svelte.dev).
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 09cb41b23f..b7843546ae 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -403,7 +403,23 @@ export function analyze_component(root, source, options) {
 
 	const component_name = get_component_name(options.filename);
 
-	const runes = options.runes ?? Array.from(module.scope.references.keys()).some(is_rune);
+	let runes = options.runes ?? Array.from(module.scope.references.keys()).some(is_rune);
+
+	// if we are not in runes mode by the bindings we need to check if there's any attachment
+	if (!runes) {
+		// we need to do it beforehand otherwise we would not be in runes mode until we hit an attachment
+		walk(
+			/** @type {AST.SvelteNode} */ (template.ast),
+			{},
+			{
+				AttachTag(_, context) {
+					runes = true;
+					// once we found one we can stop the traversal
+					context.stop();
+				}
+			}
+		);
+	}
 
 	if (!runes) {
 		for (let check of synthetic_stores_legacy_check) {