Add Examples for Contextual Components with Generics #2066
Conversation
✅ Deploy Preview for ember-guides ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| import Component from '@glimmer/component'; | ||
|
|
||
| interface OrderedList<T> { | ||
| interface OrderedList { |
There was a problem hiding this comment.
The paragraph before this code block talks about generic types, but this PR has now removed the generics in this section. Probably, that paragraph should be moved to the new section farther down. I do think the note about class backing is important, but it may be sufficiently covered in the added section.
| The item is | ||
| {{item}}. | ||
| </List> | ||
| <List @items={{array 1 2 3}} @type='unordered' {{reverse}} /> |
There was a problem hiding this comment.
This wouldn't type-check since we've passed an array of numbers when an array of strings is expected.
| <List @items={{array 1 2 3}} @type='unordered' {{reverse}} /> | |
| <List @items={{array "kdagnan" "gitKrystan" "wagenet"}} @type='unordered' {{reverse}} /> |
|
|
||
| When consuming this component, Glint can infer the type of the yielded value to be the same as the type of `@items`: | ||
|
|
||
| ```gts {data-filename="app/components/list-consumer.gts"} |
There was a problem hiding this comment.
Let's switch these examples to ts + hbs for now. It's a bit confusing to switch between them in these docs. We should migrate all of these docs to gts at once in a separate PR.
|
Thanks for the contribution! ❤️ Just had a few small comments. |
I added some examples of yielding a contextual component with generic types to the "Invokables" typescript guides.
As part of this, I broke the "Advanced Signature Techniques" section into two sections: "Union Types" and "Generic Types", and updated the existing example to focus specifically on the Union Types while the new Generic Types examples show using Generic Types in a single component or with contextual components.
This is my first contribution so please let me know if I am missing anything or something looks off.