How to Easily Share JavaScript Code: Meet Bit’s “Managed Copy-Pasting”✨

What if you could “copy-paste” code in multiple projects, and easily keep changes to source-code and dependencies synced?

We all copy-paste code. We know we shouldn’t, but we do.

Why? It’s not because we are bad developers. It’s because sometimes we just want to get the job done, building something that’s up and running fast.

In this post, I’ll introduce how you can manage copy-pasting and keep changes synced across different repositories and your entire codebase using Bit.

The result will be that when you want to share code from one project to another, you can very quickly use Bit to share it between the two projects while keeping it managed, from source-code changes to dependencies.

This means more code-sharing and less overhead. You will get rid of code smell and be able to adopt a better practice without giving up speed.

So how does it work?

Here’s the core concept that makes it all possible:

Git manages changes to source code in a single repository, but not relations between code in different repositories. Package managers handle dependencies for published modules, but not source code.

Bit handles both source code and dependencies. Through that, it’s able to create an almost instant experience for exporting code from one repository and importing it into another reposiotry, while keeping them synced.

Exporting code to be shared

Let’s say I have a reposiotry with a simple reusable “hello-world” function:

.

├── package.json

└── src

├── hello-world.js

└── index.js

Using Bit, we can track this component in the repo using one command:

$ bit add src/hello-world.js src/index.js --id hello/world tracking component hello/world:

added src/hello-world.js

added src/index.js

Once tracked, Bit runs through the code and resolves the function’s entire dependency graph. It then records the component as a unit and tracks it.

We might need to add a compile + test configurations for the entire project, which can be done using pre-made bit components. It’s rather simple.

Next we can version the component, and export it to bit.dev (Bit’s hub):

$ bit tag hello/world

1 components tagged | 1 added, 0 changed, 0 auto-tagged

added components: hello/world@0.0.1

And

$ bit export user-name.my-collection-name

1 component was exported to Collection user-name.my-collection-name

That’s it! Now the component is shared and is ready to be used in another project. No refactoring, no complex setup. It’s quicker than copy-pasting.

Here's a real example of the result of the same workflow with Ramda utlis:

Importing shared code from another project

So now we have this function as a reusable component in bit.dev, and we want to use it in another project.

Let’s head over to the other project and use Bit to import the component:

$ bit import user-name.collection-name/name-space/hello-world

That’s it. The function is now sourced in the new project as well. Cool right? We didn’t need to work hard to resolve dependencies and fit the code into the new project, Bit did it for us. We didn’t change a single code line in the original project. This process supports sharing of multiple components too.

But, what happens when we make a small change to the components from one of the projects? Let’s see.

Syncing changes to shared code between the projects

So now we have the same hello-world function implemented in both projects.

Let’s make a small change to the function from the second project. The source code of the hello-world.js file looks like this:

export default function hello(world) {

return `hello ${world}`;

}

Let’s change it to return hi world but keep the name of the function:

export default function hello(world) {

return `hi ${world}`;

}

Next, let’s run a quick bit status and see that it’s changed:

$ bit status

modified components

> name-space/hello-world... ok

Now let’s version the modified component and export it back to the collection:

$ bit tag name-space/hello-world

$ bit export user-name.collection-name

The version will be bumped and the collection will be updated with the modified component!

Next, let’s head back to the original reposiotry to sync the changes.

Run a quick bit import to bring in the new version created from the other project:

$ bit import user-name.collection-name/name-space/hello-world

And then use checkout to merge the changes!

$ bit checkout 1.0.1 string/contains

successfully switched hello-world to version 1.0.1

Bit uses git merge to auto-merge both versions:

$ bit status

modified components

(use "bit tag --all [version]" to lock a version with all your changes) > name-space/hello-world ... ok

And that’s it!

What just happened?

Well, we created managed copy-pasting for shared code between two JavaScript projects!

Whenever a source-code change happens in one of them, we can easily update and even merge the changes between the two projects. When another component in dependant on this component, we can easily update all dependants with the new version and see that nothing breaks.

The result? more code-sharing, less code-small, faster development. Feel free to dive in and give it a try :)