omit props from SSR output, fix now-erroneous warning

Author: Rich-Harris

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

@@ -16,7 +16,7 @@
 
 ## attribute_quoted
 
-> Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes
+> Quoted properties on components will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes
 
 ## bind_invalid_each_rest
 

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

@@ -31,8 +31,7 @@ export function validate_attribute(attribute, parent) {
 		attribute.value[0].type === 'ExpressionTag' &&
 		(parent.type === 'Component' ||
 			parent.type === 'SvelteComponent' ||
-			parent.type === 'SvelteSelf' ||
-			(parent.type === 'RegularElement' && is_custom_element_node(parent)))
+			parent.type === 'SvelteSelf')
 	) {
 		w.attribute_quoted(attribute);
 	}

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

@@ -24,6 +24,7 @@ import {
 	is_content_editable_binding,
 	is_load_error_element
 } from '../../../../../../utils.js';
+import { is_array } from '../../../../../../internal/shared/utils.js';
 
 const WHITESPACE_INSENSITIVE_ATTRIBUTES = ['class', 'style'];
 
@@ -239,16 +240,18 @@ export function build_element_attributes(node, context) {
 				continue;
 			}
 
-			const name = get_attribute_name(node, attribute, context);
-			const value = build_attribute_value(
-				attribute.value,
-				context,
-				WHITESPACE_INSENSITIVE_ATTRIBUTES.includes(name)
-			);
+			if (is_array(attribute.value) || !node.name.includes('-')) {
+				const name = get_attribute_name(node, attribute, context);
+				const value = build_attribute_value(
+					attribute.value,
+					context,
+					WHITESPACE_INSENSITIVE_ATTRIBUTES.includes(name)
+				);
 
-			context.state.template.push(
-				b.call('$.attr', b.literal(name), value, is_boolean_attribute(name) && b.true)
-			);
+				context.state.template.push(
+					b.call('$.attr', b.literal(name), value, is_boolean_attribute(name) && b.true)
+				);
+			}
 		}
 	}
 

packages/svelte/src/compiler/warnings.js

@@ -701,11 +701,11 @@ export function attribute_invalid_property_name(node, wrong, right) {
 }
 
 /**
- * Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes
+ * Quoted properties on components will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes
  * @param {null | NodeLike} node
  */
 export function attribute_quoted(node) {
-	w(node, "attribute_quoted", "Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes");
+	w(node, "attribute_quoted", "Quoted properties on components will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes");
 }
 
 /**

packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js

@@ -21,13 +21,13 @@ export default function Main($$anchor) {
 
 	var custom_element_1 = $.sibling(svg_1, 2);
 
-	$.template_effect(() => custom_element_1.fooBar = y());
+	$.template_effect(() => $.set_attribute(custom_element_1, "fooBar", y()));
 
 	$.template_effect(() => {
 		$.set_attribute(div, "foobar", x);
 		$.set_attribute(svg, "viewBox", x);
-		custom_element.fooBar = x;
+		$.set_attribute(custom_element, "fooBar", x);
 	});
 
 	$.append($$anchor, fragment);
-}
+}

packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/main.svelte

@@ -4,11 +4,11 @@
     let y = $state(() => 'test');
 </script>
 
-<div fooBar={x}></div>
-<svg viewBox={x}></svg>
-<custom-element fooBar={x}></custom-element>
+<div fooBar="{x}"></div>
+<svg viewBox="{x}"></svg>
+<custom-element fooBar="{x}"></custom-element>
 
 <!-- force them into singular render effects by using function invocations -->
-<div fooBar={y()}></div>
-<svg viewBox={y()} ></svg>
-<custom-element fooBar={y()}></custom-element>
+<div fooBar="{y()}"></div>
+<svg viewBox="{y()}" ></svg>
+<custom-element fooBar="{y()}"></custom-element>

packages/svelte/tests/validator/samples/attribute-quoted/warnings.json

@@ -1,7 +1,7 @@
 [
 	{
 		"code": "attribute_quoted",
-		"message": "Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes",
+		"message": "Quoted properties on components will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes",
 		"start": {
 			"column": 11,
 			"line": 13
@@ -25,7 +25,7 @@
 	},
 	{
 		"code": "attribute_quoted",
-		"message": "Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes",
+		"message": "Quoted properties on components will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes",
 		"start": {
 			"column": 29,
 			"line": 15
@@ -37,7 +37,7 @@
 	},
 	{
 		"code": "attribute_quoted",
-		"message": "Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes",
+		"message": "Quoted properties on components will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes",
 		"start": {
 			"column": 14,
 			"line": 18
@@ -46,17 +46,5 @@
 			"column": 27,
 			"line": 18
 		}
-	},
-	{
-		"code": "attribute_quoted",
-		"message": "Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes",
-		"start": {
-			"column": 16,
-			"line": 21
-		},
-		"end": {
-			"column": 29,
-			"line": 21
-		}
 	}
 ]