make bind:this reactive

src/compile/render-dom/wrappers/Element/index.ts

@@ -532,11 +532,12 @@ export default class ElementWrapper extends Wrapper {
 			renderer.component.declarations.push(name);
 			renderer.component.template_references.add(name);
 
-			const { handler } = this_binding.munge(block);
+			const { handler, object } = this_binding.munge(block);
 
 			renderer.component.partly_hoisted.push(deindent`
 				function ${name}($$node) {
 					${handler.mutation}
+					$$make_dirty('${object}');
 				}
 			`);
 

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

@@ -11,6 +11,7 @@ import deindent from '../../../../utils/deindent';
 import Attribute from '../../../nodes/Attribute';
 import getObject from '../../../../utils/getObject';
 import Binding from '../../../nodes/Binding';
+import flattenReference from '../../../../utils/flattenReference';
 
 export default class InlineComponentWrapper extends Wrapper {
 	var: string;
@@ -196,12 +197,15 @@ export default class InlineComponentWrapper extends Wrapper {
 		}
 
 		const munged_bindings = this.node.bindings.map(binding => {
+			component.has_reactive_assignments = true;
+
 			if (binding.name === 'this') {
 				const fn = component.getUniqueName(`${this.var}_binding`);
 				component.declarations.push(fn);
 				component.template_references.add(fn);
 
 				let lhs;
+				let object;
 
 				if (binding.isContextual && binding.expression.node.type === 'Identifier') {
 					// bind:x={y} — we can't just do `y = x`, we need to
@@ -209,13 +213,17 @@ export default class InlineComponentWrapper extends Wrapper {
 					const { name } = binding.expression.node;
 					const { object, property, snippet } = block.bindings.get(name)();
 					lhs = snippet;
+
+					// TODO we need to invalidate... something
 				} else {
+					object = flattenReference(binding.expression.node).name;
 					lhs = component.source.slice(binding.expression.node.start, binding.expression.node.end).trim();
 				}
 
 				component.partly_hoisted.push(deindent`
 					function ${fn}($$component) {
 						${lhs} = $$component;
+						${object && `$$make_dirty('${object}');`}
 					}
 				`);
 
@@ -223,8 +231,6 @@ export default class InlineComponentWrapper extends Wrapper {
 				return `@add_binding_callback(() => ctx.${fn}(${this.var}));`;
 			}
 
-			component.has_reactive_assignments = true;
-
 			const name = component.getUniqueName(`${this.var}_${binding.name}_binding`);
 			component.declarations.push(name);
 			component.template_references.add(name);

test/runtime/samples/binding-this-component-reactive/Foo.html

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

test/runtime/samples/binding-this-component-reactive/_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-reactive/main.html

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

test/runtime/samples/binding-this-element-reactive/_config.js

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

test/runtime/samples/binding-this-element-reactive/main.html

@@ -0,0 +1,7 @@
+<script>
+	export let div;
+</script>
+
+<div bind:this={div}>
+	has div: {!!div}
+</div>