Language-tools: Cannot specify tabindex with `tabindex="-1"` when working with typescript

[opensas]

Describe the bug

Cannot specify tabindex with tabindex="-1" when working with typescript

I have to use tabindex={-1}

To Reproduce
Create a typescript project with npx degit sveltejs/template && node scripts/setupNode.js

REplace you App.svelte with:

<script lang="ts">
    export let name: string
    let headingEl
</script>

<main>
    <h1 bind:this={headingEl} tabindex="-1">Hello {name}!</h1>
    <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

and then

$ npm run validate

> [email protected] validate /home/sas/devel/apps/mdn/mdn-svelte-tutorial/08-typescript-support
> svelte-check


Loading svelte-check in workspace: /home/sas/devel/apps/mdn/mdn-svelte-tutorial/08-typescript-support
Getting Svelte diagnostics...
====================================

/home/sas/devel/apps/mdn/mdn-svelte-tutorial/08-typescript-support/src/components/TodosStatus.svelte:25:45
Error: Type 'string' is not assignable to type 'number'. (ts)
eadingEl} tabindex="-1">{com

System (please complete the following information):

• OS: Ubuntu 18.04
• IDE: vscode
• Plugin/Package: [e.g. svelte-check]

Additional context
Add any other context about the problem here.

[opensas]

note: it used to work ok with

    "@tsconfig/svelte": "^1.0.2",
    "svelte-check": "^0.1.55",

and now is giving the above error with:

    "@tsconfig/svelte": "^1.0.3",
    "svelte-check": "^0.1.58",

[jasonlyu123]

Same reason as https://github.com/sveltejs/language-tools/issues/336
I think this is an inconvenient but correct behavior

[opensas]

Thanks a lot for your reply.

I see your point, but I find it more annoying than helpful. Is there some way to turn this off, or at least turn it into a warning?

It began throwing this error with svelte-check 0.1.58

[numfin]

This is correct behaviour

[opensas]

It feels strange having to update valid html to make it work. But I understand the reasoning behind it.

We should explain this somewhere in the docs, explaining also the advtanges of such approach. My guess is that many will report it as a bug, like I did.

I would also like it could be turned off with a config file, annotation or something like that.

[dummdidumm]

I'm not sure if it is feasible/maintainable, but what about a list of numeric attributes, and if it's such an attribute try to cast the string to number?

[opensas]

@dummdidumm that would almost be like having the best of both worlds, I have no idea how easy/posible that is

[jasonlyu123]

That's probably feasible in svelte2tsx. We can overwrite the quote to mustache when the value of the attribute is a text node and the text could be parse as number, for example tabindex="1". Variable binding can't work though.

[opensas]

You could also detect something like tabindex="na" and issue an error?

[jasonlyu123]

Yeah. we can first run a parseFloat against the value. if the result is not NaN, overwrite it to be like this tabindex={1}. Then typescript won't complain about it.

[opensas]

Great! I've just upgraded to [email protected] and it works ok!

But I keep getting the error from vscode:

I tried Restarting Svelte Language server, and also restarting vscode itsefl, also issued an npm update, these are the libs I have:

$ npm list --depth 0
[email protected] xxxxxxx
├── @rollup/[email protected]
├── @rollup/[email protected]
├── @rollup/[email protected]
├── @tsconfig/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Is there some way to also apply this fix to vscode?

BTW, thanks a lot for your effort, it's really awesome the work you are all doing, most issues are solved in a couple of hours, I bet there is no commercial support that gets even close to this response!

[dummdidumm]

You are not seeing it in VSCode yet because it's not released yet. svelte-check gets it as part of the nightly builds, the VSCode extension is published "manually". That will happen in a couple of days. If you don't want to wait and are ok with some unstable builds, you can also use the Nightly Build of the extension.

[opensas]

I tried the Nightly bulid and it works perfect, thanks a lot. I still get a bit lost about what component is in charge of doing what, even though in this case it was rather obvious that it was vscode extension's responsibility...