Component anatomy

A Component contains five types of data: Source code, dependencies, configurations, artifacts and metadata.

Source code

The 'source code' includes the component's main file, implementation files and development files. A file is considered part of the component if it is under the same component directory.

For example:

bit show teambit.base-react/navigation/link --remote
CopiedCopy

The following output displays the component files. It specifies which of these files are dev files, and which file is the main file:

┌───────────────────┬────────────────────────────────────────────────────────────────────┐
│ id                │ teambit.base-react/navigation/link@2.0.27├───────────────────┼────────────────────────────────────────────────────────────────────┤
......├───────────────────┼────────────────────────────────────────────────────────────────────┤
│ main file         │ index.ts                                                           │
├───────────────────┼────────────────────────────────────────────────────────────────────┤
│ files             │ index.ts                                                           │
│                   │ link.composition.tsx                                               │
│                   │ link.docs.mdx                                                      │
│                   │ link.spec.tsx                                                      │
│                   │ link.tsx                                                           │
│                   │ link.type.ts                                                       │
│                   │ native-link.tsx                                                    │
│                   │ navigation-provider.tsx                                            │
│                   │ routing-provider.tsx                                               │
│                   │ use-location.tsx                                                   │
│                   │ use-navigate.tsx                                                   │
├───────────────────┼────────────────────────────────────────────────────────────────────┤
│ dev files         │ example/my-router-adapter.demo.tsx (config)│                   │ link.spec.tsx (teambit.defender/tester)│                   │ link.composition.tsx (teambit.compositions/compositions)│                   │ link.docs.mdx (teambit.docs/docs)├───────────────────┼────────────────────────────────────────────────────────────────────┤
...               │                                                                    │
└───────────────────┴────────────────────────────────────────────────────────────────────┘
CopiedCopy

Dependencies

Dependencies include other components maintained in the same workspace, as well as external dependencies.

For example:

bit show teambit.base-react/navigation/link --remote
CopiedCopy

The following output lists the component dependencies and groups them by their dependency type (regular, dev and peer):

┌───────────────────┬────────────────────────────────────────────────────────────────────┐
│ id                │ teambit.base-react/navigation/link@2.0.27├───────────────────┼────────────────────────────────────────────────────────────────────┤
......├───────────────────┼────────────────────────────────────────────────────────────────────┤
│ dependencies      │ @teambit/base-ui.routing.compare-url@1.0.0- (component)│                   │ classnames@2.3.1--------------------------- (package)│                   │ core-js@^3.0.0----------------------------- (package)├───────────────────┼────────────────────────────────────────────────────────────────────┤
│ dev dependencies  │ @teambit/design.ui.layouts.sections.left-right@1.95.6- (component)│                   │ @types/testing-library__jest-dom@5.9.5---------------- (package)│                   │ @babel/runtime@7.12.18-------------------------------- (package)│                   │ @types/jest@^26.0.0----------------------------------- (package)│                   │ @types/react-dom@^17.0.5------------------------------ (package)│                   │ @types/react@^17.0.8---------------------------------- (package)│                   │ @types/node@12.20.4----------------------------------- (package)├───────────────────┼────────────────────────────────────────────────────────────────────┤
│ peer dependencies │ @testing-library/react@^12.0.0- (package)│                   │ react-dom@^16.8.0 || ^17.0.0--- (package)│                   │ react@^16.8.0 || ^17.0.0------- (package)└───────────────────┴────────────────────────────────────────────────────────────────────┘
CopiedCopy

Configuration

A Component's configuration consists of the Aspects it uses and the config set for each of them. For example:

bit show teambit.base-react/navigation/link --remote
CopiedCopy

The following output displays the list of aspects applied on this component. Some of these aspects contain configuration.

┌───────────────────┬────────────────────────────────────────────────────────────────────┐
│ id                │ teambit.base-react/navigation/link@2.0.27├───────────────────┼────────────────────────────────────────────────────────────────────┤
......├───────────────────┼────────────────────────────────────────────────────────────────────┤
│ extensions        │ teambit.envs/envs                                                  │
│                   │ teambit.react/react                                                │
│                   │ teambit.component/dev-files                                        │
│                   │ teambit.compositions/compositions                                  │
│                   │ teambit.docs/docs                                                  │
│                   │ teambit.dependencies/dependency-resolver                           │
│                   │ teambit.pipelines/builder                                          │
│                   │ teambit.pkg/pkg                                                    │
├───────────────────┼────────────────────────────────────────────────────────────────────┤
......└───────────────────┴────────────────────────────────────────────────────────────────────┘
CopiedCopy

Head over to this component's 'aspect' page to see the configurations applied on it via its different aspects. For example, teambit.component/dev-files is configured to define files with the filename pattern "**/*.demo.+(js|ts|jsx|tsx)" as dev files.

Manual vs programmatic configuration

The config section refers to configuration set directly and manually on a component. It does not include information that was calculated or set programmatically by the different aspects.

Metadata

A component's metadata consists of the Aspects it uses and the data they generate and persist in the component. For example, the previous section ('Configuration') shows the teambit.component/dev-files aspect configured to define "**/*.demo.+(js|ts|jsx|tsx)" files as dev files. The calculated result of that configuration, the component's concrete files defined as dev files, is part of this component's metadata and can be seen in the component's 'aspect' page.

Critical metadata is also available when a component is inspected in the terminal:

bit show teambit.base-react/navigation/link --remote
CopiedCopy

The output should show the calculated dev file seen previously:

┌───────────────────┬────────────────────────────────────────────────────────────────────┐
│ id                │ teambit.base-react/navigation/link@2.0.27├───────────────────┼────────────────────────────────────────────────────────────────────┤
......├───────────────────┼────────────────────────────────────────────────────────────────────┤
│ dev files         │ example/my-router-adapter.demo.tsx (config)├───────────────────┼────────────────────────────────────────────────────────────────────┤
│ extensions        │ teambit.component/dev-files                                        │
├───────────────────┼────────────────────────────────────────────────────────────────────┤
......└───────────────────┴────────────────────────────────────────────────────────────────────┘
CopiedCopy
Metadata in development

The metadata for new and modified components is re-calculated while in development. This data is persisted only when components are versioned.

Artifacts

Artifacts are generated during the component build. Artifacts are persisted when a Component is snapped or tagged. Each Component version holds the artifacts that were generated as part of its build.

For example:

bit import teambit.base-react/navigation/link
bit artifacts teambit.base-react/navigation/link
CopiedCopy

The following output groups the component artifacts by the aspect that registered the build task, and then again, by the build task name:

teambit.base-react/navigation/link@2.0.27
  teambit.compilation/compiler
    TSCompiler
      dist/link.composition.d.ts
      dist/link.composition.js
      dist/link.composition.js.map
      dist/index.d.ts
      dist/index.js
      dist/index.js.map

  teambit.defender/tester
    TestComponents
      __bit_junit.xml

  teambit.preview/preview
    GeneratePreview
      public/asset-manifest.json
      public/index.html
      public/service-worker.js
      public/workbox-84762412.js
      public/static/css/3279.8ff516da.css
      public/static/js/runtime-main.efb35c69.js

  teambit.pkg/pkg
    PackComponents
      package-tar/teambit-community.ui.graph.link-2.0.27
CopiedCopy