From 1a71e0407905a8f023794fedd752c8e0eec06d2f Mon Sep 17 00:00:00 2001
From: Tan Li Hau <tanhauhau@users.noreply.github.com>
Date: Thu, 25 Jun 2020 20:33:30 +0800
Subject: [PATCH] fix bind:this, skip checking before adding to
 binding_callbacks (#5072)

---
 CHANGELOG.md                                  |  1 +
 .../render_dom/wrappers/shared/bind_this.ts   |  3 +-
 .../_config.js                                | 53 +++++++++++++++++++
 .../main.svelte                               | 17 ++++++
 4 files changed, 72 insertions(+), 2 deletions(-)
 create mode 100644 test/runtime/samples/binding-this-each-block-property-2/_config.js
 create mode 100644 test/runtime/samples/binding-this-each-block-property-2/main.svelte

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9650d9e0d6..8457cd120b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 * Do not display `a11y-missing-content` warning on elements with `contenteditable` bindings ([#5020](https://github.com/sveltejs/svelte/issues/5020))
 * Fix handling of `this` in inline function expressions in the template ([#5033](https://github.com/sveltejs/svelte/issues/5033))
 * Update `<select>` with one-way `value` binding when the available `<option>`s change ([#5051](https://github.com/sveltejs/svelte/issues/5051))
+* Fix contextual `bind:this` inside `{#each}` block ([#5067](https://github.com/sveltejs/svelte/issues/5067))
 
 ## 3.23.2
 
diff --git a/src/compiler/compile/render_dom/wrappers/shared/bind_this.ts b/src/compiler/compile/render_dom/wrappers/shared/bind_this.ts
index 078eb1839d..c3aa04960e 100644
--- a/src/compiler/compile/render_dom/wrappers/shared/bind_this.ts
+++ b/src/compiler/compile/render_dom/wrappers/shared/bind_this.ts
@@ -11,7 +11,7 @@ export default function bind_this(component: Component, block: Block, binding: B
 	block.renderer.add_to_context(fn.name);
 	const callee = block.renderer.reference(fn.name);
 
-	const { contextual_dependencies, mutation, lhs } = binding.handler;
+	const { contextual_dependencies, mutation } = binding.handler;
 	const dependencies = binding.get_dependencies();
 
 	const body = b`
@@ -29,7 +29,6 @@ export default function bind_this(component: Component, block: Block, binding: B
 		}));
 		component.partly_hoisted.push(b`
 			function ${fn}($$value, ${params}) {
-				if (${lhs} === $$value) return;
 				@binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 					${body}
 				});
diff --git a/test/runtime/samples/binding-this-each-block-property-2/_config.js b/test/runtime/samples/binding-this-each-block-property-2/_config.js
new file mode 100644
index 0000000000..eebd754fca
--- /dev/null
+++ b/test/runtime/samples/binding-this-each-block-property-2/_config.js
@@ -0,0 +1,53 @@
+let calls = [];
+function callback(refs) {
+	calls.push(refs.map(({ ref }) => ({ ref })));
+}
+export default {
+	html: ``,
+	props: {
+		callback,
+	},
+	after_test() {
+		calls = [];
+	},
+	async test({ assert, component, target }) {
+		assert.equal(calls.length, 1);
+		assert.equal(calls[0].length, 0);
+
+		await component.addItem();
+
+		let divs = target.querySelectorAll("div");
+
+		assert.equal(calls.length, 3);
+		assert.equal(calls[1].length, 1);
+		assert.equal(calls[1][0].ref, null);
+		assert.equal(calls[2].length, 1);
+		assert.equal(calls[2][0].ref, divs[0]);
+
+		await component.addItem();
+
+		divs = target.querySelectorAll("div");
+
+		assert.equal(calls.length, 5);
+		assert.equal(calls[3].length, 2);
+		assert.equal(calls[3][0].ref, divs[0]);
+		assert.equal(calls[3][1].ref, null);
+		assert.equal(calls[4].length, 2);
+		assert.equal(calls[4][0].ref, divs[0]);
+		assert.equal(calls[4][1].ref, divs[1]);
+
+		await component.addItem();
+
+		divs = target.querySelectorAll("div");
+
+		assert.equal(calls.length, 7);
+		assert.equal(calls[5].length, 3);
+		assert.equal(calls[5][0].ref, divs[0]);
+		assert.equal(calls[5][1].ref, divs[1]);
+		assert.equal(calls[5][2].ref, null);
+		assert.equal(calls[6].length, 3);
+		assert.equal(calls[6][0].ref, divs[0]);
+		assert.equal(calls[6][1].ref, divs[1]);
+		assert.equal(calls[6][2].ref, divs[2]);
+	},
+};
diff --git a/test/runtime/samples/binding-this-each-block-property-2/main.svelte b/test/runtime/samples/binding-this-each-block-property-2/main.svelte
new file mode 100644
index 0000000000..bc1efe725c
--- /dev/null
+++ b/test/runtime/samples/binding-this-each-block-property-2/main.svelte
@@ -0,0 +1,17 @@
+<script>
+	import { tick } from 'svelte';
+	let refs = [];
+
+	export function addItem() {
+		refs = refs.concat({ ref: null });
+		return tick();
+	}
+
+	export let callback;
+
+	$: callback(refs);
+</script>
+
+{#each refs as xxx}
+	<div bind:this={xxx.ref} />
+{/each}
\ No newline at end of file