fix updating of slot contents when aborting transition (#6042)

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

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}

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

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>