Utility/Includes patterns

[kaisermann]

Is your feature request related to a problem? Please describe.

We should have a recommended way of organizing includes/utilities in our projects. I've seen some variations of:

• A utils directory with a single index.ts file (doesn't make sense to me at all)
• A modules/includes/utils directory with separate files with default exports

Describe the solution you'd like

I'd like to have a recommended way of adding utilities to a project. Personally I dislike creating a lot of folder structure with complex names, so I usually prefer a includes/modules directory with a file for each utility context or for each method. I also dislike having them exported as default since the name can be easily changed wherever they're imported.

Example:

src/runtime/
├── includes/
│   ├── flatObj.ts
│   ├── formatters.ts
│   ├── getClientLocale.ts
│   ├── loaderQueue.ts
│   ├── lookup.ts
│   └── memoize.ts

Or

src/runtime/
├── modules/
│   ├── flatObj.ts
│   ├── formatters.ts
│   ├── getClientLocale.ts
│   ├── loaderQueue.ts
│   ├── lookup.ts
│   └── memoize.ts

Describe alternatives you've considered

Additional context

[tiagonapoli]

I prefer not to use default exports as well:
https://basarat.gitbook.io/typescript/main-1/defaultisbad

And I liked the idea of using includes for utilities

[klzns]

Why modules

I really like the name modules for this type of.... modules.

src/
└── modules/
    ├── flatObj.ts
    ├── formatters.ts
    ├── loaderQueue.ts
    ├── lookup.ts
    └── memoize.ts

The idea here is that any module inside this folder might be one day a npm package. So the mindset is that each module must have a clear API and specific domain to solve.

This pattern is used by developers of react-router.

Why not utils

When one uses the name utils this mindset and constraints are not clear. It's pretty common to see something like:

src/
└── utils/
    ├── CartUtils.ts
    └── CurrencyUtils.ts

And the developers add new functions to this files ad hoc.

[guilhermebruzzi]

On inStore we are trying to do:

src/
└── cart/
    ├── components
    ├──  actions.ts
    ├──  ...
    └── utils.ts
└── /
    ├── components
    ├──  actions.ts
    ├──  ...
    └── utils.ts

It's like the modules idea that @klzns said but with folders on the root