Use dot to get value by object property name for components

[ezhlobo]

What do you think if we allow using components nested in objects. Like for React.Fragment?

React.Fragment
  Icons.Open
  Icons.Close

I'm not sure but there is a chance that we can understand if React or Icons in example above are not components and then go deeper and provide real components by resolving the whole chain: React.Fragment and Icons.Open. I can investigate this.

The other option is to prohibit class names start with up-case. It's a serious restriction, so I would like to investigate the first option and discuss both with you before creating a PR.

[ezhlobo]

Hm, I made a mistake. It must be not possible to get any extra field from imported things, because babel does not resolve imports itself, or it will be extremely complicated. So we have only one way to do that: treat class names which start from up-case as a property always.

[ForbesLindesay]

The other option would be to use xml style namespacing:

React:Fragment
  Icons:Open
  Icons:Close

[ezhlobo]

@ForbesLindesay I like this option but I had been afraid that it might confuse, so I asked some feedback from my colleagues. No one was positive about this, mostly because it's unusual and not obvious.

For our purposes I created a separate plugin for babel which takes jsx and convert it to what we need by checking the first letter: ezhlobo/babel-plugin-transform-jsx-classname-components.

It requires more work on babel end, so it might be not ideal for everyone. So my final suggestion is not to do anything with this. But what thoughts do you have?

[ForbesLindesay]

I think on the whole, you can handle this by just doing const Fragment = React.Fragment; so it's probably fine to just leave this as is.

[ezhlobo]

Agreed.