Svelte 5 runes support

[benmccann]

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

[ota-meshi]

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:

https://eslint-online-playground.netlify.app/#eNqlVF1v0zAU/SvGQlqL1pTnsG5I+xA8AA8gXuYJZc5t6s2xg+2UTSX/nXvtpO26UiH2VCfn3HOP77npinsnp58ez23dWAMmZH4JOgDP+YmXTjWB6cJUM8GDF/xUmPDYALtcIvOjmVs2YythGPOhcOFHEXJ2UQRgv5lp61twwnTCaAhMITffKiOC1lhNP8III63x2EpVi3BlXV0ExEZqR27MZqdMZcF+DU6ZajSmyjkEuRgdTefFPbROH42zsAAzGkXyKnYml1sW37KOdeNMFlRIja2GDJyzLgomK5Eeu8/Y6xKcWkI5IrGzbFBiZ9uGI7jGxiyPd0PFpAem7NWSs//TOpmmUDAIJsxqbbJb9fodP8aksOVcVdmdtwaDjAkJLjFipcF9aYJCS4LnKTvCPA5Uhs/Y5HwB8j6CwbVAeHec6pWRui2BoGuscFLwGwwYG9IKBZ8Fj82GeWpbjQT/AFrbV4KP3yEtA6+VCU7uGIOHgO5jz+vBUKLmDtB1jSiUgkcfBDa6rZTJ06ZOD3Le076mmU2S5kv4Ewc/W0W7NyHeRNKw8ElwkrnpBwVm+WS4t87+8vgx7Jlppe1toVMW+DgsGj0L7qAordGPgq/5TeFQaV+CIOviOziPQKrWuA0+bN3Q29ZJ+Ia+E6G2ZavxvCZgDq64whW5pEBIqc+E938KGPhmXs7egUR9knqycWkYg2O7xC9LlbAdb2+a4Dm2G7q8wQ1CO/iWTg/DUW7e1nQcPGzmkUzsiW6AU0GydKD97i13OyS8F58MyDPy83h2pbZeE0C3+qcbxFsMx/4Qf/oPsSnkfVHBzvdVwvICGlpgI1W67nptDrTcu0R7+MM44gf0l7LEOQj2ApMhhP07fAjcWHtKiOtIA+r+AMxHSic=

[benmccann]

FYI @dummdidumm

[ota-meshi]

Hmm... $derived can also be used in *.ts. So probably just fixing svelte-eslint-parser won't solve it.

[lampewebdev]

Not sure if this is correct here but you can see that there is a problem here:

[dummdidumm]

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.

[ota-meshi]

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.

[ndom91]

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?

[baseballyama]

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.

[ndom91]

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.

Thanks, it was on a .svelte file unfortunately and that is listed in the extraFileExtensions already :thinking: