From 9295c5cc6ac8773538bdd6b2db8f0afc14dc1671 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <lhtan93@gmail.com>
Date: Sun, 1 Mar 2020 14:00:13 +0800
Subject: [PATCH] cleanup if remount

---
 src/compiler/compile/render_dom/Block.ts      |  8 +++-
 src/runtime/internal/keyed_each.ts            |  2 +-
 .../event-handler-each-modifier/_config.js    | 42 +++++++++++++++++++
 .../event-handler-each-modifier/main.svelte   | 37 ++++++++++++++++
 4 files changed, 86 insertions(+), 3 deletions(-)
 create mode 100644 test/runtime/samples/event-handler-each-modifier/_config.js
 create mode 100644 test/runtime/samples/event-handler-each-modifier/main.svelte

diff --git a/src/compiler/compile/render_dom/Block.ts b/src/compiler/compile/render_dom/Block.ts
index 62bdc5bdd9..20c6a79acf 100644
--- a/src/compiler/compile/render_dom/Block.ts
+++ b/src/compiler/compile/render_dom/Block.ts
@@ -293,7 +293,7 @@ export default class Block {
 		if (this.chunks.mount.length === 0) {
 			properties.mount = noop;
 		} else {
-			properties.mount = x`function #mount(#target, anchor) {
+			properties.mount = x`function #mount(#target, anchor, #remount) {
 				${this.chunks.mount}
 			}`;
 		}
@@ -454,7 +454,10 @@ export default class Block {
 
 			if (this.event_listeners.length === 1) {
 				this.chunks.mount.push(
-					b`${dispose} = ${this.event_listeners[0]};`
+					b`
+						if (#remount) ${dispose}();
+						${dispose} = ${this.event_listeners[0]};
+					`
 				);
 
 				this.chunks.destroy.push(
@@ -462,6 +465,7 @@ export default class Block {
 				);
 			} else {
 				this.chunks.mount.push(b`
+					if (#remount) @run_all(${dispose});
 					${dispose} = [
 						${this.event_listeners}
 					];
diff --git a/src/runtime/internal/keyed_each.ts b/src/runtime/internal/keyed_each.ts
index b397335c87..6b56010d46 100644
--- a/src/runtime/internal/keyed_each.ts
+++ b/src/runtime/internal/keyed_each.ts
@@ -56,7 +56,7 @@ export function update_keyed_each(old_blocks, dirty, get_key, dynamic, ctx, list
 
 	function insert(block) {
 		transition_in(block, 1);
-		block.m(node, next);
+		block.m(node, next, lookup.has(block.key));
 		lookup.set(block.key, block);
 		next = block.first;
 		n--;
diff --git a/test/runtime/samples/event-handler-each-modifier/_config.js b/test/runtime/samples/event-handler-each-modifier/_config.js
new file mode 100644
index 0000000000..702addd3c3
--- /dev/null
+++ b/test/runtime/samples/event-handler-each-modifier/_config.js
@@ -0,0 +1,42 @@
+export default {
+	async test({ assert, component, target, window }) {
+		// set first
+		await component.lists.update(() => [
+			{ text: "item1" },
+			{ text: "item2" },
+			{ text: "item3" }
+		]);
+
+		await component.lists.update(() => [
+			{ text: "item3" },
+			{ text: "item2" },
+			{ text: "item1" }
+		]);
+
+		await component.lists.update(() => [
+			{ text: "item1" },
+			{ text: "item2" },
+			{ text: "item3" }
+		]);
+
+		assert.equal(component.updated, 4);
+
+		const [item1, item2] = target.childNodes;
+		const [item1Btn1, item1Btn2] = item1.querySelectorAll('button');
+		const [item2Btn1, item2Btn2] = item2.querySelectorAll('button');
+
+		const clickEvent = new window.MouseEvent('click');
+		
+		await item1Btn1.dispatchEvent(clickEvent);
+		assert.equal(component.getNormalCount(), 1);
+		
+		await item1Btn2.dispatchEvent(clickEvent);
+		assert.equal(component.getModifierCount(), 1);
+
+		await item2Btn1.dispatchEvent(clickEvent);
+		assert.equal(component.getNormalCount(), 2);
+		
+		await item2Btn2.dispatchEvent(clickEvent);
+		assert.equal(component.getModifierCount(), 2);
+	}
+};
diff --git a/test/runtime/samples/event-handler-each-modifier/main.svelte b/test/runtime/samples/event-handler-each-modifier/main.svelte
new file mode 100644
index 0000000000..ca7447f728
--- /dev/null
+++ b/test/runtime/samples/event-handler-each-modifier/main.svelte
@@ -0,0 +1,37 @@
+<script>
+	import {afterUpdate} from 'svelte'
+	import {writable} from 'svelte/store'
+	
+	const normal = writable(0);
+	const modifier = writable(0);
+	export let updated = 0;
+	export const lists = writable([]);
+	
+	const click = (e, type) => {
+		if(type === 'normal'){
+			$normal ++;
+		}else{
+			$modifier ++;
+		}
+	}
+	afterUpdate(() => updated++);
+
+	export function getNormalCount() {
+		return $normal;
+	}
+	export function getModifierCount() {
+		return $modifier;
+	}
+</script>
+
+{#each $lists as item (item.text)}
+	<div>
+		{item.text}
+		<button on:click={(e)=>click(e,'normal')}>
+			Normal
+		</button>
+		<button on:click|preventDefault={(e)=> click(e,'modifier')}>
+			Modifier
+		</button>
+	</div>
+{/each}