feat: support Svelte5 of valid-prop-names-in-kit-pages rule (#963)

Author: baseballyama

.changeset/sixty-news-look.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-svelte': minor
+---
+
+feat: support Svelte5 of `valid-prop-names-in-kit-pages` rule

packages/eslint-plugin-svelte/src/rules/valid-prop-names-in-kit-pages.ts

@@ -2,9 +2,27 @@ import type { AST } from 'svelte-eslint-parser';
 import type { TSESTree } from '@typescript-eslint/types';
 import { createRule } from '../utils/index.js';
 import { isKitPageComponent } from '../utils/svelte-kit.js';
+import type { RuleContext } from '../types.js';
 
 const EXPECTED_PROP_NAMES = ['data', 'errors', 'form', 'snapshot'];
 
+function checkProp(node: TSESTree.VariableDeclarator, context: RuleContext) {
+	if (node.id.type !== 'ObjectPattern') return;
+	for (const p of node.id.properties) {
+		if (
+			p.type === 'Property' &&
+			p.value.type === 'Identifier' &&
+			!EXPECTED_PROP_NAMES.includes(p.value.name)
+		) {
+			context.report({
+				node: p.value,
+				loc: p.value.loc,
+				messageId: 'unexpected'
+			});
+		}
+	}
+}
+
 export default createRule('valid-prop-names-in-kit-pages', {
 	meta: {
 		docs: {
@@ -39,6 +57,7 @@ export default createRule('valid-prop-names-in-kit-pages', {
 				isScript = false;
 			},
 
+			// Svelte3,4
 			'ExportNamedDeclaration > VariableDeclaration > VariableDeclarator': (
 				node: TSESTree.VariableDeclarator
 			) => {
@@ -57,20 +76,22 @@ export default createRule('valid-prop-names-in-kit-pages', {
 				}
 
 				// export let { xxx, yyy } = zzz
-				if (node.id.type !== 'ObjectPattern') return;
-				for (const p of node.id.properties) {
-					if (
-						p.type === 'Property' &&
-						p.value.type === 'Identifier' &&
-						!EXPECTED_PROP_NAMES.includes(p.value.name)
-					) {
-						context.report({
-							node: p.value,
-							loc: p.value.loc,
-							messageId: 'unexpected'
-						});
-					}
+				checkProp(node, context);
+			},
+
+			// Svelte5
+			// let { foo, bar } = $props();
+			'VariableDeclaration > VariableDeclarator': (node: TSESTree.VariableDeclarator) => {
+				if (!isScript) return;
+				if (
+					node.init?.type !== 'CallExpression' ||
+					node.init.callee?.type !== 'Identifier' ||
+					node.init.callee?.name !== '$props'
+				) {
+					return;
 				}
+
+				checkProp(node, context);
 			}
 		};
 	}

packages/eslint-plugin-svelte/tests/fixtures/rules/valid-prop-names-in-kit-pages/invalid/svelte5/+svelte5-test001-errors.yaml

@@ -0,0 +1,8 @@
+- message: disallow props other than data or errors in SvelteKit page components.
+  line: 2
+  column: 8
+  suggestions: null
+- message: disallow props other than data or errors in SvelteKit page components.
+  line: 2
+  column: 13
+  suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/valid-prop-names-in-kit-pages/invalid/svelte5/+svelte5-test001-input.svelte

@@ -0,0 +1,5 @@
+<script>
+	let { foo, bar } = $props();
+</script>
+
+{foo}, {bar}

packages/eslint-plugin-svelte/tests/fixtures/rules/valid-prop-names-in-kit-pages/invalid/svelte5/+svelte5-test001-requirements.json

@@ -0,0 +1,3 @@
+{
+	"svelte": ">=5.0.0-0"
+}

packages/eslint-plugin-svelte/tests/fixtures/rules/valid-prop-names-in-kit-pages/invalid/svelte5/_config.json

@@ -0,0 +1,13 @@
+{
+	"languageOptions": {
+		"parserOptions": {
+			"svelteConfig": {
+				"kit": {
+					"files": {
+						"routes": "tests/fixtures/rules/valid-prop-names-in-kit-pages/invalid/svelte5"
+					}
+				}
+			}
+		}
+	}
+}

packages/eslint-plugin-svelte/tests/fixtures/rules/valid-prop-names-in-kit-pages/valid/not-page/svelte5/test01-input.svelte

@@ -0,0 +1,5 @@
+<script>
+	let { data, errors, foo, bar } = $props();
+</script>
+
+{data}, {errors}, {foo}, {bar}

packages/eslint-plugin-svelte/tests/fixtures/rules/valid-prop-names-in-kit-pages/valid/not-page/svelte5/test01-requirements.json

@@ -0,0 +1,3 @@
+{
+	"svelte": ">=5.0.0-0"
+}

packages/eslint-plugin-svelte/tests/fixtures/rules/valid-prop-names-in-kit-pages/valid/svelte5/+test001-input.svelte

@@ -0,0 +1,21 @@
+<script>
+	let { data, errors, form } = $props();
+
+	let comment = '';
+
+	export const snapshot = {
+		capture: () => comment,
+		restore: (value) => (comment = value)
+	};
+</script>
+
+{data}, {errors}
+
+{#if form?.success}
+	<p>Successfully logged in! Welcome back, {data.user.name}</p>
+{/if}
+
+<form method="POST">
+	<textarea bind:value={comment} />
+	<button>Post comment</button>
+</form>

packages/eslint-plugin-svelte/tests/fixtures/rules/valid-prop-names-in-kit-pages/valid/svelte5/+test001-requirements.json

@@ -0,0 +1,3 @@
+{
+	"svelte": ">=5.0.0-0"
+}