Skip to content

Commit

Permalink
Initial commit.
Browse files Browse the repository at this point in the history
  • Loading branch information
avocadowastaken committed Jun 21, 2017
1 parent f07d0f1 commit b09c752
Show file tree
Hide file tree
Showing 75 changed files with 13,007 additions and 24 deletions.
2 changes: 2 additions & 0 deletions .eslintignore
@@ -0,0 +1,2 @@
**/__fixtures__/*
**/__tests__/packages/*
22 changes: 22 additions & 0 deletions .eslintrc.json
@@ -0,0 +1,22 @@
{
"env": {
"es6": true,
"node": true,
"jest": true
},
"parserOptions": {
"ecmaVersion": 2017
},
"extends": [
"airbnb-base",
"prettier",
"plugin:node/recommended"
],
"plugins": [
"node",
"import"
],
"rules": {
"no-console": "off"
}
}
32 changes: 8 additions & 24 deletions .gitignore
@@ -1,59 +1,43 @@
# Build

lib
package

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
coverage.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Typescript v1 declaration files
typings/
node_modules
jspm_packages

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env

12 changes: 12 additions & 0 deletions .npmignore
@@ -0,0 +1,12 @@
coverage
yarn.lock
tools
src/__tests__
src/__mocks__
src/utils/__tests__

.idea
.npmignore
.travis.yml
.eslintignore
.eslintrc.json
21 changes: 21 additions & 0 deletions .travis.yml
@@ -0,0 +1,21 @@
language: node_js
cache:
yarn: true
notifications:
email: true
node_js:
- 6
- 7
script: yarn cover
after_success: yarn codecov
branches:
except:
- /^v\d+\.\d+\.\d+$/
deploy:
provider: npm
email: uma.karimov@gmail.com
api_key:
secure: MGgBoanmticxsbOsXwoJfth5D2VHUioUhlJGfFiz5iz68QUZY6vkrpGfcE0rOzV0M0Tj0U03DY6MZdFL/Jle/a44IUqXD8XfrmQr6jOOpnVnl2qTlGSjpPbLZ7KgjvLyWfHBafStTxl8z00KlI22T5l3j1Mhf58KOv6fzG3Quudn28qhj//9peEx8GWfL+fLAjTZwYwTdCsPr03X3HN5qs8mBuCjwrCft2eYozm6bhXTGMWi+/jT5zQWX+UwaIl+ho2vY12mcL06lYIEHtmzcxKSt+ThmrTpUsJHPxRPubD6uU3cwQGBeOIRUrMgkM700LgNMOx2YrQUGij9HeNO0xz9DF9mmx0OVATMXDBACzR8uOX45ZZe8htWTo2Kgvhx1Ve/u6hIfcBNPOO5iTKNiacRYJuaGBGSlVAyaMy3wAIwGLiTO6YtJe3skVCFl2u5eAqCckbOrbnTk0ePQTyeL5FJhGJyzpTHZUtAb25fUu7I6BgPdsqWfrxbF6J58aiKMLNfimVLoi8Sh/jnkcEPwqFlEQL3a+Af0QItGGwA1EapAebxMzyHbe8VGO33JQcNrNdfGtQSXNYPv3kgHr7/nCTE0H55qd6n9NniPf1S4NQ2MNUz3xEmPtCu5b8GkEzc9psv5mGQOzFcRnWPG0FeobnCNOpVO4qe1u5VbGT8IB0=
on:
tags: true
repo: umidbekkarimov/babel-plugin-direct-import
211 changes: 211 additions & 0 deletions README.md
@@ -0,0 +1,211 @@
# babel-plugin-direct-import


[![build status](https://img.shields.io/travis/umidbekkarimov/babel-plugin-direct-import/master.svg?style=flat-square)](https://travis-ci.org/umidbekkarimov/babel-plugin-direct-import)
[![npm version](https://img.shields.io/npm/v/babel-plugin-direct-import.svg?style=flat-square)](https://www.npmjs.com/package/babel-plugin-direct-import)
[![npm downloads](https://img.shields.io/npm/dm/babel-plugin-direct-import.svg?style=flat-square)](https://www.npmjs.com/package/babel-plugin-direct-import)
[![Codecov](https://img.shields.io/codecov/c/gh/umidbekkarimov/babel-plugin-direct-import.svg?style=flat-square)](https://codecov.io/gh/umidbekkarimov/babel-plugin-direct-import)

Babel plugin to cherry pick imports of es6 modules.

## Motivation

[Tree shaking](https://webpack.js.org/guides/tree-shaking/) is awesome! And [Rollup](https://rollupjs.org/) with [webpack](https://webpack.js.org) *(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](https://github.com/ant-design/babel-plugin-import) and [babel-transform-imports](https://bitbucket.org/amctheatres/babel-transform-imports)!"
Right! And this plugins are awesome! But they does not work with complicated structures like [material-ui@next](https://github.com/callemall/material-ui/blob/next/src/index.js) has. I started in [babel-plugin-material-ui@next](https://github.com/umidbekkarimov/babel-plugin-material-ui/tree/next) but soon this idea has grow up to create generic plugin that will work with any es6 package.



## Installation

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



## Example

**In**

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

**Out**

```javascript
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**

```json
{
"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**

```javascript
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.

```javascript
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:

```javascript
import foo from './foo';

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

## Supported Packages

#### [Material UI](https://github.com/callemall/material-ui)

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

#### [Material UI Next](https://github.com/callemall/material-ui/tree/next)

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

#### [React Router 3](https://github.com/ReactTraining/react-router/tree/v3)

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

#### [React Router 4](https://github.com/ReactTraining/react-router)

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

#### [Redux Form](https://github.com/erikras/redux-form) (Partial support)

```json
[
{
"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](https://github.com/date-fns/babel-plugin-date-fns)
* [babel-plugin-lodash](https://github.com/lodash/babel-plugin-lodash)
* [babel-plugin-recharts](https://github.com/recharts/babel-plugin-recharts)
* [babel-transform-imports](https://bitbucket.org/amctheatres/babel-transform-imports)
* [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)

0 comments on commit b09c752

Please sign in to comment.