From a73be39a805e8b39adaa4314af38c5a635d56439 Mon Sep 17 00:00:00 2001
From: Th0rN13 <th0r@inbox.ru>
Date: Sun, 3 May 2020 21:41:51 +0500
Subject: [PATCH] fix contextual dynamic bind:this in {#each} (#4759)

---
 .../render_dom/wrappers/shared/bind_this.ts        |  3 +++
 .../binding-this-each-object-props/_config.js      | 14 ++++++++++++++
 .../binding-this-each-object-props/main.svelte     | 13 +++++++++++++
 .../binding-this-each-object-spread/_config.js     | 14 ++++++++++++++
 .../binding-this-each-object-spread/main.svelte    | 13 +++++++++++++
 5 files changed, 57 insertions(+)
 create mode 100644 test/runtime/samples/binding-this-each-object-props/_config.js
 create mode 100644 test/runtime/samples/binding-this-each-object-props/main.svelte
 create mode 100644 test/runtime/samples/binding-this-each-object-spread/_config.js
 create mode 100644 test/runtime/samples/binding-this-each-object-spread/main.svelte

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 97199a71c2..8a9830b01b 100644
--- a/src/compiler/compile/render_dom/wrappers/shared/bind_this.ts
+++ b/src/compiler/compile/render_dom/wrappers/shared/bind_this.ts
@@ -55,6 +55,9 @@ export default function bind_this(component: Component, block: Block, binding: B
 		const args = [];
 		for (const id of contextual_dependencies) {
 			args.push(id);
+			if (block.variables.has(id.name)) {
+				if (block.renderer.context_lookup.get(id.name).is_contextual) continue;
+			}
 			block.add_variable(id, block.renderer.reference(id.name));
 		}
 
diff --git a/test/runtime/samples/binding-this-each-object-props/_config.js b/test/runtime/samples/binding-this-each-object-props/_config.js
new file mode 100644
index 0000000000..5372667b82
--- /dev/null
+++ b/test/runtime/samples/binding-this-each-object-props/_config.js
@@ -0,0 +1,14 @@
+export default {
+	html: ``,
+
+	async test({ assert, component, target }) {
+		component.visible = true;
+		assert.htmlEqual(target.innerHTML, `
+			<div>b</div><div>b</div><div>c</div><div>c</div>
+		`);
+		assert.equal(component.items1[1], target.querySelector('div'));
+		assert.equal(component.items2[1], target.querySelector('div:nth-child(2)'));
+		assert.equal(component.items1[2], target.querySelector('div:nth-child(3)'));
+		assert.equal(component.items2[2], target.querySelector('div:last-child'));
+	}
+};
diff --git a/test/runtime/samples/binding-this-each-object-props/main.svelte b/test/runtime/samples/binding-this-each-object-props/main.svelte
new file mode 100644
index 0000000000..9654a58418
--- /dev/null
+++ b/test/runtime/samples/binding-this-each-object-props/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	export const items1 = {};
+	export const items2 = {};
+	export let data = [
+		{id: 1, text: "b"},
+		{id: 2, text: "c"},
+	];
+</script>
+
+{#each data as item (item.id)}
+	<div bind:this={items1[item.id]}>{item.text}</div>
+	<div bind:this={items2[item.id]}>{item.text}</div>
+{/each}
diff --git a/test/runtime/samples/binding-this-each-object-spread/_config.js b/test/runtime/samples/binding-this-each-object-spread/_config.js
new file mode 100644
index 0000000000..cecec08db9
--- /dev/null
+++ b/test/runtime/samples/binding-this-each-object-spread/_config.js
@@ -0,0 +1,14 @@
+export default {
+	html: ``,
+
+	async test({ assert, component, target }) {
+		component.visible = true;
+		assert.htmlEqual(target.innerHTML, `
+			<div>a</div><div>a</div><div>b</div><div>b</div>
+		`);
+		assert.equal(component.items1[1], target.querySelector('div'));
+		assert.equal(component.items2[1], target.querySelector('div:nth-child(2)'));
+		assert.equal(component.items1[2], target.querySelector('div:nth-child(3)'));
+		assert.equal(component.items2[2], target.querySelector('div:last-child'));
+	}
+};
diff --git a/test/runtime/samples/binding-this-each-object-spread/main.svelte b/test/runtime/samples/binding-this-each-object-spread/main.svelte
new file mode 100644
index 0000000000..256ed0ede6
--- /dev/null
+++ b/test/runtime/samples/binding-this-each-object-spread/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	export const items1 = {};
+	export const items2 = {};
+	var data = [
+		{id: 1, text: "a"},
+		{id: 2, text: "b"},
+	];
+</script>
+
+{#each data as {id, text} (id)}
+	<div bind:this={items1[id]}>{text}</div>
+	<div bind:this={items2[id]}>{text}</div>
+{/each}