fix bind:this, skip checking before adding to binding_callbacks (#5072)

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
 

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}
 				});

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]);
+	},
+};

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}