Main File

A component's main file exposes an API for other components to use. It makes the component's code more maintainable and comprehensible by providing a single entry point.

A main file will typically look like this, but may contain additional exports as needed:

export { Button } from './button';
export type { ButtonProps } from './button';
Copied

A component's main file is determined by one of the following (ordered by descending importance):

A manually set main file when running bit add command with the --main option.
A component's index.ts or index.js.
File with the same name as the component's directory name (e.g, button/button.ts).

Bit registers the main file in the .bitmap file of your workspace. For example:

{
  "inputs/button": {
    "scope": "teambit.base-ui",
    "version": "1.0.0",
    "mainFile": "index.ts",
    "rootDir": "base-ui/inputs/button"
  }
}
Copied

The package.json main property

Your compiler uses the component's mainFile property to determine the main property of the package.json (the path to the compiled main file.) for example, main: 'dist/{main}.js'. To learn more about configuring the component's package.json see Managing the package.json.

Changing a Component main file

To change a Component's main file, run the following:

bit add COMPONENT_DIRECTORY_PATH --id COMPONENT_ID --main FILE_PATH
Copied

For example, the following changes the main file of company.scope/ui/text to text.tsx:

$ bit add demo/ui/text --id ui/text --main text.tsx
Copied