JS Export Files

I have a personal grudge against files like this:

export * from './input'
export * from './input-field'
export * from './check-label'
export * from './checkbox'
export * from './dropdown'
export * from './icons'
export * from './loader'
// ... And so on

There are few reasons why this is suboptimal, one of which is name clashing.

For example ./input file should be allowed to, say export type Props (instead of the verbose export type InputProps).

but then index.ts cannot do:

export * from './input';
export * from './button';

because both input and button might export Props type. so we have to choose. We can do:

button.tsx:

export type ButtonProps = { ... }
// instead of more preferable
// export type Props = { ... }

or we need to juggle index.ts files to do:

export { Input } from './input';
export type { Props as InputProps } from './input';

but this is not very ergonomic. Ultimate solution is to have per-component exports:

import { Input, Props } from 'components/ui/input'
// in case of name clash we can rename at use-site:
import { Button, Props as ButonProps } from 'components/ui/button'

this way index.ts export file is not needed at all.

to achieve components/ui/input path, we can leverage package.json exports field:

{
  "exports": {
    ".": "./dist/index.js",
    "./input": "./dist/input.js"
  }
}

this can be automated