From 4c3aa0a36f79047338e2024ae09ff1cb61e38ca9 Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Sun, 16 Apr 2017 19:59:27 -0400
Subject: [PATCH] prevent component binding blowback on initial render

---
 .../dom/visitors/Component/Binding.js         |  2 +-
 .../dom/visitors/Element/Binding.js           |  2 +-
 .../dom/visitors/shared/binding/getSetter.js  | 21 +++++++++++++-----
 .../component-binding-blowback/Widget.html    |  1 +
 .../component-binding-blowback/_config.js     | 14 ++++++++++++
 .../component-binding-blowback/main.html      | 22 +++++++++++++++++++
 6 files changed, 54 insertions(+), 8 deletions(-)
 create mode 100644 test/runtime/samples/component-binding-blowback/Widget.html
 create mode 100644 test/runtime/samples/component-binding-blowback/_config.js
 create mode 100644 test/runtime/samples/component-binding-blowback/main.html

diff --git a/src/generators/dom/visitors/Component/Binding.js b/src/generators/dom/visitors/Component/Binding.js
index 289c796118..c706e755a4 100644
--- a/src/generators/dom/visitors/Component/Binding.js
+++ b/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;
 
diff --git a/src/generators/dom/visitors/Element/Binding.js b/src/generators/dom/visitors/Element/Binding.js
index c9e2c66cbe..c7da63c32b 100644
--- a/src/generators/dom/visitors/Element/Binding.js
+++ b/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
diff --git a/src/generators/dom/visitors/shared/binding/getSetter.js b/src/generators/dom/visitors/shared/binding/getSetter.js
index 852ea83fa7..1e89a4469f 100644
--- a/src/generators/dom/visitors/shared/binding/getSetter.js
+++ b/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};
-			${block.component}._set({ ${name}: ${name} });
+			if ( ${generator.helper( 'differs' )}( ${value}, ${keypath} ) ) {
+				${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 ) {
diff --git a/test/runtime/samples/component-binding-blowback/Widget.html b/test/runtime/samples/component-binding-blowback/Widget.html
new file mode 100644
index 0000000000..e88ac68005
--- /dev/null
+++ b/test/runtime/samples/component-binding-blowback/Widget.html
@@ -0,0 +1 @@
+<p>does nothing</p>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-blowback/_config.js b/test/runtime/samples/component-binding-blowback/_config.js
new file mode 100644
index 0000000000..53d1a9e3d7
--- /dev/null
+++ b/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();
+	}
+};
diff --git a/test/runtime/samples/component-binding-blowback/main.html b/test/runtime/samples/component-binding-blowback/main.html
new file mode 100644
index 0000000000..e028fe32ab
--- /dev/null
+++ b/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>