From 56b6a62a8deabd3fb2ed970f4842806868e7b87a Mon Sep 17 00:00:00 2001
From: AlbertLucianto <albertlucianto@gmail.com>
Date: Sun, 10 Nov 2019 14:33:33 +0800
Subject: [PATCH] fix binding out of sync on reactive update

---
 .../wrappers/InlineComponent/index.ts         |  6 +--
 .../Button.svelte                             | 11 ++++++
 .../_config.js                                | 38 +++++++++++++++++++
 .../main.svelte                               | 19 ++++++++++
 4 files changed, 70 insertions(+), 4 deletions(-)
 create mode 100644 test/runtime/samples/component-binding-reactive-statement/Button.svelte
 create mode 100644 test/runtime/samples/component-binding-reactive-statement/_config.js
 create mode 100644 test/runtime/samples/component-binding-reactive-statement/main.svelte

diff --git a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
index a3d1492281..cc02c171ed 100644
--- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
+++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts
@@ -300,7 +300,9 @@ export default class InlineComponentWrapper extends Wrapper {
 
 			updates.push(b`
 				if (!${updating} && ${changed(Array.from(binding.expression.dependencies))}) {
+					${updating} = true;
 					${name_changes}.${binding.name} = ${snippet};
+					@add_flush_callback(() => ${updating} = false);
 				}
 			`);
 
@@ -337,8 +339,6 @@ export default class InlineComponentWrapper extends Wrapper {
 				block.chunks.init.push(b`
 					function ${id}(${value}) {
 						#ctx.${id}.call(null, ${value}, #ctx);
-						${updating} = true;
-						@add_flush_callback(() => ${updating} = false);
 					}
 				`);
 
@@ -347,8 +347,6 @@ export default class InlineComponentWrapper extends Wrapper {
 				block.chunks.init.push(b`
 					function ${id}(${value}) {
 						#ctx.${id}.call(null, ${value});
-						${updating} = true;
-						@add_flush_callback(() => ${updating} = false);
 					}
 				`);
 			}
diff --git a/test/runtime/samples/component-binding-reactive-statement/Button.svelte b/test/runtime/samples/component-binding-reactive-statement/Button.svelte
new file mode 100644
index 0000000000..289ec42fab
--- /dev/null
+++ b/test/runtime/samples/component-binding-reactive-statement/Button.svelte
@@ -0,0 +1,11 @@
+<script>
+	export let count
+	
+	function handleClick() {
+		count += 1;
+	}
+</script>
+
+<button on:click={handleClick}>
+	button {count}
+</button>
\ No newline at end of file
diff --git a/test/runtime/samples/component-binding-reactive-statement/_config.js b/test/runtime/samples/component-binding-reactive-statement/_config.js
new file mode 100644
index 0000000000..49342d0645
--- /dev/null
+++ b/test/runtime/samples/component-binding-reactive-statement/_config.js
@@ -0,0 +1,38 @@
+export default {
+	html: `
+		<button>main 0</button>
+		<button>button 0</button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const event = new window.MouseEvent('click');
+
+		const buttons = target.querySelectorAll('button');
+
+		await buttons[0].dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<button>main 1</button>
+			<button>button 1</button>
+		`);
+
+		await buttons[1].dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<button>main 2</button>
+			<button>button 2</button>
+		`);
+
+		// reactive update, reset to 2
+		await buttons[0].dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<button>main 2</button>
+			<button>button 2</button>
+		`);
+
+		// bound to main, reset to 2
+		await buttons[1].dispatchEvent(event);
+		assert.htmlEqual(target.innerHTML, `
+			<button>main 2</button>
+			<button>button 2</button>
+		`);
+	}
+};
diff --git a/test/runtime/samples/component-binding-reactive-statement/main.svelte b/test/runtime/samples/component-binding-reactive-statement/main.svelte
new file mode 100644
index 0000000000..4253c6127e
--- /dev/null
+++ b/test/runtime/samples/component-binding-reactive-statement/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	import Button from './Button.svelte';
+	
+	let count = 0;
+
+	$: if (count > 2) {
+		count = 2;
+	}
+
+	function handleClick() {
+		count += 1;
+	}
+</script>
+
+<button on:click={handleClick}>
+	main {count}
+</button>
+
+<Button bind:count />