Merge pull request sveltejs#2309 from sveltejs/sveltejsgh-2303

play transitions in slots

Author: Rich-Harris

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

test/runtime/samples/transition-js-slot/Nested.svelte

@@ -0,0 +1,9 @@
+<script>
+	export let visible;
+</script>
+
+<div>
+	{#if visible}
+		<slot/>
+	{/if}
+</div>

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

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>