From 9b3341378a8b314885b78ce36be01efc09453af0 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 20 Nov 2023 15:20:34 +0100
Subject: [PATCH] fix: handle spreads within static strings (#9554)

Previously, if a part of the template was determined be be optimizable using innerHTML, it would error if there's a spread on an attribute
---
 .changeset/gentle-spies-cover.md              |  5 ++++
 .../render_dom/wrappers/Element/index.js      | 16 ++++++++--
 packages/svelte/src/runtime/internal/dom.js   | 30 +++++++++++++++++++
 .../samples/spread-from-import/_config.js     | 11 +++++++
 .../samples/spread-from-import/main.svelte    | 14 +++++++++
 .../samples/spread-from-import/spread.js      |  6 ++++
 6 files changed, 79 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/gentle-spies-cover.md
 create mode 100644 packages/svelte/test/runtime/samples/spread-from-import/_config.js
 create mode 100644 packages/svelte/test/runtime/samples/spread-from-import/main.svelte
 create mode 100644 packages/svelte/test/runtime/samples/spread-from-import/spread.js

diff --git a/.changeset/gentle-spies-cover.md b/.changeset/gentle-spies-cover.md
new file mode 100644
index 000000000000..d793211734dc
--- /dev/null
+++ b/.changeset/gentle-spies-cover.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: handle spreads within static strings
diff --git a/packages/svelte/src/compiler/compile/render_dom/wrappers/Element/index.js b/packages/svelte/src/compiler/compile/render_dom/wrappers/Element/index.js
index 9c54884807ee..134a51a1a27b 100644
--- a/packages/svelte/src/compiler/compile/render_dom/wrappers/Element/index.js
+++ b/packages/svelte/src/compiler/compile/render_dom/wrappers/Element/index.js
@@ -1312,9 +1312,19 @@ function to_html(wrappers, block, literal, state, can_use_raw_text) {
 					// The value attribute of <textarea> renders as content.
 					return;
 				}
-				state.quasi.value.raw += ` ${fix_attribute_casing(attr.node.name)}="`;
-				to_html_for_attr_value(attr, block, literal, state);
-				state.quasi.value.raw += '"';
+
+				if (attr instanceof SpreadAttributeWrapper) {
+					literal.quasis.push(state.quasi);
+					literal.expressions.push(x`@stringify_spread(${attr.node.expression.manipulate(block)})`);
+					state.quasi = {
+						type: 'TemplateElement',
+						value: { raw: '' }
+					};
+				} else {
+					state.quasi.value.raw += ` ${fix_attribute_casing(attr.node.name)}="`;
+					to_html_for_attr_value(attr, block, literal, state);
+					state.quasi.value.raw += '"';
+				}
 			});
 			if (!wrapper.void) {
 				state.quasi.value.raw += '>';
diff --git a/packages/svelte/src/runtime/internal/dom.js b/packages/svelte/src/runtime/internal/dom.js
index 01e47ba4c3b9..37cbb314f25f 100644
--- a/packages/svelte/src/runtime/internal/dom.js
+++ b/packages/svelte/src/runtime/internal/dom.js
@@ -1180,6 +1180,36 @@ export function attribute_to_object(attributes) {
 	return result;
 }
 
+const escaped = {
+	'"': '&quot;',
+	'&': '&amp;',
+	'<': '&lt;'
+};
+
+const regex_attribute_characters_to_escape = /["&<]/g;
+
+/**
+ * Note that the attribute itself should be surrounded in double quotes
+ * @param {any} attribute
+ */
+function escape_attribute(attribute) {
+	return String(attribute).replace(regex_attribute_characters_to_escape, (match) => escaped[match]);
+}
+
+/**
+ * @param {Record<string, string>} attributes
+ */
+export function stringify_spread(attributes) {
+	let str = ' ';
+	for (const key in attributes) {
+		if (attributes[key] != null) {
+			str += `${key}="${escape_attribute(attributes[key])}" `;
+		}
+	}
+
+	return str;
+}
+
 /**
  * @param {HTMLElement} element
  * @returns {{}}
diff --git a/packages/svelte/test/runtime/samples/spread-from-import/_config.js b/packages/svelte/test/runtime/samples/spread-from-import/_config.js
new file mode 100644
index 000000000000..5b2e5e3fdb2d
--- /dev/null
+++ b/packages/svelte/test/runtime/samples/spread-from-import/_config.js
@@ -0,0 +1,11 @@
+export default {
+	html: `
+	<div>
+		<p class="tooltip">static stuff</p>
+	</div>
+	<div>
+		<p class="tooltip">dynamic stuff</p>
+	</div>
+	<button>unused</button>
+	`
+};
diff --git a/packages/svelte/test/runtime/samples/spread-from-import/main.svelte b/packages/svelte/test/runtime/samples/spread-from-import/main.svelte
new file mode 100644
index 000000000000..5cec0ebb0882
--- /dev/null
+++ b/packages/svelte/test/runtime/samples/spread-from-import/main.svelte
@@ -0,0 +1,14 @@
+<script>
+	import { spread } from './spread.js';
+	let dynamic = 'dynamic';
+</script>
+
+<div>
+	<p {...spread()}>static stuff</p>
+</div>
+
+<div>
+	<p {...spread()}>{dynamic} stuff</p>
+</div>
+
+<button on:click={() => dynamic = ''}>unused</button>
diff --git a/packages/svelte/test/runtime/samples/spread-from-import/spread.js b/packages/svelte/test/runtime/samples/spread-from-import/spread.js
new file mode 100644
index 000000000000..8ecf7628f34a
--- /dev/null
+++ b/packages/svelte/test/runtime/samples/spread-from-import/spread.js
@@ -0,0 +1,6 @@
+export function spread() {
+	return {
+		class: 'tooltip',
+		id: null
+	};
+}