feat: add support for {@const} inside snippet block (#9904)

* check for snippet block

* change the error msg

* edit tests

* changeset

* test

Author: navorite

.changeset/chatty-cups-drop.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: add support for `{@const}` inside snippet block

packages/svelte/src/compiler/errors.js

@@ -333,7 +333,7 @@ const compiler_options = {
 /** @satisfies {Errors} */
 const const_tag = {
 	'invalid-const-placement': () =>
-		`{@const} must be the immediate child of {#if}, {:else if}, {:else}, {#each}, {:then}, {:catch}, <svelte:fragment> or <Component>`
+		`{@const} must be the immediate child of {#snippet}, {#if}, {:else if}, {:else}, {#each}, {:then}, {:catch}, <svelte:fragment> or <Component>`
 };
 
 /** @satisfies {Errors} */

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

@@ -476,6 +476,7 @@ export const validation = {
 				grand_parent?.type !== 'SvelteComponent' &&
 				grand_parent?.type !== 'EachBlock' &&
 				grand_parent?.type !== 'AwaitBlock' &&
+				grand_parent?.type !== 'SnippetBlock' &&
 				((grand_parent?.type !== 'RegularElement' && grand_parent?.type !== 'SvelteElement') ||
 					!grand_parent.attributes.some((a) => a.type === 'Attribute' && a.name === 'slot')))
 		) {

packages/svelte/tests/runtime-runes/samples/snippet-const/_config.js

@@ -0,0 +1,16 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<button>0</button>`,
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		assert.htmlEqual(target.innerHTML, '<button>0</button>');
+
+		await btn?.click();
+		assert.htmlEqual(target.innerHTML, '<button>2</button>');
+
+		await btn?.click();
+		assert.htmlEqual(target.innerHTML, '<button>4</button>');
+	}
+});

packages/svelte/tests/runtime-runes/samples/snippet-const/main.svelte

@@ -0,0 +1,10 @@
+<script>
+  let count = $state(0);
+</script>
+
+{#snippet counter()}
+  {@const doubled = count * 2}
+  <button on:click={() => (count += 1)}>{doubled}</button>
+{/snippet}
+
+{@render counter()}

packages/svelte/tests/validator/samples/const-tag-placement-1/errors.json

@@ -1,7 +1,7 @@
 [
 	{
 		"code": "invalid-const-placement",
-		"message": "{@const} must be the immediate child of {#if}, {:else if}, {:else}, {#each}, {:then}, {:catch}, <svelte:fragment> or <Component>",
+		"message": "{@const} must be the immediate child of {#snippet}, {#if}, {:else if}, {:else}, {#each}, {:then}, {:catch}, <svelte:fragment> or <Component>",
 		"start": { "line": 5, "column": 0 },
 		"end": { "line": 5, "column": 18 }
 	}

packages/svelte/tests/validator/samples/const-tag-placement-2/errors.json

@@ -1,7 +1,7 @@
 [
 	{
 		"code": "invalid-const-placement",
-		"message": "{@const} must be the immediate child of {#if}, {:else if}, {:else}, {#each}, {:then}, {:catch}, <svelte:fragment> or <Component>",
+		"message": "{@const} must be the immediate child of {#snippet}, {#if}, {:else if}, {:else}, {#each}, {:then}, {:catch}, <svelte:fragment> or <Component>",
 		"start": { "line": 7, "column": 4 },
 		"end": { "line": 7, "column": 18 }
 	}