feat: add ignorePropertyPatterns property and rename ignorePatterns to ignoreTypePatterns in no-unused-props rule

Author: baseballyama

.changeset/crazy-peas-laugh.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-svelte': minor
+---
+
+feat: add `ignorePropertyPatterns` property and rename `ignorePatterns` to `ignoreTypePatterns` in `no-unused-props` rule

docs/rules/no-unused-props.md

@@ -159,14 +159,17 @@ Note: Properties of class types are not checked for usage, as they might be used
   "svelte/no-unused-props": ["error", {
     // Whether to check properties from imported types
     "checkImportedTypes": false,
+    // Patterns to ignore when checking property types
+    "ignoreTypePatterns": [],
     // Patterns to ignore when checking for unused props
-    "ignorePatterns": []
+    "ignorePropertyPatterns": ["/^[#$@_~]/"],
   }]
 }
 ```
 
 - `checkImportedTypes` ... Controls whether to check properties from imported types. Default is `false`.
-- `ignorePatterns` ... Patterns to ignore when checking for unused props. Default is an empty array.
+- `ignoreTypePatterns` ... Patterns to ignore when checking property types. Default is `[]`.
+- `ignorePropertyPatterns` ... Patterns to ignore when checking for unused props. Default is `/["^[#$@_~]"]/`, which ignores properties starting with special characters often used for internal or framework-specific identifiers.
 
 Examples:
 
@@ -187,10 +190,28 @@ Examples:
 ```svelte
 <!-- ✓ Good Examples -->
 <script lang="ts">
-  /* eslint svelte/no-unused-props: ["error", { "ignorePatterns": ["^_"] }] */
-  // Ignore properties starting with underscore
+  /* eslint svelte/no-unused-props: ["error", { "ignoreTypePatterns": ["/^Internal/"] }] */
+  // Ignore properties from types matching the pattern
+  interface InternalConfig {
+    secretKey: string;
+    debugMode: boolean;
+  }
+  interface Props {
+    config: InternalConfig; // Properties of InternalConfig won't be checked
+    value: number;
+  }
+  let { config, value }: Props = $props();
+  console.log(value, config);
+</script>
+```
+
+```svelte
+<!-- ✓ Good Examples -->
+<script lang="ts">
+  /* eslint svelte/no-unused-props: ["error", { "ignorePropertyPatterns": ["/^_/"] }] */
+  // Ignore properties with names matching the pattern
   interface Props {
-    _internal: string;
+    _internal: string; // This prop won't be reported even if unused
     value: number;
   }
   let { value }: Props = $props();

packages/eslint-plugin-svelte/src/rule-types.ts

@@ -535,7 +535,8 @@ type SvelteNoUnusedClassName = []|[{
 // ----- svelte/no-unused-props -----
 type SvelteNoUnusedProps = []|[{
   checkImportedTypes?: boolean
-  ignorePatterns?: string[]
+  ignoreTypePatterns?: string[]
+  ignorePropertyPatterns?: string[]
 }]
 // ----- svelte/no-useless-mustaches -----
 type SvelteNoUselessMustaches = []|[{

packages/eslint-plugin-svelte/src/rules/no-unused-props.ts

@@ -8,6 +8,8 @@ import { getFilename } from '../utils/compat.js';
 
 type PropertyPath = string[];
 
+let isDeprecationWarningShown = false;
+
 export default createRule('no-unused-props', {
 	meta: {
 		docs: {
@@ -23,12 +25,21 @@ export default createRule('no-unused-props', {
 						type: 'boolean',
 						default: false
 					},
-					ignorePatterns: {
+					ignoreTypePatterns: {
 						type: 'array',
 						items: {
 							type: 'string'
 						},
 						default: []
+					},
+					ignorePropertyPatterns: {
+						type: 'array',
+						items: {
+							type: 'string'
+						},
+						// For example, valibot generates symbol like `__@BrandSymbol@1167`.
+						// So, we ignore properties starting with special characters often used for internal or framework-specific identifiers.
+						default: ['^[#$@_~]']
 					}
 				},
 				additionalProperties: false
@@ -61,6 +72,17 @@ export default createRule('no-unused-props', {
 		}
 
 		const options = context.options[0] ?? {};
+
+		// TODO: Remove in v4
+		// MEMO: `ignorePatterns` was a property that only existed from v3.2.0 to v3.2.1.
+		// From v3.3.0, it was replaced with `ignorePropertyPatterns` and `ignoreTypePatterns`.
+		if (options.ignorePatterns != null && !isDeprecationWarningShown) {
+			console.warn(
+				'eslint-plugin-svelte: The `ignorePatterns` option in the `no-unused-props` rule has been deprecated. Please use `ignorePropertyPatterns` and `ignoreTypePatterns` instead.'
+			);
+			isDeprecationWarningShown = true;
+		}
+
 		const checkImportedTypes = options.checkImportedTypes ?? false;
 		const ignorePatterns = (options.ignorePatterns ?? []).map((p: string | RegExp) => {
 			if (typeof p === 'string') {
@@ -69,15 +91,39 @@ export default createRule('no-unused-props', {
 			return p;
 		});
 
-		function shouldIgnore(name: string): boolean {
-			return ignorePatterns.some((pattern: RegExp) => pattern.test(name));
+		const ignoreTypePatterns = [
+			...ignorePatterns,
+			...(options.ignoreTypePatterns ?? []).map((p: string | RegExp) => {
+				if (typeof p === 'string') {
+					return toRegExp(p);
+				}
+				return p;
+			})
+		];
+
+		const ignorePropertyPatterns = [
+			...ignorePatterns,
+			...(options.ignorePropertyPatterns ?? [/^[#$@_~]/]).map((p: string | RegExp) => {
+				if (typeof p === 'string') {
+					return toRegExp(p);
+				}
+				return p;
+			})
+		];
+
+		function shouldIgnoreProperty(name: string): boolean {
+			return ignorePropertyPatterns.some((pattern: RegExp) => pattern.test(name));
 		}
 
 		function shouldIgnoreType(type: ts.Type): boolean {
+			function isMatched(name: string): boolean {
+				return ignoreTypePatterns.some((pattern: RegExp) => pattern.test(name));
+			}
+
 			const typeStr = typeChecker.typeToString(type);
 			const symbol = type.getSymbol();
 			const symbolName = symbol?.getName();
-			return shouldIgnore(typeStr) || (symbolName ? shouldIgnore(symbolName) : false);
+			return isMatched(typeStr) || (symbolName ? isMatched(symbolName) : false);
 		}
 
 		function isExternalType(type: ts.Type): boolean {
@@ -227,6 +273,8 @@ export default createRule('no-unused-props', {
 				if (isBuiltInProperty(prop)) continue;
 
 				const propName = prop.getName();
+				if (shouldIgnoreProperty(propName)) continue;
+
 				const currentPath = [...parentPath, propName];
 				const currentPathStr = [...parentPath, propName].join('.');
 

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/invalid/ignore-property-patterns-custom-config.json

@@ -0,0 +1,7 @@
+{
+	"options": [
+		{
+			"ignorePropertyPatterns": ["^foo$"]
+		}
+	]
+}

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/invalid/ignore-property-patterns-custom-errors.yaml

@@ -0,0 +1,8 @@
+- message: "'foo' is an unused Props property."
+  line: 8
+  column: 8
+  suggestions: null
+- message: "'_foo' is an unused Props property."
+  line: 8
+  column: 8
+  suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/invalid/ignore-property-patterns-custom-input.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	interface Props {
+		foo: string;
+		_foo: string;
+		bar: string;
+	}
+
+	const { bar }: Props = $props();
+</script>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/invalid/ignored-pattern-partial-config.json

@@ -0,0 +1,7 @@
+{
+	"options": [
+		{
+			"ignoreTypePatterns": [".*DTO$"]
+		}
+	]
+}

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/invalid/ignored-type-patterns-custom-config.json

@@ -1,6 +1,4 @@
 - message: "'name' is an unused Props property."
   line: 6
   column: 6
-  endLine: 6
-  endColumn: 20
   suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/invalid/ignored-pattern-partial-errors.yaml renamed to packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/invalid/ignored-type-patterns-custom-errors.yaml

@@ -0,0 +1,7 @@
+{
+	"options": [
+		{
+			"ignorePropertyPatterns": ["/^foo$/"]
+		}
+	]
+}

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/invalid/ignored-pattern-partial-input.svelte renamed to packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/invalid/ignored-type-patterns-custom-input.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	interface Props {
+		foo: string;
+		bar: string;
+	}
+
+	const { bar }: Props = $props();
+</script>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/invalid/imported-type-check-errors.yaml

@@ -0,0 +1,13 @@
+<script lang="ts">
+	interface Props {
+		_internal: string;
+		$store: boolean;
+		'@decorator': string;
+		'#private': number;
+		'~tilde': boolean;
+		normalUsed: string;
+	}
+
+	const { normalUsed }: Props = $props();
+	console.log(normalUsed);
+</script>

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/valid/ignore-property-patterns-custom-config.json

@@ -0,0 +1,7 @@
+{
+	"options": [
+		{
+			"ignoreTypePatterns": ["/^Conditional/"]
+		}
+	]
+}

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/valid/ignore-property-patterns-custom-input.svelte

@@ -0,0 +1,7 @@
+{
+	"options": [
+		{
+			"ignoreTypePatterns": ["/^Internal/"]
+		}
+	]
+}

packages/eslint-plugin-svelte/tests/fixtures/rules/no-unused-props/valid/ignore-property-patterns-default-input.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	interface InternalConfig {
+		secretKey: string;
+		debugMode: boolean;
+	}
+	interface Props {
+		config: InternalConfig;
+		value: number;
+	}
+	let { config, value }: Props = $props();
+	console.log(value, config);
+</script>