If component is generic, events and slot bindings are treated as any in ESLint

[ptrxyz]

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

• I'm using eslint-plugin-svelte. (*.svelte file linting does not work with the parser alone. You should also use eslint-plugin-svelte with it.)
• I'm sure the problem is a parser problem. (If you are not sure, search for the issue in eslint-plugin-svelte repo and open the issue in eslint-plugin-svelte repo if there is no solution.
• I have tried restarting my IDE and the issue persists.
• I have updated to the latest version of the packages.

What version of ESLint are you using?

9.10.0

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

• [email protected]
• [email protected]

What did you do?

Configuration

import js from '@eslint/js';
import ts from 'typescript-eslint';
import svelte from 'eslint-plugin-svelte';
import prettier from 'eslint-config-prettier';
import globals from 'globals';

/** @type {import('eslint').Linter.Config[]} */
export default [
	js.configs.recommended,
	...ts.configs.recommendedTypeChecked,
	...svelte.configs['flat/recommended'],
	prettier,
	...svelte.configs['flat/prettier'],
	{
		languageOptions: {
			parserOptions: {
				parser: ts.parser,
				project: ['./tsconfig.json']
			},
			globals: {
				...globals.browser,
				...globals.node
			}
		}
	},
	{
		files: ['**/*.svelte'],
		languageOptions: {
			parser: svelte.parser,
			parserOptions: {
				parser: ts.parser,
				project: ['.svelte-kit/tsconfig.json', './tsconfig.json'],
				extraFileExtensions: ['.svelte']
			}
		}
	},
	{
		ignores: ['build/', '.svelte-kit/', 'dist/']
	}
];

Consider this code:

<script lang="ts">
    // main.svelte
    import type { ComponentEvents } from 'svelte';
    import Comp from './component.svelte';

    type X = ComponentEvents<Comp>['foo'];
    export const x: X | null = null;
</script>

<script lang="ts">
    // component.svelte 
    import { createEventDispatcher } from 'svelte';

    export const dispatch = createEventDispatcher<{
        foo: { id: number; name: string };
    }>();
</script>

As you can see X should be typed as an object, which is correctly detected by VSCode:

However when running eslint with type-checking rules enabled, eslint produces an error indicating, that X is simply any:

Further investigation with more rules that check for types (i.e. @typescript-eslint/no-unsafe-assignment and @typescript-eslint/no-unsafe-member-access) confirm that for eslint, X is simply any

What did you expect to happen?

I wanted eslint to not throw the error since X is properly typed.

What actually happened?

eslint throws an error indicating that X is simply any.

Link to GitHub Repo with Minimal Reproducible Example

https://github.com/ptrxyz/bug-svelte-eslint-componentevents/tree/main

Additional comments

No response

[ptrxyz]

I did some research and it turns out that slot bindings are also only typed in VSCode but for ESLint they are simply any.

So if I have this component:

<script lang="ts">
  let foo = { prop: true }
</script>

<slot {foo}></slot>

<Component>
<div let:foo={bar}>{bar.prop}</div>
<Component>

ESLint will let me know that prop is an unsafe member access for example.

[ptrxyz]

Did more digging:
It seems that the problem with ESLint not seeing the proper types of events can be fixed by using the "typescript-eslint-parser-for-extra-files" as sub-parser for Svelte parser.

However this doesn't seem to work for slot bindings -- those are still broken according to my testing.

[ptrxyz]

Even more digging: defining $$Slots in the component won't do it either.
I further checked the emitted code that is passed to the typescript parser by the svelte-eslint-parser:

// script part
....
import Comp from './component.svelte'; 
....

code:

// code part
....
 (x);({ id: '1', value: 'something' })as ('Y' extends infer PROP?(PROP extends keyof import('svelte').ComponentProps<Comp>?(import('svelte').ComponentProps<Comp>[PROP]):(never)):(never));
(item: (Comp['$$slot_def']["SLOTNAME"]["PROPNAME"]))=>{if(item){(item.id);}};(Comp);`

So it seems that the type for the slot prop is correctly referred to as Comp['$$slot_def']["SLOTNAME"]["PROPNAME"]), yet Comp is a generic and this definition does not take that into account.

I removed the generic from my component and tried again: now eslint is not complaining anymore about an unsafe member access.

So instead of Comp[$$slot_def], i suppose there should be something like Comp<...GENERIC TYPES HERE...>[$$slot_def].
Relevant code might be this then: https://github.com/sveltejs/svelte-eslint-parser/blob/a7c0d33f82944cee03b01bf08252da15fd0257ea/src/parser/converts/attr.ts#L753C39-L753C47

tl;dr: when a component is generic, slot bindings are not correctly typed.

[DavidArchibald]

I was having a similar problem, though I unfortunately I am also seeing export let data as any typed in ESLint + SvelteKit. I think these are sort of the same issue; svelte2tsx doesn't seem to include enough type information.

Did you face the same issue? And if so did you find a solution? I'd love an example of how you got your project set up if so.

[baseballyama]

This is fixed in Svelte5.