Discussion: is there value in creating a section dedicated to attributes in the contextual information?

[troyvassalotti]

First, thank you for this plugin. We're using it to great success in our Lit component library.

I didn't see anything related to this yet, but I was wondering if there's any value in displaying a component's attributes in the contextual information tooltip? It's great to see all of an element's slots, events, etc. and - at least personally - would find it useful to see what attributes/props are available in the area.

With the way it works now, the autocomplete of attributes and their details works so long as you know what attribute you're looking for. If you could see the list of custom attributes alongside the slots and events , it can save time in looking them up.

Thoughts?

[claviska]

I agree that this would be nice for discoverability. In the meantime, I believe pressing Ctrl + Space will do this.

[break-stuff]

Hey @troyvassalotti,

Thank you for the feedback! I'm glad you are able to take advantage of it. I think the original idea was that custom attributes would be identifiable when adding attributes to the element as part of the autocomplete, but that wouldn't include properties. I'm not opposed to this idea. I am a little worried that it may really bloat the content in that pop-up. What do you think?

[troyvassalotti]

Yeah, my worry was also about how much is too much for the pop-up. I rationalized it by imagining it could be toggled off like slots, events, css properties & parts are.

To @claviska's point, Ctrl + Space does help in the meantime (I didn't know that shortcut). I think the added benefit of a docs section is knowing that my-button has a size and variant prop ahead of time to avoid scrolling the whole list that Ctrl + Space gets you.

[claviska]

Would having a reference link to the docs be reasonable if it showed up as a clickable link, perhaps under the name/description?

@break-stuff I noticed that @reference is supported, but I don't see anything appear in custom-elements.json or vscode.html-custom-data.json when I add that tag. 🤔

[break-stuff]

It shouldn't add anything to custom-elements.json, but it should show up at the bottom of the element's info pop-up. Let me check.

[break-stuff]

It looks like those are working. You can also add links within your descriptions using markup.

[claviska]

Wait, this seems to have no effect on either generated file. How would it get pulled into VS Code otherwise?

[break-stuff]

I think you're missing the dash after "Documentation".

* @reference Button Documentation - https://shoelace.style/components/button

[claviska]

Unfortunately, I'm getting the same result with and without the dash. Just in case, I disabled my CEM plugins but I'm not seeing any matching reference tag or link in the generated files. 🤷🏻‍♂️

[break-stuff]

It looks like I was able to find the issue and I pushed a patch. Let me know if you run into any other issues.

@troyvassalotti does the ctrl + space functionality solve your problem or do you think we still need attributes documented in the info popup?

[troyvassalotti]

I'm not opposed to the option to have it documented because I like the immediate visibility, which could be biased by the fact that in our library the content is majority driven by a component's attributes and less by its slots (many of ours don't use slots), and I get that's likely not the case with most other libraries. I can see us using reference links as mentioned to point to documentation to get around that. Regardless of if you decide to add this in, I appreciate the time to talk it out!

…

On Thu, Jan 12, 2023, at 2:53 PM, Burton Smith wrote: It looks like I was able to find the issue and I pushed a patch. Let me know if you run into any other issues. @troyvassalotti does the `ctrl` + `space` functionality solve your problem or do you think we still need attributes documented in the info popup? -- Reply to this email directly or view it on GitHub: #16 (comment) You are receiving this because you were mentioned. Message ID: ***@***.***>

[break-stuff]

Let me play with it. I think properties should for sure be included since they won't appear in the autocomplete.