fix extra invalidation with component prop binding to object property (#5890)

Author: pushkine

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

@@ -347,8 +347,8 @@ export default class InlineComponentWrapper extends Wrapper {
 			}
 
 			const params = [x`#value`];
+			const args = [x`#value`];
 			if (contextual_dependencies.length > 0) {
-				const args = [];
 
 				contextual_dependencies.forEach(name => {
 					params.push({
@@ -361,25 +361,30 @@ export default class InlineComponentWrapper extends Wrapper {
 				});
 
 
-				block.chunks.init.push(b`
-					function ${id}(#value) {
-						${callee}.call(null, #value, ${args});
-					}
-				`);
-
 				block.maintain_context = true; // TODO put this somewhere more logical
-			} else {
-				block.chunks.init.push(b`
-					function ${id}(#value) {
-						${callee}.call(null, #value);
+			}
+
+			block.chunks.init.push(b`
+				function ${id}(#value) {
+					${callee}(${args});
+				}
+			`);
+
+			let invalidate_binding = b`
+				${lhs} = #value;
+				${renderer.invalidate(dependencies[0])};
+			`;
+			if (binding.expression.node.type === 'MemberExpression') {
+				invalidate_binding = b`
+					if ($$self.$$.not_equal(${lhs}, #value)) {
+						${invalidate_binding}
 					}
-				`);
+				`;
 			}
 
 			const body = b`
 				function ${id}(${params}) {
-					${lhs} = #value;
-					${renderer.invalidate(dependencies[0])};
+					${invalidate_binding}
 				}
 			`;
 

test/runtime/samples/component-binding-reactive-property-no-extra-call/Component.svelte

@@ -0,0 +1,6 @@
+<script>
+	export let value;
+	export let value2;
+</script>
+
+{value}{value2}

test/runtime/samples/component-binding-reactive-property-no-extra-call/_config.js

@@ -0,0 +1,5 @@
+export default {
+	async test({ assert, component }) {
+		assert.equal(component.object_updates, component.primitive_updates);
+	}
+};

test/runtime/samples/component-binding-reactive-property-no-extra-call/main.svelte

@@ -0,0 +1,13 @@
+<script>
+	import Component from './Component.svelte';
+
+	export let primitive_updates = 0;
+	export let object_updates = 0;
+
+	const obj = { foo: '' };
+	let foo = 'bar';
+	$: if (obj) object_updates++;
+	$: if (foo) primitive_updates++;
+</script>
+
+<Component bind:value={obj.foo} bind:value2={foo} />