Importing components

For a component to be maintained and updated, it needs be imported from its remote scope into a workspace.

To import a component to a workspace, copy its component ID from its remote scope, and run the following:

$bit import teambit.design/info/icon-text

Copied

To import and checkout a different snap, include its version (semver/hash) in the component ID. For example: teambit.design/info/icon-text@0.0.7.

The output notifies the component was imported successfully. Its source files were checked-out to the working directory and a package (workspace component link) was generated for it in the node_modules directory, for other components to consume:

An imported component is maintained exactly like a component that was created in that workspace. It can be updated, snapped, and exported.

The following workspace shows the imported component (info/icon-text) being used by another component, apps/to-do. Any changes made to info/icon-text will affect its dependent component, apps/to-do.

TASKS-WORKSPACE

design

info

design/info/icon-text.composition.tsx

design/info/icon-text.docs.mdx

design/info/icon-text.spec.tsx

design/info/icon-text.tsx

design/info/index.ts

node_modules

@my-org

tasks-scope.apps.to-do

node_modules/@my-org/tasks-scope.apps.to-do/about-this-dir

@teambit

design.info.icon-text

node_modules/@teambit/design.info.icon-text/about-this-dir

design.inputs.input-text

node_modules/@teambit/design.inputs.input-text/about-this-dir

tasks-scope

apps

to-do

tasks-scope/apps/to-do/index.ts

tasks-scope/apps/to-do/todo.composition.tsx

tasks-scope/apps/to-do/todo.docs.mdx

tasks-scope/apps/to-do/todo.spec.tsx

tasks-scope/apps/to-do/todo.tsx

.bitmap

workspace.jsonc

Run bit start to explore the imported component in your workspace UI.

An imported component might have dependent components in various remote scopes. Importing these dependents enables you to examine, locally, how changes made to their dependency will affect them. When the component (the dependency) is snapped, bit will auto-snap its dependents.

$bit import --dependents

Copied

Run the following to stop maintaining a component in your workspace, and use is as an external dependency, instead:

$bit eject info/icon-text

Copied

The output notifies the component package was installed (and added to the workspace dependency policy), and the component's source files were removed:

To perform the reverse action, to maintain an external dependency (an installed component) in your workspace, import that component to your workspace. The installed package will be replaced by the component's workspace component link.

When you fork a component from a remote scope, you create a copy of it in your workspace. This copy is defined as 'new', and has no previous versions. The scope of that copied component is set, by default, to your workspace default scope (defined in the defaultScope property).

Run the following to fork a component:

$bit fork SOURCE_COMPONENT_ID TARGET_COMPONENT_NAME --scope STRING --path STRING --refactor --skip-dependency-installation --skip-config --rename

Copied

For example, the following command forks teambit.design/basic/button to your workspace:

$bit fork teambit.design/basic/button

Copied

Run the following to fork a component and change its scope to a scope different than your workspace default scope:

$bit fork teambit.design/basic/button --scope my-org.my-scope

Copied

Use the --refactor option to update the import statements in all dependent components (in the same workspace). For example:

$bit fork teambit.design/basic/button --scope my-org.my-scope --refactor

Copied

All occurrences of import { Button } from '@teambit/design.basic.button' are now replaced by import { Button } from '@my-org/my-scope.basic.button'.