babel-plugin-transform-react-loadable v1.0.0

babel-plugin-transform-react-loadable

Babel plugin to make advanced usage of react-loadable easier.

Examples

Please see the main react-loadable example as a reference.

Example 1 - server side rendering

In

let LoadableMyComponent = Loadable({
  loader: () => import('./MyComponent'),
  LoadingComponent: MyLoadingComponent,
});

Out

let LoadableMyComponent = Loadable({
  loader: () => import('./MyComponent'),
  LoadingComponent: MyLoadingComponent,
  serverSideRequirePath: path.join(__dirname, './MyComponent'),
});

Example 2 - Webpack synchronous loading support

To enable this transformation, pass the webpack: true option to the plugin (see below).

In

let LoadableMyComponent = Loadable({
  loader: () => import('./MyComponent'),
  LoadingComponent: MyLoadingComponent,
});

Out

let LoadableMyComponent = Loadable({
  loader: () => import('./MyComponent'),
  LoadingComponent: MyLoadingComponent,
  serverSideRequirePath: path.join(__dirname, './MyComponent'),
  webpackRequireWeakId: () => require.resolveWeak('./MyComponent'),
});

Installation

$ npm install --save-dev babel-plugin-transform-react-loadable

Usage

Via .babelrc (Recommended)

.babelrc

// without options
{
  "plugins": ["transform-react-loadable"]
}

// with options
{
  "plugins": [
    ["transform-react-loadable", {
      "server": true, // default
      "webpack": true
    }]
  ]
}

Via CLI

$ babel --plugins transform-react-loadable script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["transform-react-loadable"]
});

Development

Use npm v3: npm install -g npm@3

git clone https://github.com/motiz88/babel-plugin-transform-react-loadable
cd babel-plugin-transform-react-loadable
npm install
# ... hackity hack hack ...
npm run test:local # Including tests (mocha), code coverage (nyc), code style (eslint),
                   # and type checks (flow).

See package.json for more dev scripts you can use.

Contributing

PRs are very welcome. Please make sure that test:local passes on your branch.