Feature request: enable TS autocomplete for Svelte HTML element definitions

[ivenuss]

Problem

SvelteHTMLElements type used to be set of typed HTML elements, so it was possible to get the union of literals by simply getting all its keys using keyof SvelteHTMLElements.

Now that it can be any key, autocompletion no longer works because 'a' | ''div' | string will always be of type string.

Use case

Auto completion for svelte:element tag.

<script lang="ts">
  import type { SvelteHTMLElements } from 'svelte/elements';

  type Props = {
    as: keyof SvelteHTMLElements;
  };

  let { as }: Props = $props();
</script>

<svelte:element this={as}></svelte:element>

Describe the proposed solution

Autocompletion is possible thanks to the & {} trick in TS, so in this case add it to name key. Preserves that the key can be any string, and adds autocompletion.

# packages/svelte/elements.d.ts
- [name: string]: { [name: string]: any };
+ [name: string & {}]: { [name: string]: any };

---

If it makes sense to you, I have a branch ready with changes.

Importance

would make my life easier

[paoloricciuti]

I think it makes perfect sense...it you verified it works feel free to push a PR and thanks

[ivenuss]

Will do! Yeah, the example on screenshot comes from modified version.

[ivenuss]

Merged #15972.