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';
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. ├── ...
Workspace Component Links are generated in the node_modules
directory using bit link
.
bit link
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