possibility to define a $bindable props that it possibly undefined?

[Ennoriel]

I encountered this 'issue' in the process of migrating the library svelte-awesome-color-picker. Let's consider these two props:

let {
    nullable = false,
    hex = $bindable<string | undefined>(nullable ? undefined : '#ff0000')
    / ** */
}: Props = $props();

The component provides a default value for hex, which is a string or undefined.

The problem I'm having is that when I use the component by binding the hex props with an undefined variable, there's an error:

Svelte error: props_invalid_value. Cannot do `bind:hex={undefined}` when `hex` has a fallback value

I first thought that because the hex props in the components is possibly undefined, there's no reason to why we cannot set the variable bound to this props to undefined. It's also possible that I missing something here.

I'm not sure why this protection was added to svelte 5. In any case, I don't see how to handle this situation or if it's good behavior.

Here is the REPL that displays the case.

[Ennoriel]

From a discussion, I understand that one solution would be to use and initialize the variable with null. That way, the default value is not used.

[webJose]

Try this:

<script>
	let {
    nullable = false,
    hex = $bindable()
	} = $props();

	if (hex === undefined && !nullable) {
		hex = '#ff0000'
	}
</script>

Does this work for you?