[RFC] Should we flatten the folder structure?

[oliviertassinari]

This issue is opened to discuss the following proposal: flattening the folder structure.

The problem

The problem I try to solve is the following. Let's say you want to use the circular progress component. You have to know two things to get the import working.

1. Know the name of the component: CircularProgress.
2. Know the import path: Progress/CircularProgress.

It's unclear to me why CircularProgress is under a Progress folder or why Radio isn't under a Switch folder. There are many more examples in the codebase.

The solution

I think that we can save (2.) complexity by flatting the folder structure. We can make the import path predictable.

import COMPONENT_NAME from 'material-ui/COMPONENT_NAME`;

Going back to the example, we would move src/Progress/CircularProgress.js to src/CircularProgress/CircularProgress.js. People will be able to use the following import:

-import CircularProgress from 'material-ui/Progress/CircularProgress';
+import CircularProgress from 'material-ui/CircularProgress';

Let me know what you think about this proposal! The issue was raised by @neoziro.

[thangngoc89]

Yes please. I have spent hours looking in the docs to know the exact path of the components for importing.

[mbrookes]

Note that there are two possible approaches to this:

1. Flatten the /src dir
2. Flatten at build time

The first has the advantage of simplicity, once it's done, it's done; but the with disadvantage of a large /src dir list.

The second has added complexity (build-time script), but:

• Maintains backwards compatibility with current import sytax (single line named import for multiple related components), whilst also allowing flat imports as described above.
• Maintains an ordered hierarchial /src directory

[oliviertassinari]

@mbrookes I would give a strong +1 for option n°1.

[oliviertassinari]

@mbrookes also, I know you did an experimentation in the direction with https://github.com/mbrookes/material-ui/tree/flat-src-dir/src. It's not exactly what I'm suggesting. I'm suggesting that we keep grouping the tests, TypeScript definitions, source of a single component under the same folder.

[mbrookes]

@oliviertassinari That'll help.

Edit: That should also allow us to maintain backwards compatible imports if desired, as the index.js for the root components can still provide named exports for the sub-components.

[mbrookes]

@oliviertassinari I've updated https://github.com/mbrookes/material-ui/tree/flat-src-dir/src per current suggested structure. Only index.js and index.d.ts in each base component directory is updated. each new subcomponent directory would still needs it's own index files.

[kgregory]

@mbrookes I like that. I'd also lobby for moving svg-icons and test-utils to internal.

[mbrookes]

@kgregory svg-icons I agree. test-utils are documented though: https://material-ui.com/guides/testing/

[kgregory]

test-utils are documented though: https://material-ui.com/guides/testing/

@mbrookes indeed they are, my bad!

[mbrookes]

All 👍, no 👎, I think it's a go!