fix: `svelte:component` spread props change not picked up (#9006)

fix #9003, amend #8946 (comment)

.changeset/heavy-wasps-give.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: `svelte:component` spread props change not picked up

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

@@ -268,6 +268,21 @@ export default class InlineComponentWrapper extends Wrapper {
 				`);
 				if (all_dependencies.size) {
 					const condition = renderer.dirty(Array.from(all_dependencies));
+					if (this.node.name === 'svelte:component') {
+						// statements will become switch_props function body
+						// rewrite last statement, add props update logic
+						statements[statements.length - 1] = b`
+							if (#dirty !== undefined && ${condition}) {
+								${props} = @get_spread_update(${levels}, [
+									${changes}
+								]);
+							} else {
+								for (let #i = 0; #i < ${levels}.length; #i += 1) {
+									${props} = @assign(${props}, ${levels}[#i]);
+								}
+							}
+						`;
+					}
 					updates.push(b`
 						const ${name_changes} = ${condition} ? @get_spread_update(${levels}, [
 							${changes}
@@ -396,7 +411,7 @@ export default class InlineComponentWrapper extends Wrapper {
 			block.chunks.init.push(b`
 				var ${switch_value} = ${snippet};
 
-				function ${switch_props}(#ctx) {
+				function ${switch_props}(#ctx, #dirty) {
 					${
 						(this.node.attributes.length > 0 || this.node.bindings.length > 0) &&
 						b`
@@ -464,7 +479,7 @@ export default class InlineComponentWrapper extends Wrapper {
 
 					if (${switch_value}) {
 						${update_insert}
-						${name} = @construct_svelte_component(${switch_value}, ${switch_props}(#ctx));
+						${name} = @construct_svelte_component(${switch_value}, ${switch_props}(#ctx, #dirty));
 
 						${munged_bindings}
 						${munged_handlers}

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

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

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

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

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

@@ -0,0 +1,26 @@
+export default {
+	html: `
+		<p>value(1) = 1</p>
+		<button>Toggle Component</button>
+	`,
+
+	async test({ assert, window, target }) {
+		const button = target.querySelector('button');
+		await button.dispatchEvent(new window.Event('click'));
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>value(2) = 2</p>
+				<button>Toggle Component</button>
+			`
+		);
+		await button.dispatchEvent(new window.Event('click'));
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>value(1) = 1</p>
+				<button>Toggle Component</button>
+			`
+		);
+	}
+};

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

@@ -0,0 +1,12 @@
+<script>
+	import Comp1 from './Comp1.svelte';
+	import Comp2 from './Comp2.svelte';
+
+	let view = Comp1;
+
+	$: props = view === Comp1 ? { value: 1 } : { value: 2 };
+</script>
+
+<svelte:component this={view} {...props} />
+
+<button on:click={(e) => (view = view === Comp1 ? Comp2 : Comp1)}>Toggle Component</button>