From dbf0f6a2f3c52870aed961cdbaf2e56671801628 Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Mon, 25 Mar 2019 08:13:15 -0400
Subject: [PATCH] play transitions in slots - fixes #2303

---
 src/compile/render-dom/wrappers/Slot.ts       | 12 +++++++++
 .../samples/transition-js-slot/Nested.svelte  |  9 +++++++
 .../samples/transition-js-slot/_config.js     | 26 +++++++++++++++++++
 .../samples/transition-js-slot/main.svelte    | 18 +++++++++++++
 4 files changed, 65 insertions(+)
 create mode 100644 test/runtime/samples/transition-js-slot/Nested.svelte
 create mode 100644 test/runtime/samples/transition-js-slot/_config.js
 create mode 100644 test/runtime/samples/transition-js-slot/main.svelte

diff --git a/src/compile/render-dom/wrappers/Slot.ts b/src/compile/render-dom/wrappers/Slot.ts
index e21baaa717..3760e73ce0 100644
--- a/src/compile/render-dom/wrappers/Slot.ts
+++ b/src/compile/render-dom/wrappers/Slot.ts
@@ -42,6 +42,10 @@ export default class SlotWrapper extends Wrapper {
 		});
 
 		block.add_dependencies(this.dependencies);
+
+		// we have to do this, just in case
+		block.add_intro();
+		block.add_outro();
 	}
 
 	render(
@@ -137,6 +141,14 @@ export default class SlotWrapper extends Wrapper {
 			}
 		`);
 
+		block.builders.intro.add_line(
+			`if (${slot} && ${slot}.i) ${slot}.i(#local);`
+		);
+
+		block.builders.outro.add_line(
+			`if (${slot} && ${slot}.o) ${slot}.o(#local);`
+		);
+
 		let update_conditions = [...this.dependencies].map(name => `changed.${name}`).join(' || ');
 		if (this.dependencies.size > 1) update_conditions = `(${update_conditions})`;
 
diff --git a/test/runtime/samples/transition-js-slot/Nested.svelte b/test/runtime/samples/transition-js-slot/Nested.svelte
new file mode 100644
index 0000000000..bc67b3c221
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot/Nested.svelte
@@ -0,0 +1,9 @@
+<script>
+	export let visible;
+</script>
+
+<div>
+	{#if visible}
+		<slot/>
+	{/if}
+</div>
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-slot/_config.js b/test/runtime/samples/transition-js-slot/_config.js
new file mode 100644
index 0000000000..a32e4bda72
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot/_config.js
@@ -0,0 +1,26 @@
+export default {
+	props: {
+		visible: false
+	},
+
+	html: `
+		<div></div>
+	`,
+
+	test({ assert, component, target, window, raf }) {
+		component.visible = true;
+		const p = target.querySelector('p');
+		assert.equal(p.foo, 0);
+
+		raf.tick(50);
+		assert.equal(p.foo, 0.5);
+
+		component.visible = false;
+
+		raf.tick(75);
+		assert.equal(p.foo, 0.25);
+
+		raf.tick(100);
+		assert.equal(p.foo, 0);
+	}
+};
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-slot/main.svelte b/test/runtime/samples/transition-js-slot/main.svelte
new file mode 100644
index 0000000000..afbcd68167
--- /dev/null
+++ b/test/runtime/samples/transition-js-slot/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	import Nested from './Nested.svelte';
+
+	export let visible;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+<Nested {visible}>
+	<p transition:foo>slotted</p>
+</Nested>
\ No newline at end of file