Is the ref = $bindable(null) fallback necessary?

[ratrakone]

this code throws an error

<script lang="ts">
  import BitsButton from './bits-button.svelte'

  let btns = {}
  let routes = ['https://google.com', 'https://svelte.dev']
</script>

{#each routes as route}
  <BitsButton
    bind:ref={btns[route]}
  >
      btn
  </BitsButton>
{/each}

props_invalid_value Cannot do `bind:ref={undefined}` when `ref` has a fallback value
https://svelte.dev/e/props_invalid_value in App.svelte

because ref = $bindable(null) for all the refs.

i know i can fix it by doing

for (const route of routes) {
  btns[route] = null;
}

but i was curious if the null fallback was necessary. if it would break some functionality. and if no, if it could be removed so i don't need to init the objects.
of course i understand, that mimicking browser defaults (getElementById()) could be more important than this convinience. if so, just close it, thanks.

repl

thank you for your time.

[huntabyte]

of course i understand, that mimicking browser defaults (getElementById()) could be more important than this convinience. if so, just close it, thanks.

This is why it is done.

We also cannot guarantee that the ref isn't behind a conditional where it could be present at one point and not at another, so I felt making it HTMLElement | null was more typesafe (and aligns with the browser). It would be a breaking change to change now, but perhaps my mind will change by the time Bits UI v2 comes around.

For now initializing the object via the loop is the way to go