Merge pull request #809 from sveltejs/gh-804

prevent mutation bug from incorrectly calling observer

Author: Rich-Harris

src/generators/dom/visitors/Component.ts

@@ -185,7 +185,7 @@ export default function visitComponent(
 				_bind: function(changed, childState) {
 					var state = #component.get(), newState = {};
 					${setParentFromChildOnChange}
-					${name_updating} = changed;
+					${name_updating} = @assign({}, changed);
 					#component._set(newState);
 					${name_updating} = {};
 				}

test/runtime/samples/observe-binding-ignores-unchanged/Nested.html

@@ -0,0 +1 @@
+<input type="number" bind:value="field1">

test/runtime/samples/observe-binding-ignores-unchanged/_config.js

@@ -0,0 +1,28 @@
+export default {
+	html: `
+		<input type='number'>
+		<p>field1: 1</p>
+		<p>field2: 2</p>
+	`,
+
+	test(assert, component, target, window) {
+		let triggered = false;
+		component.refs.nested.observe('field2', () => {
+			triggered = true;
+		}, { init: false });
+
+		const input = target.querySelector('input');
+		const event = new window.Event('input');
+
+		input.value = 3;
+		input.dispatchEvent(event); // will throw error if observer fires incorrectly
+
+		assert.ok(!triggered);
+
+		assert.htmlEqual(target.innerHTML, `
+			<input type='number'>
+			<p>field1: 3</p>
+			<p>field2: 2</p>
+		`);
+	}
+};

test/runtime/samples/observe-binding-ignores-unchanged/main.html

@@ -0,0 +1,21 @@
+<Nested ref:nested bind:field1="myObject.field1" bind:field2="myObject.field2" />
+<p>field1: {{myObject.field1}}</p>
+<p>field2: {{myObject.field2}}</p>
+
+<script>
+	import Nested from './Nested.html';
+
+	export default {
+		components: {
+			Nested
+		},
+		data() {
+			return {
+				myObject: {
+					field1: 1,
+					field2: 2
+				}
+			};
+		}
+	};
+</script>