rgossiaux / svelte-headlessui

Unofficial Svelte port of the Headless UI component library
https://svelte-headlessui.goss.io
MIT License
1.79k stars 97 forks source link

[svelte updated feature] Native HTML props are supported in typing! #135

Open Tal500 opened 1 year ago

Tal500 commented 1 year ago

This comment about typing might be useful to this library:

How to extend prop types from HTML elements

For everyone who wants to create a wrapper component around a certain HTML element and wants a way to type "this component accepts all properties of X", here's how you do it as of Svelte version 3.55:

<script lang="ts">
  import type { HTMLButtonAttributes } from 'svelte/elements';
  interface $$Props extends HTMLButtonAttributes {
    error: boolean; // your own additional typings
  }

  export let error: boolean;
  // ...
</script>

<!-- ... -->
<button>
  <slot />
</button>

Svelte version 3.55 comes with a new svelte/elements export which contains typings for all regular HTML elements. It will also power the next major version of svelte-check.

Originally posted by @dummdidumm in https://github.com/sveltejs/language-tools/issues/442#issuecomment-1359423782