svelte
svelte copied to clipboard
Add typeof example to web docs on Component and ComponentProps
Describe the problem
A follow-up to #13770 which identified using Component<typeof MyComponent>
and ComponentProps<typeof MyComponent>
, this requests that an example is added to web docs typescript#The-Component-type.
Describe the proposed solution
A typical use case is when using wrapper components (for ComponentProps). It may be too much revision, but it ties along nicely with Typing wrapper components two sections above, and may fare well to move that section below Typing $state. That said I understand that $state typing is introduced so late on page as it requires generics and so do Component and ComponentProps. So a rough idea is after withProps()
, add
Use typeof MyComponent
for the type of your component.
<script lang="ts">
import type { ComponentProps, Snippet } from 'svelte';
import Banner from './Banner.svelte';
let { name = 'Bruce', children, ...bannerProps} : {name?: string, children?: Snippet } & ComponentProps<typeof Banner> = $props()
</script>
<p>{name}</p>
<Banner {...bannerProps}>
{@render children?.()} // Banner.svelte needs to accept snippets or legacy slots for this to work.
</Banner>
It's just a rough idea, feel free to totally change it.
Importance
would make my life easier