feat: make <svelte:component> unnecessary in runes mode (#12646)

* feat: make `<svelte:component>` unnecessary in runes mode

In Svelte 4, writing `<Component />` meant that the component instance is static. If you made the variable `Component` a reactive state variable and updated the component value, the component would not be reinstantiated with the new value - you had to use `<svelte:component>` for that. One reason was that having a dynamic component was more overhead, which is no longer the case in Svelte 5. We can therefore reduce the potential API surface area (by maybe deprecating `<svelte:component>` in the future) by allowing Svelte to recognize when a component variable is potentially dynamic. It turned out that this was already mostly the case. This PR fixes one case where it wasn't, and fixes another where this was wrongfully applied in legacy mode.

* we already have this function

* add interactive demos

* changeset

---------

Co-authored-by: Rich Harris <[email protected]>

Author: dummdidumm

.changeset/warm-planets-cry.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+feat: make `<svelte:component>` unnecessary in runes mode

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -1551,7 +1551,10 @@ const common_visitors = {
 			node.name.includes('.') ? node.name.slice(0, node.name.indexOf('.')) : node.name
 		);
 
-		node.metadata.dynamic = binding !== null && binding.kind !== 'normal';
+		node.metadata.dynamic =
+			context.state.analysis.runes && // Svelte 4 required you to use svelte:component to switch components
+			binding !== null &&
+			(binding.kind !== 'normal' || node.name.includes('.'));
 	},
 	RenderTag(node, context) {
 		context.next({ ...context.state, render_tag: node });

packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

@@ -933,7 +933,16 @@ function serialize_inline_component(node, component_name, context, anchor = cont
 
 	/** @param {Expression} node_id */
 	let fn = (node_id) => {
-		return b.call(component_name, node_id, props_expression);
+		return b.call(
+			// TODO We can remove this ternary once we remove legacy mode, since in runes mode dynamic components
+			// will be handled separately through the `$.component` function, and then the component name will
+			// always be referenced through just the identifier here.
+			node.type === 'SvelteComponent'
+				? component_name
+				: /** @type {Expression} */ (context.visit(b.member_id(component_name))),
+			node_id,
+			props_expression
+		);
 	};
 
 	if (bind_this !== null) {

packages/svelte/tests/runtime-runes/samples/dynamic-component/Component1.svelte

@@ -0,0 +1 @@
+Component1

packages/svelte/tests/runtime-runes/samples/dynamic-component/Component2.svelte

@@ -0,0 +1 @@
+Component2

packages/svelte/tests/runtime-runes/samples/dynamic-component/_config.js

@@ -0,0 +1,14 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	html: '<button>switch</button> Component1 Component1',
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, '<button>switch</button> Component2 Component2');
+	}
+});

packages/svelte/tests/runtime-runes/samples/dynamic-component/main.svelte

@@ -0,0 +1,16 @@
+<script>
+	import Component1 from './Component1.svelte';
+	import Component2 from './Component2.svelte';
+
+	let Component = $state(Component1);
+	let Object = {
+		get component() {
+			return Component;
+		}
+	};
+</script>
+
+<button onclick={() => (Component = Component2)}>switch</button>
+
+<Component />
+<Object.component />