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.

Author: ngtr6788

.changeset/cyan-geese-film.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: remove `let:variable` slot bindings from select binding dependencies

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);
+							}
 						});
 					});
 				}

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} />
+

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);
+	}
+};

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>

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} />
+

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);
+	}
+};

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>