Allow declaration of $bindable fields on the union type prop.

[Aron-Lomner]

Describe the problem

Problem:
It is not possible to have a $bindable field on the union portion of a Prop.

Explanation:
Svelte only allows declaring a prop field as $bindable from within a de-structuring.

  let { lowerValue = $bindable(), upperValue = $bindable(), value = $bindable() }: Props = $props();

This works fine for simple types, but if you had a union type like so:

type Props =
    | {
        lowerValue: number;
        upperValue: number;
      }
    | { value: number };

Then you can not de-structure.

Describe the proposed solution

Solution:
Add an interface for declaring $bindables without de-structuring.
For Example:

type Props =
   | {
       lowerValue: $bindable(number) ;
       upperValue: $bindable(number);
     }
   | { value: $bindable(number) };

Or:

type Props =
    | {
        lowerValue: number ;
        upperValue: number;
      }
    | { value: number };
  let props: Props = $props();
  props.lowerValue = $bindable()

Importance

would make my life easier

[7nik]

Shouldn't it then be two components? Maybe one wrapping another, or with common logic in "private" .ts file, or something.

[7nik]

And, to clarify, the problem is only with Typescript.
You can do

	type Props =
    | {
        lowerValue: string;
        upperValue: string;
        value?: never;
      }
    | {
        value: string
        lowerValue?: never;
        upperValue?: never;
     };

Which will give you the desired result. Not perfect, but totally working.