Support subcomponent props suggestions

[lauriejones]

Hey Seek team – huge fan of your work and playroom is a dream so thank you very much for creating and sharing it 👏

We are very close to publishing our design system's implementation of playroom (expect a readme PR soon) but have one little issue to do with subcomponents.

A couple of the components in our system export subcomponents off of the default export. For example:

const Accordion = () => <div/>;
const Item = () => <div/>;

Accordion.Item = Item;

export default Accordion;

I am finding that these subcomponents do work in playroom, but we lose the autocomplete suggestions. We get no suggestions for either the subcomponent name after typing <Accordion. or after typing <Accordion.Item and a space for the props of the subcomponent.

We have created snippets to make dropping in a whole Accordion easier but if someone was to try and modify these in the editor they would have no assistance.

We could also individually export these subcomponents to get past this but then the code in playroom no longer matches our system.

I have tried to dig in to the codebase here to see where this logic would be but am afraid I'm a bit lost. Any help you can provide to point me in the right direction would be greatly appreciated. Thanks!

[AndrewLeedham]

I ran into this recently, so I had a dig around in the codebase. The issue seems to be because the hinting information being passed to codemirror is filtered by what components are exported from your components file specific in your config. This does not include "sub-components" because they are properties and aren't exported themselves.