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;
     };
  let { lowerValue = $bindable(), upperValue = $bindable(), value = $bindable() }: Props = $props();

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

[Aron-Lomner]

Certainly the will ALWAYS be other component architecture to work around this issue, but there are time we the cleaner code with DRYer principles, or simply the easier dirtier route, calls for props with discriminating union types. In these scenarios, the inability two bind is a svelte limitation.
Here is an example @7nik

<script lang="ts">
  import DualSlider from '$lib/custom/components/DualSlider.svelte';
  import Slider from '$lib/custom/components/Slider.svelte';
  import { cn } from '$lib/utils';
  type Props = {
    class?: string;
    title?: string;
    display?: string;
    min: number;
    max: number;
  } & (
    | {
        lowerValue: number;
        upperValue: number;
      }
    | { value: number }
  );
  let props: Props = $props();
</script>

<div class={cn('flex flex-col gap-1', props.class)}>
  {#if props.title}
    <p class="p3">{props.title}</p>
  {/if}
  {#if 'lowerValue' in props}
    <DualSlider {...props} bind:lowerValue={props.lowerValue}   bind:upperValue={props.upperValue}/>
  {:else}
    <Slider {...props} bind:value={props.value} />
  {/if}
  {#if props.display}
    <p class="p3">{props.display}</p>
  {/if}
</div>

How do I declare bindable lowerValue, upperValue, and value?

<script lang="ts">
  import DualSlider from '$lib/custom/components/DualSlider.svelte';
  import Slider from '$lib/custom/components/Slider.svelte';
  import { cn } from '$lib/utils';
  type Props = {
    class?: string;
    title?: string;
    display?: string;
    min: number;
    max: number;
    lowerValue?: number;
    upperValue?: number;
    value?: number;
  };
  let {
    class: className = '',
    title,
    display,
    min,
    max,
    lowerValue = $bindable(),
    upperValue = $bindable(),
    value = $bindable(),
  }: Props = $props();
</script>

<div class={cn('flex flex-col gap-1', className)}>
  {#if title}
    <p class="p3">{title}</p>
  {/if}
  {#if lowerValue !== undefined && upperValue !== undefined}
    <DualSlider bind:lowerValue bind:upperValue {min} {max} />
  {:else}
    <Slider bind:value {min} {max} />
  {/if}
  {#if display}
    <p class="p3">{display}</p>
  {/if}
</div>

This works, but we lose a major feature of TS. The reason for typing props in the first place: forcing the correct values to be passed when using a component. Now someone has to read the code or documentation to know, either both lowerValue and upperValue or value alone.

What if we want a getDisplay function instead?

<script lang="ts">
  import DualSlider from '$lib/custom/components/DualSlider.svelte';
  import Slider from '$lib/custom/components/Slider.svelte';
  import { cn } from '$lib/utils';
  type Props = {
    class?: string;
    title?: string;
    min: number;
    max: number;
    lowerValue?: number;
    upperValue?: number;
    value?: number;
    getDisplay?: ((value: number) => string) | ((lowerValue: number, upperValue: number) => string);
  };
  let {
    class: className = '',
    title,
    getDisplay,
    min,
    max,
    lowerValue = $bindable(),
    upperValue = $bindable(),
    value = $bindable(),
  }: Props = $props();

  let display = $derived.by(() => {
    if (getDisplay) {
      if (lowerValue !== undefined && upperValue !== undefined) {
        return getDisplay(lowerValue, upperValue);
      } else {
        return getDisplay(value); //Expected 2 arguments, but got 1.ts(2554)
      }
    }
  });
</script>

<div class={cn('flex flex-col gap-1', className)}>
  {#if title}
    <p class="p3">{title}</p>
  {/if}
  {#if lowerValue !== undefined && upperValue !== undefined}
    <DualSlider bind:lowerValue bind:upperValue {min} {max} />
  {:else}
    <Slider bind:value {min} {max} />
  {/if}
    <p class="p3">{display}</p>
</div>

The above fails and if we override the TS error, the code is error prone. Without unpacking, everything is perfectly constrained, less error prone, and TS is statisfied:

<script lang="ts">
  import DualSlider from '$lib/custom/components/DualSlider.svelte';
  import Slider from '$lib/custom/components/Slider.svelte';
  import { cn } from '$lib/utils';
  type Props = {
    class?: string;
    title?: string;
    min: number;
    max: number;
  } & (
    | {
        lowerValue: number;
        upperValue: number;
        getDisplay: (lower: number, upper: number) => string;
      }
    | {
        value: number;
        getDisplay: (value: number) => string;
      }
  );
  let props: Props = $props();

  let display = $derived.by(() => {
    if ('lowerValue' in props) {
      return props.getDisplay(props.lowerValue, props.upperValue);
    } else {
      return props.getDisplay(props.value);
    }
  });
</script>

<div class={cn('flex flex-col gap-1', props.class)}>
  {#if props.title}
    <p class="p3">{props.title}</p>
  {/if}
  {#if 'lowerValue' in props}
    <DualSlider {...props} bind:lowerValue={props.lowerValue} bind:upperValue={props.upperValue} />
  {:else}
    <Slider {...props} bind:value={props.value} />
  {/if}
  <p class="p3">{display}</p>
</div>

[7nik]

Did you read my second comment?

[Aron-Lomner]

I misread it the first time. It is a workaround, but like you said not perfect. Specifically in the second situation, it would require separate getDisplays (getDisplaySingle, getDisplayDual). Thank you for the help, I will be using your solution for the time being.

[CosmoMyzrailGorynych]

So why was this issue closed?
This is clearly a bug in Svelte parser that can't understand the union/merge types. I'm getting

$bindable() can only be used inside a $props() declaration
https://svelte.dev/e/bindable_invalid_location

while trying to use @xyflow/svelte@next package, where the compiler breaks because it thinks $bindable is misused, when I can clearly see that it is written correctly:

  // irrelevant code removed
    attributionPosition,
    children,
    nodes = $bindable([]),
    edges = $bindable([]),
    viewport = $bindable(undefined),
    ...props
  }: SvelteFlowProps & HTMLAttributes<HTMLDivElement> = $props();

[CosmoMyzrailGorynych]

Okay, it's a bit more complicated. Creating an issue.

[7nik]

Please pay more attention to the issue - it is not related to yours. And provide a proper reproduction. The provided code and info is way far from being enough to understand and especially investigate the problem.

[CosmoMyzrailGorynych]

Did you read my second comment?