Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add typeof example to web docs on Component and ComponentProps #13940

Closed
cloudymeatball opened this issue Oct 25, 2024 · 1 comment · Fixed by #14065
Closed

Add typeof example to web docs on Component and ComponentProps #13940

cloudymeatball opened this issue Oct 25, 2024 · 1 comment · Fixed by #14065

Comments

@cloudymeatball
Copy link

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

@a4lg
Copy link

a4lg commented Oct 27, 2024

I totally agree about ComponentProps<typeof MyComponent>.
About Component<...>, I wonder how documentation of Component type directly helps normal developers (I think adding an example of Component makes sense but it's at least an advanced topic).

IMHO, documenting / adding examples of an instance/exports of the component (ReturnType<typeof MyComponent>) might be important just as ComponentProps (for instance, bind:this target to a Svelte 5 component (with some exports) will require this type).
Note: if #13441 is accepted, ComponentExports<typeof MyComponent> will be more natural.

dummdidumm added a commit that referenced this issue Oct 31, 2024
and a few related changes/enhancements
closes #13940
Rich-Harris added a commit that referenced this issue Nov 3, 2024
* docs: more docs on TS types

and a few related changes/enhancements
closes #13940

* Apply suggestions from code review

* adjust

* Apply suggestions from code review

* Update documentation/docs/07-misc/03-typescript.md

* Update documentation/docs/07-misc/03-typescript.md

* Update documentation/docs/07-misc/03-typescript.md

---------

Co-authored-by: Rich Harris <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants