Exports configuration

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 package entry point 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",
      }
    }
  }
}