Fix svelte:component props are not properly updated when there are spread props

.changeset/popular-wombats-try.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: properly update `svelte:component` props when there are spread props

packages/svelte/src/compiler/compile/render_dom/wrappers/InlineComponent/index.js

@@ -277,14 +277,13 @@ export default class InlineComponentWrapper extends Wrapper {
 						// statements will become switch_props function body
 						// rewrite last statement, add props update logic
 						statements[statements.length - 1] = b`
+							for (let #i = 0; #i < ${levels}.length; #i += 1) {
+								${props} = @assign(${props}, ${levels}[#i]);
+							}
 							if (#dirty !== undefined && ${condition}) {
-								${props} = @get_spread_update(${levels}, [
+								${props} = @assign(${props}, @get_spread_update(${levels}, [
 									${changes}
-								]);
-							} else {
-								for (let #i = 0; #i < ${levels}.length; #i += 1) {
-									${props} = @assign(${props}, ${levels}[#i]);
-								}
+								]));
 							}
 						`;
 					}

packages/svelte/test/runtime/samples/dynamic-component-spread-props/Comp1.svelte

@@ -1,5 +1,9 @@
 <script>
   export let value;
+  export let foo;
+  export let cb;
 </script>
 
 <p>value(1) = {value}</p>
+<p>foo={foo}</p>
+<p>typeof cb={typeof cb}</p>

packages/svelte/test/runtime/samples/dynamic-component-spread-props/Comp2.svelte

@@ -1,5 +1,9 @@
 <script>
   export let value;
+  export let foo;
+  export let cb;
 </script>
 
 <p>value(2) = {value}</p>
+<p>foo={foo}</p>
+<p>typeof cb={typeof cb}</p>

packages/svelte/test/runtime/samples/dynamic-component-spread-props/_config.js

@@ -1,6 +1,8 @@
 export default {
 	html: `
 		<p>value(1) = 1</p>
+		<p>foo=bar</p>
+		<p>typeof cb=function</p>
 		<button>Toggle Component</button>
 	`,
 
@@ -11,6 +13,8 @@ export default {
 			target.innerHTML,
 			`
 				<p>value(2) = 2</p>
+				<p>foo=bar</p>
+				<p>typeof cb=function</p>
 				<button>Toggle Component</button>
 			`
 		);
@@ -19,6 +23,8 @@ export default {
 			target.innerHTML,
 			`
 				<p>value(1) = 1</p>
+				<p>foo=bar</p>
+				<p>typeof cb=function</p>
 				<button>Toggle Component</button>
 			`
 		);

packages/svelte/test/runtime/samples/dynamic-component-spread-props/main.svelte

@@ -5,8 +5,10 @@
 	let view = Comp1;
 
 	$: props = view === Comp1 ? { value: 1 } : { value: 2 };
+	const bar = "bar";
+	function cb() {}
 </script>
 
-<svelte:component this={view} {...props} />
+<svelte:component this={view} {...props} foo={bar} {cb} />
 
 <button on:click={(e) => (view = view === Comp1 ? Comp2 : Comp1)}>Toggle Component</button>