Skip to content

Bamieh/react-make-async-babel-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

A customized Copy of react-loadable/babel plugin

This is a replica of react-loadable's babel plugin.

Notable Differences:

  1. Removed flow based personal preference.
  2. Added an option source to specify the name of the imported library, defaults to "react-loadable".
  3. Split into a seprate repository as this is a development dependency, while the main library is not.

install

if you are using react-loadable/babel this is not needed because sadly the plugin is baked inside the library.

yarn add --dev react-make-async-babel-plugin

Babel Plugin

Included in the react-loadable package is a Babel plugin that can add serverSideRequirePath and webpackRequireWeakId for you.

Input:

import Loadable from 'react-loadable';

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

Output:

import _path from 'path';
import Loadable from 'react-loadable';

Loadable({
  loader: () => import('./MyComponent'),
  LoadingComponent: () => null,
  serverSideRequirePath: _path.join(__dirname, './MyComponent'),
  webpackRequireWeakId: () => require.resolveWeak('./MyComponent'),
});

Plugin Setup

If you have react-loadable installed already, all you need to do is add this plugin to your Babel config:

{
  plugins: [
    ["react-make-async-babel-plugin", {
      server: true,
      webpack: true
    }]
  ]
}

Options:

  • server (default: true) - When true adds serverSideRequirePath config.
  • webpack (default: false) - When true adds webpackRequireWeakId config.
  • source (default: react-loadable) - match against the library name to add the properties to its configs object.

About

A carbon-copy of react-loadable/babel plugin

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published