Svelte 5: Add warning to compiler when using bind:value incorrectly

[jrmoynihan]

Describe the bug

In the code below, there are two issues:

1. No warning is issued for applying a bind: directive on the value prop, without a matching $bindable() declaration in the $props().
2. No warning is issued for using bind:value and bind:group simultaneously on the input.

This can lead to inconsistencies and erroneous types of the bound state, where the state of selected (a number, in the example below) actually becomes a string.

Reproduction

<!-- Input.svelte -->
<script>
  let {
    value,
    group = $bindable()
  } = $props();
</script>

<input type="radio" bind:group bind:value />

<script>
  let options = [ 1, 2, 3 ]
  let selected = $state(1)
</script>

{#each options as option}
  <Input bind:group={selected} value={option} />
{/each

Svelte 5 REPL reproduction

Logs

No response

System Info

System:
    OS: macOS 14.3.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 74.28 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    pnpm: 9.0.6 - /opt/homebrew/bin/pnpm
    bun: 1.1.7 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 124.0.6367.209
    Chrome Canary: 127.0.6488.0
    Safari: 17.3.1
    Safari Technology Preview: 17.4
  npmPackages:
    svelte: ^5.0.0-next => 5.0.0-next.113

Severity

annoyance

[dummdidumm]

It is valid to not declare the value as bindable because it's valid for the property to get out of sync with its parent. Therefore closing.

[jrmoynihan]

It is valid to not declare the value as bindable because it's valid for the property to get out of sync with its parent. Therefore closing.

@dummdidumm Can you give a use-case/example where the developer intent is to bind the value, but it is still valid to let the value get out of sync with its parent? This seems to defeat the purpose of "binding" if it's not "bound".

The second case is even more baffling. How can you reliably know the result of an update operation with two different bind directives on the same element. Isn't that a clear race-condition issue that should be avoided or warned about?