Generic declarations in components not recognized by ESLint

[MathiasFrost]

Before You File a Bug Report Please Confirm You Have Done The Following...

• [X] I have tried restarting my IDE and the issue persists.
• [X] I have updated to the latest version of the packages.

What version of ESLint are you using?

8.43.0

What version of eslint-plugin-svelte are you using?

2.10.1

What did you do?

Configuration

``` module.exports = { root: true, extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:svelte/recommended", "prettier"], parser: "@typescript-eslint/parser", plugins: ["@typescript-eslint"], parserOptions: { sourceType: "module", ecmaVersion: 2020, extraFileExtensions: [".svelte"] }, env: { browser: true, es2017: true, node: true }, overrides: [ { files: ["*.svelte"], parser: "svelte-eslint-parser", parserOptions: { parser: "@typescript-eslint/parser" } } ] }; ```

<script lang="ts" generics="T">
    import { createEventDispatcher } from "svelte";

    // Or type T = $$Generic; (same result)

    /** */
    const dispatch = createEventDispatcher<{ change: Promise<T> }>();

    export let value: T;

    /** */
    function test(): void {
        const promise = new Promise<T>((resolve) => resolve(value));
        dispatch("change", promise);
    }
</script>

What did you expect to happen?

That ESLint would be able to interpret the symbol T

What actually happened?

ESLint is not able to interpret the symbol T:

   6:59  error    'T' is not defined                     no-undef
   8:20  error    'T' is not defined                     no-undef

Link to GitHub Repo with Minimal Reproducible Example

playground

Additional comments

Note that this is not an issue in eslint-plugin-svelte3.

Also don't know if generic="T" attribute or type T = $$Generic declaration is the preferred way of dealing with generics in components, but both seem to not work.

[christophsturm]

generics="T" is the new syntax and type T = $$Generic is the old one. both seem to not work. the old syntax works with eslint-plugin-svelte3. my workaround is to go back to eslint-plugin-svelte3 and the old syntax for now.

[ota-meshi]

As for adding support for Generic, it's strictly a parser issue. Follow https://github.com/sveltejs/svelte-eslint-parser/issues/306.

[MathiasFrost]

As for adding support for Generic, it's strictly a parser issue. Follow sveltejs/svelte-eslint-parser#306.

I'm not sure I understand. Is this a svelte-eslint-parser issue then? And if so, why is eslint-plugin-svelte3 the only enabling the use of $$Generic?

[ota-meshi]

eslint-plugin-svelte3 and eslint-plugin-svelte are completely separate packages. eslint-plugin-svelte3 does not use svelte-eslint-parser. If you want immediate support, please submit a pull request.

[BeeMargarida]

I hit this problem as well. Is there a workaround for now? If someone points me in the right direction, I would like to help with a fix.

[MathiasFrost]

I hit this problem as well. Is there a workaround for now? If someone points me in the right direction, I would like to help with a fix.

The workaround is just not using it and going back to eslint-plugin-svelte3, like @christophsturm said.

[MathiasFrost]

I hit this problem as well. Is there a workaround for now? If someone points me in the right direction, I would like to help with a fix.

I took a brief look and think it looks like eslint-plugin-svelte3 is just ignoring the no-undef error and letting the svelte language tools handle it (?), in which case svelte-eslint-parser just has to do the same?

I am also not sure how "set in stone" this generics-declaration-by-attributes is, considering it is a PR on svelte repo atm, as well as this warning on svelte.dev

[ota-meshi]

If you just want to avoid the $$Generic variable being flagged for no-undef rule, just set it to globals in the ESLint configuration.

https://eslint.org/docs/latest/use/configure/language-options#using-configuration-files-1

[ota-meshi]

Follow sveltejs/svelte-eslint-parser#306 on this subject. I will lock this thread.