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

> svelte-app@1.0.0 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 #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 svelte-check@1.0.9 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
svelte-app@1.0.0 xxxxxxx
├── @rollup/plugin-commonjs@12.0.0
├── @rollup/plugin-node-resolve@8.4.0
├── @rollup/plugin-typescript@4.1.2
├── @tsconfig/svelte@1.0.8
├── rollup@2.23.0
├── rollup-plugin-livereload@1.3.0
├── rollup-plugin-svelte@5.2.3
├── rollup-plugin-terser@5.3.0
├── sirv-cli@0.4.6
├── svelte@3.24.1
├── svelte-check@1.0.9
├── svelte-preprocess@4.0.10
├── tslib@2.0.1
└── typescript@3.9.7

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...

[danielo515]

Tabindex of type number reports a type error:

Type 'string' is not assignable to type 'boolean | null | undefined'.ts(2322)

<script lang="ts">
    export let checked = false;
    export let tabindex: number = 0;
    let state = "off";
    $: checked = state === "on";
</script>

<div class="checkbox-container" class:is-enabled={checked}>
    <input type="checkbox" {tabindex} bind:checked={state} />
</div>

[Antonio-Bennett]

@danielo515 I would suggest opening a new issue