binding callback only call when value changes internally

Author: tanhauhau

src/compiler/compile/render_dom/index.ts

@@ -86,6 +86,7 @@ export default function dom(
 	const set = (uses_props || uses_rest || writable_props.length > 0 || component.slots.size > 0)
 		? x`
 			${$$props} => {
+				$$self.$$.skip_bound = true;
 				${uses_props && renderer.invalidate('$$props', x`$$props = @assign(@assign({}, $$props), @exclude_internal_props($$new_props))`)}
 				${uses_rest && !uses_props && x`$$props = @assign(@assign({}, $$props), @exclude_internal_props($$new_props))`}
 				${uses_rest && renderer.invalidate('$$restProps', x`$$restProps = ${compute_rest}`)}
@@ -94,6 +95,7 @@ export default function dom(
 				)}
 				${component.slots.size > 0 &&
 				b`if ('$$scope' in ${$$props}) ${renderer.invalidate('$$scope', x`$$scope = ${$$props}.$$scope`)};`}
+				$$self.$$.skip_bound = false;
 			}
 		`
 		: null;

src/runtime/internal/Component.ts

@@ -120,7 +120,8 @@ export function init(component, options, instance, create_fragment, not_equal, p
 
 		// everything else
 		callbacks: blank_object(),
-		dirty
+		dirty,
+		skip_bound: false
 	};
 
 	let ready = false;
@@ -129,7 +130,7 @@ export function init(component, options, instance, create_fragment, not_equal, p
 		? instance(component, prop_values, (i, ret, ...rest) => {
 			const value = rest.length ? rest[0] : ret;
 			if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) {
-				if ($$.bound[i]) $$.bound[i](value);
+				if (!$$.skip_bound && $$.bound[i]) $$.bound[i](value);
 				if (ready) make_dirty(component, i);
 			}
 			return ret;

test/runtime/samples/component-binding-store/Input.svelte

@@ -0,0 +1,5 @@
+<script>
+	export let value = '';
+</script>
+
+<input bind:value />

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

@@ -0,0 +1,61 @@
+export default {
+	html: `
+		<input />
+		<input />
+		<div></div>
+	`,
+
+	async test({ assert, component, target, window }) {
+		let count = 0;
+		component.callback = () => {
+			count++;
+		};
+
+		const [input1, input2] = target.querySelectorAll("input");
+
+		input1.value = "1";
+		await input1.dispatchEvent(new window.Event("input"));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<input />
+				<input />
+				<div>1</div>
+			`
+		);
+		assert.equal(input1.value, "1");
+		assert.equal(input2.value, "1");
+		assert.equal(count, 1);
+
+		input2.value = "123";
+		await input2.dispatchEvent(new window.Event("input"));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<input />
+				<input />
+				<div>123</div>
+			`
+		);
+		assert.equal(input1.value, "123");
+		assert.equal(input2.value, "123");
+		assert.equal(count, 2);
+
+		input1.value = "456";
+		await input1.dispatchEvent(new window.Event("input"));
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<input />
+				<input />
+				<div>456</div>
+			`
+		);
+		assert.equal(input1.value, "456");
+		assert.equal(input2.value, "456");
+		assert.equal(count, 3);
+	},
+};

test/runtime/samples/component-binding-store/main.svelte

@@ -0,0 +1,18 @@
+<script>
+	import { writable } from 'svelte/store';
+	import Input from './Input.svelte';
+
+	let value = writable({ value: '' });
+	
+	export let callback = () => {};
+
+	value.subscribe(() => {
+		callback();
+	})
+</script>
+
+<input bind:value={$value.value} />
+
+<Input bind:value={$value.value}/>
+
+<div>{$value.value}</div>