Fix dynamic `bind:this` on components (#2333)

src/compiler/compile/render-dom/wrappers/InlineComponent/index.ts

@@ -276,15 +276,17 @@ export default class InlineComponentWrapper extends Wrapper {
 					lhs = component.source.slice(binding.expression.node.start, binding.expression.node.end).trim();
 				}
 
+				const contextual_dependencies = [...binding.expression.contextual_dependencies];
+
 				component.partly_hoisted.push(deindent`
-					function ${fn}($$component) {
+					function ${fn}(${['$$component', ...contextual_dependencies].join(', ')}) {
 						${lhs} = $$component;
 						${object && component.invalidate(object)}
 					}
 				`);
 
 				block.builders.destroy.add_line(`ctx.${fn}(null);`);
-				return `@add_binding_callback(() => ctx.${fn}(${this.var}));`;
+				return `@add_binding_callback(() => ctx.${fn}(${[this.var, ...contextual_dependencies.map(name => `ctx.${name}`)].join(', ')}));`;
 			}
 
 			const name = component.get_unique_name(`${this.var}_${binding.name}_binding`);

src/compiler/compile/utils/flatten_reference.ts

@@ -7,10 +7,11 @@ export default function flatten_reference(node: Node) {
 	const prop_end = node.end;
 
 	while (node.type === 'MemberExpression') {
-		if (node.computed) return null;
-
 		nodes.unshift(node.property);
+
+		if (!node.computed) {
 			parts.unshift(node.property.name);
+		}
 
 		node = node.object;
 	}
@@ -20,10 +21,11 @@ export default function flatten_reference(node: Node) {
 		? node.name
 		: node.type === 'ThisExpression' ? 'this' : null;
 
-	if (!name) return null;
+	nodes.unshift(node);
 
+	if (!node.computed) {
 		parts.unshift(name);
-	nodes.unshift(node);
+	}
 
 	return { name, nodes, parts, keypath: `${name}[✂${prop_start}-${prop_end}✂]` };
 }

test/runtime/samples/binding-this-component-computed-key/Foo.svelte

@@ -0,0 +1 @@
+<div>foo</div>

test/runtime/samples/binding-this-component-computed-key/_config.js

@@ -0,0 +1,8 @@
+export default {
+	skip_if_ssr: true,
+
+	html: `
+		<div>foo</div>
+		<div>has foo: true</div>
+	`
+};

test/runtime/samples/binding-this-component-computed-key/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	import Foo from './Foo.svelte';
+	export let foo = {};
+</script>
+
+<Foo bind:this={foo['computed']}/>
+<div>
+	has foo: {!!foo.computed}
+</div>

test/runtime/samples/binding-this-component-each-block-value/Foo.svelte

@@ -0,0 +1 @@
+<div>foo</div>

test/runtime/samples/binding-this-component-each-block-value/_config.js

@@ -0,0 +1,12 @@
+export default {
+	skip_if_ssr: true,
+
+	html: `
+		<div>foo</div>
+		<div>first has foo: true</div>
+		<div>foo</div>
+		<div>second has foo: true</div>
+		<div>foo</div>
+		<div>third has foo: true</div>
+	`
+};

test/runtime/samples/binding-this-component-each-block-value/main.svelte

@@ -0,0 +1,11 @@
+<script>
+	import Foo from './Foo.svelte';
+	export let foo = {};
+</script>
+
+{#each ["first", "second", "third"] as value}
+	<Foo bind:this={foo[value]}/>
+	<div>
+		{value} has foo: {!!foo[value]}
+	</div>
+{/each}

test/runtime/samples/binding-this-component-each-block/Foo.svelte

@@ -0,0 +1 @@
+<div>foo</div>

test/runtime/samples/binding-this-component-each-block/_config.js

@@ -0,0 +1,12 @@
+export default {
+	skip_if_ssr: true,
+
+	html: `
+		<div>foo</div>
+		<div>0 has foo: true</div>
+		<div>foo</div>
+		<div>1 has foo: true</div>
+		<div>foo</div>
+		<div>2 has foo: true</div>
+	`
+};

test/runtime/samples/binding-this-component-each-block/main.svelte

@@ -0,0 +1,11 @@
+<script>
+	import Foo from './Foo.svelte';
+	export let foo = [];
+</script>
+
+{#each Array(3) as _, i}
+	<Foo bind:this={foo[i]}/>
+	<div>
+		{i} has foo: {!!foo[i]}
+	</div>
+{/each}