From 4aff59b08034e1ce10944a7d8946fdd652d89218 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Wed, 13 Apr 2022 23:34:40 +0800
Subject: [PATCH] [fix] correctly track dependencies of let: bindings (#7448)

Fixes #7440
---
 CHANGELOG.md                                  |  1 +
 .../compile/nodes/shared/Expression.ts        |  2 +-
 .../component-slot-let-in-slot-2/Inner.svelte |  1 +
 .../component-slot-let-in-slot-2/Outer.svelte |  5 ++++
 .../component-slot-let-in-slot-2/_config.js   | 25 +++++++++++++++++++
 .../component-slot-let-in-slot-2/main.svelte  | 11 ++++++++
 6 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 test/runtime/samples/component-slot-let-in-slot-2/Inner.svelte
 create mode 100644 test/runtime/samples/component-slot-let-in-slot-2/Outer.svelte
 create mode 100644 test/runtime/samples/component-slot-let-in-slot-2/_config.js
 create mode 100644 test/runtime/samples/component-slot-let-in-slot-2/main.svelte

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0b2bb5d7fb..904c927a86 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
 * Fix `{@const}` tag not working inside Component when there's no `let:` [#7189](https://github.com/sveltejs/svelte/issues/7189)
 * Ignore comments in `{#each}` blocks when containing elements with `animate:` ([#3999](https://github.com/sveltejs/svelte/issues/3999))
 * Add a third parameter to the returned function of `createEventDispatcher` that allows passing an object of `{ cancelable: true }` to create a cancelable custom event. The returned function when called will also return a boolean depending on whether the event is cancelled ([#7064](https://github.com/sveltejs/svelte/pull/7064))
+* Fix value of `let:` bindings not updating in certain cases ([#7440](https://github.com/sveltejs/svelte/issues/7440)) 
 
 ## 3.47.0
 
diff --git a/src/compiler/compile/nodes/shared/Expression.ts b/src/compiler/compile/nodes/shared/Expression.ts
index 751b739564..a773355e31 100644
--- a/src/compiler/compile/nodes/shared/Expression.ts
+++ b/src/compiler/compile/nodes/shared/Expression.ts
@@ -90,7 +90,7 @@ export default class Expression {
 					}
 
 					if (template_scope.is_let(name)) {
-						if (!function_expression) { // TODO should this be `!lazy` ?
+						if (!lazy) {
 							contextual_dependencies.add(name);
 							dependencies.add(name);
 						}
diff --git a/test/runtime/samples/component-slot-let-in-slot-2/Inner.svelte b/test/runtime/samples/component-slot-let-in-slot-2/Inner.svelte
new file mode 100644
index 0000000000..d0ea817d54
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-in-slot-2/Inner.svelte
@@ -0,0 +1 @@
+<slot/>
diff --git a/test/runtime/samples/component-slot-let-in-slot-2/Outer.svelte b/test/runtime/samples/component-slot-let-in-slot-2/Outer.svelte
new file mode 100644
index 0000000000..590a70564a
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-in-slot-2/Outer.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let prop
+</script>
+
+<slot value={prop} />
diff --git a/test/runtime/samples/component-slot-let-in-slot-2/_config.js b/test/runtime/samples/component-slot-let-in-slot-2/_config.js
new file mode 100644
index 0000000000..96c43497db
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-in-slot-2/_config.js
@@ -0,0 +1,25 @@
+let logs;
+function log(value) {
+	logs.push(value);
+}
+
+export default {
+	props: {
+		prop: 'a',
+		log
+	},
+	html: '<button></button>',
+	before_test() {
+		logs = [];
+	},
+	async test({ assert, component, target, window }) {
+		const button = target.querySelector('button');
+		await button.dispatchEvent(new window.MouseEvent('click'));
+
+		assert.deepEqual(logs, ['a']);
+
+		component.prop = 'b';
+		await button.dispatchEvent(new window.MouseEvent('click'));
+		assert.deepEqual(logs, ['a', 'b']);
+	}
+};
diff --git a/test/runtime/samples/component-slot-let-in-slot-2/main.svelte b/test/runtime/samples/component-slot-let-in-slot-2/main.svelte
new file mode 100644
index 0000000000..214b0895ae
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-in-slot-2/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Outer from './Outer.svelte'
+	import Inner from './Inner.svelte'
+
+	export let prop
+	export let log;
+</script>
+
+<Outer {prop} let:value>
+	<Inner><button on:click={() => { log(value); }} /></Inner>
+</Outer>