From 89fda7edae3f66ef33c2dbb82a3ad4a4bd616374 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Fri, 8 Apr 2022 22:24:15 +0800
Subject: [PATCH] [fix] add key dependencies into block dependencies (#7422)

* add key dependencies into block dependencies

* fix lint
---
 .../compile/render_dom/wrappers/KeyBlock.ts    |  1 +
 .../key-block-component-slot/Component1.svelte |  1 +
 .../key-block-component-slot/Component2.svelte | 12 ++++++++++++
 .../key-block-component-slot/_config.js        | 18 ++++++++++++++++++
 .../key-block-component-slot/main.svelte       | 17 +++++++++++++++++
 5 files changed, 49 insertions(+)
 create mode 100644 test/runtime/samples/key-block-component-slot/Component1.svelte
 create mode 100644 test/runtime/samples/key-block-component-slot/Component2.svelte
 create mode 100644 test/runtime/samples/key-block-component-slot/_config.js
 create mode 100644 test/runtime/samples/key-block-component-slot/main.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/KeyBlock.ts b/src/compiler/compile/render_dom/wrappers/KeyBlock.ts
index cbd021ff6c..55402b9ff0 100644
--- a/src/compiler/compile/render_dom/wrappers/KeyBlock.ts
+++ b/src/compiler/compile/render_dom/wrappers/KeyBlock.ts
@@ -36,6 +36,7 @@ export default class KeyBlockWrapper extends Wrapper {
 				name: renderer.component.get_unique_name('create_key_block'),
 				type: 'key'
 			});
+			block.add_dependencies(node.expression.dependencies);
 			renderer.blocks.push(block);
 		}
 
diff --git a/test/runtime/samples/key-block-component-slot/Component1.svelte b/test/runtime/samples/key-block-component-slot/Component1.svelte
new file mode 100644
index 0000000000..d0ea817d54
--- /dev/null
+++ b/test/runtime/samples/key-block-component-slot/Component1.svelte
@@ -0,0 +1 @@
+<slot/>
diff --git a/test/runtime/samples/key-block-component-slot/Component2.svelte b/test/runtime/samples/key-block-component-slot/Component2.svelte
new file mode 100644
index 0000000000..ca04744936
--- /dev/null
+++ b/test/runtime/samples/key-block-component-slot/Component2.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { onMount } from "svelte";
+
+	export let logs;
+
+	onMount(() => {
+		logs.push("mount");
+		return () => {
+			logs.push("unmount");
+		};
+	});
+</script>
diff --git a/test/runtime/samples/key-block-component-slot/_config.js b/test/runtime/samples/key-block-component-slot/_config.js
new file mode 100644
index 0000000000..8fbbeaec64
--- /dev/null
+++ b/test/runtime/samples/key-block-component-slot/_config.js
@@ -0,0 +1,18 @@
+const logs = [];
+
+export default {
+	html: '<button>Reset!</button>',
+	props: {
+		logs
+	},
+	async test({ assert, component, target, raf }) {
+		assert.deepEqual(logs, ['mount']);
+
+		const button = target.querySelector('button');
+
+		const click = new window.MouseEvent('click');
+		await button.dispatchEvent(click);
+
+		assert.deepEqual(logs, ['mount', 'unmount', 'mount']);
+	}
+};
diff --git a/test/runtime/samples/key-block-component-slot/main.svelte b/test/runtime/samples/key-block-component-slot/main.svelte
new file mode 100644
index 0000000000..77fde32d9c
--- /dev/null
+++ b/test/runtime/samples/key-block-component-slot/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import Component1 from './Component1.svelte'
+	import Component2 from './Component2.svelte'
+
+	let reset = false
+	export let logs;
+</script>
+
+<Component1>
+	{#key reset}
+		<Component2 {logs} />
+	{/key}
+</Component1>
+
+<button on:click={() => reset = !reset}>
+	Reset!
+</button>
\ No newline at end of file