Fix IntrinsicAttributes error in TypeScript definitions

[metonym]

This error has appeared several times now: #253, #300, #303

---

Component props should be typed as the intersection of the semantic element props and props exported from the component.

Furthermore, potentially adding { [key: string]: any; } can serve as a catch-all for custom component attributes. A common use case would be data-{X} selectors used for testing/analytics.

For example, the following should not throw a TS error:

<Link data-test style="color: red;" href="#">Link</Link>

The data-test and style attributes are not explicitly defined in the Link component, but they should still be valid.

[metonym]

If the "Strongly Typed Svelte Component Interface" RFC is accepted and implemented in the language tools, writing component library definitions should be a lot easier. Attempting to auto-generate definitions may work on the surface for props/slots but is untenable in the long run. Especially since it's not the official way, it's prone to breakage if the internal API changes.

[semenodp]

Hello. Is there any update on this issue? Would be happy to help adding { [key: string]: any; } if that's the solution you're taking.

[metonym]

@semenodp I'm rewriting the types, but I don't want this to block anybody in the meantime. I'd welcome a PR of adding the { [key: string]: any } for each component's props as a short term fix in the generation script would be appreciated.

[metonym]

@semenodp I've uploaded what I currently have in PR #385

A component props definition must extend its semantic HTML attributes ONLY if $$restProps are forwarded to a native HTML element.

class Tag {
  $$prop_def: svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["span"]> & {
    // ...
  }
}

As a result, the following should work (no errors from the VS Code Svelte Language Server extension or from svelte-check).

<!-- the "class", "style" attributes should not cause an error -->
<Tag
  class="class-name"
  style="color: red;"
  type="red"
  on:click="{(e) => {
    console.log(e); // MouseEvent
  }}"
>
  text
</Tag>

<TagSkeleton class="class-name" style="color: red;" />

Currently, the "class", "style" attributes will cause an error, and the event from on:click would be "Event" instead of the more specific "MouseEvent."

[metonym]

@semenodp The rewritten TypeScript definitions are released in v0.23.

Notable changes

• account for intrinsic element attributes if $$restProps is spread to a native HTML Element (this issue)
• accurately represent the shape of the library so direct imports work
• improve typings for prop default values by deferring to the Svelte compiler instead of JSDocs
• improve typings for forwarded/dispatched events
• improve typings for slots, slot props

Tests that validate the TS definitions are located in the tests folder. There should be no errors when running svelte-check or from the official Svelte VS Code language server extension.

---

Also, for anyone reading this in the future:

I walk back what I said about manually maintaining type definitions. They should be auto-generated along with the COMPONENT_INDEX.md and COMPONENT_API.json