Easily share code between projects with your team.
Clone or download
davidfirst support adding the project package.json file to a component (#1224)
* support adding the project package.json file to a component by wrapping the package.json file within a wrapper directory to not collide with the generated package.json of the component when a component is imported.

* add the wrapDir attribute to the .bitmap file

* make it work on an isolated environment as well

* add wrap dir on nested components as well

* manipulate-dir: find the shared-dir and wrap-dir for all imported component before manipulating them

* prevent having originallySharedDir on .bitmap for non-imported components

* prevent adding files to rootDir outside the wrapDir. 

* do not strip originallySharedDir directory when it has package.json
Latest commit a2b2c59 Sep 22, 2018
Permalink
Failed to load latest commit information.
.circleci update circle image to node version 6.14.3 (#1149) Jul 22, 2018
bin Send analytics in forked process (#893) Apr 5, 2018
e2e support adding the project package.json file to a component (#1224) Sep 21, 2018
fixtures add an e2e-test for a case of auto-tag with same component as direct … Aug 27, 2018
resources moved repository dir to resource Mar 19, 2017
scripts Feature/vue support (#771) Feb 15, 2018
src support adding the project package.json file to a component (#1224) Sep 21, 2018
.babelrc Feature/envs config (#931) May 10, 2018
.bitmap show parsing and resolving errors by "bit status" and prevent tagging… Jun 29, 2018
.editorconfig Added .editorconfig Mar 6, 2017
.eslintignore fix bugs when removing a component and its dependencies (#806) Feb 25, 2018
.eslintignore-circle Refactor/rename Component class of the model to ModelComponent (#1217) Sep 5, 2018
.eslintrc Qbllr/linting (#1171) Aug 8, 2018
.flowconfig update flow-bin package to the latest version (0.66.0) (#823) Mar 3, 2018
.gitignore add eslint-report to git ignore Feb 13, 2018
.npmignore add .history directory to git/npmignore Feb 23, 2017
.prettierrc Add prettier config file Sep 17, 2017
CHANGELOG.md support adding the project package.json file to a component (#1224) Sep 21, 2018
CODE_OF_CONDUCT.md update readme Jan 23, 2017
CONTRIBUTING.md fixing master after breaking (#1157) Jul 29, 2018
ISSUE_TEMPLATE.md Update issue_template [ci skip] Feb 15, 2018
Jenkinsfile Remove brew scripts(#307) Sep 25, 2017
LICENSE fix-typo Jan 23, 2017
PULL_REQUEST_TEMPLATE.md added issue and pr templates Jan 17, 2018
README.md Update readme / added discourse [ci skip] Aug 28, 2018
appveyor.yml update bitsrc registry tokens Jul 16, 2018
bit.json support custom module resolutions (#980) May 17, 2018
gulpfile.js Remove gulp command when running unit test Aug 16, 2017
package-lock.json Feature/extension get schema (#1197) Aug 23, 2018
package.json update bit-javascript to allow "import ~" from a local (authored) fil… Sep 20, 2018
sonar-project.properties add sonar-project.properties Jan 28, 2018
yarn.lock set bitsrc as scoped registry with bit login (#965) May 8, 2018

README.md

Bit community hub

apache prs Gitter chat Discourse status Appveyor Status Circle Status styled with prettier Tweet

WebsiteDocsVideoBlogGitterDiscourseExamples

About

Bit works with Git and NPM to easily share and sync code between projects.

While code sharing speeds your development, it can also generate a lot of overhead when you have to split your repositories and work hard to make changes between them.

Bit eliminates this overhead by helping you easily isolate and share components from any repository, organize them for your team and sync changes across your projects.

Any team member can discover, use and develop components from any project so your team can collaborate, suggest updates, merge changes and stay in sync.

Bit is a collaborative open source project, actively developed and maintained by a venture-backed team and used by more teams and communities every day.

Contents

How It Works

Seamless code sharing

Instead of having to split repositories and create new ones just to publish packages, Bit helps you seamlessly isolate components (sets of files) from any existing repository and share them to be used, developed and synced in other projects.

To share components you don’t need to refactor or configure anything. Instead, Bit automatically detects the component’s dependency graph (including package / file / component dependencies) and creates an isolated environment for every component.

This environment enables you to use and develop components from other projects. For example, components written in typescript can be used and developed in a project written in flow-typed. It also lets Bit test and build your components in isolation, so you can know the exact state of every component.

Importing with Bit / Installing with NPM

You can use Bit to import components into any project you’re working on. Importing a component means you can use it and also make changes and continue to develop it from your project. Bit will track your components across different projects to sync changes between them.

Once shared to Bit’s hub, components automatically become available to install as packages using NPM and Yarn. This means you can turn any part of any repository into a package without refactoring or splitting the repository.

Combining the two workflows also allows you to easily make changes to components installed as packages right from any project consuming them.

Updating and merging component changes

Since Bit tracks components across different projects, you can update components with new versions and suggest updates to components shared by your team. When a component is changed in your project, Bit leverages Git’s merge utility to let you merge component changes between your projects.

This workflow also helps you learn exactly which components are used by who and where, so you can easily make changes to components in multiple projects with universal control over your dependency graph.

Component discoverability

While making code sharing easier, Bit helps you organize your components and make them discoverable for your team to find and choose from.

Using a semantic component search engine and features such as a live playground for component visualization, auto-parsed docs, test results and more, Bit makes it simpler to collaborate and share your favorite components.

Here is an example of React UI components organized, rendered, tested and made discoverable via Bit’s hub.

Extending Bit

Bit can be extended for a variety of purposes and integrated into your favorite tools. For example, you can create and use Bit extensions to build, test, render, bundle, lint, pack, publish and optimize the workflow around your components.

Getting Started

Basics

  1. Installation
  2. Initializing Bit
  3. Isolating components
  4. Versioning components
  5. Sharing components
  6. Installing components with NPM
  7. Modifying components with Bit
  8. Merging component changes

Advanced:

Examples

Bit with React / Vue

Tutorial: Bit with React.

UI components are often designed with reusability in mind.

As such, Bit can be a powerful tool for sharing these components between app and projects.

For example, here is a React movie-application project that contains 8 reusable UI components and 1 global-styles component.

Using Bit, all of these components were isolated and shared from the repository, and organized in this Scope.

Every component can now be played with online, installed using NPM or imported into any project for further development.

Here’s an example React hero component from this Scope.

React Hero component.

Node.js modules and common code

Some teams use Bit to sync common code between Node.js repositories and services. We use Bit to sync over 250 shared components between our Node.js microservices (!).

Bit is useful for preventing duplicate code while making maintenance easier.

Shared libraries

You can use Bit to turn any shared-lib into a dynamic collection of individual components.

Here’s an example GitHub community-made UI library with React. The library’s authors shared their components with Bit, making them available to discover and use from this Scope.

Here’s an example of the React Card component in Bit’s live playground.

React Card component.

More

Bit can be useful for sharing any common component, functionality and module including GraphQL APIs, Serverless functions, Utility functions and more.

Example workflow

Let’s use Bit to isolate and share the button, login and logo React UI components in the following repository file structure, and make them available to use in other projects.

$ tree
.
├── App.js
├── App.test.js
├── favicon.ico
├── index.js
└── src
    └── components
        ├── button
        │   ├── Button.js
        │   ├── Button.spec.js
        │   └── index.js
        ├── login
        │   ├── Login.js
        │   ├── Login.spec.js
        │   └── index.js
        └── logo
            ├── Logo.js
            ├── Logo.spec.js
            └── index.js

5 directories, 13 files
  1. First, let’s install Bit.
$ npm install bit-bin -g
  1. Next, let’s initialize Bit for the project.
$ cd project-directory
$ bit init
  1. Now, let’s track the components using bit add and let Bit detect their file / package dependency graphs.
# Use a glob pattern to track multiple components in the same path, or specific paths to track specific components.
$ bit add src/components/*
  1. Next, let’s import build and test environments to let Bit build, render and test the components in isolation. You can use pre-made environemnts or implement your own).
# Import an environment to build and render the components
$ bit import bit.envs/bundlers/webpack-css-modules --compiler

# Import an environment to test the components in isolation
$ bit import bit.envs/testers/karma-mocha --tester
  1. Now, let’s tag the components and let Bit lock the component’s version and dependency graph.
$ bit tag --all 1.0.0
  1. Next, let’s create a remote Scope on Bit’s hub for your components. From the Scope your components can be discovered, used and synced in your projects. Once created, let’s export the components to the Scope. This will not remove them from the repo or change its structure at all.
# Export the components to your remote Scope
$ bit export username.scopename  # Share components to this Scope

Note that using the --eject flag you can also remove an exported component from your source-code and add it as a package dependency in your project’s package.json file.

That’s it.

Your components are now organized in your Scope and can be discovered, installed (NPM) and developed (bit import) from any other project. Bit will keep tracking the components across projects, so you can easily update and merge changes between them.

Motivation

Learn more about the journey towards turning components into the lego-like building blocks of different projects and applications, why Bit was created and what the future holds on Bit’s blog.

You can also check out Bit on FreeCodeCamp and Hackernoon.

Supported Languages

Bit's design is language agnostic. Still, as of today, it requires language-specific drivers for language-sensitive features (binding etc). We released Bit’s driver for Javascript, and will be releasing more drivers in the future. You are also welcome to add your own.

Contributing

Contributions are always welcome, no matter how large or small. Before contributing, please read the code of conduct.

See Contributing.

Feedback

Feedbacks and questions are more than welcome via Bit's Gitter channel or Discourse boards.

License

Apache License, Version 2.0

Analytics