babel-plugin-react-elemental

Overview

babel-plugin-react-elemental is a Babel plugin that transforms named imports from react-elemental and react-elemental-fonts into default imports from the library's submodule referenced by the named import.

It is optional to use this plugin alongside react-elemental. Its only purpose is to reduce the final bundle size for applications that do not use the full suite of Elemental UI components.

Installation

$ npm install --save-dev babel-plugin-react-elemental

Usage

In .babelrc:

{
  ...
  "plugins": [
    ...
    "react-elemental"
  ]
}

The plugin does not accept any options.

Behavior

The suggested way use React Elemental components is to import the named export from the root module react-elemental:

import { Button, Checkbox } from 'react-elemental';

To enable widest possible support, react-elemental is Babel-transpiled using babel-preset-env and babel-preset-stage-0. A side effect is that the above code, in the consuming application, would be transpiled to something that looks like this:

'use strict';

var _reactElemental = require('react-elemental');

This causes the entire library to be included in the bundle, even though the consuming application is only using Button and Checkbox.

As of this writing, tree shaking and dead code elimination are not mature enough to automatically drop unused exports of react-elemental. In the interim, babel-plugin-react-elemental transforms all imports of the above shape to default imports:

import Button from 'react-elemental/components/button';
import Checkbox from 'react-elemental/components/checkbox';

...which generates transpiled code that looks like this:

'use strict';

var _button = require('react-elemental/components/button');

var _button2 = _interopRequireDefault(_button);

var _checkbox = require('react-elemental/components/checkbox');

var _checkbox2 = _interopRequireDefault(_checkbox);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

This ensures that only the Elemental UI components used in the consuming application are bundled. This could reduce the minified and uglified application bundle size by as much as 130 KB.