feat: support warningFilter in valid-compile rule (#984)

Author: baseballyama

.changeset/great-turkeys-hang.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-svelte': minor
+---
+
+feat: support `warningFilter` in `valid-compile` rule

docs/rules/valid-compile.md

@@ -35,7 +35,7 @@ Note that we exclude reports for some checks, such as `missing-declaration`, and
 
 ### Using `svelte.config.js`
 
-If you want to suppress messages using [`onwarn` like `vite-plugin-svelte`](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#onwarn), Use `eslint.config.js` and specify the information in `svelte.config.js` in your parser configuration.
+If you want to suppress messages using [`warningFilter`](https://svelte.dev/docs/svelte/svelte-compiler#ModuleCompileOptions) or `onwarn` like [`vite-plugin-svelte`](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#onwarn), Use `eslint.config.js` and specify the information in `svelte.config.js` in your parser configuration.
 
 ```js
 import svelteConfig from './svelte.config.js';
@@ -54,9 +54,26 @@ export default [
 
 See also [User Guide > Specify `svelte.config.js`](../user-guide.md#specify-svelte-config-js)
 
+#### warningFilter
+
+This rule can use [`warningFilter`](https://svelte.dev/docs/svelte/svelte-compiler#ModuleCompileOptions).
+
+Example:
+
+```js
+// svelte.config.js
+export default {
+  warningFilter: (warning) => {
+    if (warning.code === 'a11y-distracting-elements') return false;
+    if (warning.code === 'a11y_distracting_elements') return false; // for Svelte v5
+    return true;
+  }
+};
+```
+
 #### onwarn
 
-This rule can use [`onwarn` like `vite-plugin-svelte`](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#onwarn).
+This rule can use `onwarn` like [`vite-plugin-svelte`](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#onwarn).
 
 Example:
 

packages/eslint-plugin-svelte/src/rules/valid-compile.ts

@@ -55,16 +55,22 @@ export default createRule('valid-compile', {
 		if (!sourceCode.parserServices.isSvelte) {
 			return {};
 		}
-		const onwarn = sourceCode.parserServices.svelteParseContext?.svelteConfig?.onwarn;
+		const { onwarn, warningFilter } =
+			sourceCode.parserServices.svelteParseContext?.svelteConfig ?? {};
 
-		const transform: (warning: Warning) => Warning | null = onwarn
+		const transform: (warning: Warning) => Warning | null = warningFilter
 			? (warning) => {
 					if (!warning.code) return warning;
-					let result: Warning | null = null;
-					onwarn(warning, (reportWarn) => (result = reportWarn));
-					return result;
+					return warningFilter(warning) ? warning : null;
 				}
-			: (warning) => warning;
+			: onwarn
+				? (warning) => {
+						if (!warning.code) return warning;
+						let result: Warning | null = null;
+						onwarn(warning, (reportWarn) => (result = reportWarn));
+						return result;
+					}
+				: (warning) => warning;
 
 		const ignoreWarnings = Boolean(context.options[0]?.ignoreWarnings);
 		const globalStyleRanges: [Position, Position][] = [];

packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/svelte-config-ignore/_config.cjs renamed to packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/svelte-config-onwarn/_config.cjs

@@ -0,0 +1,16 @@
+/**
+ * @typedef {import("svelte/compiler").Warning} Warning
+ */
+module.exports = {
+	languageOptions: {
+		parserOptions: {
+			svelteConfig: {
+				warningFilter: (warning) => {
+					return (
+						warning.code !== 'a11y_missing_attribute' && warning.code !== 'a11y-missing-attribute'
+					);
+				}
+			}
+		}
+	}
+};

packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/svelte-config-ignore/a11y-errors.yaml renamed to packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/svelte-config-onwarn/a11y-errors.yaml

@@ -0,0 +1,6 @@
+- message: |-
+    Avoid using autofocus
+    https://svelte.dev/e/a11y_autofocus(a11y_autofocus)
+  line: 5
+  column: 12
+  suggestions: null

packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/svelte-config-ignore/a11y-input.svelte renamed to packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/svelte-config-onwarn/a11y-input.svelte

@@ -0,0 +1,5 @@
+<script>
+	let src = 'tutorial/image.gif';
+</script>
+
+<img {src} autofocus />

packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/svelte-config-ignore/a11y-requirements.json renamed to packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/svelte-config-onwarn/a11y-requirements.json

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

packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/svelte-config-ignore/a11y-svelte4-errors.yaml renamed to packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/svelte-config-onwarn/a11y-svelte4-errors.yaml

@@ -0,0 +1,16 @@
+/**
+ * @typedef {import("svelte/compiler").Warning} Warning
+ */
+module.exports = {
+	languageOptions: {
+		parserOptions: {
+			svelteConfig: {
+				warningFilter: (warning) => {
+					return (
+						warning.code !== 'a11y_missing_attribute' && warning.code !== 'a11y-missing-attribute'
+					);
+				}
+			}
+		}
+	}
+};

packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/svelte-config-ignore/a11y-svelte4-input.svelte renamed to packages/eslint-plugin-svelte/tests/fixtures/rules/valid-compile/invalid/svelte-config-onwarn/a11y-svelte4-input.svelte

@@ -0,0 +1,5 @@
+<script>
+	let src = 'tutorial/image.gif';
+</script>
+
+<img {src} />