feat: deprecate svelte:component (#12694)

* feat: deprecate `svelte:component`

Co-authored-by: Oscar Dominguez <dominguez.celada@gmail.com>

* move logic into the visitor

* tweak docs

---------

Co-authored-by: Oscar Dominguez <dominguez.celada@gmail.com>
Co-authored-by: Rich Harris <rich.harris@vercel.com>

.changeset/big-apes-smell.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: deprecate `svelte:component`

packages/svelte/messages/compile-warnings/template.md

@@ -54,6 +54,14 @@ This code will work when the component is rendered on the client (which is why t
 
 > Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead
 
+## svelte_component_deprecated
+
+> `<svelte:component>` is deprecated in runes mode — components are dynamic by default
+
+In previous versions of Svelte, the component constructor was fixed when the component was rendered. In other words, if you wanted `<X>` to re-render when `X` changed, you would either have to use `<svelte:component this={X}>` or put the component inside a `{#key X}...{/key}` block.
+
+In Svelte 5 this is no longer true — if `X` changes, `<X>` re-renders. For more complex expressions like `condition ? Y : Z` you can use a derived value instead.
+
 ## svelte_element_invalid_this
 
 > `this` should be an `{expression}`. Using a string attribute value will cause an error in future versions of Svelte

packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteComponent.js

@@ -1,11 +1,16 @@
 /** @import { SvelteComponent } from '#compiler' */
 /** @import { Context } from '../types' */
+import * as w from '../../../warnings.js';
 import { visit_component } from './shared/component.js';
 
 /**
  * @param {SvelteComponent} node
  * @param {Context} context
  */
 export function SvelteComponent(node, context) {
+	if (context.state.analysis.runes) {
+		w.svelte_component_deprecated(node);
+	}
+
 	visit_component(node, context);
 }

packages/svelte/src/compiler/warnings.js

@@ -117,6 +117,7 @@ export const codes = [
 	"event_directive_deprecated",
 	"node_invalid_placement_ssr",
 	"slot_element_deprecated",
+	"svelte_component_deprecated",
 	"svelte_element_invalid_this"
 ];
 
@@ -767,6 +768,14 @@ export function slot_element_deprecated(node) {
 	w(node, "slot_element_deprecated", "Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead");
 }
 
+/**
+ * `<svelte:component>` is deprecated in runes mode — components are dynamic by default
+ * @param {null | NodeLike} node
+ */
+export function svelte_component_deprecated(node) {
+	w(node, "svelte_component_deprecated", "`<svelte:component>` is deprecated in runes mode — components are dynamic by default");
+}
+
 /**
  * `this` should be an `{expression}`. Using a string attribute value will cause an error in future versions of Svelte
  * @param {null | NodeLike} node

packages/svelte/tests/validator/samples/attribute-quoted/warnings.json

@@ -11,6 +11,18 @@
 			"line": 13
 		}
 	},
+	{
+		"code": "svelte_component_deprecated",
+		"end": {
+			"column": 45,
+			"line": 15
+		},
+		"message": "`<svelte:component>` is deprecated in runes mode — components are dynamic by default",
+		"start": {
+			"column": 0,
+			"line": 15
+		}
+	},
 	{
 		"code": "attribute_quoted",
 		"message": "Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes",

packages/svelte/tests/validator/samples/svelte-component-deprecated/input.svelte

@@ -0,0 +1,7 @@
+<svelte:options runes />
+
+<script>
+	import A from './A.svelte';
+</script>
+
+<svelte:component this={A} />

packages/svelte/tests/validator/samples/svelte-component-deprecated/warnings.json

@@ -0,0 +1,14 @@
+[
+	{
+		"code": "svelte_component_deprecated",
+		"message": "`<svelte:component>` is deprecated in runes mode — components are dynamic by default",
+		"start": {
+			"line": 7,
+			"column": 0
+		},
+		"end": {
+			"line": 7,
+			"column": 29
+		}
+	}
+]