fix: $$props messing with $$slots

Author: paoloricciuti

packages/svelte/src/compiler/migrate/index.js

@@ -741,11 +741,15 @@ const template = {
 			state.str.update(
 				node.start,
 				node.fragment.nodes[0].start,
-				`{#if ${name}}{@render ${name}(${slot_props})}{:else}`
+				`{#if ${name}}{@render ${state.analysis.uses_props ? `${state.names.props}.` : ''}${name}(${slot_props})}{:else}`
 			);
 			state.str.update(node.fragment.nodes[node.fragment.nodes.length - 1].end, node.end, '{/if}');
 		} else {
-			state.str.update(node.start, node.end, `{@render ${name}?.(${slot_props})}`);
+			state.str.update(
+				node.start,
+				node.end,
+				`{@render ${state.analysis.uses_props ? `${state.names.props}.` : ''}${name}?.(${slot_props})}`
+			);
 		}
 	},
 	Comment(node, { state }) {
@@ -939,7 +943,9 @@ function handle_identifier(node, state, path) {
 	const parent = path.at(-1);
 	if (parent?.type === 'MemberExpression' && parent.property === node) return;
 
-	if (state.analysis.uses_props) {
+	console.log(node);
+
+	if (state.analysis.uses_props && node.name !== '$$slots') {
 		if (node.name === '$$props' || node.name === '$$restProps') {
 			// not 100% correct for $$restProps but it'll do
 			state.str.update(
@@ -991,7 +997,11 @@ function handle_identifier(node, state, path) {
 				});
 			}
 
-			state.str.update(/** @type {number} */ (node.start), parent.property.start, '');
+			state.str.update(
+				/** @type {number} */ (node.start),
+				parent.property.start,
+				state.analysis.uses_props ? `${state.names.props}.` : ''
+			);
 			state.str.update(parent.property.start, parent.end, name);
 		}
 		// else passed as identifier, we don't know what to do here, so let it error

packages/svelte/tests/migrate/samples/slots-with-$$props/input.svelte

@@ -0,0 +1,20 @@
+<button><slot /></button>
+
+{#if foo}
+	<slot name="foo" {foo} />
+{/if}
+
+{#if $$slots.bar}
+	{$$slots}
+	<slot name="bar" />
+{/if}
+
+{#if $$slots.default}foo{/if}
+
+{#if $$slots['default']}foo{/if}
+
+{#if $$slots['dashed-name']}foo{/if}
+
+<slot name="dashed-name" />
+
+<slot header="something" title={$$props.cool} {id} />

packages/svelte/tests/migrate/samples/slots-with-$$props/output.svelte

@@ -0,0 +1,27 @@
+<script>
+	/** @type {Record<string, any>} */
+	let {
+		...props
+	} = $props();
+</script>
+
+<button>{@render props.children?.()}</button>
+
+{#if foo}
+	{@render props.foo_1?.({ foo, })}
+{/if}
+
+{#if props.bar}
+	{$$slots}
+	{@render props.bar?.()}
+{/if}
+
+{#if props.children}foo{/if}
+
+{#if props.children}foo{/if}
+
+{#if props.dashed_name}foo{/if}
+
+{@render props.dashed_name?.()}
+
+{@render props.children?.({ header: "something", title: props.cool, id, })}