binding member expression should only invalidate the object, not the member property

Author: tanhauhau

src/compiler/compile/render_dom/wrappers/EachBlock.ts

@@ -219,11 +219,7 @@ export default class EachBlockWrapper extends Wrapper {
 			update_anchor_node,
 			update_mount_node
 		};
-
-		const all_dependencies = new Set(this.block.dependencies); // TODO should be dynamic deps only
-		this.node.expression.dynamic_dependencies().forEach((dependency: string) => {
-			all_dependencies.add(dependency);
-		});
+		const all_dependencies = new Set<string>(this.node.expression.dynamic_dependencies());
 		if (this.node.key) {
 			this.node.key.dynamic_dependencies().forEach((dependency: string) => {
 				all_dependencies.add(dependency);

src/compiler/compile/render_dom/wrappers/Element/Binding.ts

@@ -70,6 +70,20 @@ export default class BindingWrapper {
 		return dependencies;
 	}
 
+	get_update_dependencies() {
+		const object = get_object(this.node.expression.node).name;
+		const dependencies = new Set(object);
+
+
+		const indirect_dependencies = this.parent.renderer.component.indirect_dependencies.get(object);
+		if (indirect_dependencies) {
+			indirect_dependencies.forEach(indirect_dependency => {
+				dependencies.add(indirect_dependency);
+			});
+		}
+		return dependencies;
+	}
+
 	is_readonly_media_attribute() {
 		return this.node.is_readonly_media_attribute();
 	}

src/compiler/compile/render_dom/wrappers/Element/index.ts

@@ -466,7 +466,7 @@ export default class ElementWrapper extends Wrapper {
 
 		binding_group.bindings.forEach(binding => {
 			// TODO this is a mess
-			add_to_set(dependencies, binding.get_dependencies());
+			add_to_set(dependencies, binding.get_update_dependencies());
 			add_to_set(contextual_dependencies, binding.handler.contextual_dependencies);
 
 			binding.render(block, lock);

src/compiler/compile/render_dom/wrappers/shared/bind_this.ts

@@ -12,7 +12,7 @@ export default function bind_this(component: Component, block: Block, binding: B
 	const callee = block.renderer.reference(fn.name);
 
 	const { contextual_dependencies, mutation } = binding.handler;
-	const dependencies = binding.get_dependencies();
+	const dependencies = binding.get_update_dependencies();
 
 	const body = b`
 		${mutation}

test/runtime/samples/binding-input-member-expression-update/_config.js

@@ -0,0 +1,18 @@
+// binding member expression shouldn't invalidate the property name
+export default {
+	async test({ assert, component, target, window }) {
+		const input = target.querySelector('input');
+		assert.deepEqual(component.logs.length, 1);
+		assert.equal(input.value, 'abc');
+
+		input.value = 'hij';
+		await input.dispatchEvent(new window.Event('input'));
+
+		assert.deepEqual(component.values.a, 'hij');
+		assert.deepEqual(component.logs.length, 1);
+		
+		component.paths = ['b'];
+		assert.deepEqual(component.logs.length, 2);
+		assert.equal(input.value, 'def');		
+	}
+};

test/runtime/samples/binding-input-member-expression-update/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	export let values = { a: "abc", b: "def" };
+	export let paths = ["a"];
+	export let logs = [];
+
+	$: paths && logs.push("paths updated");
+</script>
+
+<input bind:value={values[paths[0]]} />

test/runtime/samples/binding-this-each-key/_config.js

@@ -0,0 +1,10 @@
+export default {
+	html: '<div>content</div><div>content</div><div>content</div>',
+
+	test({ assert, target, component }) {
+		const divs = target.querySelectorAll('div');
+		assert.equal(component.refs[0], divs[0]);
+		assert.equal(component.refs[1], divs[1]);
+		assert.equal(component.refs[2], divs[2]);
+	}
+};

test/runtime/samples/binding-this-each-key/main.svelte

@@ -0,0 +1,13 @@
+<script>
+  export let data = [ { id: "1" }, { id: "2" }, { id: "3" } ];
+	
+  export let refs = [];
+
+  $: list = data.reverse()
+</script>
+
+{#each list as { id }, index (id)}
+  <div bind:this={refs[index]}>
+    content
+  </div>
+{/each}

test/runtime/samples/binding-this-member-expression-update/_config.js

@@ -0,0 +1,8 @@
+// binding member expression shouldn't invalidate the property name
+export default {
+	test({ assert, component, target }) {
+		const div = target.querySelector('div');
+		assert.equal(div, component.container.a);
+		assert.deepEqual(component.logs.length, 1);
+	}
+};

test/runtime/samples/binding-this-member-expression-update/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	export let container = {};
+	export let paths = ["a"];
+	export let logs = [];
+
+	$: paths && logs.push("paths updated");
+</script>
+
+<div bind:this={container[paths[0]]} />