Merge pull request #3886 from AlbertLucianto/fix/bind-out-of-sync

fix binding out of sync on reactive update

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

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>

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>
+		`);
+	}
+};

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 />