From ebd21ae6d33102b9eabeffd1ad6b36e6deda6508 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Sat, 1 May 2021 00:05:43 +0800
Subject: [PATCH] fix updating of slot contents when aborting transition
 (#6042)

---
 .../compile/render_dom/wrappers/Slot.ts       |  9 ++++++--
 .../transition-js-slot-2/Nested.svelte        | 18 +++++++++++++++
 .../samples/transition-js-slot-2/_config.js   | 23 +++++++++++++++++++
 .../samples/transition-js-slot-2/main.svelte  | 18 +++++++++++++++
 4 files changed, 66 insertions(+), 2 deletions(-)
 create mode 100644 test/runtime/samples/transition-js-slot-2/Nested.svelte
 create mode 100644 test/runtime/samples/transition-js-slot-2/_config.js
 create mode 100644 test/runtime/samples/transition-js-slot-2/main.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/Slot.ts b/src/compiler/compile/render_dom/wrappers/Slot.ts
index ffc625c213..d4629550bc 100644
--- a/src/compiler/compile/render_dom/wrappers/Slot.ts
+++ b/src/compiler/compile/render_dom/wrappers/Slot.ts
@@ -164,12 +164,17 @@ export default class SlotWrapper extends Wrapper {
 			? Array.from(this.fallback.dependencies).filter((name) => this.is_dependency_dynamic(name))
 			: [];
 
+		let condition = renderer.dirty(dynamic_dependencies);
+		if (block.has_outros) {
+			condition = x`!#current || ${condition}`;
+		}
+
 		const slot_update = get_slot_spread_changes_fn ? b`
-			if (${slot}.p && ${renderer.dirty(dynamic_dependencies)}) {
+			if (${slot}.p && ${condition}) {
 				@update_slot_spread(${slot}, ${slot_definition}, #ctx, ${renderer.reference('$$scope')}, #dirty, ${get_slot_changes_fn}, ${get_slot_spread_changes_fn}, ${get_slot_context_fn});
 			}
 		` : b`
-			if (${slot}.p && ${renderer.dirty(dynamic_dependencies)}) {
+			if (${slot}.p && ${condition}) {
 				@update_slot(${slot}, ${slot_definition}, #ctx, ${renderer.reference('$$scope')}, #dirty, ${get_slot_changes_fn}, ${get_slot_context_fn});
 			}
 		`;
diff --git a/test/runtime/samples/transition-js-slot-2/Nested.svelte b/test/runtime/samples/transition-js-slot-2/Nested.svelte
new file mode 100644
index 0000000000..4cd6a9b375
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot-2/Nested.svelte
@@ -0,0 +1,18 @@
+<script>
+	export let visible;
+
+	function fade(node) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if visible}
+	<div transition:fade>
+		<slot></slot>
+	</div>
+{/if}
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-slot-2/_config.js b/test/runtime/samples/transition-js-slot-2/_config.js
new file mode 100644
index 0000000000..67cc0b46d2
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot-2/_config.js
@@ -0,0 +1,23 @@
+export default {
+	html: `
+		<div>Foo</div>
+	`,
+
+	async test({ assert, component, target, window, raf }) {
+		await component.hide();
+		const div = target.querySelector('div');
+
+		raf.tick(50);
+		assert.equal(div.foo, 0.5);
+
+		await component.show();
+
+		assert.htmlEqual(target.innerHTML, '<div>Bar</div>');
+
+		raf.tick(75);
+		assert.equal(div.foo, 0.75);
+
+		raf.tick(100);
+		assert.equal(div.foo, 1);
+	}
+};
diff --git a/test/runtime/samples/transition-js-slot-2/main.svelte b/test/runtime/samples/transition-js-slot-2/main.svelte
new file mode 100644
index 0000000000..2d45b5ca30
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot-2/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	let name = 'Foo';
+	let visible = true;
+
+	export function show() {
+		visible = true;
+	}
+	export function hide() {
+		visible = false;
+		name = 'Bar';
+	}
+</script>
+
+<Nested {visible}>
+	{name}
+</Nested>