Fix binding to values in a component when it uses `$$props` (#2725)

src/compiler/compile/render-dom/index.ts

@@ -80,7 +80,7 @@ export default function dom(
 			${$$props} => {
 				${uses_props && component.invalidate('$$props', `$$props = @assign(@assign({}, $$props), $$new_props)`)}
 				${writable_props.map(prop =>
-					`if ('${prop.export_name}' in $$props) ${component.invalidate(prop.name, `${prop.name} = $$props.${prop.export_name}`)};`
+					`if ('${prop.export_name}' in ${$$props}) ${component.invalidate(prop.name, `${prop.name} = ${$$props}.${prop.export_name}`)};`
 				)}
 				${component.slots.size > 0 &&
 				`if ('$$scope' in ${$$props}) ${component.invalidate('$$scope', `$$scope = ${$$props}.$$scope`)};`}

test/runtime/samples/binding-using-props/TextInput.svelte

@@ -0,0 +1,6 @@
+<script>
+    export let actualValue;
+    let x = $$props;
+</script>
+
+<input bind:value={actualValue}>

test/runtime/samples/binding-using-props/_config.js

@@ -0,0 +1,14 @@
+export default {
+	async test({ assert, target, window }) {
+		const input = target.querySelector('input');
+	
+		const event = new window.Event('input');
+		input.value = 'changed';
+		await input.dispatchEvent(event);
+
+		assert.htmlEqual(target.innerHTML, `
+			<input>
+			<p>changed</p>
+		`);
+	}
+};

test/runtime/samples/binding-using-props/main.svelte

@@ -0,0 +1,7 @@
+<script>
+	import Input from './TextInput.svelte';
+	export let actualValue = '';
+</script>
+
+<Input bind:actualValue />
+<p>{actualValue}</p>