Rendering Components

Rendering allows other users to interact with your Scoped component(s), directly at bitsrc.io.
See an example of a rendered component here.

How Does it Work?

  • Add annotations to your component, documenting how it should be rendered.
  • Bundle your component as a UMD using bundler. You can use one of Bit’s existing bundlers, see Building Components.
  • Tag & Export your component.
  • Preview your component in your bitsrc.io Scope.

Annotations

Some JSDocs annotations needs to be added to your component, for example:

/**
* @render react
* @name Hero
* @example
* <Hero
*   title="Season 66 will be available soon!"
*   description="Lorem ipsum dolor sit amet hey! id quam sapiente unde voluptatum alias vero debitis, magnam quis quod."
*/
class Hero() {
    ...
}

Use the following annotations:

@render react

Specify the renderer for the component. Renderers are Bit components, note that currently only ”react” is supported. additional platforms support is coming soon…

@name

Specify the component’s name, to make sure it will work correctly when the code is minified.

Note

When using export default in a component, set a @name property to be used in the @xample.

@example

Specify how to render the component.

Bundlers

To render your component, bundle it as a UMD.
UMD is a Javascript standard that works in the browser, in Nodejs, and in your workspace.

Bundling components

To bundle your component, use a bundler webpack which is a type of a compiler. You can use one of Bit bundlers avilable at the Bit envs Scope.
Note that the React bundler comes in 2 configurations:

You can extend or modify bundlers according to your needs. Learn more here.

Bit bundles the component as an isolated environment without the component’s dependencies, making it slim and efficient. If other Bit components are used as dependencies, we recommend that these components will be consumed from the package manager and not as relative dependencies. Today, when you consume a component relatively with Bit, it will be bundled as part of the same file which is less efficiant process. Support for relative dependencies will be added in the near future.

For example, let’s take a look at our movie-app repository, and its corresponding components. The Hero component depends on the HeroButton component. When you consume the HeroButton component relatively, it will be bundled along with the Hero component:

import HeroButton from '../hero-button';

However, when you consume the HeroButton component from the package manager, the Hero component will be bundled without it, which is easier to use and maintain:

import HeroButton from '@bit/bit.movie-app.components.hero-button';

Adding a bundler to an existing component

For an imported component - import the component using the --conf flag, so the component will have its own bit.json file. Set a compiler in the bit.json.

bit import bit.movie-app/components/hero-button --conf

Open your IDE and set the compiler id in your component’s bit.json file:

"env": {
    "compiler": "bit.envs/bundlers/webpack@0.0.6",
    "tester": "bit.envs/testers/karma-mocha-react@0.0.18"
}

For an authored component - an authored component is a component which is a part of a full project. Import the compiler to your project.

bit import bit.envs/bundlers/webpack -c

Many exports in a rendering example

If your component exports more than one render function, for example:

export default () => <div>Main component</div>; 

export const Secondary = () => <div>secondary mon</div>;

You can use each function name in the @example to render it. If you use export default as well, you will need to define the @name JSDoc annotation, to set a name to it, to be rendered in the playground.
So if we take the previous example, this is how we would add the right anontations to have a working playgroud with both render functions.

/**
 * @render react
 * @name Main
 * @example
 * <div>
 * 	<Main/>
 * 	<Secondary/>
 * </div>
 */
export default () => <div>Main component</div>;

export const Secondary = () => <div>secondary mon</div>;

Injecting Dependencies

Bitsrc.io aspires to provide the component all the dependncies needed for preview. Errors will be displayed at the preview frame. Most errors occur because there was a problem in the bundle itself.

Troubleshooting

When the preview is not working try the following:

  • Open dev console and look for errors.
  • Verify the bundle work by importing it locally, from another file.
  • Manually check that the bundling worked - check out the dist directory, see that the file is formatted correctly.