How do I use a hyphen in a prop name?

[unikitty37]

I would like to pass the prop data-testid to a component. In Vue, I could define the prop as dataTestid and still use data-testid in the HTML tag, because Vue converts camel case to kebab case in these circumstances, but Svelte does not seem to support this?

I don't want the ugliness of using data-testid in HTML components and dataTestid in Svelte components. Is there a way to get Svelte to handle the hyphen correctly?

[eltigerchino]

I suggest moving this discussion to the svelte repository https://github.com/sveltejs/svelte

[unikitty37]

I was going to put it there, but there doesn't seem to be a "Discussions" section on that repo.

Looking at that repository, there is an issue dating back to 2019 requesting this be added, but the discussion seemed to get derailed by custom elements, aka web components — which I am not using.

The only solution that seems to work and not cause TypeScript complaints involves $: to pick it out of $$props, but that doesn't work with TypeScript as data-testid doesn't get added to the type signature — the code runs but leaves big red complaints all over the editor window. (It also prevents me from configuring CI to not deploy if there are type errors…)

[eltigerchino]

Does https://github.com/roonie007/vite-plugin-svelte-kebab-props satisfy your requirements?

[unikitty37]

Alas, no — I tried it and got the same TypeScript complaints. It seems most people are using JavaScript and not noticing the issue :)