Skip to content

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

Closed
@ivenuss

Description

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

Image


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

Importance

would make my life easier

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions