Workspace Component Links

Components are always consumed using their absolute package name. This is true whether they are external dependencies or components maintained in the same workspace.

It means you use components like this:

import { Button } from '@my-ocompiler/workspace-compilerrg/base-ui.ui.button';
CopiedCopy

Workspace links are generated in the node_modules directory and are composed of three main elements:

  • A generated package.json file.
  • Symlinked files that reference to the Component's source files (placed in the Component Directory). These symlinked source files are crucial for Workspace type resolution by type systems like TypeScript.
  • A dist directory that includes the compiled code generated by the Workspace Compiler and referenced by the generated package.json.
├── node_modules
    ├── @my-org
        ├── base-ui.ui.button
          ├── dist # compiled/transpiled code generated by the workspace compiler.
              ├── index.js # `package.json` points here if `index.js` is the main file.
              ├── index.js.map
              ├── button.js
              ├── button.js.map
          ├── button.ts # [workspace_location]/base-ui/ui/button/button.ts
          ├── index.ts # [workspace_location]/base-ui/ui/button/button.ts
          ├── package.json # generated package.json for the component. main is pointing to dist directory.
          ├── ...
CopiedCopy

Workspace Component Links are generated in the node_modules directory using bit link.

bit link
CopiedCopy
Components links
deepblue.scopes/apps/scopes@1.0.3                  > ./node_modules/@deepblue/scopes.apps.scopes
deepblue.scopes/envs/mfe-react@1.0.0               > ./node_modules/@deepblue/scopes.envs.mfe-react
deepblue.scopes/scope-descriptor@1.0.0             > ./node_modules/@deepblue/scopes.scope-descriptor
deepblue.toolbox/string/capitalize@1.0.0           > ./node_modules/@deepblue/toolbox.string.capitalize
deepblue.design/theme-context@1.0.0                > ./node_modules/@deepblue/design.theme-context
deepblue.scopes/ui/hooks/use-scopes@1.0.0          > ./node_modules/@deepblue/scopes.ui.hooks.use-scopes
deepblue.scopes/ui/pages/top-scopes@1.0.4          > ./node_modules/@deepblue/scopes.ui.pages.top-scopes
deepblue.scopes/ui/scopes/scope-card@1.0.5         > ./node_modules/@deepblue/scopes.ui.scopes.scope-card
deepblue.scopes/ui/scopes/scopes-list@1.0.4        > ./node_modules/@deepblue/scopes.ui.scopes.scopes-list
deepblue.scopes/ui/top-scopes/header@1.0.0         > ./node_modules/@deepblue/scopes.ui.top-scopes.header
CopiedCopy