Svelte 5: Conflict with $bindable and let/const ESLint checks

[KieranP]

Describe the bug

I have the following code:

<script lang="ts">
  let {
    toggle = $bindable(false),
    closedLabel = 'View more',
    openLabel = 'View less'
  }: Props = $props()

  let label = $derived(toggle ? openLabel : closedLabel)
</script>

<PrimaryButton onclick={() => (toggle = !toggle)}>
  {label}
</PrimaryButton>

ESLint complains that closedLabel and openLabel are not reassigned, so make them consts. If I do that, then toggle complains about being reassigned, and make it a let. And if I split them up:

<script lang="ts">
  const {
    closedLabel = 'View more',
    openLabel = 'View less'
  }: Props = $props()

  let {
    toggle = $bindable(false),
  }: Props = $props()

  let label = $derived(toggle ? openLabel : closedLabel)
</script>

then Svelte complains about not using $props more than once...

What is the best approach here?

Reproduction

See above

Logs

No response

System Info

System:
    OS: macOS 15.0.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 176.33 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.15.1 - ~/.asdf/installs/nodejs/20.15.1/bin/node
    Yarn: 4.3.1 - ~/.asdf/installs/nodejs/20.15.1/bin/yarn
    npm: 10.8.2 - ~/.asdf/plugins/nodejs/shims/npm
    bun: 1.1.0 - ~/.bun/bin/bun
  Browsers:
    Chrome: 130.0.6723.70
    Safari: 18.0.1
  npmPackages:
    svelte: ^5.1.0 => 5.1.0

Severity

annoyance

[Conduitry]

This would be an issue with the ESLint plugin. It shouldn't be pushing you toward that code. I've opened sveltejs/eslint-plugin-svelte#889