Svelte

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

 #691

Development PRs

Issue

Open
B
benmccann Feb 29, 2024, 5:03 AM

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)

👍 3

Info

Assignees None
Labels enhancement, new rule, typescript
Milestone None
Back to homepage
Open pull request immich-app/immich#7187Open pull request sveltejs/kit#11908
Open issue on GitHub