Component file names: component.js and index.js

[stivaliserna]

Currently for each component, there’s a component folder and inside it lives an index file, e.g component/src/index.js, but this makes fuzzy file searching difficult because all the files are name the same.

To solve this pain, the idea is to have a Component.js file that contains all the component logic and an index re-export:



component
src
  |--Component.js
  |--index.js


This makes searching easier while keeping cleaner imports.


Is this also a pain for you? Do you have any other ideas on how to solve it? Would you be ok with this new structure?

Leave a comment with your thoughts and if the topic was discussed and approved in your vertical check the box below:

• Jobs
• Real State
• Motor
• Generalist
• Web Platform (Enablers)
• Cross Components (Advertising, Alerts, Login)

[arnau-rius]

There are some benefits with this new proposal from @stivaliserna described in this article
https://medium.com/bootstart/you-should-be-using-folder-components-b30b7d165c39
Check it out! 👀

[jordevo]

great article! all other advantages aside, I find this naming convention particularly useful for A/B testing.

[ivanmlaborda]

The article suggests using the ComponentName.js nomenclature (eg AtomButton.js) together with an index.js file (with the exports).
Does the proposal include this? Or is it proposed to use two files index.js and Component.js (write exactly like this, without any reference to the component name)?
I say this because a large part of the benefits that the article mentions are related to the semantics of the name of the file.

[jordevo]

I'm assuming the intention is to name component files such as:

components/atom/button/AtomButton.js
components/atom/button/index.js

otherwise, naming it Component.js we'd find ourselves in the same situation we currently experience with index.js 😉

[ivanmlaborda]

Exactly. ;)

[andresin87]

I love this aproach and started apliing it a year ago on sui-components but... the API tab breaks cuz the sui-studio is parsing the default component exported from index.js which must be declared into it. It is parsed using react-docs appling an ast-parser to the declared component propTypes default exported of this file.

Then i rollback

[andresin87]

We must apply in sui-studio a proper ast rule in the parsed index.js raw file content via swc.parse to get where is the default exported component "import directory" and then apply the react-docgen parser to it...

The point is, does this feature worth it on sui-studio?

[stivaliserna]

I would say it does, it not only helps with file navigation within sui-studio, but also @arnau-rius pointed out that ideally it should be adopted everywhere to avoid having different solutions across platforms/verticals to keep things simple if we ever need to perform a migration or change the studio/components.

[andresin87]

Ok. I'll try to take this feature if no-one have any different solution or wants to get enrolled on its development

[andresin87]

#1546

[andresin87]

https://www.npmjs.com/package/@s-ui/studio/v/11.28.0-beta.0

[nucliweb]

The Wonderful (aka Cross Login) FE team are in love with the proposal, we can't wait to have the new structure 😊

[hpintos]

When I first join Adevinta, this was one of the pains I had to deal with, but I had a bunch of other stuff going on and I ended up getting used to search for components with this pattern . Love the initiative.

[kikoruiz]

From the Web Platform point of view, it's fine to go ahead with this solution, but in order to finally implement it, we must fix before any issue it can cause in the sui-studio tooling.