Skip to content

Commit ffbe2f0

Browse files
committed
feat(transform): transform react-router imports
0 parents  commit ffbe2f0

File tree

6 files changed

+135
-0
lines changed

6 files changed

+135
-0
lines changed

.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["es2015"],
3+
}

.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
distribution/
2+
node_modules/

.npmignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
source/
2+
test/
3+
node_modules/
4+
.babelrc
5+
.gitignore

README.md

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
# babel-plugin-transform-react-router-optimize
2+
3+
The [React Router][0] library exposes all methods on the top level import, but
4+
allows developers to use imports referencing files directly inside `/lib`,
5+
which can result in smaller bundle sizes as it doesn't import all of the
6+
Router's dependencies.
7+
8+
See here for more information: [Minimizing Bundle Size][1].
9+
10+
This plugin can be added to your `.babelrc` file and automatically transform
11+
ES2015 imports to their size optimized counterpart.
12+
13+
## Example
14+
**In**
15+
```javascript
16+
import { Route, IndexRoute } from 'react-router';
17+
```
18+
19+
**Out**
20+
```javascript
21+
import Route from 'react-router/lib/Route';
22+
import IndexRoute from 'react-router/lib/IndexRoute';
23+
```
24+
25+
## Installation
26+
**Note** This plugin is built for babel 6 and does not work with babel 5.
27+
```sh
28+
npm install --save-dev babel-plugin-transform-react-router-optimize
29+
```
30+
31+
## Usage
32+
33+
### Via `.babelrc` (recommended)
34+
**.babelrc**
35+
```json
36+
{
37+
"plugins": ["transform-react-router-optimize"]
38+
}
39+
```
40+
41+
### Via CLI
42+
```sh
43+
babel --plugins transform-react-router-optimize script.js
44+
```
45+
46+
### Via Node API
47+
```javascript
48+
require('babel-core').transform('code', {
49+
plugins: ['transform-react-router-optimize']
50+
});
51+
```
52+
53+
## License
54+
55+
MIT
56+
57+
[0]: https://github.com/reactjs/react-router/
58+
[1]: https://github.com/reactjs/react-router/blob/master/docs/guides/MinimizingBundleSize.md

package.json

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "babel-plugin-transform-react-router-optimize",
3+
"description": "Babel plugin to optimize the bundle size of projects using react-router.",
4+
"version": "1.0.0",
5+
"license": "MIT",
6+
"main": "distribution/index.js",
7+
"scripts": {
8+
"clean": "rm -rf distribution",
9+
"build": "babel -d distribution source",
10+
"test": "echo \"Error: no test specified\" && exit 1",
11+
"prepublish": "npm run clean && npm run build"
12+
},
13+
"author": {
14+
"name": "Bjoern Brauer",
15+
"email": "zaubernerd@nerdlabs.it"
16+
},
17+
"repository": {
18+
"type": "git",
19+
"url": "git+https://github.com/nerdlabs/babel-plugin-transform-react-router-optimize.git"
20+
},
21+
"bugs": {
22+
"url": "https://github.com/nerdlabs/babel-plugin-transform-react-router-optimize/issues"
23+
},
24+
"homepage": "https://github.com/nerdlabs/babel-plugin-transform-react-router-optimize#readme",
25+
"keywords": [
26+
"babel-plugin",
27+
"react-router",
28+
"optimization",
29+
"minify",
30+
"react",
31+
"reactjs"
32+
],
33+
"devDependencies": {
34+
"babel-cli": "^6.10.1",
35+
"babel-core": "^6.9.1",
36+
"babel-preset-es2015": "^6.9.0"
37+
}
38+
}

source/index.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
export default function ({types: t}) {
2+
const canReplace = (node) => {
3+
return node.specifiers.every((specifier) => {
4+
return t.isImportSpecifier(specifier)
5+
&& specifier.imported.name !== 'default';
6+
});
7+
};
8+
9+
const replace = (specifiers) => {
10+
return specifiers.map(({local, imported}) => {
11+
return t.importDeclaration(
12+
[t.importDefaultSpecifier(t.identifier(local.name))],
13+
t.stringLiteral(`react-router/lib/${imported.name}`)
14+
);
15+
});
16+
};
17+
18+
return {
19+
visitor: {
20+
ImportDeclaration(path) {
21+
if (path.node.source.value === 'react-router') {
22+
if (canReplace(path.node)) {
23+
path.replaceWithMultiple(replace(path.node.specifiers));
24+
}
25+
}
26+
}
27+
}
28+
};
29+
}

0 commit comments

Comments
 (0)