svelte icon indicating copy to clipboard operation
svelte copied to clipboard

Add typeof example to web docs on Component and ComponentProps

Open cloudymeatball opened this issue 4 months ago • 1 comments

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

cloudymeatball avatar Oct 25 '24 20:10 cloudymeatball