Skip to content

Instantly share code, notes, and snippets.

@steveebenezer
Last active February 20, 2020 05:57
Show Gist options
  • Select an option

  • Save steveebenezer/1c38f8e721dca4c5a0b20b9554893779 to your computer and use it in GitHub Desktop.

Select an option

Save steveebenezer/1c38f8e721dca4c5a0b20b9554893779 to your computer and use it in GitHub Desktop.
Bit.dev

Bit lets you harvest components from any codebase and share them to a collection in bit.dev.


Setup

brew install bit
bit login

cd project-directory
bit init

Tracking components

// Single component
bit add src/components/my-component.ts --id my-component

// Collection of components
bit add src/components/*

// Untracking a component
bit untrack hello/world

// Moving files
bit move src/foo/bar/index.js src/components/new/location/new-file-name.js

// Removing a component from a remote collection (for deprecating use deprecate in place of remove)
bit remove username.your-collection/foo/bar --remote

// Removing a component from the workspace (for deprecating use deprecate in place of remove)
bit remove foo/bar

// Status/staged components
bit status

Building components

// Compiler
bit import bit.envs/compilers/babel --compiler

// Tester
bit import bit.envs/testers/mocha --tester

// Setting up a test file for the component
bit add src/hello-world src/index.js --tests specs/hello-world.spec.js --id hello/world

// Testing a component 
bit test hello/world

// To set component entry point when it includes many files and there is no index.js file
bit add src/hello-world --main src/hello-world/hello-world.js

// Building the component
bit build hello/bar

Versioning your components using 'tag'

// For single component
bit tag <component> 1.0.0

// For collection of components
bit tag --all 1.0.0

Publish your component

bit export user-name.collection-name

Using your published components

$ npm i @bit/username.collection.component

import { something } from '@bit/owner.collection.namespace.namespace.short-id';

Editing published components

You may want to modify the component source code (for example, to fix a bug or change the functionality). To do so, you need to import the component into your project and apply the changes.

The updated component can now be tagged and re-exported so that other consumers of the component get the update.

// Import the component
bit import username.collection/component

// You can also specify the version of the component you are importing
bit import bit.examples/foo@0.0.11

// To fetch only the changes but without checking out the component into the workspace use
bit import foo --objects

Merging conflicts in the modified components

// Import
bit import

// Resolve
bit untag bit.example/foo 1.0.5

// Import remote version
bit import

// Checkout components latest version to the workspace
bit checkout 1.0.5 foo

// Tag a new version for the component
bit tag --all

// The new version can now be exported (1.0.6)

Ejecting component

Ejecting components and replaces them with its node module

// To eject a component on export, use bit export with the --eject option
bit export bit.movie-app --eject

// To eject a component after export, use bit eject command
bit eject hello/world

Listing

// List components in the local workspace
bit list

// List components in the remote collection
bit list my-collection

// List out-dated components
bit list --outdated

// List details of component
bit show component

// List version history of component
bit log navbar

Documenting a component with md file

bit add docs/login.md --id login

Detailed documentation

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment