fix: strip internal properties from rest props during SSR (#13492)

* fix: strip internal properties from rest props during SSR

* address feedback

* update snapshots

* lint

Author: trueadm

.changeset/sour-poems-trade.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: strip internal properties from rest props during SSR

packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js

@@ -25,8 +25,14 @@ export function VariableDeclaration(node, context) {
 			}
 
 			if (rune === '$props') {
+				let has_rest = false;
 				// remove $bindable() from props declaration
-				const id = walk(declarator.id, null, {
+				let id = walk(declarator.id, null, {
+					RestElement(node, context) {
+						if (context.path.at(-1) === declarator.id) {
+							has_rest = true;
+						}
+					},
 					AssignmentPattern(node) {
 						if (
 							node.right.type === 'CallExpression' &&
@@ -39,6 +45,24 @@ export function VariableDeclaration(node, context) {
 						}
 					}
 				});
+				if (id.type === 'ObjectPattern' && has_rest) {
+					// If a rest pattern is used within an object pattern, we need to ensure we don't expose $$slots or $$events
+					id.properties.splice(
+						id.properties.length - 1,
+						0,
+						// @ts-ignore
+						b.prop('init', b.id('$$slots'), b.id('$$slots')),
+						b.prop('init', b.id('$$events'), b.id('$$events'))
+					);
+				} else if (id.type === 'Identifier') {
+					// If $props is referenced as an identifier, we need to ensure we don't expose $$slots or $$events as properties
+					// on the identifier reference
+					id = b.object_pattern([
+						b.prop('init', b.id('$$slots'), b.id('$$slots')),
+						b.prop('init', b.id('$$events'), b.id('$$events')),
+						b.rest(b.id(id.name))
+					]);
+				}
 				declarations.push(
 					b.declarator(/** @type {Pattern} */ (context.visit(id)), b.id('$$props'))
 				);

packages/svelte/tests/migrate/samples/derivations/output.svelte

@@ -8,4 +8,4 @@
 	let { time_16 } = $derived({ time_16: count * 16 })
 </script>
 
-{count} / {doubled} / {quadrupled} / {time_8} / {time_16}
+{count} / {doubled} / {quadrupled} / {time_8} / {time_16}

packages/svelte/tests/migrate/samples/state-and-derivations-sequence/output.svelte

@@ -11,4 +11,4 @@
 <!-- reassign to migrate to state -->
 <button onclick={()=> count++}></button>
 
-{count} / {doubled} / {quadrupled} / {time_8} / {time_16}
+{count} / {doubled} / {quadrupled} / {time_8} / {time_16}

packages/svelte/tests/runtime-runes/samples/props-rest-2/Component.svelte

@@ -0,0 +1,8 @@
+<script>
+	let rest = $props();
+</script>
+<ul>
+	{#each Object.getOwnPropertyNames(rest) as n}
+			<li>{n}</li>
+	{/each}
+</ul>

packages/svelte/tests/runtime-runes/samples/props-rest-2/_config.js

@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: '<ul><li>name</li><li>title</li><li>children</li></ul>'
+});

packages/svelte/tests/runtime-runes/samples/props-rest-2/main.svelte

@@ -0,0 +1,5 @@
+<script>
+	import Component from "./Component.svelte";
+</script>
+
+<Component name="n" title="t">Foo</Component>

packages/svelte/tests/runtime-runes/samples/props-rest/Component.svelte

@@ -0,0 +1,12 @@
+<script>
+	let {
+			children,
+			...rest
+	} = $props();
+</script>
+{@render children?.()}
+<ul>
+	{#each Object.getOwnPropertyNames(rest) as n}
+			<li>{n}</li>
+	{/each}
+</ul>

packages/svelte/tests/runtime-runes/samples/props-rest/_config.js

@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: 'Foo\n<ul><li>name</li><li>title</li></ul>'
+});

packages/svelte/tests/runtime-runes/samples/props-rest/main.svelte

@@ -0,0 +1,5 @@
+<script>
+	import Component from "./Component.svelte";
+</script>
+
+<Component name="n" title="t">Foo</Component>