From 2785fa6cb50a0238c16949f3363cd9c947c64da5 Mon Sep 17 00:00:00 2001
From: Slava Z <slava.zubko@logmein.com>
Date: Fri, 31 May 2019 00:37:41 +0300
Subject: [PATCH] Fix for #2655 - adding introstart...outroend events to in-out
 transition

---
 src/runtime/internal/transitions.ts           |  9 +++
 .../transition-js-events-in-out/_config.js    | 71 +++++++++++++++++++
 .../transition-js-events-in-out/main.svelte   | 59 +++++++++++++++
 3 files changed, 139 insertions(+)
 create mode 100644 test/runtime/samples/transition-js-events-in-out/_config.js
 create mode 100644 test/runtime/samples/transition-js-events-in-out/main.svelte

diff --git a/src/runtime/internal/transitions.ts b/src/runtime/internal/transitions.ts
index f3e8414e5d..4c6191964c 100644
--- a/src/runtime/internal/transitions.ts
+++ b/src/runtime/internal/transitions.ts
@@ -71,10 +71,15 @@ export function create_in_transition(node: Element & ElementCSSInlineStyle, fn:
 		if (task) task.abort();
 		running = true;
 
+    add_render_callback(() => dispatch(node, true, 'start'));
+
 		task = loop(now => {
 			if (running) {
 				if (now >= end_time) {
 					tick(1, 0);
+
+          dispatch(node, true, 'end');
+
 					cleanup();
 					return running = false;
 				}
@@ -141,11 +146,15 @@ export function create_out_transition(node: Element & ElementCSSInlineStyle, fn:
 		const start_time = now() + delay;
 		const end_time = start_time + duration;
 
+    add_render_callback(() => dispatch(node, false, 'start'));
+
 		loop(now => {
 			if (running) {
 				if (now >= end_time) {
 					tick(0, 1);
 
+          dispatch(node, false, 'end');
+
 					if (!--group.remaining) {
 						// this will result in `end()` being called,
 						// so we don't need to clean up here
diff --git a/test/runtime/samples/transition-js-events-in-out/_config.js b/test/runtime/samples/transition-js-events-in-out/_config.js
new file mode 100644
index 0000000000..854e7e2f4b
--- /dev/null
+++ b/test/runtime/samples/transition-js-events-in-out/_config.js
@@ -0,0 +1,71 @@
+export default {
+	props: {
+		visible: false,
+		things: ['a', 'b', 'c', 'd']
+	},
+
+	// intro: true,
+
+	html: `
+		<p>waiting...</p>
+	`,
+
+	async test({ assert, component, target, raf }) {
+		component.visible = true;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>introstart</p>
+			<p>a</p>
+			<p>b</p>
+			<p>c</p>
+			<p>d</p>
+		`);
+
+		await raf.tick(50);
+
+		assert.deepEqual(component.intros.sort(), ['a', 'b', 'c', 'd']);
+		assert.equal(component.intro_count, 4);
+
+		await raf.tick(100);
+		assert.equal(component.intro_count, 0);
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>introend</p>
+			<p>a</p>
+			<p>b</p>
+			<p>c</p>
+			<p>d</p>
+		`);
+
+		component.visible = false;
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>outrostart</p>
+			<p>a</p>
+			<p>b</p>
+			<p>c</p>
+			<p>d</p>
+		`);
+
+		await raf.tick(150);
+		assert.deepEqual(component.outros.sort(), ['a', 'b', 'c', 'd']);
+		assert.equal(component.outro_count, 4);
+
+		await raf.tick(200);
+		assert.equal(component.outro_count, 0);
+
+		component.visible = true;
+
+		await raf.tick(250);
+		assert.deepEqual(component.intros.sort(), ['a', 'a', 'b', 'b', 'c', 'c', 'd', 'd']);
+		assert.equal(component.intro_count, 4);
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>introstart</p>
+			<p>a</p>
+			<p>b</p>
+			<p>c</p>
+			<p>d</p>
+		`);
+	}
+};
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-events-in-out/main.svelte b/test/runtime/samples/transition-js-events-in-out/main.svelte
new file mode 100644
index 0000000000..33129f529b
--- /dev/null
+++ b/test/runtime/samples/transition-js-events-in-out/main.svelte
@@ -0,0 +1,59 @@
+<script>
+	import { onMount } from 'svelte';
+
+	export let things;
+	export let visible;
+
+	export let intros = [];
+	export let outros = [];
+	export let intro_count = 0;
+	export let outro_count = 0;
+
+	let status = 'waiting...';
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+
+	function introstart(e) {
+		intros.push(e.target.textContent);
+		intro_count += 1;
+		status = 'introstart';
+	}
+
+	function introend(e) {
+		intro_count -= 1;
+		status = 'introend';
+	}
+
+	function outrostart(e) {
+		outros.push(e.target.textContent);
+		outro_count += 1;
+		status = 'outrostart';
+	}
+
+	function outroend(e) {
+		outro_count -= 1;
+		status = 'outroend';
+	}
+</script>
+
+<p>{status}</p>
+
+{#each things as thing}
+	{#if visible}
+		<p
+			in:foo
+			out:foo
+			on:introstart={introstart}
+			on:introend={introend}
+			on:outrostart={outrostart}
+			on:outroend={outroend}
+		>{thing}</p>
+	{/if}
+{/each}
\ No newline at end of file