bit.dev, Join the world create awesome UI components (React, Angular, Vue)

figure 1. bit.dev collections

http://bit.dev is site which share your components globally so someone can use your components and you can also use their component. It like we work together to building UI environment. bit.dev provide engine for compile ReactJS, AngularJS, and VueJS. What are you waiting for? lets world know your creation.

Publish yours

To publish your component, it feel like doing version control(git)

1. Initialize your bit. like “git init” right?

bit init

2. Add your component. like “git add”. Difference is you don’t need to add it again for changes. “bit tag” will find it for you
*note : don’t use number in first class like “3x3-box”

bit add <component-path> --id <id>
example : bit add src/app/components/box-selector/box-selector.component.ts --id box-selector

a. angular example :

bit add <component-path> --main <option: module>
example : bit add src/app/product-list --main src/app/product-list/product-list.module.ts

import compiler

bit import bit.envs/compilers/angular --compiler

check if compiler is installed in package.json

3. Tag it. like “git commit”. but the difference is this using smart versioning. smart versioning is like 0.0.1 which describe <version>.<major-update>.<minor-update>. <version> is when whole of it change such as how to call your class. usually it can be so different with previous version. <major-update> usually used when you add new feature. <minor-update> used when you found a bug and fix it. example :

bit tag --all 0.0.1 |or| bit tag <id> <version>
example : bit tag box-selector 0.0.3

4. Last step is export. like git push. make sure you already have bit.dev account and create collection

bit export <user-name>.<collection-name>
example : bit export ricoarisandyw.angular

figure 2. online editor inside bit.dev components

5. Confirm that your component is uploaded then your can get display by coding in bit.dev online editor inside your collection.component.

Useful Information

Import Update

bit import

Remove Component

bit remove <username>.<your-collection>/<id>
example : bit remove ricoarisandyw.angular/box-selector

Consume Component

bit import <username>.<collection>/<id>
example : bit import ricoarisandyw.angular/box-selector

Fix Conflict

wip