Bit's Component Playground now Visualizes Multiple Exports

Bit’s Component Playground now Visualizes Multiple Exports

Bit’s web platform now visualizes multiple exports for your component. It’s cool, and also useful. Here’s why.

Component with multiple exports visualized — seehere

Bit ’s platform turns JS components and modules into building blocks which can be easily shared, used and developed from any project.

Using Bit, you can quickly turn any piece of code into an API and share it cross-teams and cross-projects to speed your development.

As code sharing scales, so does the need to make the code you share more organized and discoverable. In March, we introduced the first version of Bit’splayground, a visualization tool which renders a live component preview.

A React componentexample in Bit’s playground

In the past months many developers leveraged this playground to share components with their teams. Some shared great open source examples.

My favorite simple-yet-elegant Bit community example

However, up until now this playground only worked for default exports , so you would get an error when trying to run it on some more complicated use cases:

the errors of old ways

As of today, you now have access to all of the exports, and not just the default ones. This means you can now visualize a wider verity of use cases, and provide a better experience for sharing a useful component collection.

Example

Here is a very simple component I made having a default export (Main) and an additional component (Secondary).

Good thing emoticons work out of the box these days

As you can see, both exports are handles and Bit’s playground now presents both of them. As many components contain secondary components, this feature makes it much easier to provide visualization for these cases.

Greater visualization makes it easy to choose components with your own eyes, while also making it easier to learn how components look and behave.

Under the hood (how it works)

When a component is exported with Bit it’s already processed before reaching the browser. It starts as plain source code, and then compiled into a single UMD bundle using a compiler, such as our webpack bundling compiler .

When this bundle is run, it generates a plain object, with the component exports as properties of this object (you can see this in more details in this article about the UMD standard).

So, the live preview now scans this object, finding all the properties, and inject them into the rendering scope. Simple.

What about the default export ? Well, it is available as the property “default” on the bundled result. However, “default” is a JS keyword and its awkward to use. So, in order to have a more natural experience, we rename it to be the component name , which is defined by the “@name” documentation (see more details in ourdocs).

All changes are backward compatible, so your existing components should work fine and you can leverage the upgraded playground without a worry.

Into the (near) future

In Bit’s near-future roadmap we have some very exciting features. An important part of this roadmap is greatly improving the discovery experience around the components: from the way they are organized and presented to the user’s ability to easily search and choose the best components.

The live playground, on which I’m personally working, is going to play a major part in this experience. Within a short while, all kinds of components and modules will be rendered and visualized without having to change a single thing in your code. You will be able to easily browse visualized collections, choose with your own eyes, and have a great experience doing so.

We welcome all ideas, suggestion and feedback- so feel free to let me know!

Cheers, Uri