fix $$props reactive for slots (#5125)

Author: tanhauhau

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Svelte changelog
 
+## Unreleased
+
+* Fix reactivity when passing `$$props` to a `<slot>` ([#3364](https://github.com/sveltejs/svelte/issues/3364))
+
 ## 3.24.0
 
 * Support nullish coalescing (`??`) and optional chaining (`?.`) operators ([#1972](https://github.com/sveltejs/svelte/issues/1972))

src/compiler/compile/render_dom/wrappers/Slot.ts

@@ -7,6 +7,7 @@ import { b, p, x } from 'code-red';
 import { sanitize } from '../../../utils/names';
 import add_to_set from '../../utils/add_to_set';
 import get_slot_data from '../../utils/get_slot_data';
+import { is_reserved_keyword } from '../../utils/reserved_keywords';
 import Expression from '../../nodes/shared/Expression';
 import is_dynamic from './shared/is_dynamic';
 import { Identifier, ObjectExpression } from 'estree';
@@ -94,11 +95,7 @@ export default class SlotWrapper extends Wrapper {
 					}
 				});
 
-				const dynamic_dependencies = Array.from(attribute.dependencies).filter(name => {
-					if (this.node.scope.is_let(name)) return true;
-					const variable = renderer.component.var_lookup.get(name);
-					return is_dynamic(variable);
-				});
+				const dynamic_dependencies = Array.from(attribute.dependencies).filter((name) => this.is_dependency_dynamic(name));
 
 				if (dynamic_dependencies.length > 0) {
 					changes.properties.push(p`${attribute.name}: ${renderer.dirty(dynamic_dependencies)}`);
@@ -157,17 +154,10 @@ export default class SlotWrapper extends Wrapper {
 			b`@transition_out(${slot_or_fallback}, #local);`
 		);
 
-		const is_dependency_dynamic = name => {
-			if (name === '$$scope') return true;
-			if (this.node.scope.is_let(name)) return true;
-			const variable = renderer.component.var_lookup.get(name);
-			return is_dynamic(variable);
-		};
-
-		const dynamic_dependencies = Array.from(this.dependencies).filter(is_dependency_dynamic);
+		const dynamic_dependencies = Array.from(this.dependencies).filter((name) => this.is_dependency_dynamic(name));
 
 		const fallback_dynamic_dependencies = has_fallback
-			? Array.from(this.fallback.dependencies).filter(is_dependency_dynamic)
+			? Array.from(this.fallback.dependencies).filter((name) => this.is_dependency_dynamic(name))
 			: [];
 
 		const slot_update = b`
@@ -201,4 +191,12 @@ export default class SlotWrapper extends Wrapper {
 			b`if (${slot_or_fallback}) ${slot_or_fallback}.d(detaching);`
 		);
 	}
+
+	is_dependency_dynamic(name: string) {
+		if (name === '$$scope') return true;
+		if (this.node.scope.is_let(name)) return true;
+		if (is_reserved_keyword(name)) return true;
+		const variable = this.renderer.component.var_lookup.get(name);
+		return is_dynamic(variable);
+	}
 }

test/runtime/samples/props-reactive-slot/Comp.svelte

@@ -0,0 +1 @@
+<slot props={$$props}/>

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

@@ -0,0 +1,21 @@
+export default {
+	html: `
+		<h1>hi</h1>
+		<button>Change</button>
+	`,
+
+	async test({ assert, component, target, window }) {
+		const btn = target.querySelector("button");
+		const clickEvent = new window.MouseEvent("click");
+
+		await btn.dispatchEvent(clickEvent);
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<h1>changed</h1>
+			<button>Change</button>
+		`
+		);
+	},
+};

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

@@ -0,0 +1,13 @@
+<script>
+	import Comp from './Comp.svelte'
+	let p = "hi"
+</script>
+
+<Comp someprop={p} let:props>
+	<h1>
+		{props.someprop}
+	</h1>
+</Comp>
+
+<button on:click={()=> p = "changed"}>Change
+</button>