Handle warning emitted from the Svelte compiler

[baseballyama]

Describe the problem

Now, vite-plugin-svelte and svelte-check provide their own warning filter.

https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#onwarn
https://github.com/sveltejs/language-tools/tree/master/packages/svelte-check

And now, ESLint users requested to filter warnings.

sveltejs/eslint-plugin-svelte#311

If Svelte compiler itself provides a warning filter, these 3 tools don't need to have this and it will be better in terms of maintainability.

Describe the proposed solution

Provide warning filter by Svelte compiler.

Alternatives considered

Implement warning filter by ESLint plugin.

Importance

nice to have

[Conduitry]

I think I'm -1 on providing an API in the compiler for this. The compiler just returns an array of warnings - it's up to the consumer what it wants to do with those warnings.

The onwarn in vite-plugin-svelte is actually more powerful than a filter, because it lets you decide how exactly you want the warning to be handled - and not just whether or not you want each warning to be handled with the default handler. The Rollup and webpack plugins work similarly.

But also, any of these tools would also need to provide their own handling for this as a fallback anyway even if the compiler provided it, unless they want to bump their peerdep on the compiler as a breaking change. And for v-p-s, it's not really clear to me what it could do that's simpler, unless it removed the onwarn feature in favor of a less-powerful warning filter option.

[baseballyama]

Thank you for your response quickly!
This makes sense.

So I updated my opinion.

ESlint plugin will add an option to svelte/valid-compile rule that is a filtering function. Then users who want to have a shared warning filter, create a function and use it at both svelte.config.js and .eslintrc.js.

// is-ignore-svelte-compile-warn.js

export default function (warning) {
  if (warning.code === 'a11y-distracting-elements') return true;
  return false;
}

// svelte.config.js
import isIgnore from './is-ignore-svelte-compile-warn';

// based on https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#onwarn
export default defineConfig({
  plugins: [
    svelte({
      onwarn(warning, defaultHandler) {
        // don't warn on <marquee> elements, cos they're cool
        if (isIgnore(warning)) return;

        // handle all other warnings normally
        defaultHandler(warning);
      }
    })
  ]
});

import isIgnore from './is-ignore-svelte-compile-warn';

// .eslintrc.js
module.exports = {
  rules: {
    "svelte/valid-compile": [
      "error",
      {
        ignoreWarnings: false,
        ignore: isIgnore,
      },
    ],
  },
};

[Conduitry]

Something else I just thought of - if we want to use some CJS-ESM mechanism where we serialize the inputs and outputs of the Svelte compiler, we won't be able to pass callbacks to it anyway. It will have to be the consuming project's job to filter the warnings.

[dummdidumm]

I don't think we need a callback-based API, it would be enough to pass a list of warning codes to ignore. It would be nice indeed to have something for this because currently people have to configure this across many different places (eslint, language tools VS Code, svelte-check, bundler plugin)

[dummdidumm]

Svelte 5 provides warningFilter for this

[ptrxyz]

For reference: https://svelte.dev/docs/svelte/svelte-compiler#ModuleCompileOptions