Allow $props.id() to be the default value of a property

[webJose]

Describe the problem

In a component library, one might allow a component to accept an HTML element ID, or the component could default to the value of $props.id().

As it stands today, $props.id can only be used to initialize a const variable in the component's script.

Furthermore, even if the component did not accept its ID to be set externally via properties, it is helpful for the component to be able to share its ID by means of a binding.

To achieve this today, one would need to do something like this:

<script>
  let {
    id = $bindable()
  } = $props();

  const cid = $props.id();

  $effect.pre(() => {
    id = cid;
  });
</script>

Describe the proposed solution

It would be nice if one could simply use $props.id() as the default value of a property:

<script>
  let {
    id = $bindable($props.id())
  } = $props();
</script>

Externalizing the value of $props.id() is a must for components that create things like accessible text, where the id is needed elsewhere in a described-by attribute, to name an example that is not the obvious <label for={id}>... example.

Importance

would make my life easier

[paoloricciuti]

Why not just this?

<script>
	const _id = $props.id();
	let { id = $bindable(_id) } = $props();
</script>

[webJose]

Why not just this?

<script> const _id = $props.id(); let { id = $bindable(_id) } = $props(); </script>

Hehe, that is much nicer. I haven't done Svelte at work for months and it is showing, lol.

2 lines of code definitely is better than my version. Feel free to decide whether or not you want to keep this feature request open. I'm OK with this 2-liner solution.

[dummdidumm]

We can revisit this if the request becomes more common - until then closing, thank you.