bind:group error

documentation/docs/98-reference/.generated/compile-errors.md

@@ -78,6 +78,12 @@ Sequence expressions are not allowed as attribute/directive values in runes mode
 Attribute values containing `{...}` must be enclosed in quote marks, unless the value only contains the expression
 ```
 
+### bind_group_invalid_expression
+
+```
+`bind:group` can only bind to an Identifier or MemberExpression
+```
+
 ### bind_invalid_expression
 
 ```

packages/svelte/messages/compile-errors/template.md

@@ -50,6 +50,10 @@
 
 > Attribute values containing `{...}` must be enclosed in quote marks, unless the value only contains the expression
 
+## bind_group_invalid_expression
+
+> `bind:group` can only bind to an Identifier or MemberExpression
+
 ## bind_invalid_expression
 
 > Can only bind to an Identifier or MemberExpression

packages/svelte/src/compiler/errors.js

@@ -696,6 +696,15 @@ export function attribute_unquoted_sequence(node) {
 	e(node, "attribute_unquoted_sequence", "Attribute values containing `{...}` must be enclosed in quote marks, unless the value only contains the expression");
 }
 
+/**
+ * `bind:group` can only bind to an Identifier or MemberExpression
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function bind_group_invalid_expression(node) {
+	e(node, "bind_group_invalid_expression", "`bind:group` can only bind to an Identifier or MemberExpression");
+}
+
 /**
  * Can only bind to an Identifier or MemberExpression
  * @param {null | number | NodeLike} node

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

@@ -123,7 +123,12 @@ export function BindDirective(node, context) {
 	}
 
 	// When dealing with bind getters/setters skip the specific binding validation
+	// Group bindings aren't supported for getter/setters so we don't need to handle
+	// the metadata
 	if (Array.isArray(node.expression)) {
+		if (node.name === 'group') {
+			e.bind_group_invalid_expression(node);
+		}
 		return;
 	}
 

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

@@ -120,7 +120,7 @@ export function build_element_attributes(node, context) {
 						? b.call(/** @type {Expression} */ (context.visit(attribute.expression[0])))
 						: /** @type {Expression} */ (context.visit(attribute.expression))
 				);
-			} else if (attribute.name === 'group') {
+			} else if (attribute.name === 'group' && !Array.isArray(attribute.expression)) {
 				const value_attribute = /** @type {AST.Attribute | undefined} */ (
 					node.attributes.find((attr) => attr.type === 'Attribute' && attr.name === 'value')
 				);
@@ -133,9 +133,6 @@ export function build_element_attributes(node, context) {
 						is_text_attribute(attr) &&
 						attr.value[0].data === 'checkbox'
 				);
-				const attribute_expression = Array.isArray(attribute.expression)
-					? b.call(attribute.expression[0])
-					: attribute.expression;
 
 				attributes.push(
 					create_attribute('checked', -1, -1, [
@@ -146,12 +143,12 @@ export function build_element_attributes(node, context) {
 							parent: attribute,
 							expression: is_checkbox
 								? b.call(
-										b.member(attribute_expression, 'includes'),
+										b.member(attribute.expression, 'includes'),
 										build_attribute_value(value_attribute.value, context)
 									)
 								: b.binary(
 										'===',
-										attribute_expression,
+										attribute.expression,
 										build_attribute_value(value_attribute.value, context)
 									),
 							metadata: {

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

@@ -14,8 +14,7 @@ import type {
 	Pattern,
 	Program,
 	ChainExpression,
-	SimpleCallExpression,
-	SequenceExpression
+	SimpleCallExpression
 } from 'estree';
 import type { Scope } from '../phases/scope';
 

packages/svelte/tests/validator/samples/bind_group_invalid_expression/errors.json

@@ -0,0 +1,14 @@
+[
+	{
+		"code": "bind_group_invalid_expression",
+		"message": "`bind:group` can only bind to an Identifier or MemberExpression",
+		"start": {
+			"line": 8,
+			"column": 38
+		},
+		"end": {
+			"line": 8,
+			"column": 84
+		}
+	}
+]

packages/svelte/tests/validator/samples/bind_group_invalid_expression/input.svelte

@@ -0,0 +1,12 @@
+<script>
+	let values = $state([{ name: 'Alpha' }, { name: 'Beta' }, { name: 'Gamma' }]);
+	let selected = $state(values[1]);
+</script>
+
+{#each values as value}
+	<label>
+		<input type="radio" value="{value}" bind:group={() => selected, v => selected = v} /> {value.name}
+	</label>
+{/each}
+
+<p>{selected.name}</p>