Material-ui: Is there a way to import all components?

[ryanpcmcquen]

I would like to do:

import * as MaterialUI from "material-ui";

To have all components accessible as properties on the MaterialUI object. Is there a way to do this or something similar?

Right now when I do that I just get an object with a colors property.

• [X] I have searched the issues of this repository and believe that this is not a duplicate.

Context

I am trying to create async wrappers for each component inside of my build system.

[oliviertassinari]

Right now when I do that I just get an object with a colors property.

@ryanpcmcquen I would expect it to work.

I am trying to create async wrappers for each component inside of my build system.

What's the purpuse of the async wrapper?

[ryanpcmcquen]

Well, we want to be able to 'hot-load' components using React Habitat in our CMS.

[ryanpcmcquen]

Here is a sandbox: https://codesandbox.io/s/pmpn8w60o0

[oliviertassinari]

@ryanpcmcquen All the components are present, but non enumerable.

[ryanpcmcquen]

@oliviertassinari, is there a way to make them enumerable?

[oliviertassinari]

My bad, they are already enumerable:
https://github.com/mui-org/material-ui/blob/caf5513c6f19d1b776801c96d1715b1dd1a6d1b0/src/index.spec.js#L11-L21

import * as MaterialUI from "material-ui";

console.log(Object.keys(MaterialUI).length); // 101

[ryanpcmcquen]

Thank you @oliviertassinari!

[ryanpcmcquen]

@oliviertassinari, is there any way to exclude the utilities and colors that get included with that list (so it is just components)?

[oliviertassinari]

is there any way to exclude the utilities and colors that get included with that list (so it is just components)

@ryanpcmcquen I don't think so. You need a (white/black)list.

[ryanpcmcquen]

@oliviertassinari, do they all begin with a lowercase letter?

[oliviertassinari]

@ryanpcmcquen The uppercasing can be as good filter. You can prune all the lowercase modules. They will never be react components. But you can get some classes that aren't component with an uppercase.

[ryanpcmcquen]

So this may be of use to someone in the future:

import * as MaterialUI from "material-ui";

const MaterialUIComponents = Object.keys(MaterialUI).filter((key) => {
    const firstLetter = key.slice(0, 1);
    return firstLetter === firstLetter.toUpperCase() ? key : false;
});