Open benmccann opened 1 year ago
MEMO:
When using $derived
, there seems to be a problem with TS inference, similar to the problem we had in the past.
https://github.com/sveltejs/svelte-eslint-parser/issues/226
input:
<script lang="ts">
type EventInfo = {
start_at: Date | number
}
let info: EventInfo | null = null
const lightFormat = (i: Date | number) => i.toString()
fetch('/fakeurl').then(() => { info = { start_at: 0 } }).catch(console.error)
const startDate = $derived(info?.start_at ? lightFormat(info.start_at) : null)
const endDate = () => (info?.start_at ? lightFormat(info.start_at) : null)
</script>
{startDate}{endDate}
error:
Unsafe assignment of an
any
value. (@typescript-eslint/no-unsafe-assignment)
Reproduce:
FYI @dummdidumm
Hmm... $derived
can also be used in *.ts
.
So probably just fixing svelte-eslint-parser won't solve it.
Not sure if this is correct here but you can see that there is a problem here:
I think the quickest solution is to either add known globals to eslint so that it knows that $state
/$derived
etc exist, or to postprocess eslint errors related to "$state
/$derived
/etc doesn't exist" to surpress them if you're inside .svelte
or .svelte.ts/js
files.
We have started work on Svelte v5 support.
If you want to try it out, install the next
tagged version and try it out.
npm i -D eslint-plugin-svelte@next
Additional configuration is required if you want to support for *.svelte.js
and *.svelte.ts
.
https://github.com/sveltejs/svelte-eslint-parser#runes-support
Update
@next
is not needed now, just use the latest version.
I've migrated almost all of our rather large eslint config to the new flat style and eslint@9+
, however we also recently started using Svelte 5 and have a few runes used in the codebase and I'm still seeing $state is undefined
errors :thinking:
My eslint.config.js
can be found here
Is this something that's been solved already, or is the recommendation still to manually add the runes to globals
or something like that?
Is the $state is undefined
error in the .svelte
file? Or is it the .svelte.js
file?
Change the extraFileExtensions: ['.svelte']
part of the ESLint config to extraFileExtensions: ['**/*.svelte', '.svelte ', '**/*.svelte.ts', '*.svelte.ts', '**/*.svelte.js', '*.svelte.js']
may help.
Is the
$state is undefined
error in the.svelte
file? Or is it the.svelte.js
file? Change theextraFileExtensions: ['.svelte']
part of the ESLint config toextraFileExtensions: ['**/*.svelte', '.svelte ', '**/*.svelte.ts', '*.svelte.ts', '**/*.svelte.js', '*.svelte.js']
may help.
Thanks, it was on a .svelte
file unfortunately and that is listed in the extraFileExtensions
already :thinking:
Description
There's a few places it'd be helpful such as in linting the Svelte 5 repo and component party examples (https://github.com/matschik/component-party.dev/issues/186)
I don't think there's any rush on this and the syntax may change, but I thought it'd be helpful to have a place to track it