Is there a way to allow in my custom component the `data-*` props?

[frederikhors]

Describe the problem

I'm not a fan of {...$$restProps} because:

1. if I'm creating a component I would like to handle the possible props

2. when using my custom component and I have a prop like isDisabled and by mistake I use disabled nor my IDE nor npm run check can alert me about this error

So I would like to remove {...$$restProps} from my custom component even because the only need I have now is because I need to pass this:

<script lang="ts">
	import Button from '$lib/Button.svelte';

	export let stat = false;
</script>

<Button
	on:click={() => something}
	data-stat={stat ? 'something' : undefined}
>
  Hello
</Button>

Is there a way to allow in Button (my custom component) the data-* props?

Importance

would make my life easier

[adimankotia]

Yes, this is possible. Take a look at the REPL here.

[frederikhors]

Yeah. I know thanks. But you already know that you need data-stat here.

data- attributes are used when you don't know yet what you need.

[peufo]

Hey, I think you can use a data prop like this.

Juste convert it on data-* with this line:

$: dataProps = Object.entries(data).reduce((acc, [key, value]) => ({...acc, [`data-${key}`]: value}), {})

[dreitzner]

@peufo that is possible, but this is a very computational expensive pattern.

I would propose a different strategy.
There is currently no way to export a prop like data-foo from a child component (data_foo, dataFoo work fine).
So in my opinion, if those data props can not be used anyway, they should pass through to the element.
The logic would be similar to style props
In that case, we would have the all data-* available in the element.dataset.
This should also be a non breaking change.
Here is an example on how the ergonomics could work: https://svelte.dev/repl/1c33e633aaa7499dbbc408a46a25e650?version=3.58.0

@dummdidumm do you think this could be a viable option?

[dummdidumm]

I think we shouldn't change any runtime semantics here, {...$$restProps} is the way to go. What's requested is to get type errors when using $$restProps, and for that we have the (still experimental) $$Props interface: https://github.com/dummdidumm/rfcs/blob/ts-typedefs-within-svelte-components/text/ts-typing-props-slots-events.md#typing-props

[jjagielka]

The $$Props interface is great to implement inheritance of components. And that pattern works perfectly:

<script>
  import Button from "./Button.svelte";
  import type { ComponentProps } from 'svelte';

  export let extraProp: boolean = false;

  // propagate props type from parent comp
  interface $$Props extends ComponentProps<Button> {
    extraProp: boolean | undefined;
  }
</script>

<Button {...$$restProps}>
  {something using extraProp variable}
</Button>

The only drawback is that if we have lots of extra props it's a nightmare to double the declarations.
Would it be possible to have some kind of self type for props from current component?

  // propagate props type from parent component and the current one
  interface $$Props extends ComponentProps<Button>, ComponentProps<Self> {}

[dummdidumm]

Closing since the $props rune in Svelte 5 handles these cases much better, for example you can do

let { foo, ...rest }: { foo: string, [key: `data-${string}`]: any } = $props()