Suggestion: Avoid duplication as file+folder

[paramaggarwal]

Currently we do this:

App/dep.js
App.js

This is confusing to me because if I import ./App - it seems controversial to have a folder and a file of the same name in the same directory...

I recommend that we do this instead:

App/dep.js
App/index.js

[AnatoleLucet]

So the following

src
├── index
│   ├── header
│   │   └── nav.js
│   ├── footer
│   │   ├── helper.js
│   │   └── button.js
│   ├── shared
│   │   └── helper.js
│   ├── header.js
│   └── footer.js
└── index.js

Would be transformed to

src
├── header
│   ├── index.js
│   └── nav.js
├── footer
│   ├── index.js
│   ├── helper.js
│   └── button.js
├── shared
│   └── helper.js
└── index.js

I personally find it harder to read the file tree, but maybe it's just me.

Also it wouldn't describe that well who is using the file(s) in the shared folder. In the above example of you suggestion we're not able to tell if helper.js is used by src/index.js and someone in header / footer, or if he's only used by someone in header and footer. Which we can easily tell with current way that Destiny choose to move files.

I don't think this would improve the readability / understanding and even surely regress it.

[paramaggarwal]

In the suggested approach:

• Everything that is required for the header now resides in the header folder, rather than being a single file plus a separate folder. If I want to work on the header, I go to one single place - which is the folder.
• Regarding the shared folder, in both scenario's it is very clear that both header and footer are depending on it. In one case it is the file, and in another the folder. When we say folder, we always start at the index.js file inside it.

Hence, if you drop the concept of file and folder and instead think of it as a single component, then you can see that shared is used by header and footer. Plus, everything related to header resides in one single place, rather than one file separate and all the other related things inside a sibling folder.

[AnatoleLucet]

Well ok, I haven't seen it that way. Why not.

cc @benawad, @sQVe any thought?

[benawad]

We need to start thinking about how we want to customization api to work for cases like this

[paramaggarwal]

I am actually in the convention over configurability camp. Hence, if we choose to go ahead with the current approach I'll use that instead.

It's just that I tried it out on my projects and found it little awkward to have a file and a folder of the same name.

I just realised that one benefit of having the component name in the file instead of having component/index.js is that it is easier to open files because they have the relevant name.

Because this project uses an established pattern called the Fractal pattern and because I am in favour or convention over configuration - same principles as Prettier! - I'm closing this suggestion.