From a8d4bfd324fe74a7d5fdf1b6f3d8a23aeba1e06f Mon Sep 17 00:00:00 2001
From: Bob Fanger <bfanger@gmail.com>
Date: Fri, 18 Feb 2022 20:16:03 +0100
Subject: [PATCH 1/2] fix: Local transitions from #key blocks

When adding `|local` to a transition inside a {#key} block, only the outro was triggered not the intro.

This PR fixes #5950
---
 src/compiler/compile/render_dom/wrappers/KeyBlock.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/compiler/compile/render_dom/wrappers/KeyBlock.ts b/src/compiler/compile/render_dom/wrappers/KeyBlock.ts
index 55402b9ff04..6a67f73c629 100644
--- a/src/compiler/compile/render_dom/wrappers/KeyBlock.ts
+++ b/src/compiler/compile/render_dom/wrappers/KeyBlock.ts
@@ -1,7 +1,6 @@
 import Wrapper from './shared/Wrapper';
 import Renderer from '../Renderer';
 import Block from '../Block';
-import EachBlock from '../../nodes/EachBlock';
 import KeyBlock from '../../nodes/KeyBlock';
 import create_debugging_comment from './shared/create_debugging_comment';
 import FragmentWrapper from './Fragment';
@@ -19,7 +18,7 @@ export default class KeyBlockWrapper extends Wrapper {
 		renderer: Renderer,
 		block: Block,
 		parent: Wrapper,
-		node: EachBlock,
+		node: KeyBlock,
 		strip_whitespace: boolean,
 		next_sibling: Wrapper
 	) {
@@ -107,7 +106,7 @@ export default class KeyBlockWrapper extends Wrapper {
 			}
 			${this.var} = ${this.block.name}(#ctx);
 			${this.var}.c();
-			${has_transitions && b`@transition_in(${this.var})`}
+			${has_transitions && b`@transition_in(${this.var}, 1)`}
 			${this.var}.m(${this.get_update_mount_node(anchor)}, ${anchor});
 		`;
 

From 6544d8034b73bc8baefc5e69ea665fed8ed1415f Mon Sep 17 00:00:00 2001
From: tanhauhau <lhtan93@gmail.com>
Date: Fri, 8 Apr 2022 22:33:23 +0800
Subject: [PATCH 2/2] add test case

---
 .../key-block-transition-local/_config.js     | 37 +++++++++++++++++++
 .../key-block-transition-local/main.svelte    | 19 ++++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 test/runtime/samples/key-block-transition-local/_config.js
 create mode 100644 test/runtime/samples/key-block-transition-local/main.svelte

diff --git a/test/runtime/samples/key-block-transition-local/_config.js b/test/runtime/samples/key-block-transition-local/_config.js
new file mode 100644
index 00000000000..50400e72b6c
--- /dev/null
+++ b/test/runtime/samples/key-block-transition-local/_config.js
@@ -0,0 +1,37 @@
+export default {
+	props: {
+		x: false,
+		y: 1
+	},
+
+	test({ assert, component, target, raf }) {
+		component.x = true;
+
+		let div = target.querySelector('div');
+		assert.equal(div.foo, undefined);
+
+		// play both in and out transition when changed with `{#key}`
+		component.y = 2;
+		assert.htmlEqual(target.innerHTML, '<div></div><div></div>');
+		const [leaving, incoming] = target.querySelectorAll('div');
+
+		raf.tick(50);
+		assert.equal(leaving.foo, 0.5);
+		assert.equal(incoming.foo, 0.5);
+
+		raf.tick(100);
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.equal(leaving.foo, 0);
+		assert.equal(incoming.foo, 1);
+
+		// do not play out transition when removed by `{#if}`
+		component.x = false;
+		assert.htmlEqual(target.innerHTML, '');
+
+		// do not play in transition when added back with `{#if}`
+		component.x = true;
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		div = target.querySelector('div');
+		assert.equal(div.foo, undefined);
+	}
+};
diff --git a/test/runtime/samples/key-block-transition-local/main.svelte b/test/runtime/samples/key-block-transition-local/main.svelte
new file mode 100644
index 00000000000..05ed75b7e14
--- /dev/null
+++ b/test/runtime/samples/key-block-transition-local/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let x;
+	export let y;
+
+	function foo(node, _params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if x}
+	{#key y}
+		<div transition:foo|local></div>
+	{/key}
+{/if}
\ No newline at end of file