add updating guard to binding callback

Author: tanhauhau

src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts

@@ -359,18 +359,25 @@ export default class InlineComponentWrapper extends Wrapper {
 					args.push(renderer.reference(name));
 				});
 
-
 				block.chunks.init.push(b`
 					function ${id}(#value) {
-						${callee}.call(null, #value, ${args});
+						if (!${updating}) {
+							${updating} = true;
+							${callee}.call(null, #value, ${args});
+							@add_flush_callback(() => ${updating} = false);
+						}
 					}
 				`);
 
 				block.maintain_context = true; // TODO put this somewhere more logical
 			} else {
 				block.chunks.init.push(b`
 					function ${id}(#value) {
-						${callee}.call(null, #value);
+						if (!${updating}) {
+							${updating} = true;
+							${callee}.call(null, #value);
+							@add_flush_callback(() => ${updating} = false);
+						}
 					}
 				`);
 			}

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>