Submodules in custom React component library

Viewed 172

I've created a React component library which is getting quite big now, so I want to split it into submodules but am unable to do so.

The current setup is like this:

src/index.ts

export * from "./components";
export * from "./utils";

src/components/index.ts

export { default as CustomComponentOne } from "./CustomComponentOne";
export { default as CustomComponentTwo } from "./CustomComponentTwo";

src/utils/index.ts

export { default as utilOne } from "./utilOne";
export { default as utilTwo } from "./utilTwo";

package.json

{
    ...
    "main": "dist/index.js",
    "module": "dist/index.modern.js",
    "source": "src/index.ts",
    "scripts": {
        "build": "microbundle-crl --no-compress --no-sourcemap --format modern,cjs",
        ...
    },
    ...
}

My goal is to enable imports like:

import { CustomComponentOne } from "my-library/components"
import { utilOne } from "my-library/utils"

while preserving imports like

import { CustomComponentOne, utilOne } from "my-library"

The last import example is how everything is now imported, but I want to add imports like the two above. I was able to do this with compiling the project with tsc instead of microbundle-crl because this generated a .js file for each .ts file, but microbundle-crl creates 1 .js file as output. But SCSS files etc were not compiled with tsc (obviously).

Does anybody know how to go about this?

0 Answers
Related