fix

Author: Rich-Harris

packages/svelte/src/compiler/phases/1-parse/state/element.js

@@ -500,7 +500,10 @@ function read_attribute(parser) {
 				type: 'AttachTag',
 				start,
 				end: parser.index,
-				expression
+				expression,
+				metadata: {
+					expression: create_expression_metadata()
+				}
 			};
 
 			return attachment;

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -18,6 +18,7 @@ import { extract_svelte_ignore } from '../../utils/extract_svelte_ignore.js';
 import { ignore_map, ignore_stack, pop_ignore, push_ignore } from '../../state.js';
 import { ArrowFunctionExpression } from './visitors/ArrowFunctionExpression.js';
 import { AssignmentExpression } from './visitors/AssignmentExpression.js';
+import { AttachTag } from './visitors/AttachTag.js';
 import { Attribute } from './visitors/Attribute.js';
 import { AwaitBlock } from './visitors/AwaitBlock.js';
 import { BindDirective } from './visitors/BindDirective.js';
@@ -131,6 +132,7 @@ const visitors = {
 	},
 	ArrowFunctionExpression,
 	AssignmentExpression,
+	AttachTag,
 	Attribute,
 	AwaitBlock,
 	BindDirective,

packages/svelte/src/compiler/phases/2-analyze/visitors/AttachTag.js

@@ -0,0 +1,13 @@
+/** @import { AST } from '#compiler' */
+/** @import { Context } from '../types' */
+
+import { mark_subtree_dynamic } from './shared/fragment.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 });
+}

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

@@ -262,15 +262,13 @@ export function build_component(node, component_name, context, anchor = context.
 				}
 			}
 		} else if (attribute.type === 'AttachTag') {
-			// TODO do we need to create a derived here?
-			push_prop(
-				b.prop(
-					'get',
-					b.call('Symbol'),
-					/** @type {Expression} */ (context.visit(attribute.expression)),
-					true
-				)
-			);
+			let expression = /** @type {Expression} */ (context.visit(attribute.expression));
+
+			if (attribute.metadata.expression.has_state) {
+				expression = b.arrow([b.id('node')], b.call(expression, b.id('node')));
+			}
+
+			push_prop(b.prop('get', b.call('$.attachment'), expression, true));
 		}
 	}
 

packages/svelte/src/compiler/types/template.d.ts

@@ -178,6 +178,10 @@ export namespace AST {
 	export interface AttachTag extends BaseNode {
 		type: 'AttachTag';
 		expression: Expression;
+		/** @internal */
+		metadata: {
+			expression: ExpressionMetadata;
+		};
 	}
 
 	/** An `animate:` directive */

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

@@ -1,3 +1,4 @@
+export { createAttachmentKey as attachment } from '../../attachments/index.js';
 export { FILENAME, HMR, NAMESPACE_SVG } from '../../constants.js';
 export { assign, assign_and, assign_or, assign_nullish } from './dev/assign.js';
 export { cleanup_styles } from './dev/css.js';