fix: svelte:component evaluates props once (#8946)

Fixes #6634

Author: ngtr6788

.changeset/clever-ghosts-laugh.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure `svelte:component` evaluates props once

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

@@ -436,11 +436,6 @@ export default class InlineComponentWrapper extends Wrapper {
 					b`if (${name}) @claim_component(${name}.$$.fragment, ${claim_nodes});`
 				);
 			}
-			if (updates.length) {
-				block.chunks.update.push(b`
-					${updates}
-				`);
-			}
 			const tmp_anchor = this.get_or_create_anchor(block, parent_node, parent_nodes);
 			const anchor = has_css_custom_properties ? 'null' : tmp_anchor;
 			const update_mount_node = has_css_custom_properties
@@ -481,6 +476,7 @@ export default class InlineComponentWrapper extends Wrapper {
 						${name} = null;
 					}
 				} else if (${switch_value}) {
+					${updates}
 					${updates.length > 0 && b`${name}.$set(${name_changes});`}
 				}
 			`);

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

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

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

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

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

@@ -0,0 +1,28 @@
+export default {
+	html: `
+		<p>value(1) = 1</p>
+		<button>Toggle Component</button>
+	`,
+
+	async test({ assert, component, 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>
+			`
+		);
+		assert.equal(component.n, 2);
+		await button.dispatchEvent(new window.Event('click'));
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<p>value(1) = 3</p>
+				<button>Toggle Component</button>
+			`
+		);
+		assert.equal(component.n, 3);
+	}
+};

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

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