prevent component binding blowback on initial render

src/generators/dom/visitors/Component/Binding.js

@@ -35,7 +35,7 @@ export default function visitBinding ( generator, block, state, node, attribute,
 		prop
 	});
 
-	const setter = getSetter({ block, name, keypath, context: '_context', attribute, dependencies, value: 'value' });
+	const setter = getSetter({ generator, block, name, keypath, context: '_context', attribute, dependencies, value: 'value' });
 
 	generator.hasComplexBindings = true;
 

src/generators/dom/visitors/Element/Binding.js

@@ -21,7 +21,7 @@ export default function visitBinding ( generator, block, state, node, attribute
 	const value = getBindingValue( generator, block, state, node, attribute, isMultipleSelect, bindingGroup, type );
 	const eventName = getBindingEventName( node );
 
-	let setter = getSetter({ block, name, keypath, context: '_svelte', attribute, dependencies, value });
+	let setter = getSetter({ generator, block, name, keypath, context: '_svelte', attribute, dependencies, value });
 	let updateElement;
 
 	// <select> special case

src/generators/dom/visitors/shared/binding/getSetter.js

@@ -1,6 +1,6 @@
 import deindent from '../../../../../utils/deindent.js';
 
-export default function getSetter ({ block, name, keypath, context, attribute, dependencies, value }) {
+export default function getSetter ({ generator, block, name, keypath, context, attribute, dependencies, value }) {
 	if ( block.contexts.has( name ) ) {
 		const prop = dependencies[0];
 		const tail = attribute.value.type === 'MemberExpression' ? getTailSnippet( attribute.value ) : '';
@@ -8,21 +8,30 @@ export default function getSetter ({ block, name, keypath, context, attribute, d
 		return deindent`
 			var list = this.${context}.${block.listNames.get( name )};
 			var index = this.${context}.${block.indexNames.get( name )};
-			list[index]${tail} = ${value};
 
-			${block.component}._set({ ${prop}: ${block.component}.get( '${prop}' ) });
+			if ( ${generator.helper( 'differs' )}( ${value}, list[index]${tail} ) ) {
+				list[index]${tail} = ${value};
+				${block.component}._set({ ${prop}: ${block.component}.get( '${prop}' ) });
+			}
 		`;
 	}
 
 	if ( attribute.value.type === 'MemberExpression' ) {
 		return deindent`
 			var ${name} = ${block.component}.get( '${name}' );
-			${keypath} = ${value};
+			if ( ${generator.helper( 'differs' )}( ${value}, ${keypath} ) ) {
-			${block.component}._set({ ${name}: ${name} });
+				${keypath} = ${value};
+				${block.component}._set({ ${name}: ${name} });
+			}
 		`;
 	}
 
-	return `${block.component}._set({ ${name}: ${value} });`;
+	return deindent`
+		var ${name} = ${block.component}.get( '${name}' );
+		if ( ${generator.helper( 'differs' )}( ${value}, ${name} ) ) {
+			${block.component}._set({ ${name}: ${value} });
+		}
+	`;
 }
 
 function getTailSnippet ( node ) {

test/runtime/samples/component-binding-blowback/Widget.html

@@ -0,0 +1 @@
+<p>does nothing</p>

test/runtime/samples/component-binding-blowback/_config.js

@@ -0,0 +1,14 @@
+export default {
+	test ( assert, component ) {
+		let count = 0;
+
+		component.observe( 'bar', () => {
+			count += 1;
+		});
+
+		component.set({ x: true });
+		assert.equal( count, 1 );
+
+		component.destroy();
+	}
+};

test/runtime/samples/component-binding-blowback/main.html

@@ -0,0 +1,22 @@
+{{#if x}}
+	<Widget bind:foo='bar.baz'/>
+{{/if}}
+
+<script>
+	import Widget from './Widget.html';
+
+	export default {
+		data: function () {
+			return {
+				x: false,
+				bar: {
+					baz: 42
+				}
+			};
+		},
+
+		components: {
+			Widget
+		}
+	};
+</script>