[fix] add key dependencies into block dependencies (#7422)

* add key dependencies into block dependencies

* fix lint

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

test/runtime/samples/key-block-component-slot/Component1.svelte

@@ -0,0 +1 @@
+<slot/>

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>

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

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>