Build Artifacts

Any build task may generate artifacts. These artifacts can be persisted during the build process, as part of the component version data.
For example, the jest tester aspect generates a junit.xml file with all test results.

To list a component's artifacts, use the bit artifact command and provide the component's ID or full name:

bit artifacts ui/heading
Copied

bit-examples/ui/heading@0.0.2
  teambit.compilation/compiler
    TSCompiler
      dist/heading.d.ts
      dist/heading.js.map
      ...

  teambit.preview/preview
    GeneratePreview
      public/asset-manifest.json
      ...

  teambit.pkg/pkg
    PackComponents
      package-tar/company-examples.demo-ui.heading-0.0.2.tgz
Copied

You can show or fetch any of the artifacts:

bit artifact ui/heading --aspect teambit.pkg/pkg # fetch all artifacts generated by a specific aspect
bit artifact ui/heading --task GeneratePreview   # fetch all artifacts generated by a specific task
bit artifact ui/heading --files "*heading*"      # fetch all artifacts with a file name (from a pattern)
Copied

Use the --out-dir option to extract artifacts from the component objects to a directory inside your workspace directory:

bit artifacts ui/heading --out-dir my-artifacts-directory
Copied

You can retrieve artifacts from the component objects. This is useful when building aspects that needs generated artifacts.

Let's create an Aspect that use the builder's API to retrieve a component's artifacts metadata, as well as it vinyls (virtual files):

bit create a aspect aspects/artifacts-retriever
Copied

The Component object (needed as an argument for the artifact API) can be retrieved in any number of ways. In this example, we'll use the scope.get() API, provided by the Scope aspect.

import { MainRuntime } from '@teambit/cli';
import { BuilderMain, BuilderAspect } from '@teambit/builder';
import { ScopeMain, ScopeAspect } from '@teambit/scope';
import { ComponentID } from '@teambit/component';
import { ArtifactsRetrieverAspect } from './artifacts-retriever.aspect';

export class ArtifactsRetrieverMain {
  static dependencies = [GraphqlAspect, BuilderAspect, ScopeAspect];
  static runtime = MainRuntime;
  static async provider([scope]: [ScopeMain]) {
    // scope.get() expects the ComponentID object - not the component ID string.
    const component = await scope.get(ComponentID.fromString('demo-ui/heading'));

    // Get artifacts files (vinyls)
    const artifactVinyl = await builder.getArtifactsVinylByExtension(component, 'teambit.compilation/compiler');
    artifactVinyl.forEach((vinyl) => {
      const { relativePath, content } = vinyl.toReadableString();
      console.log(relativePath, '|', content); // => dist/index.d.ts | export { Heading } from "./heading"; ...
    });

    // Get artifacts metadata
    const artifacts = await builder.getArtifactsByExtension(component, 'teambit.compilation/compiler');
    console.log(artifacts);
    // =>
    // [
    //   {
    //     name: 'dist',
    //     generatedBy: 'teambit.typescript/typescript',
    //     storage: 'default',
    //     task: { id: 'teambit.compilation/compiler', name: 'TSCompiler' },
    //     files: ArtifactFiles { paths: [], vinyls: [Array], refs: [Array] }
    //   }
    // ]
    return new ArtifactsRetrieverMain();
  }
}

ArtifactsRetrieverAspect.addRuntime(ArtifactsRetrieverMain);
Copied

getArtifacts(component: Component): ArtifactObject[] | undefined
Copied

getArtifactsVinylByExtension(component: Component, aspectName: string): Promise<ArtifactVinyl[]>
Copied

getArtifactsVinylByExtensionAndName(component: Component, aspectName: string, name: string): Promise<ArtifactVinyl[]>
Copied

getArtifactsByName(component: Component, name: string): ArtifactObject[] | undefined
Copied

getArtifactsByExtension(component: Component, aspectName: string): ArtifactObject[] | undefined
Copied

getArtifactsByExtensionAndName(component: Component, aspectName: string, name: string): ArtifactObject[] | undefined
Copied

getDataByAspect(component: Component, aspectName: string): Serializable | undefined
Copied