Only update inputs when the value changed

Fixes #1699

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()
 		};
 	}

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) {

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) {

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) {

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) {

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) {

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) {

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 && !isNaN(ctx.currentTime ) && changed.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 && audio_is_paused !== (audio_is_paused = ctx.paused ) && changed.paused) audio[audio_is_paused ? "pause" : "play"]();
-			if (!audio_updating && !isNaN(ctx.volume)) audio.volume = ctx.volume;
+			if (!audio_updating && !isNaN(ctx.volume) && changed.volume) audio.volume = ctx.volume;
 		},
 
 		d(detach) {

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 && !isNaN(ctx.currentTime ) && changed.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 && audio_is_paused !== (audio_is_paused = ctx.paused ) && changed.paused) audio[audio_is_paused ? "pause" : "play"]();
-			if (!audio_updating && !isNaN(ctx.volume)) audio.volume = ctx.volume;
+			if (!audio_updating && !isNaN(ctx.volume) && changed.volume) audio.volume = ctx.volume;
 		},
 
 		d(detach) {