Omlet Docs
BlogChangelogAsk the CommunityContact Sales
  • Get started
    • What is Omlet?
    • CLI & Dashboard
  • Omlet for VS Code
  • CLI & Dashboard
    • CLI
      • Your first scan
      • Set up your dashbard
      • Future scans
      • Ensure data accuracy
      • Config file
        • Exports configuration
        • Mapping aliases
        • Excluding certain components & files
        • Tutorial: Config file
      • Custom component properties
        • CLI hooks
        • Tutorial 1: Team/code owner usage
        • Tutorial 2: Package version tracking
        • Other example scripts
      • Set up regular scans
      • CLI commands
        • init
        • analyze
        • login
    • Analytics
      • Popular charts
      • Create custom charts
      • Save charts to dashboard
      • Share charts and dashboards with your team
      • Download chart data
    • Components
      • Search and filter components
      • Component tags
      • Dependency Tree
      • Props tracking
    • Workspace & Account
      • Invite team members
      • Renaming projects
      • Update your email address
      • Access your billing details & invoices
  • Security
    • Security in Omlet
    • Data collection
  • Help
    • Pricing
    • FAQs
      • How detection works?
      • Monorepo support
      • How to delete scans?
      • Omlet vs. React Scanner
      • Working with multiple workspaces
    • Troubleshooting
      • Debugging CLI issues
      • Some components aren't detected
      • API failed or timeout
      • Are you behind a proxy?
      • Troubleshooting Git errors
Powered by GitBook
On this page
  1. CLI & Dashboard
  2. CLI
  3. Config file

Exports configuration

PreviousConfig fileNextMapping aliases

Last updated 1 year ago

Make sure to create the .omletrc file in the root directory of your repository before getting started.

The exports property is a series of entries that tells the CLI about the corresponding entry points of a package in the source code.

If your design system library is used in your application repositories as an external package, you can define the exports property to tell the CLI where the entry points of a package correspond in the source code.

This is very similar to the Node.js configuration (i.e., exports and main fields of the package.json file). The difference is, unlike Node.js exports mapping, these patterns should point to the corresponding source module for each package export.

The Omlet CLI follows the same format and convention as Node.js for the exports configuration—except for the conditional exports. The main entry point,import { … } "@acme/design-system", is designated with "."

Let's say there's a project with the following structure:

If the package.json file has the entry point defined via the main field:

package.json
{
  "name": "@acme/design-system",
  "main": "build/index.js"
}

The following configuration is needed so that the CLI can map exported modules and names to their corresponding sources:

.omletrc
{
  "exports": {
    ".": "src/index.ts"
  }
}

If you have a more complex entry-point setup in the package.json file similar to the following:

package.json
{
  "name": "@acme/design-system",
  "exports": {
    ".": "./build/index.js",
    "./lib": "./build/lib/index.js",
    "./lib/*": "./build/lib/*.js",
    "./lib/*.js": "./build/lib/*.js",
    "./feature": "./build/feature/index.js"
  }
}

Then, the corresponding export configuration should look like this:

.omletrc
{
  "exports": {
    ".": "./src/index.ts",
    "./lib": "./src/lib/index.ts",
    "./lib/*": "./src/lib/*.tjs",
    "./lib/*.js": "./src/lib/*.ts",
    "./feature": "./src/feature/index.ts"
  }
}

If you have a monorepo, you can define package-specific exports configurations using the workspaces field.

.omletrc
{
  "workspaces": {
    "@acme/design-system": {
      "exports": {
        ".": "./src/index.ts",
      }
    }
  }
}
package entry point