Support multi-entry imports

[liyuanqiu]

Current Behavior

For ESM, TSDX bundles all code into one file(dist/xxx.esm.js)

Desired Behavior

src
├── Button
│   └── index.tsx
├── Checkbox
│   └── index.tsx
└── Radio
    └── index.tsx

See this directory hierarchy, it is desired that TSDX can generate dist like this:

dist
├── Button
│   └── index.js
├── Checkbox
│   └── index.js
└── Radio
    └── index.js

So I can import them using:

import { R: ButtonForReact, V: ButtonForVanilla } from 'mylib/Button';
import { R, V } from 'mylib/Checkbox';

It is useful to avoid the hell of naming things when I have many features in one NPM package. I can use the directories as namespaces.

Suggested Solution

Add an option in TsdxOptions to active this feature, default to false.

Who does this impact? Who is this for?

For those who got a headache in naming things.

Describe alternatives you've considered

Think about tsc, it generates code files right beside the source files. Just want the same behavior.

Additional context

[swyxio]

thanks, this is a popular feature request. i dont know what the right solution is.

[vongohren]

Cant this be done with some rollup codesplitting config? https://levelup.gitconnected.com/code-splitting-for-libraries-bundling-for-npm-with-rollup-1-0-2522c7437697

[swyxio]

thanks folks - gonna close this as a duplicate of #365 - as i think we're gonna call it multi entry. follow that issue.