Unintended overwrite of Svelte Kit's Typescript definitions

[Bastian]

Summary

When using Svelte Kit with Typescript, svelte-check, and this library, it seems like this library is overwriting Svelte Kit's Typescript definitions.

You can see this when trying to use sveltekit:prefetch somewhere. You then get the following error when executing svelte-check:

bastian@desktop:~/dev/forms-lib-kit-bug$ npm run check

> ~TODO~@0.0.1 check
> svelte-check --fail-on-warnings --fail-on-hints


Loading svelte-check in workspace: /home/bastian/dev/forms-lib-kit-bug
Getting Svelte diagnostics...
====================================

/home/bastian/dev/forms-lib-kit-bug/src/lib/Header/index.svelte:30:45
Error: Type '{ sveltekitPrefetch: true; href: string; }' is not assignable to type 'HTMLProps<HTMLAnchorElement> & SapperAnchorProps'.
  Property 'sveltekitPrefetch' does not exist on type 'HTMLProps<HTMLAnchorElement> & SapperAnchorProps'. (ts)
                <ul>
                        <li class:active={$page.path === '/'}><a sveltekit:prefetch href="/">Home</a></li>
                        <li class:active={$page.path === '/about'}><a sveltekit:prefetch href="/about">About</a></li>


/home/bastian/dev/forms-lib-kit-bug/src/lib/Header/index.svelte:31:50
Error: Type '{ sveltekitPrefetch: true; href: string; }' is not assignable to type 'HTMLProps<HTMLAnchorElement> & SapperAnchorProps'.
  Property 'sveltekitPrefetch' does not exist on type 'HTMLProps<HTMLAnchorElement> & SapperAnchorProps'. (ts)
                        <li class:active={$page.path === '/'}><a sveltekit:prefetch href="/">Home</a></li>
                        <li class:active={$page.path === '/about'}><a sveltekit:prefetch href="/about">About</a></li>
                        <li class:active={$page.path === '/todos'}><a sveltekit:prefetch href="/todos">Todos</a></li>


/home/bastian/dev/forms-lib-kit-bug/src/lib/Header/index.svelte:32:50
Error: Type '{ sveltekitPrefetch: true; href: string; }' is not assignable to type 'HTMLProps<HTMLAnchorElement> & SapperAnchorProps'.
  Property 'sveltekitPrefetch' does not exist on type 'HTMLProps<HTMLAnchorElement> & SapperAnchorProps'. (ts)
                        <li class:active={$page.path === '/about'}><a sveltekit:prefetch href="/about">About</a></li>
                        <li class:active={$page.path === '/todos'}><a sveltekit:prefetch href="/todos">Todos</a></li>
                </ul>


====================================
svelte-check found 3 errors, 0 warnings and 0 hints

When you look closely, you can see that it's picking up the definition from here:

svelte-forms-lib/lib/svelte-jsx.d.ts

Line 777 in f846e04

a: HTMLProps<HTMLAnchorElement> & SapperAnchorProps;

which is also confirmed when checking the definition in VS Codes:

Steps to reproduce

• Install Svelte-Kit (npm init svelte@next my-app)
• Follow the steps (use TypeScript)
• Install svelte-check
• Install svelte-forms-lib and import it somewhere
• Run svelte-check

Example Project

Here's a simple demo project that already performed the steps described above and nothing else: https://github.com/Bastian/svelte-forms-lib-bug

Possible fixes

I'm not familiar enough with Typescript's internals to know how to fix this.
If you know a workaround (e.g., how to tell TypeScript which definitions to use), I would very much appreciate it. :)

[mcmxcdev]

Ah, thanks for the investigation, I was already wondering in my application where these type issues come from ;)

[tjinauyeung]

🎉 This issue has been resolved in version 1.10.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[larrybotha]

@Bastian thanks for reporting, and thanks for the reproduction!

I've replaced the manual svelte.JSX declarations with the official declarations from the language server repo.

@Bastian and @mhatvan please try v1.10.3 and let me know if you have any issues!

[mcmxcdev]

I can confirm that it got fixed.

Thanks for the fast patch, great library, love it ;)

[Bastian]

I can also confirm that the bug is no longer present in the latest version. Thank you for the quick fix!