rgossiaux/svelte-headlessui

Add index signature to `TRenderProps` to allow passing `data-*` attributes

andreavaccari opened this issue · 0 comments

Hi @rgossiaux, thank you for your work. We're using version 1.0.2.

We need to pass data-* attributes to HeadlessUI components, e.g.:

<Switch data-some-attr="foo" ...>
  ...
</Switch>

The attributes are correctly passed to the HTML element:

<button data-some-attr="foo" ...>
  ...
</button>

However, running tsc --noEmit, TypeScript complains that:

Object literal may only specify known properties, and '"data-some-attr"' does not exist in type 'Omit<TRenderProps<{ checked: boolean; }, "button", "button">, TInternalProps | "as" | "static" | "unmount"> & { as?: "button" | undefined; } & { checked: boolean; }'

Would it be ok to modify the definition of TRenderProps to include an index signature:

  [attr: string]: string

We could also enforce that index props start with data-, although this is not necessary.

If you give me the green light, I will send a PR. Thank you!