feat: deprecate `svelte:component`

Co-authored-by: Oscar Dominguez <dominguez.celada@gmail.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,10 @@ 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` has been deprecated, you can just render the component with `<Component />`
+
 ## 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/shared/component.js

@@ -1,6 +1,7 @@
-/** @import { Component, SvelteComponent, SvelteSelf } from '#compiler' */
+/** @import { Attribute, Component, SvelteComponent, SvelteSelf } from '#compiler' */
 /** @import { Context } from '../../types' */
 import * as e from '../../../../errors.js';
+import * as w from '../../../../warnings.js';
 import { get_attribute_expression, is_expression_attribute } from '../../../../utils/ast.js';
 import {
 	validate_attribute,
@@ -13,6 +14,10 @@ import {
  * @param {Context} context
  */
 export function visit_component(node, context) {
+	if (context.state.analysis.runes && node.type === 'SvelteComponent') {
+		w.svelte_component_deprecated(node);
+	}
+
 	for (const attribute of node.attributes) {
 		if (
 			attribute.type !== 'Attribute' &&

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` has been deprecated, you can just render the component with `<Component />`
+ * @param {null | NodeLike} node
+ */
+export function svelte_component_deprecated(node) {
+	w(node, "svelte_component_deprecated", "`svelte:component` has been deprecated, you can just render the component with `<Component />`");
+}
+
 /**
  * `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` has been deprecated, you can just render the component with `<Component />`",
+		"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` has been deprecated, you can just render the component with `<Component />`",
+		"start": {
+			"line": 7,
+			"column": 0
+		},
+		"end": {
+			"line": 7,
+			"column": 29
+		}
+	}
+]