fix: only escape attribute values for elements, not components (#9456)

* only escape attribute values for elements, not components - closes #9454 * changeset --------- Co-authored-by: Rich Harris <[email protected]>
sveltejs · Nov 15, 2023 · 6f6c3a0 · 6f6c3a0 · vercel · Nov 15, 2023
1 parent 9abfb52
commit 6f6c3a0
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 4 deletions.
diff --git a/.changeset/sour-rules-march.md b/.changeset/sour-rules-march.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: only escape attribute values for elements, not components
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
@@ -611,9 +611,15 @@ const javascript_visitors_runes = {
  * @param {true | Array<import('#compiler').Text | import('#compiler').ExpressionTag>} attribute_value
  * @param {import('./types').ComponentContext} context
  * @param {boolean} trim_whitespace
+ * @param {boolean} is_component
  * @returns {import('estree').Expression}
  */
-function serialize_attribute_value(attribute_value, context, trim_whitespace = false) {
+function serialize_attribute_value(
+	attribute_value,
+	context,
+	trim_whitespace = false,
+	is_component = false
+) {
 	if (attribute_value === true) {
 		return b.true;
 	}
@@ -629,7 +635,8 @@ function serialize_attribute_value(attribute_value, context, trim_whitespace = f
 			if (trim_whitespace) {
 				data = data.replace(regex_whitespaces_strict, ' ').trim();
 			}
-			return b.literal(escape_html(data, true));
+
+			return b.literal(is_component ? data : escape_html(data, true));
 		} else {
 			return /** @type {import('estree').Expression} */ (context.visit(value.expression));
 		}
@@ -777,12 +784,12 @@ function serialize_inline_component(node, component_name, context) {
 		} else if (attribute.type === 'Attribute') {
 			if (attribute.name === 'slot') continue;
 			if (attribute.name.startsWith('--')) {
-				const value = serialize_attribute_value(attribute.value, context);
+				const value = serialize_attribute_value(attribute.value, context, false, true);
 				custom_css_props.push(b.init(attribute.name, value));
 				continue;
 			}
 
-			const value = serialize_attribute_value(attribute.value, context);
+			const value = serialize_attribute_value(attribute.value, context, false, true);
 			push_prop(b.prop('init', b.key(attribute.name), value));
 		} else if (attribute.type === 'BindDirective') {
 			// TODO this needs to turn the whole thing into a while loop because the binding could be mutated eagerly in the child

diff --git a/packages/svelte/tests/runtime-runes/samples/component-prop-unescaped/Child.svelte b/packages/svelte/tests/runtime-runes/samples/component-prop-unescaped/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	const { prop } = $props();
+</script>
+
+{prop}
diff --git a/packages/svelte/tests/runtime-runes/samples/component-prop-unescaped/_config.js b/packages/svelte/tests/runtime-runes/samples/component-prop-unescaped/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: `&quot;`
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/component-prop-unescaped/main.svelte b/packages/svelte/tests/runtime-runes/samples/component-prop-unescaped/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Child from './Child.svelte';
+</script>
+
+<Child prop='"'/>