Skip to content

Feature request: enable TS autocomplete for Svelte HTML element definitions #15971

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ivenuss opened this issue May 20, 2025 · 2 comments
Open

Comments

@ivenuss
Copy link

ivenuss commented May 20, 2025

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 };

Image


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

Importance

would make my life easier

@paoloricciuti
Copy link
Member

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

@ivenuss
Copy link
Author

ivenuss commented May 20, 2025

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants