sveltejs · paoloricciuti · May 18, 2025 · May 18, 2025 · May 20, 2025
diff --git a/.changeset/breezy-pears-punch.md b/.changeset/breezy-pears-punch.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: add warning when you read object property within attachments in legacy mode
diff --git a/documentation/docs/98-reference/.generated/compile-warnings.md b/documentation/docs/98-reference/.generated/compile-warnings.md
@@ -556,6 +556,12 @@ Elements with ARIA roles must use a valid, non-abstract ARIA role. A reference t
 <div role="toooltip"></div>
 ```
 
+### attachment_legacy_member_access
+
+```
+Using `@attach` with a function from an object in legacy mode can cause unnecessary reruns of the attachment function if you mutate that object.
+```
+
 ### attribute_avoid_is
 
 ```

diff --git a/packages/svelte/messages/compile-warnings/template.md b/packages/svelte/messages/compile-warnings/template.md
@@ -1,3 +1,7 @@
+## attachment_legacy_member_access
+
+> Using `@attach` with a function from an object in legacy mode can cause unnecessary reruns of the attachment function if you mutate that object.
+
 ## attribute_avoid_is
 
 > The "is" attribute is not supported cross-browser and should be avoided

diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/AttachTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/AttachTag.js
@@ -2,12 +2,23 @@
 /** @import { Context } from '../types' */
 
 import { mark_subtree_dynamic } from './shared/fragment.js';
+import * as w from '../../../warnings.js';
 
 /**
  * @param {AST.AttachTag} node
  * @param {Context} context
  */
 export function AttachTag(node, context) {
 	mark_subtree_dynamic(context.path);
+
 	context.next({ ...context.state, expression: node.metadata.expression });
+
+	if (!context.state.analysis.runes) {
+		for (const dep of node.metadata.expression.dependencies) {
+			if (dep.mutated) {
+				w.attachment_legacy_member_access(node.expression);
+				break;
+			}
+		}
+	}
 }
diff --git a/packages/svelte/src/compiler/warnings.js b/packages/svelte/src/compiler/warnings.js
@@ -106,6 +106,7 @@ export const codes = [
 	'state_referenced_locally',
 	'store_rune_conflict',
 	'css_unused_selector',
+	'attachment_legacy_member_access',
 	'attribute_avoid_is',
 	'attribute_global_event_reference',
 	'attribute_illegal_colon',
@@ -677,6 +678,14 @@ export function css_unused_selector(node, name) {
 	w(node, 'css_unused_selector', `Unused CSS selector "${name}"\nhttps://svelte.dev/e/css_unused_selector`);
 }
 
+/**
+ * Using `@attach` with a function from an object in legacy mode can cause unnecessary reruns of the attachment function if you mutate that object.
+ * @param {null | NodeLike} node
+ */
+export function attachment_legacy_member_access(node) {
+	w(node, 'attachment_legacy_member_access', `Using \`@attach\` with a function from an object in legacy mode can cause unnecessary reruns of the attachment function if you mutate that object.\nhttps://svelte.dev/e/attachment_legacy_member_access`);
+}
+
 /**
  * The "is" attribute is not supported cross-browser and should be avoided
  * @param {null | NodeLike} node

diff --git a/packages/svelte/tests/validator/samples/attachment-legacy-member-access/input.svelte b/packages/svelte/tests/validator/samples/attachment-legacy-member-access/input.svelte
@@ -0,0 +1,22 @@
+<script>
+	// mutated, so should warn
+	let state = {
+		count: 0,
+		attachment(){}
+	};
+
+	// unmutated, so should not warn
+	let attachments = {
+		foo() {},
+		bar() {}
+	};
+</script>
+
+<button onclick={()=>{
+	state.count++;
+}}>{state.count}</button>
+
+<div {@attach state.attachment}></div>
+
+<div {@attach attachments.foo}></div>
+<div {@attach attachments.bar}></div>
diff --git a/packages/svelte/tests/validator/samples/attachment-legacy-member-access/warnings.json b/packages/svelte/tests/validator/samples/attachment-legacy-member-access/warnings.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "attachment_legacy_member_access",
+		"message": "Using `@attach` with a function from an object in legacy mode can cause unnecessary reruns of the attachment function if you mutate that object.",
+		"start": {
+			"line": 19,
+			"column": 14
+		},
+		"end": {
+			"line": 19,
+			"column": 30
+		}
+	}
+]