Miscompilation of `bind:group` when used with a Set

[yamplum]

Describe the bug

When trying to pass a Set to the bind:group directive, I get the following error: value.includes is not a function in App.svelte. Indeed, the correct method to check membership of a Set is has() rather than includes().

Using a Set in a bind:group seems like a natural use case and I didn't catch anything about this limitation in the docs, so I assume it is not intentional. I suspect it should be a relatively easy fix.

Potentially related mention of this(?) issue from 2020: #5721 (comment)

Reproduction

https://svelte.dev/playground/11b978c08eb34f06a499b7dc87e98672?version=5.25.9

I can't verify if it used to work in Svelte 4 because Svelte 4 playground doesn't work (Error compiling component: Unrecognized option 'runes').

Logs

System Info

System:
    OS: macOS 15.3.2
    CPU: (8) arm64 Apple M1
    Memory: 108.41 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 23.11.0 - /opt/homebrew/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.9.2 - /opt/homebrew/bin/npm
    pnpm: 10.6.5 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 135.0.7049.42
    Safari: 18.3.1
  npmPackages:
    svelte: ^5.0.0 => 5.1.2

Severity

annoyance

[dummdidumm]

bind:group only works with arrays, not sure if we should enhance that

[paoloricciuti]

bind:group only works with arrays, not sure if we should enhance that

But how would that work? Try to check for includes and if it's not there try with has?

[felix-tjernberg]

I also came upon this issue and agree with @yamplum that it would be a nice enhancement as @dummdidumm phrases it

I did "get got" when I tried to look what value was in the source which confused and delighted me xD, however am I correct in that get() being replaced by something after compilation if so where in the source can I see that step?

But as @paoloricciuti says it might be as simple as doing something like this at 141

if (is_checkbox) {
    value = value || [];
    if (typeof value.includes === "function") input.checked = value.includes(input.__value);
    else if (typeof value.has === "function") input.checked = value.has(input.__value);
} else {
    input.checked = is(input.__value, value);
}

[felix-tjernberg]

I looked some more in the source and realised that group seems to not use the actual user value, it is using an internal array to represent the group values

It is also kind of funny that the internal array in turn is created from a set

A possible complicated solution would be that the compiler uses an internal set or array depending on what the user value is, then adding some form of compiler error if the user value changes type (a user has put in a state that changes from an array to a set randomly, however that does not seem like sane behaviour xD)

A possible simpler solution depending on if the compiler is good enough is that bind:group is just syntax sugar for function bindings which I was suggested to use in the svelte society discord

<input
  type="checkbox"
  value={option}
  bind:group={some_state}
/>

<!-- if some_state is set becomes -->
<input
  type="checkbox"
  value={option}
  bind:checked={
    () => some_state.has(option),
    (checked) => checked ? some_state.add(option) : some_state.delete(option)
  }
/>

<!-- if some_state is array becomes -->
<input
  type="checkbox"
  value={option}
  bind:checked={
    () => some_state.includes(option),
    (checked) => checked ? some_state.push(option) : some_state = some_state.filter(element => element !== option)
   }
/>

The array solution there is just some initial draft, and I now understand why set is used to create the internal array. It is not easy making sure that the user array only has unique elements

Also that solution might break some users expectations as it mutates the original array which might not have unique values

However I do not have enough context about your code base and might be completely wrong here, but hopefully this is helpful in sparking some ideas ^^

Personally in the future I'm likely not going to use bind:group because function bindings and sets seems like the most reasonable thing to do in most cases, and I'm also curious if bind:group is being planned to be deprecated because of similar reasoning plus the fact that group is not a standard html attribute