always update reactive declarations with $$props - fixes #3286

Author: Rich-Harris

src/compiler/compile/render_dom/index.ts

@@ -359,15 +359,11 @@ export default function dom(
 
 		component.reactive_declarations
 			.forEach(d => {
-				let uses_props;
+				const dependencies = Array.from(d.dependencies);
+				const uses_props = !!dependencies.find(n => n === '$$props');
 
-				const condition = Array.from(d.dependencies)
+				const condition = !uses_props && dependencies
 					.filter(n => {
-						if (n === '$$props') {
-							uses_props = true;
-							return false;
-						}
-
 						const variable = component.var_lookup.get(n);
 						return variable && (variable.writable || variable.mutated);
 					})

test/runtime/samples/props-reactive-b/_config.js

@@ -0,0 +1,30 @@
+export default {
+	props: {
+		a: 1,
+		b: 2
+	},
+
+	html: `
+		<p>a: 1</p>
+		<p>b: 2</p>
+		<p>c: 3</p>
+	`,
+
+	async test({ assert, component, target }) {
+		await component.$set({ a: 4 });
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>a: 4</p>
+			<p>b: 2</p>
+			<p>c: 6</p>
+		`);
+
+		await component.$set({ b: 5 });
+
+		assert.htmlEqual(target.innerHTML, `
+			<p>a: 4</p>
+			<p>b: 5</p>
+			<p>c: 9</p>
+		`);
+	}
+};

test/runtime/samples/props-reactive-b/main.svelte

@@ -0,0 +1,8 @@
+<script>
+	export let a;
+	$: c = a + $$props.b;
+</script>
+
+<p>a: {a}</p>
+<p>b: {$$props.b}</p>
+<p>c: {c}</p>