Linter error `no-unused-vars` if property is `$bindable` and never read

ptrxyz commented 4 months ago

Describe the bug

Consider this component:

<script lang="ts">
    let { busy = $bindable(false) }: { busy: boolean } = $props()
</script>

<button onclick={() => (busy = true)}>Lock</button>

I create a property busy that's bindable and that I only set, but never read. ESLint reports an "no-unused-vars" error. I think that's wrong, since the property might be read from a parent component.

Reproduction

use example above + eslint with no-unused-vars rule

Logs

No response

System Info

System:
    OS: Linux 6.9 Arch Linux
    CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
    Memory: 53.28 GB / 62.70 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 20.14.0 - /usr/bin/node
    Yarn: 1.22.22 - /usr/bin/yarn
    npm: 10.8.1 - /usr/bin/npm
    pnpm: 9.1.4 - /usr/bin/pnpm
    bun: 1.1.10 - ~/bin/bun
  Browsers:
    Brave Browser: 125.1.66.118
  npmPackages:
    eslint: ^9.4.0 => 9.4.0 
    svelte: ^5.0.0-next.136 => 5.0.0-next.143

Severity

annoyance

paoloricciuti commented 4 months ago

As i mentioned this has nothing to do with svelte, you get the same error even in js files and it's a rule from typescript-eslint (and is also technically correct since you are assigning a property without reading from it)

ptrxyz commented 4 months ago

Doesn't seem to be like that for me:

This is it on a simple .ts file.Here the linter is complaining about the non-exported stuff (rightfully so) and allows the exported things. Bindable props might still be read from outside of the components context and should thus more be treated like exports and not trigger a warning/error.

The ESlint rule in question is @typescript-eslint/no-unused-vars however plain old no-unused-vars (from bare eslint) also triggers the error.

sveltejs / svelte