From f8283fbc775d94d2ea081d06153cc1f9d89eea72 Mon Sep 17 00:00:00 2001
From: Nguyen Tran <88808276+ngtr6788@users.noreply.github.com>
Date: Wed, 19 Jul 2023 07:55:27 -0400
Subject: [PATCH] fix: remove let variable from select binding dependencies
 (#8969)

Fixes #2943

The issue linked above invalidates a variable that is not defined in <script> but instead is defined as a let: variable, which does not make sense to invalidate, therefore, this PR exists.
---
 .changeset/cyan-geese-film.md                 |  5 ++++
 .../render_dom/wrappers/Element/Attribute.js  |  4 ++-
 .../binding-select-from-let-2/Parent.svelte   |  6 +++++
 .../binding-select-from-let-2/_config.js      | 25 +++++++++++++++++++
 .../binding-select-from-let-2/main.svelte     | 19 ++++++++++++++
 .../binding-select-from-let/Parent.svelte     |  6 +++++
 .../binding-select-from-let/_config.js        | 21 ++++++++++++++++
 .../binding-select-from-let/main.svelte       | 12 +++++++++
 8 files changed, 97 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/cyan-geese-film.md
 create mode 100644 packages/svelte/test/runtime/samples/binding-select-from-let-2/Parent.svelte
 create mode 100644 packages/svelte/test/runtime/samples/binding-select-from-let-2/_config.js
 create mode 100644 packages/svelte/test/runtime/samples/binding-select-from-let-2/main.svelte
 create mode 100644 packages/svelte/test/runtime/samples/binding-select-from-let/Parent.svelte
 create mode 100644 packages/svelte/test/runtime/samples/binding-select-from-let/_config.js
 create mode 100644 packages/svelte/test/runtime/samples/binding-select-from-let/main.svelte

diff --git a/.changeset/cyan-geese-film.md b/.changeset/cyan-geese-film.md
new file mode 100644
index 0000000000..19b82cb165
--- /dev/null
+++ b/.changeset/cyan-geese-film.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: remove `let:variable` slot bindings from select binding dependencies
diff --git a/packages/svelte/src/compiler/compile/render_dom/wrappers/Element/Attribute.js b/packages/svelte/src/compiler/compile/render_dom/wrappers/Element/Attribute.js
index 0459b55b03..8d0199f0cf 100644
--- a/packages/svelte/src/compiler/compile/render_dom/wrappers/Element/Attribute.js
+++ b/packages/svelte/src/compiler/compile/render_dom/wrappers/Element/Attribute.js
@@ -91,7 +91,9 @@ export default class AttributeWrapper extends BaseAttributeWrapper {
 				if (select && select.select_binding_dependencies) {
 					select.select_binding_dependencies.forEach((prop) => {
 						this.node.dependencies.forEach((dependency) => {
-							this.parent.renderer.component.indirect_dependencies.get(prop).add(dependency);
+							if (this.node.scope.is_top_level(dependency)) {
+								this.parent.renderer.component.indirect_dependencies.get(prop).add(dependency);
+							}
 						});
 					});
 				}
diff --git a/packages/svelte/test/runtime/samples/binding-select-from-let-2/Parent.svelte b/packages/svelte/test/runtime/samples/binding-select-from-let-2/Parent.svelte
new file mode 100644
index 0000000000..565c3bc6b7
--- /dev/null
+++ b/packages/svelte/test/runtime/samples/binding-select-from-let-2/Parent.svelte
@@ -0,0 +1,6 @@
+<script>
+	const tasks = ["do laundry", "do taxes", "cook food", "watch the kids"];
+</script>
+
+<slot {tasks} />
+
diff --git a/packages/svelte/test/runtime/samples/binding-select-from-let-2/_config.js b/packages/svelte/test/runtime/samples/binding-select-from-let-2/_config.js
new file mode 100644
index 0000000000..125455819a
--- /dev/null
+++ b/packages/svelte/test/runtime/samples/binding-select-from-let-2/_config.js
@@ -0,0 +1,25 @@
+export default {
+	html: `
+		<select>
+			<option value='do laundry'>do laundry</option>
+			<option value='do taxes'>do taxes</option>
+			<option value='cook food'>cook food</option>
+			<option value='watch the kids'>watch the kids</option>
+		</select>
+		<p>1</p>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const select = target.querySelector('select');
+		const options = target.querySelectorAll('option');
+
+		assert.equal(component.tasks_touched, 1);
+
+		const change = new window.Event('change');
+		options[1].selected = true;
+		await select.dispatchEvent(change);
+
+		assert.equal(component.selected, options[1].value);
+		assert.equal(component.tasks_touched, 1);
+	}
+};
diff --git a/packages/svelte/test/runtime/samples/binding-select-from-let-2/main.svelte b/packages/svelte/test/runtime/samples/binding-select-from-let-2/main.svelte
new file mode 100644
index 0000000000..3c21eba829
--- /dev/null
+++ b/packages/svelte/test/runtime/samples/binding-select-from-let-2/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	import Parent from "./Parent.svelte";
+	export let selected;
+	export let tasks = ['do nothing'];
+	export let tasks_touched = 0;
+
+	$: {
+		tasks, tasks_touched++;
+	}
+</script>
+
+<Parent let:tasks={tasks}>
+	<select bind:value={selected}>
+		{#each tasks as task}
+			<option value={task}>{task}</option>
+		{/each}
+	</select>
+</Parent>
+<p>{tasks_touched}</p>
diff --git a/packages/svelte/test/runtime/samples/binding-select-from-let/Parent.svelte b/packages/svelte/test/runtime/samples/binding-select-from-let/Parent.svelte
new file mode 100644
index 0000000000..565c3bc6b7
--- /dev/null
+++ b/packages/svelte/test/runtime/samples/binding-select-from-let/Parent.svelte
@@ -0,0 +1,6 @@
+<script>
+	const tasks = ["do laundry", "do taxes", "cook food", "watch the kids"];
+</script>
+
+<slot {tasks} />
+
diff --git a/packages/svelte/test/runtime/samples/binding-select-from-let/_config.js b/packages/svelte/test/runtime/samples/binding-select-from-let/_config.js
new file mode 100644
index 0000000000..30f42a2251
--- /dev/null
+++ b/packages/svelte/test/runtime/samples/binding-select-from-let/_config.js
@@ -0,0 +1,21 @@
+export default {
+	html: `
+		<select>
+			<option value='do laundry'>do laundry</option>
+			<option value='do taxes'>do taxes</option>
+			<option value='cook food'>cook food</option>
+			<option value='watch the kids'>watch the kids</option>
+		</select>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const select = target.querySelector('select');
+		const options = target.querySelectorAll('option');
+
+		const change = new window.Event('change');
+		options[1].selected = true;
+		await select.dispatchEvent(change);
+
+		assert.equal(component.selected, options[1].value);
+	}
+};
diff --git a/packages/svelte/test/runtime/samples/binding-select-from-let/main.svelte b/packages/svelte/test/runtime/samples/binding-select-from-let/main.svelte
new file mode 100644
index 0000000000..494653bb4c
--- /dev/null
+++ b/packages/svelte/test/runtime/samples/binding-select-from-let/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Parent from "./Parent.svelte";
+	export let selected;
+</script>
+
+<Parent let:tasks={tasks}>
+	<select bind:value={selected}>
+		{#each tasks as task}
+			<option value={task}>{task}</option>
+		{/each}
+	</select>
+</Parent>