wip support adding attachments to attachments prop array

Author: Not-Jayden

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

@@ -1,4 +1,4 @@
-/** @import { BlockStatement, Expression, ExpressionStatement, Identifier, MemberExpression, Pattern, Property, SequenceExpression, Statement } from 'estree' */
+/** @import { BlockStatement, Expression, ExpressionStatement, Identifier, MemberExpression, Pattern, Property, SequenceExpression, Statement, SpreadElement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../../types.js' */
 import { dev, is_ignored } from '../../../../../state.js';
@@ -10,6 +10,39 @@ import { build_attribute_value } from '../shared/element.js';
 import { build_event_handler } from './events.js';
 import { determine_slot } from '../../../../../utils/slot.js';
 
+/**
+ * @param {Property} prop
+ * @param {ComponentContext} context
+ * @returns {boolean}
+ */
+function is_attachments_prop(prop, context) {
+	if (prop.key.type !== 'Identifier') {
+		return false;
+	}
+
+	const binding = context.state.scope?.get?.(prop.key.name) ?? undefined;
+	const expression = prop.computed && prop.key.type === 'Identifier' ? prop.key : binding?.initial;
+
+	if (!expression || expression.type !== 'CallExpression') {
+		return false;
+	}
+
+	if (
+		expression.callee.type !== 'MemberExpression' ||
+		expression.callee.object.type !== 'Identifier' ||
+		expression.callee.object.name !== 'Symbol' ||
+		expression.callee.property.type !== 'Identifier' ||
+		expression.callee.property.name !== 'for' ||
+		expression.arguments.length !== 1 ||
+		expression.arguments[0].type !== 'Literal' ||
+		expression.arguments[0].value !== 'svelte.attachments'
+	) {
+		return false;
+	}
+
+	return true;
+}
+
 /**
  * @param {AST.Component | AST.SvelteComponent | AST.SvelteSelf} node
  * @param {string} component_name
@@ -50,6 +83,9 @@ export function build_component(node, component_name, context, anchor = context.
 	/** @type {ExpressionStatement[]} */
 	const binding_initializers = [];
 
+	/** @type {Array<Expression | SpreadElement>} */
+	const all_attachments = [];
+
 	/**
 	 * If this component has a slot property, it is a named slot within another component. In this case
 	 * the slot scope applies to the component itself, too, and not just its children.
@@ -262,24 +298,36 @@ export function build_component(node, component_name, context, anchor = context.
 				}
 			}
 		} else if (attribute.type === 'Attachment') {
-			// TODO do we need to create a derived here?
 			for (const attachment of attribute.attachments) {
-				push_prop(
-					b.prop(
-						'get',
-						b.call("Symbol.for('svelte.attachments')"),
-						/** @type {Expression} */ (
-							context.visit(attachment.type === 'SpreadElement' ? attachment.argument : attachment)
-						),
-						true
-					)
-				);
+				if (attachment.type === 'SpreadElement') {
+					const visited = /** @type {ExpressionStatement} */ (context.visit(attachment.argument));
+					all_attachments.push(b.spread(visited.expression));
+				} else {
+					const visited = /** @type {ExpressionStatement} */ (context.visit(attachment));
+					all_attachments.push(visited.expression);
+				}
 			}
 		}
 	}
 
 	delayed_props.forEach((fn) => fn());
 
+	if (all_attachments.length > 0) {
+		const attachment_symbol = b.member(
+			b.id('Symbol'),
+			b.call('for', b.literal('svelte.attachments'))
+		);
+
+		push_prop(
+			b.prop(
+				'init',
+				attachment_symbol,
+				b.array(all_attachments),
+				true // Mark as computed property
+			)
+		);
+	}
+
 	if (slot_scope_applies_to_itself) {
 		context.state.init.push(...lets);
 	}

packages/svelte/src/compiler/utils/builders.js

@@ -229,12 +229,21 @@ export function function_declaration(id, params, body) {
 }
 
 /**
- * @param {string} name
+ * @param {string | ESTree.Expression} name_or_expr
  * @param {ESTree.Statement[]} body
- * @returns {ESTree.Property & { value: ESTree.FunctionExpression}}}
- */
-export function get(name, body) {
-	return prop('get', key(name), function_builder(null, [], block(body)));
+ * @returns {ESTree.Property & { value: ESTree.FunctionExpression }}
+ */
+export function get(name_or_expr, body) {
+	let key_expr;
+	let computed = false;
+	if (typeof name_or_expr === 'string') {
+		key_expr = key(name_or_expr);
+		computed = key_expr.type !== 'Identifier';
+	} else {
+		key_expr = name_or_expr;
+		computed = true;
+	}
+	return prop('get', key_expr, function_builder(null, [], block(body)), computed);
 }
 
 /**
@@ -380,12 +389,21 @@ export function sequence(expressions) {
 }
 
 /**
- * @param {string} name
+ * @param {string | ESTree.Expression} name_or_expr
  * @param {ESTree.Statement[]} body
- * @returns {ESTree.Property & { value: ESTree.FunctionExpression}}
- */
-export function set(name, body) {
-	return prop('set', key(name), function_builder(null, [id('$$value')], block(body)));
+ * @returns {ESTree.Property & { value: ESTree.FunctionExpression }}
+ */
+export function set(name_or_expr, body) {
+	let key_expr;
+	let computed = false;
+	if (typeof name_or_expr === 'string') {
+		key_expr = key(name_or_expr);
+		computed = key_expr.type !== 'Identifier';
+	} else {
+		key_expr = name_or_expr;
+		computed = true;
+	}
+	return prop('set', key_expr, function_builder(null, [id('$$value')], block(body)), computed);
 }
 
 /**