From 486a9baea540563da4aca902cc10e20d16e15be7 Mon Sep 17 00:00:00 2001
From: pushkine <pushkine.github@gmail.com>
Date: Mon, 20 Apr 2020 22:59:33 +0200
Subject: [PATCH] cancel outro before update

---
 .../compile/render_dom/wrappers/IfBlock.ts    |  2 +-
 .../Component.svelte                          |  1 +
 .../_config.js                                | 10 ++++++
 .../main.svelte                               | 36 +++++++++++++++++++
 4 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 test/runtime/samples/transition-js-if-else-in-if-outro-cancelled/Component.svelte
 create mode 100644 test/runtime/samples/transition-js-if-else-in-if-outro-cancelled/_config.js
 create mode 100644 test/runtime/samples/transition-js-if-else-in-if-outro-cancelled/main.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/IfBlock.ts b/src/compiler/compile/render_dom/wrappers/IfBlock.ts
index 9b3e56635d..d536744bbf 100644
--- a/src/compiler/compile/render_dom/wrappers/IfBlock.ts
+++ b/src/compiler/compile/render_dom/wrappers/IfBlock.ts
@@ -522,13 +522,13 @@ export default class IfBlockWrapper extends Wrapper {
 
 			const enter = b`
 				if (${name}) {
-					${dynamic && b`${name}.p(#ctx, #dirty);`}
 					${
 						has_transitions &&
 						b`if (${block.renderer.dirty(branch.dependencies)}) {
 							@transition_in(${name}, 1);
 						}`
 					}
+					${dynamic && b`${name}.p(#ctx, #dirty);`}
 				} else {
 					${name} = ${branch.block.name}(#ctx);
 					${name}.c();
diff --git a/test/runtime/samples/transition-js-if-else-in-if-outro-cancelled/Component.svelte b/test/runtime/samples/transition-js-if-else-in-if-outro-cancelled/Component.svelte
new file mode 100644
index 0000000000..8c7e5a667f
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-else-in-if-outro-cancelled/Component.svelte
@@ -0,0 +1 @@
+A
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-if-else-in-if-outro-cancelled/_config.js b/test/runtime/samples/transition-js-if-else-in-if-outro-cancelled/_config.js
new file mode 100644
index 0000000000..78aec696b6
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-else-in-if-outro-cancelled/_config.js
@@ -0,0 +1,10 @@
+export default {
+	async test({ assert, target, window, raf }) {
+		const button = target.querySelector("button");
+		const event = new window.MouseEvent("click");
+		assert.htmlEqual(target.innerHTML, "A");
+		await button.dispatchEvent(event);
+		raf.tick(500);
+		assert.htmlEqual(target.innerHTML, "A");
+	},
+};
diff --git a/test/runtime/samples/transition-js-if-else-in-if-outro-cancelled/main.svelte b/test/runtime/samples/transition-js-if-else-in-if-outro-cancelled/main.svelte
new file mode 100644
index 0000000000..982593dd5c
--- /dev/null
+++ b/test/runtime/samples/transition-js-if-else-in-if-outro-cancelled/main.svelte
@@ -0,0 +1,36 @@
+<script>
+  import Component from "./Component.svelte";
+  function foo(node, params) {
+    return {
+      duration: 100,
+      tick: t => {
+        node.foo = t;
+      }
+    };
+  }
+  let isFirst = true;
+  let animationActive = false;
+
+  const toggle = () => {
+    if (animationActive) {
+      return;
+    }
+
+    animationActive = true;
+    Promise.resolve().then(() => {
+      isFirst = !isFirst;
+      animationActive = false;
+    });
+  };
+</script>
+
+<button on:click={toggle}>TOGGLE</button>
+{#if !animationActive}
+  <div out:foo>
+    {#if isFirst}
+      <Component {isFirst} />
+    {:else}
+      <Component {isFirst} />
+    {/if}
+  </div>
+{/if}