README.md

babel-plugin-direct-import

Babel plugin to cherry pick imports of es6 modules.

Motivation

Tree shaking is awesome! And Rollup with webpack (TODO: add more next week) teams doing great job making it more better! But still not all libs can be "tree shaked" right now and as a developer I don't want to wait, I want to use sweet import { module } from "package" syntax right now without caring about final bundle size.

"But we already have babel-plugin-import and babel-transform-imports!"

Right! And this plugins are awesome! But they does not work with complicated structures like material-ui@next has. I started in babel-plugin-material-ui@next but soon this idea has grow up to create generic plugin that will work with any es6 package.

Installation

npm install --save-dev babel-plugin-direct-import

Example

In

import { TextField, SelectField, FlatButton } from "material-ui";
import {
  ActionAccessibility,
  ActionAccessible,
  ActionAccountBalance as BalanceIcon
} from "material-ui/svg-icons";

Out

import TextField from "material-ui/TextField";
import SelectField from "material-ui/SelectField";
import FlatButton from "material-ui/FlatButton";
import ActionAccessibility from "material-ui/svg-icons/action/accessibility";
import ActionAccessible from "material-ui/svg-icons/action/accessible";
import BalanceIcon from "material-ui/svg-icons/action/account-balance";

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": [
    [
      "direct-import",
      [
        {
          "name": "material-ui",
          "indexFile": "material-ui/index.es"
        },
        {
          "name": "material-ui/svg-icons",
          "indexFile": "material-ui/svg-icons/index.es"
        }
      ]
    ]
  ]
}

Via Node API

require("babel-core").transform("code", {
  plugins: [
    [
      "direct-import",
      [
        {
          name: "material-ui",
          indexFile: "material-ui/index.es"
        },
        {
          name: "material-ui/svg-icons",
          indexFile: "material-ui/svg-icons/index.es"
        }
      ]
    ]
  ]
});

Limitations

Since this plugin just started to operate, It has it's limitations (PRs or suggestions are welcomed).

Transformation of namespace imports:

To keep it simple currently it ignores namespace imports.

import * as MUI from 'material-ui';

return (props) => <MUI.Checkbox {...props} />;

Mapping of variable exports:

If index file of package exports a variable - you will have to disable mapping for it, otherwise plugin will throw package does not contain module errors.

e.g:

import foo from './foo';

export const bar = foo.bar;
export const baz = foo.baz;
export const noop = () => {};

Supported Packages

Material UI

[
  {
    "name": "material-ui",
    "indexFile": "material-ui/index.es"
  },
  {
    "name": "material-ui/svg-icons",
    "indexFile": "material-ui/svg-icons/index.es"
  }
]

Material UI Next

[
  {
    "name": "material-ui",
    "indexFile": "material-ui/index.es"
  }
]

React Router 3

[
  {
    "name": "react-router",
    "indexFile": "react-router/es/index"
  }
]

React Router 4

[
  {
    "name": "react-router",
    "indexFile": "react-router/es/index"
  },
  {
    "name": "react-router-dom",
    "indexFile": "react-router-dom/es/index"
  }
]

Redux Form (Partial support)

[
  {
    "name": "redux-form",
    "indexFile": "redux-form/es/index"
  },
  {
    "name": "redux-form/immutable",
    "indexFile": "redux-form/es/immutable"
  }
]

Thanks

Heavily inspired by:

• babel-plugin-date-fns
• babel-plugin-lodash
• babel-plugin-recharts
• babel-transform-imports
• babel-plugin-import