feat: deprecate `<svelte:self>` in runes mode (#13333)

* feat: deprecate `<svelte:self>` in runes mode

* fix

.changeset/old-spoons-pull.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: deprecate `<svelte:self>` in runes mode

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

@@ -97,3 +97,7 @@ A derived value may be used in other contexts:
 ## svelte_element_invalid_this
 
 > `this` should be an `{expression}`. Using a string attribute value will cause an error in future versions of Svelte
+
+## svelte_self_deprecated
+
+> `<svelte:self>` is deprecated — use self-imports (e.g. `import %name% from './%basename%'`) instead

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

@@ -2,6 +2,8 @@
 /** @import { Context } from '../types' */
 import { visit_component } from './shared/component.js';
 import * as e from '../../../errors.js';
+import * as w from '../../../warnings.js';
+import { filename } from '../../../state.js';
 
 /**
  * @param {AST.SvelteSelf} node
@@ -20,5 +22,15 @@ export function SvelteSelf(node, context) {
 		e.svelte_self_invalid_placement(node);
 	}
 
+	if (context.state.analysis.runes) {
+		const name = filename === '(unknown)' ? 'Self' : context.state.analysis.name;
+		const basename =
+			filename === '(unknown)'
+				? 'Self.svelte'
+				: /** @type {string} */ (filename.split(/[/\\]/).pop());
+
+		w.svelte_self_deprecated(node, name, basename);
+	}
+
 	visit_component(node, context);
 }

packages/svelte/src/compiler/warnings.js

@@ -121,7 +121,8 @@ export const codes = [
 	"script_unknown_attribute",
 	"slot_element_deprecated",
 	"svelte_component_deprecated",
-	"svelte_element_invalid_this"
+	"svelte_element_invalid_this",
+	"svelte_self_deprecated"
 ];
 
 /**
@@ -810,3 +811,13 @@ export function svelte_component_deprecated(node) {
 export function svelte_element_invalid_this(node) {
 	w(node, "svelte_element_invalid_this", "`this` should be an `{expression}`. Using a string attribute value will cause an error in future versions of Svelte");
 }
+
+/**
+ * `<svelte:self>` is deprecated — use self-imports (e.g. `import %name% from './%basename%'`) instead
+ * @param {null | NodeLike} node
+ * @param {string} name
+ * @param {string} basename
+ */
+export function svelte_self_deprecated(node, name, basename) {
+	w(node, "svelte_self_deprecated", `\`<svelte:self>\` is deprecated — use self-imports (e.g. \`import ${name} from './${basename}'\`) instead`);
+}

packages/svelte/tests/validator/samples/attribute-quoted/input.svelte

@@ -15,6 +15,7 @@
 <svelte:component this={foo} class="{foo}" />
 <!-- prettier-ignore -->
 {#if foo}
+	<!-- svelte-ignore svelte_self_deprecated -->
 	<svelte:self class="{foo}" />
 {/if}
 <!-- prettier-ignore -->

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

@@ -40,11 +40,11 @@
 		"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",
 		"start": {
 			"column": 14,
-			"line": 18
+			"line": 19
 		},
 		"end": {
 			"column": 27,
-			"line": 18
+			"line": 19
 		}
 	},
 	{
@@ -52,11 +52,11 @@
 		"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",
 		"start": {
 			"column": 16,
-			"line": 21
+			"line": 22
 		},
 		"end": {
 			"column": 29,
-			"line": 21
+			"line": 22
 		}
 	}
 ]

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

@@ -0,0 +1,10 @@
+<script>
+	let { n = 5 } = $props();
+</script>
+
+{#if n === 0}
+	<p>lift-off!</p>
+{:else}
+	<p>{n}</p>
+	<svelte:self n={n - 1} />
+{/if}

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

@@ -0,0 +1,14 @@
+[
+	{
+		"code": "svelte_self_deprecated",
+		"message": "`<svelte:self>` is deprecated — use self-imports (e.g. `import Self from './Self.svelte'`) instead",
+		"start": {
+			"line": 9,
+			"column": 1
+		},
+		"end": {
+			"line": 9,
+			"column": 26
+		}
+	}
+]