Apply @typescript-eslint/no-misused-promises to Svelte components

[benmccann]

Motivation

If you pass a function returning a promise to a component property not expecting a promise, eslint should error.

Description

I can configure eslint to detect this as an error:

const promiseFunc: () => Promise<void> = async () => {};

// pnpm lint will identify this as an issue as it should
const func: () => void = promiseFunc;

But if I do the same thing with a Svelte component property I can't get it to detect it.

Examples

<!-- file: Child.svelte -->
<script lang="ts">
	export let func: () => void;
	func();
</script>

<!-- file: +page.svelte -->
<script lang="ts">
	import Child from './Child.svelte';
	const promiseFunc: () => Promise<void> = async () => {};
</script>

<!-- ✗ BAD -->
<Child func={promiseFunc} />

Additional comments

I don't know if this should be considered a new rule or just apply @typescript-eslint/no-misused-promises somehow.

See here for an example of the existing eslint rule and what I'd like eslint-plugin-svelte to catch: https://github.com/benmccann/promise-linting/blob/master/src/routes/%2Bpage.svelte

I hit this issue a lot while trying to migrate a large project to Svelte 5 where I was replacing components events with component callback props and it became very hard to keep track of what should be asynchronous vs synchronous: immich-app/immich#7187 (comment)

[ota-meshi]

I think it would be a great to add a rule to check the promise type to this plugin.
Check whether type information for component properties and assigned values is generated from svelte-eslint-parser, and if not, we may need to change the parser as well.