Stencil: feat: document the slots of a component

[brandyscarney]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[ ] bug report
[x] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

It would be nice to document the slot options on a component, something like this could go above the component:

/** 
 * @slot start places to the left of the label
 * @slot end places to the right of the label
*/
@Component(..

[manucorporat]

Seems like a good idea!

Right now we can support this use case, using the docsTags of each component:

docsTags: [
  {'name: 'slot', text: 'start places to the left of the label'},
  {'name: 'slot', text: 'end places to the right of the label'}
]

but it would be great to provide this as a end-to-end feature:

slots: [
  {name: "start", docs: "places to the left of the label"}
  {name: "end", docs: "places to the right of the label"}
]

[brandyscarney]

@manucorporat How soon can you add this? I need it tomorrow.

[amwmedia]

If I were able to implement the fully baked solution proposed, would a PR be welcomed? 😉

Ideally I'd like to see this provide slot documentation even in cases where no comments are present. We should be able to glean the docs data from the markup used in the template if that's AST parse-able.

@brandyscarney @manucorporat

[NKBelousov]

Nice idea, it would be great to immediately understand if component supports slots

[brandyscarney]

This has been added in Stencil, you can see it in action here: https://github.com/ionic-team/ionic/blob/6e0b9c45489889266620ee2ca38c33fdf8ce3f3b/core/src/components/button/button.tsx#L12-L15

We haven't added it to be displayed in the docs yet, but the data is there for the site to use.

[NKBelousov]

This has been added in Stencil, you can see it in action here: https://github.com/ionic-team/ionic/blob/6e0b9c45489889266620ee2ca38c33fdf8ce3f3b/core/src/components/button/button.tsx#L12-L15

We haven't added it to be displayed in the docs yet, but the data is there for the site to use.

Thanks