fix

Author: adiguba

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

@@ -97,7 +97,8 @@ export function CallExpression(node, context) {
 
 			context.state.analysis.props_id = {
 				name: parent.id.name,
-				metadata: null
+				attr: null,
+				suffix: null
 			};
 
 			break;

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

@@ -34,14 +34,9 @@ export function Fragment(node, context) {
 
 	// If the component has a $props.id(),
 	// We check if the root fragment starts with a RegularElement
-	if (context.path.length === 0 && props_id && props_id.metadata === null) {
+	if (context.path.length === 0 && props_id) {
 		let first_elem = search_first_elem(node);
 
-		/** @type {string | null} */
-		let attr = null;
-		/** @type {string | null} */
-		let suffix = null;
-
 		if (first_elem) {
 			// If the fragment starts with a RegularElement
 			// We look for an attribute that starts with the $props.id()
@@ -50,14 +45,14 @@ export function Fragment(node, context) {
 			for (const attribute of first_elem.attributes) {
 				if (attribute.type === 'SpreadAttribute') {
 					// reset
-					attr = null;
-					suffix = null;
+					props_id.attr = null;
+					props_id.suffix = null;
 				} else if (
 					attribute.type === 'Attribute' &&
 					attribute.name.toLowerCase() !== 'class' &&
 					attribute.name.toLowerCase() !== 'style' &&
 					attribute.value !== true &&
-					(attr === null || attr.length > attribute.name.length)
+					(props_id.attr === null || props_id.attr.length > attribute.name.length)
 				) {
 					if (Array.isArray(attribute.value)) {
 						const attr0 = attribute.value[0];
@@ -67,27 +62,26 @@ export function Fragment(node, context) {
 							attr0.expression.name === props_id.name
 						) {
 							if (attribute.value.length === 1) {
-								attr = attribute.name;
-								suffix = null;
+								props_id.attr = attribute.name;
+								props_id.suffix = null;
 							} else if (
 								attribute.value[1].type === 'Text' &&
 								!'0123456789'.includes(attribute.value[1].data[0])
 							) {
-								attr = attribute.name;
-								suffix = attribute.value[1].data[0];
+								props_id.attr = attribute.name;
+								props_id.suffix = attribute.value[1].data[0];
 							}
 						}
 					} else if (
 						attribute.value.expression.type === 'Identifier' &&
 						attribute.value.expression.name === props_id.name
 					) {
-						attr = attribute.name;
-						suffix = null;
+						props_id.attr = attribute.name;
+						props_id.suffix = null;
 					}
 				}
 			}
 		}
-		props_id.metadata = { attr, suffix };
 	}
 
 	node.nodes.forEach((node) => context.visit(node, { ...context.state }));

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

@@ -25,7 +25,11 @@ export function validate_assignment(node, argument, state) {
 				e.constant_assignment(node, 'derived state');
 			}
 
-			if (binding?.node === state.analysis.props_id) {
+			if (
+				state.analysis.props_id &&
+				binding?.node?.type === 'Identifier' &&
+				binding?.node?.name === state.analysis.props_id.name
+			) {
 				e.constant_assignment(node, '$props.id()');
 			}
 

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

@@ -563,18 +563,15 @@ export function client_component(analysis, options) {
 	}
 
 	if (analysis.props_id) {
-		// need to be placed on first line of the component for hydration
 		const args = [];
-		const metadata = analysis.props_id.metadata;
-		if (metadata) {
-			if (metadata.attr) {
-				args.push(b.literal(metadata.attr));
-				if (metadata.suffix) {
-					args.push(b.literal(metadata.suffix));
-				}
+		if (analysis.props_id.attr) {
+			args.push(b.literal(analysis.props_id.attr));
+			if (analysis.props_id.suffix) {
+				args.push(b.literal(analysis.props_id.suffix));
 			}
 		}
 
+		// need to be placed on first line of the component for hydration
 		component_block.body.unshift(
 			b.const(b.id(analysis.props_id.name), b.call('$.props_id', ...args))
 		);

packages/svelte/src/compiler/phases/3-transform/server/transform-server.js

@@ -249,7 +249,7 @@ export function server_component(analysis, options) {
 		component_block.body.unshift(
 			b.const(
 				analysis.props_id.name,
-				b.call('$.props_id', b.id('$$payload'), analysis.props_id.metadata?.attr ? b.false : false)
+				b.call('$.props_id', b.id('$$payload'), analysis.props_id?.attr ? b.false : false)
 			)
 		);
 	}

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

@@ -48,12 +48,10 @@ export interface ComponentAnalysis extends Analysis {
 	props_id: {
 		/** The variable name */
 		name: string;
-		metadata: {
-			/** The name of the attribute from the first RegularElement */
-			attr: string | null;
-			/** Any suffix separator on the attribute */
-			suffix: string | null;
-		} | null;
+		/** The name of the attribute from the first RegularElement */
+		attr: string | null;
+		/** Any suffix separator on the attribute */
+		suffix: string | null;
 	} | null;
 	/** Whether the component uses `$$restProps` */
 	uses_rest_props: boolean;