From a8f8158c72e3cf34df470e3760d65cace6ddcd09 Mon Sep 17 00:00:00 2001
From: teobgeno <teobgeno@gmail.com>
Date: Sun, 20 Aug 2023 21:33:35 +0300
Subject: [PATCH 1/2] fix: spreading attributes on option value attribute get's
 replaced by option's inner text

---
 .changeset/tricky-planets-rush.md             |  5 +++
 .../src/compiler/compile/nodes/Element.js     | 32 +++++++++++++++++--
 .../_config.js                                |  7 ++++
 .../main.svelte                               |  3 ++
 4 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/tricky-planets-rush.md
 create mode 100644 packages/svelte/test/runtime/samples/select-options-spread-attributes/_config.js
 create mode 100644 packages/svelte/test/runtime/samples/select-options-spread-attributes/main.svelte

diff --git a/.changeset/tricky-planets-rush.md b/.changeset/tricky-planets-rush.md
new file mode 100644
index 000000000000..ae6894c74dc3
--- /dev/null
+++ b/.changeset/tricky-planets-rush.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: spreading attributes on option value attribute get's replaced by option's inner text
diff --git a/packages/svelte/src/compiler/compile/nodes/Element.js b/packages/svelte/src/compiler/compile/nodes/Element.js
index 654c2c48f08c..c454b3c76859 100644
--- a/packages/svelte/src/compiler/compile/nodes/Element.js
+++ b/packages/svelte/src/compiler/compile/nodes/Element.js
@@ -1,5 +1,6 @@
 import { is_html, is_svg, is_void } from '../../../shared/utils/names.js';
 import Node from './shared/Node.js';
+import { walk } from 'estree-walker';
 import Attribute from './Attribute.js';
 import Binding from './Binding.js';
 import EventHandler from './EventHandler.js';
@@ -430,7 +431,7 @@ export default class Element extends Node {
 			}
 			if (this.name === 'textarea') {
 				if (info.children.length > 0) {
-					const value_attribute = info.attributes.find((node) => node.name === 'value');
+					const value_attribute = get_value_attribute(info.attributes);
 					if (value_attribute) {
 						component.error(value_attribute, compiler_errors.textarea_duplicate_value);
 						return;
@@ -449,7 +450,7 @@ export default class Element extends Node {
 				// Special case — treat these the same way:
 				//   <option>{foo}</option>
 				//   <option value={foo}>{foo}</option>
-				const value_attribute = info.attributes.find((attribute) => attribute.name === 'value');
+				const value_attribute = get_value_attribute(info.attributes);
 				if (!value_attribute) {
 					info.attributes.push({
 						type: 'Attribute',
@@ -1420,3 +1421,30 @@ function within_custom_element(parent) {
 	}
 	return false;
 }
+
+/**
+ * @param {any[]} attributes
+ */
+function get_value_attribute(attributes) {
+	let node_value;
+	attributes.forEach((node) => {
+		if (node.type !== 'Spread' && node.name.toLowerCase() === 'value') {
+			node_value = node;
+		}
+		if (node.type === 'Spread') {
+			walk(/** @type {any} */ (node.expression), {
+				enter(/** @type {import('estree').Node} */ node) {
+					if (node_value) {
+						this.skip();
+					}
+					if (node.type === 'Identifier') {
+						if (/** @type {import('estree').Identifier} */ (node).name.toLowerCase() === 'value') {
+							node_value = node;
+						}
+					}
+				}
+			});
+		}
+	});
+	return node_value;
+}
diff --git a/packages/svelte/test/runtime/samples/select-options-spread-attributes/_config.js b/packages/svelte/test/runtime/samples/select-options-spread-attributes/_config.js
new file mode 100644
index 000000000000..be4faba61202
--- /dev/null
+++ b/packages/svelte/test/runtime/samples/select-options-spread-attributes/_config.js
@@ -0,0 +1,7 @@
+export default {
+	html: `
+		<select>
+			<option value="value" class="option">Label</option>
+		</select>
+	`
+};
diff --git a/packages/svelte/test/runtime/samples/select-options-spread-attributes/main.svelte b/packages/svelte/test/runtime/samples/select-options-spread-attributes/main.svelte
new file mode 100644
index 000000000000..cabaf2ea0a7f
--- /dev/null
+++ b/packages/svelte/test/runtime/samples/select-options-spread-attributes/main.svelte
@@ -0,0 +1,3 @@
+<select>
+	<option {...{ value: 'value', class: 'option' }}>Label</option>
+</select>

From e933dd17b338561a3cff5da34cac372c38432931 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Wed, 20 Sep 2023 09:57:44 +0200
Subject: [PATCH 2/2] Update .changeset/tricky-planets-rush.md

---
 .changeset/tricky-planets-rush.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/tricky-planets-rush.md b/.changeset/tricky-planets-rush.md
index ae6894c74dc3..aa93098b9f55 100644
--- a/.changeset/tricky-planets-rush.md
+++ b/.changeset/tricky-planets-rush.md
@@ -2,4 +2,4 @@
 'svelte': patch
 ---
 
-fix: spreading attributes on option value attribute get's replaced by option's inner text
+fix: recognize option value on spread attribute