Type definitions for HTML elements

[rChaoz]

Describe the problem

In Svelte 5, it is easier than ever to type props and forward them to an element:

<script lang="ts">
    type Props = Record<string, unknown> & {
        x?: number
        s: string
    }

    let { x = 5, s, ...restProps } = $props
</script>

<button {...restProps}>
    The number is {x} and the string is {s}
</button>

This is great, especially that it now works with listeners as well. However, there isn't really a way to get type assistance for the extra props (for the button element, in this case).

Describe the proposed solution

Built-in type classes for this case, so we could have something like

interface Props extends HTMLButtonProps { ... }

Importance

would make my life easier

[dummdidumm]

This already exists, just import what you need from svelte/elements

[rChaoz]

@dummdidumm I did not know that. Could this potentially be re-opened and tagged as documentation? I could not find info about this anywhere, neither on the official nor the preview site.

[svelte-kit-so-good]

svelte/elements

Yea using the search on the site for svelte/elements doesn't really filter to it adequately; even doing this in google search site:svelte.dev 'svelte/elements' turns up nothing useful and that's knowing what to look for. I only found out about it from the Discord, but a vague example is buried on this page: https://svelte.dev/docs/typescript#enhancing-built-in-dom-types

[rChaoz]

Yep, that's exactly what I did. That page says that the types may be incomplete, but doesn't actually state what exactly those types are or how to use them, and doesn't mention the keywords "svelte/elements" to be easily findable either.

[rChaoz]

If I want to make a PR for this - where should I add the documentation? There are a two places I can think of:

1. in Svelte 5 import docs (link) - since listeners are now just props, would be very easy to explain and add an example
2. in Svelte.dev - a new entry under Runtime - same as above + should include a brief mention about forwarding events as well

[dummdidumm]

The best place would be within the MISC / Typescript section for now. Mid term we have to rethink the docs structure, but that's a separate process which hasn't started yet.

[rChaoz]

Initially I tried starting to write where you said but then I realized there's an issue: there's no way to type rest props in Svelte 4. The only way to do it would be using the $$Props interface, which is intentionally left out from the documentation (and instead a link to the RFC is provided). And even then, you'd have to write the types twice:

interface $$Props extends HTMLDivProps {
    myProp1: number
    myProp2: string
}

export let myProp1: number
export let myProp2: string

I don't think adding this to the docs would be a great idea. How about a new entry on the Svelte 5 preview site, under imports, for now? And it would make more sense when the docs will eventually be unified together.