Tutorial: Config file
In this example codebase, the design system repository has entry points in the dist
folder where the application projects import the published components. This is causing duplicate components issues since the components from both src
and dist
folders appear in Omlet.
Acme design system
The package.json
of the design system repository has the main
property set as dist/index.js
.
The index.js
file under the src
folder exporting the Button and DatePicker components.
We have a button.jsx
file under src/button
to define the Button component.
Also, there is an index.js
file under src/button
exporting the Button component.
We have a date-picker.jsx
file under src/date-picker
to define the DatePicker component.
There is an index.js
file under src/date-picker
exporting the DatePicker component.
Imports from application packages
If the application projects import the design system component with statements such as:
The CLI will detect these usages as external while scanning the application projects, and we'll have duplicate components for Button
and DatePicker
. The components in the src
folder will have 0 usages since the imports resolve to the published components in the dist
folder instead of the actual components in the src
folder.
Config file
Exports configuration
Also, to prevent the CLI from scanning the dist
folder, we need to add its glob pattern to the ignore
property so that the published components in the dist
folder will not appear in Omlet anymore.
Alias configuration
Assuming we use a bundler in our design system and have the alias for the src folder resolving any entry point that starts with @
to the src
folder. We need to map these aliases to help CLI resolve the correct entry points. The final configuration file for the design system repository should look like below.
Package-specific configuration for monorepos
Last updated