Conflict between const and $bindable

[AsaMitakaIT]

This comes down to stylistic preference. I personally for example want to use const for components that only have readonly props. Or I prefer to use const for $derived because for me it better communicates that this is a readonly value, not necessarily that the value itself never changes.

We shouldn't be in the business of dictating these preferences, therefore closing.

Originally posted by @dummdidumm in #12121

<script lang="ts">
    let { options, selected = $bindable() }: { options: string[], selected: number } = $props();
</script>

In this scenario, I’d like to define both const options and let selected simultaneously, but I can’t invoke $props twice. I suppose there’s currently no solution for this?

[Ocean-OS]

I guess you could do something like this:

<script lang="ts">
    let { options: _options, selected = $bindable() }: { options: string[], selected: number } = $props();
    const options = $derived(_options); 
</script>

[jjones315]

For a lot of props you could do
<script lang="ts"> let { selected = $bindable(), …_readonlyProps }: { prop1: string, prop2:number, selected: number } = $props(); const { prop1, prop2, …restProps} = $derived(_readonlyProps); </script>

Sorry about formatting, on mobile.

[dummdidumm]

There's no solution to this, no, workarounds like shown in this thread exist though. Closing as unactionable; also related to #15675