fix: throw on invalid attribute expressions (#11736)

In runes mode only to prevent a breaking change solely from upgrading to Svelte 5
Closes #11734

.changeset/funny-trees-cry.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: throw on invalid attribute expressions

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

@@ -30,6 +30,10 @@
 
 > Event attribute must be a JavaScript expression, not a string
 
+## attribute_invalid_expression
+
+> Invalid attribute expression
+
 ## attribute_invalid_multiple
 
 > 'multiple' attribute must be static if select uses two-way binding

packages/svelte/src/compiler/errors.js

@@ -600,6 +600,15 @@ export function attribute_invalid_event_handler(node) {
 	e(node, "attribute_invalid_event_handler", "Event attribute must be a JavaScript expression, not a string");
 }
 
+/**
+ * Invalid attribute expression
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function attribute_invalid_expression(node) {
+	e(node, "attribute_invalid_expression", "Invalid attribute expression");
+}
+
 /**
  * 'multiple' attribute must be static if select uses two-way binding
  * @param {null | number | NodeLike} node

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

@@ -8,8 +8,8 @@ import * as e from '../../errors.js';
 import {
 	extract_identifiers,
 	get_parent,
-	is_event_attribute,
 	is_expression_attribute,
+	is_quoted_attribute,
 	is_text_attribute,
 	object,
 	unwrap_optional
@@ -58,6 +58,15 @@ function validate_component(node, context) {
 		}
 
 		if (attribute.type === 'Attribute') {
+			if (
+				context.state.analysis.runes &&
+				!is_quoted_attribute(attribute) &&
+				Array.isArray(attribute.value) &&
+				attribute.value.length > 1
+			) {
+				e.attribute_invalid_expression(attribute);
+			}
+
 			if (context.state.analysis.runes && is_expression_attribute(attribute)) {
 				const expression = attribute.value[0].expression;
 				if (expression.type === 'SequenceExpression') {
@@ -107,6 +116,15 @@ function validate_element(node, context) {
 		if (attribute.type === 'Attribute') {
 			const is_expression = is_expression_attribute(attribute);
 
+			if (
+				context.state.analysis.runes &&
+				!is_quoted_attribute(attribute) &&
+				Array.isArray(attribute.value) &&
+				attribute.value.length > 1
+			) {
+				e.attribute_invalid_expression(attribute);
+			}
+
 			if (context.state.analysis.runes && is_expression) {
 				const expression = attribute.value[0].expression;
 				if (expression.type === 'SequenceExpression') {

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

@@ -44,6 +44,16 @@ export function is_expression_attribute(attribute) {
 	);
 }
 
+/**
+ * Returns true if the attribute is quoted.
+ * @param {import('#compiler').Attribute} attribute
+ * @returns {attribute is import('#compiler').Attribute & { value: [import('#compiler').ExpressionTag] }}
+ */
+export function is_quoted_attribute(attribute) {
+	if (attribute.value === true) return false;
+	return attribute.value.at(-1)?.end !== attribute.end;
+}
+
 /**
  * Returns true if the attribute starts with `on` and contains a single expression node.
  * @param {import('#compiler').Attribute} attribute

packages/svelte/tests/compiler-errors/samples/unbalanced-curly-component/_config.js

@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'attribute_invalid_expression',
+		message: 'Invalid attribute expression',
+		position: [101, 116]
+	}
+});

packages/svelte/tests/compiler-errors/samples/unbalanced-curly-component/main.svelte

@@ -0,0 +1,6 @@
+<svelte:options runes />
+<script>
+	import Component from "./Component.svelte";
+</script>
+
+<Component onclick={true}} />

packages/svelte/tests/compiler-errors/samples/unbalanced-curly-element/_config.js

@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'attribute_invalid_expression',
+		message: 'Invalid attribute expression',
+		position: [34, 71]
+	}
+});

packages/svelte/tests/compiler-errors/samples/unbalanced-curly-element/main.svelte

@@ -0,0 +1,6 @@
+<svelte:options runes />
+<button
+	onclick={() => console.log('hello')}}
+>
+	click
+</button>