Bit: [Feature Request] make learn and bit work together

[engineforce]

One of the major advantages of using lerna is the ability to use different build tools and test tools for different packages. E.g., I can use poi.js for one package and use parcel.js for another package. One package may use typescript, another package may use just babel.

Do you have a plan to support this type of monorepo? I.e., can you make bit and lerna work well together?

One of the reasons it does not work well at the moment is that bit does not track original package.json, and therefore it lost all "scripts" and "devDependencies" in the package.json when importing.

[GiladShoham]

@engineforce
Yes, you can make bit and Lerna work well together right now.
You can read more about it here:
https://blog.bitsrc.io/monorepo-architecture-simplified-with-bit-and-npm-b1354be62870

There are a few ways to make it work, and the main consideration is whether you initialized bit workspace inside each package or only at the root level.

Currently bit not allow you to set different build tools for different components in the same workspace (unless you create them in another workspace and just import them. since an imported component contain also its build tool).

The good news is that I'm personally working on this exact feature right now (along with a lot of builders/testers new features which will make it much easier to use them and write them).

[engineforce]

@GiladShoham thanks for responding, and I have read above blog post. But I cannot see how exactly they (bit and lerna) work together. Can you please create a sample git repo to demonstrate? In particular, I would like to see export a package from one lerna monorepo to bit, then import it to another lerna monorepo from bit.

Thanks a lot.

[GiladShoham]

@engineforce
I can try to create a demo for you, but it will take some time.
Keep in mind that working with bit, you usually share components which are usually smaller parts than packages.
So you will probably share a file or few files within a package between 2 Lerna projects.
That's one of the strengths of bit, the ability to share smaller pieces easily.
You can, of course, make a component from a whole package then share it as a whole, but usually, this is not the best practice.

[GiladShoham]

@engineforce
Meantime, you can take a look on this project (from the open source)
https://github.com/GSS-FED/vital-ui-kit-react
And their scope on bitsrc (it's public):
https://bitsrc.io/gssfed/vital-ui-kit-react
bitsrc is even rendering their packages, for example:
https://bitsrc.io/gssfed/vital-ui-kit-react/packages/avatar
https://bitsrc.io/gssfed/vital-ui-kit-react/packages/badge
In general what they did is to share each of the Lerna packages as bit component which they now can install in other projects using npm / yarn, or import to another Lerna project and change it from this another Lerna (and sync it back).
For some reason they didn't commit bit's files (bit.json / .bitmap) to git, so you can't see their exact configuration but I believe it's a good start for you to watch.
In their case make each package a component does make sense since the packages are really small and focued.
In other cases it make sense to create many components from each package.
Let me know if you need any more help.

[engineforce]

Thanks @GiladShoham, vital-ui-kit-react is good reference. Their use case is different from mine, they have used typescript files in their main repo, but only uploaded transpiled javascript files to bitsrc. Therefore install them to another lerna project using npm and yarn will work in terms of reuse, but bit import will not work as expected, because they would/should not modify transpiled javascript files.

[GiladShoham]

@engineforce
One of the main features of bit's isolation process is also isolating the build process.
So, for example, let's say you have TS project and js project.
You create a TS component from the TS project and want to consume it on the JS project.
If you configured a bit compiler properly, the ts component will have dist files and source files.
So once you install it in the js project, the package.json will point to the dist files and everything will work.
Once you import it into the js project (using bit import) you will get both the source and dist files.
And bit will create a symlink from the node_modeuls/ts-comp to the imported folder.
So your js files will continue to work with the dist files, and you can edit the ts files (the source) inside your js project, then run bit build, and bit will have all the needed data in order to create the dist files for this component (without you, as the author of the js project need to know or setup any configuration).
Then the dist files will get overridden, and the symlink in the node_module will be up to date.

So to summarize, you can edit the ts source files, inside a js project and work with the modified code right there (without the need to open the TS project at all)

Let me know if that makes sense to you.

[davidfirst]

@engineforce , with the newly introduced "overrides" feature, it's possible now (v14.1.0) to set different compilers and testers to different components.
You can set them in your bit.json file, for example:

 "env": {
        "compiler": "bit.envs/compilers/[email protected]",
        "tester": "bit.envs/testers/[email protected]"
  },
 "overrides": {
        "ui/*": {
            "env": {
                "compiler": "[email protected]"
            }
        }
    }

Please re-open if this doesn't address your use case.