From 211e0383cf2340c7f6d0d01e85cb7237979e89cf Mon Sep 17 00:00:00 2001
From: Josh Duff <me@JoshDuff.com>
Date: Tue, 28 Aug 2018 10:33:49 -0500
Subject: [PATCH] Only update inputs when the value changed

Fixes #1699
---
 src/compile/nodes/Binding.ts                   | 18 ++++++++++++++----
 test/js/samples/input-files/expected-bundle.js |  2 +-
 test/js/samples/input-files/expected.js        |  2 +-
 test/js/samples/input-range/expected-bundle.js |  2 +-
 test/js/samples/input-range/expected.js        |  2 +-
 .../expected-bundle.js                         |  2 +-
 .../input-without-blowback-guard/expected.js   |  2 +-
 .../samples/media-bindings/expected-bundle.js  |  6 +++---
 test/js/samples/media-bindings/expected.js     |  6 +++---
 9 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/src/compile/nodes/Binding.ts b/src/compile/nodes/Binding.ts
index e0f928ccfa..168c3b44b5 100644
--- a/src/compile/nodes/Binding.ts
+++ b/src/compile/nodes/Binding.ts
@@ -66,7 +66,7 @@ export default class Binding extends Node {
 			dimensions.test(this.name)
 		);
 
-		let updateCondition: string;
+		let updateConditions: string[] = [];
 
 		const { name } = getObject(this.value.node);
 		const { snippet } = this.value;
@@ -108,7 +108,7 @@ export default class Binding extends Node {
 		}
 
 		if (this.name === 'currentTime' || this.name === 'volume') {
-			updateCondition = `!isNaN(${snippet})`;
+			updateConditions.push(`!isNaN(${snippet})`);
 
 			if (this.name === 'currentTime') initialUpdate = null;
 		}
@@ -118,7 +118,7 @@ export default class Binding extends Node {
 			const last = block.getUniqueName(`${node.var}_is_paused`);
 			block.addVariable(last, 'true');
 
-			updateCondition = `${last} !== (${last} = ${snippet})`;
+			updateConditions.push(`${last} !== (${last} = ${snippet})`);
 			updateDom = `${node.var}[${last} ? "pause" : "play"]();`;
 			initialUpdate = null;
 		}
@@ -129,6 +129,16 @@ export default class Binding extends Node {
 			updateDom = null;
 		}
 
+		const dependencyArray = [...this.value.dependencies]
+
+		if (dependencyArray.length === 1) {
+			updateConditions.push(`changed.${dependencyArray[0]}`)
+		} else if (dependencyArray.length > 1) {
+			updateConditions.push(
+				`(${dependencyArray.map(prop => `changed.${prop}`).join(' || ')})`
+			)
+		}
+
 		return {
 			name: this.name,
 			object: name,
@@ -136,7 +146,7 @@ export default class Binding extends Node {
 			updateDom,
 			initialUpdate,
 			needsLock: !isReadOnly && needsLock,
-			updateCondition,
+			updateCondition: updateConditions.length ? updateConditions.join(' && ') : undefined,
 			isReadOnlyMediaAttribute: this.isReadOnlyMediaAttribute()
 		};
 	}
diff --git a/test/js/samples/input-files/expected-bundle.js b/test/js/samples/input-files/expected-bundle.js
index 988d49a27e..b598e619ff 100644
--- a/test/js/samples/input-files/expected-bundle.js
+++ b/test/js/samples/input-files/expected-bundle.js
@@ -188,7 +188,7 @@ function create_main_fragment(component, ctx) {
 		},
 
 		p(changed, ctx) {
-			if (!input_updating) input.files = ctx.files;
+			if (!input_updating && changed.files) input.files = ctx.files;
 		},
 
 		d(detach) {
diff --git a/test/js/samples/input-files/expected.js b/test/js/samples/input-files/expected.js
index d6197dbb28..028e15bd28 100644
--- a/test/js/samples/input-files/expected.js
+++ b/test/js/samples/input-files/expected.js
@@ -25,7 +25,7 @@ function create_main_fragment(component, ctx) {
 		},
 
 		p(changed, ctx) {
-			if (!input_updating) input.files = ctx.files;
+			if (!input_updating && changed.files) input.files = ctx.files;
 		},
 
 		d(detach) {
diff --git a/test/js/samples/input-range/expected-bundle.js b/test/js/samples/input-range/expected-bundle.js
index 45d1d42d33..7141e094a3 100644
--- a/test/js/samples/input-range/expected-bundle.js
+++ b/test/js/samples/input-range/expected-bundle.js
@@ -190,7 +190,7 @@ function create_main_fragment(component, ctx) {
 		},
 
 		p(changed, ctx) {
-			input.value = ctx.value;
+			if (changed.value) input.value = ctx.value;
 		},
 
 		d(detach) {
diff --git a/test/js/samples/input-range/expected.js b/test/js/samples/input-range/expected.js
index 12cda533c6..bb430b0e92 100644
--- a/test/js/samples/input-range/expected.js
+++ b/test/js/samples/input-range/expected.js
@@ -23,7 +23,7 @@ function create_main_fragment(component, ctx) {
 		},
 
 		p(changed, ctx) {
-			input.value = ctx.value;
+			if (changed.value) input.value = ctx.value;
 		},
 
 		d(detach) {
diff --git a/test/js/samples/input-without-blowback-guard/expected-bundle.js b/test/js/samples/input-without-blowback-guard/expected-bundle.js
index 0ba44bcddd..307545663c 100644
--- a/test/js/samples/input-without-blowback-guard/expected-bundle.js
+++ b/test/js/samples/input-without-blowback-guard/expected-bundle.js
@@ -185,7 +185,7 @@ function create_main_fragment(component, ctx) {
 		},
 
 		p(changed, ctx) {
-			input.checked = ctx.foo;
+			if (changed.foo) input.checked = ctx.foo;
 		},
 
 		d(detach) {
diff --git a/test/js/samples/input-without-blowback-guard/expected.js b/test/js/samples/input-without-blowback-guard/expected.js
index 66e02fdbaf..cff06b1e6a 100644
--- a/test/js/samples/input-without-blowback-guard/expected.js
+++ b/test/js/samples/input-without-blowback-guard/expected.js
@@ -22,7 +22,7 @@ function create_main_fragment(component, ctx) {
 		},
 
 		p(changed, ctx) {
-			input.checked = ctx.foo;
+			if (changed.foo) input.checked = ctx.foo;
 		},
 
 		d(detach) {
diff --git a/test/js/samples/media-bindings/expected-bundle.js b/test/js/samples/media-bindings/expected-bundle.js
index e388684cab..33f9f76d09 100644
--- a/test/js/samples/media-bindings/expected-bundle.js
+++ b/test/js/samples/media-bindings/expected-bundle.js
@@ -226,9 +226,9 @@ function create_main_fragment(component, ctx) {
 		},
 
 		p(changed, ctx) {
-			if (!audio_updating && !isNaN(ctx.currentTime )) audio.currentTime = ctx.currentTime ;
-			if (!audio_updating && audio_is_paused !== (audio_is_paused = ctx.paused )) audio[audio_is_paused ? "pause" : "play"]();
-			if (!audio_updating && !isNaN(ctx.volume)) audio.volume = ctx.volume;
+			if (!audio_updating && !isNaN(ctx.currentTime ) && changed.currentTime) audio.currentTime = ctx.currentTime ;
+			if (!audio_updating && audio_is_paused !== (audio_is_paused = ctx.paused ) && changed.paused) audio[audio_is_paused ? "pause" : "play"]();
+			if (!audio_updating && !isNaN(ctx.volume) && changed.volume) audio.volume = ctx.volume;
 		},
 
 		d(detach) {
diff --git a/test/js/samples/media-bindings/expected.js b/test/js/samples/media-bindings/expected.js
index 97753a1995..6571049306 100644
--- a/test/js/samples/media-bindings/expected.js
+++ b/test/js/samples/media-bindings/expected.js
@@ -59,9 +59,9 @@ function create_main_fragment(component, ctx) {
 		},
 
 		p(changed, ctx) {
-			if (!audio_updating && !isNaN(ctx.currentTime )) audio.currentTime = ctx.currentTime ;
-			if (!audio_updating && audio_is_paused !== (audio_is_paused = ctx.paused )) audio[audio_is_paused ? "pause" : "play"]();
-			if (!audio_updating && !isNaN(ctx.volume)) audio.volume = ctx.volume;
+			if (!audio_updating && !isNaN(ctx.currentTime ) && changed.currentTime) audio.currentTime = ctx.currentTime ;
+			if (!audio_updating && audio_is_paused !== (audio_is_paused = ctx.paused ) && changed.paused) audio[audio_is_paused ? "pause" : "play"]();
+			if (!audio_updating && !isNaN(ctx.volume) && changed.volume) audio.volume = ctx.volume;
 		},
 
 		d(detach) {