Skip to content

Commit c774e84

Browse files
BtS-StyleBtS-Style
authored
Merge pull request #1 from BtS-Style/add-babel-plugin-optimize-react
Updated README.md
2 parents 0e97684 + b22c4b3 commit c774e84

9 files changed

Lines changed: 861 additions & 0 deletions

File tree

‎packages/babel-plugin-optimize-react/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
sandbox.js

‎packages/babel-plugin-optimize-react/LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2013-present, Facebook, Inc.
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎packages/babel-plugin-optimize-react/README.md‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
# babel-plugin-optimize-react
2+
3+
This Babel 7 plugin optimizes React hooks by transforming common patterns into more effecient output when using with tools such as [Create React App](https://github.com/facebook/create-react-app). For example, with this plugin the following output is optimized as shown:
4+
5+
```js
6+
// Original
7+
var _useState = Object(react__WEBPACK_IMPORTED_MODULE_1_["useState"])(Math.random()),
8+
_State2 = Object(_Users_gaearon_p_create_rreact_app_node_modules_babel_runtime_helpers_esm_sliceToArray_WEBPACK_IMPORTED_MODULE_0__["default"])(_useState, 1),
9+
value = _useState2[0];
10+
11+
// With this plugin
12+
var useState = react__WEBPACK_IMPORTED_MODULE_1_.useState;
13+
var __ref__0 = useState(Math.random());
14+
var value = __ref__0[0];
15+
```
16+
17+
## Named imports for React get transformed
18+
19+
```js
20+
// Original
21+
import React, {memo, useState} from 'react';
22+
23+
// With this plugin
24+
import React from 'react';
25+
const {memo, useState} = React;
26+
```
27+
28+
## Array destructuring transform for React's built-in hooks
29+
30+
```js
31+
// Original
32+
const [counter, setCounter] = useState(0);
33+
34+
// With this plugin
35+
const __ref__0 = useState(0);
36+
const counter = __ref__0[0];
37+
const setCounter = __ref__0[1];
38+
```
39+
40+
## React.createElement becomes a hoisted constant
41+
42+
```js
43+
// Original
44+
import React from 'react';
45+
46+
function MyComponent() {
47+
return React.createElement('div', null, 'Hello world');
48+
}
49+
50+
// With this plugin
51+
import React from 'react';
52+
const __reactCreateElement__ = React.createElement;
53+
54+
function MyComponent() {
55+
return __reactCreateElement__('div', null, 'Hello world');
56+
}
57+
```
58+

‎packages/babel-plugin-optimize-react/__tests__/__snapshots__/createElement-test.js.snap‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`React createElement transforms should transform React.createElement calls #2 1`] = `
4+
"const React = require(\\"react\\");
5+
6+
const __reactCreateElement__ = React.createElement;
7+
export function MyComponent() {
8+
return __reactCreateElement__(\\"div\\", null, __reactCreateElement__(\\"span\\", null, \\"Hello world!\\"));
9+
}"
10+
`;
11+
12+
exports[`React createElement transforms should transform React.createElement calls #3 1`] = `
13+
"const React = require(\\"react\\");
14+
15+
const __reactCreateElement__ = React.createElement;
16+
17+
const node = __reactCreateElement__(\\"div\\", null, __reactCreateElement__(\\"span\\", null, \\"Hello world!\\"));
18+
19+
export function MyComponent() {
20+
return node;
21+
}"
22+
`;
23+
24+
exports[`React createElement transforms should transform React.createElement calls #4 1`] = `
25+
"import * as React from \\"react\\";
26+
const __reactCreateElement__ = React.createElement;
27+
28+
const node = __reactCreateElement__(\\"div\\", null, __reactCreateElement__(\\"span\\", null, \\"Hello world!\\"));
29+
30+
export function MyComponent() {
31+
return node;
32+
}"
33+
`;
34+
35+
exports[`React createElement transforms should transform React.createElement calls 1`] = `
36+
"import React from \\"react\\";
37+
const __reactCreateElement__ = React.createElement;
38+
export function MyComponent() {
39+
return __reactCreateElement__(\\"div\\");
40+
}"
41+
`;

‎packages/babel-plugin-optimize-react/__tests__/__snapshots__/hooks-test.js.snap‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`React hook transforms should support destructuring hooks from imports #2 1`] = `
4+
"import React from \\"react\\";
5+
const __reactCreateElement__ = React.createElement;
6+
const {
7+
useState
8+
} = React;
9+
export function MyComponent() {
10+
const _ref_0 = useState(0);
11+
12+
const setCounter = _ref_0[1];
13+
const counter = _ref_0[0];
14+
return __reactCreateElement__(\\"div\\", null, counter);
15+
}"
16+
`;
17+
18+
exports[`React hook transforms should support destructuring hooks from imports #3 1`] = `
19+
"import React from \\"react\\";
20+
const __reactCreateElement__ = React.createElement;
21+
const useState = React.useState;
22+
export function MyComponent() {
23+
const _ref_0 = useState(0);
24+
25+
const setCounter = _ref_0[1];
26+
const counter = _ref_0[0];
27+
return __reactCreateElement__(\\"div\\", null, counter);
28+
}"
29+
`;
30+
31+
exports[`React hook transforms should support destructuring hooks from imports #4 1`] = `
32+
"import React from \\"react\\";
33+
const __reactCreateElement__ = React.createElement;
34+
const foo = React.useState;
35+
export function MyComponent() {
36+
const _ref_0 = foo(0);
37+
38+
const setCounter = _ref_0[1];
39+
const counter = _ref_0[0];
40+
return __reactCreateElement__(\\"div\\", null, counter);
41+
}"
42+
`;
43+
44+
exports[`React hook transforms should support destructuring hooks from imports #5 1`] = `
45+
"import React from \\"react\\";
46+
const __reactCreateElement__ = React.createElement;
47+
const {
48+
useState: foo
49+
} = React;
50+
export function MyComponent() {
51+
const _ref_0 = foo(0);
52+
53+
const setCounter = _ref_0[1];
54+
const counter = _ref_0[0];
55+
return __reactCreateElement__(\\"div\\", null, counter);
56+
}"
57+
`;
58+
59+
exports[`React hook transforms should support destructuring hooks from imports 1`] = `
60+
"import React from \\"react\\";
61+
const __reactCreateElement__ = React.createElement;
62+
const {
63+
useState
64+
} = React;
65+
export function MyComponent() {
66+
const _ref_0 = useState(0);
67+
68+
const setCounter = _ref_0[1];
69+
const counter = _ref_0[0];
70+
return __reactCreateElement__(\\"div\\", null, counter);
71+
}"
72+
`;
73+
74+
exports[`React hook transforms should support destructuring hooks from require calls 1`] = `
75+
"const React = require(\\"react\\");
76+
77+
const __reactCreateElement__ = React.createElement;
78+
const {
79+
useState
80+
} = React;
81+
export function MyComponent() {
82+
const _ref_0 = useState(0);
83+
84+
const setCounter = _ref_0[1];
85+
const counter = _ref_0[0];
86+
return __reactCreateElement__(\\"div\\", null, counter);
87+
}"
88+
`;
89+
90+
exports[`React hook transforms should support hook CJS require with no default 1`] = `
91+
"const {
92+
useState
93+
} = require(\\"react\\");"
94+
`;
95+
96+
exports[`React hook transforms should support hook imports with aliasing 1`] = `
97+
"import React from \\"react\\";
98+
const {
99+
useState: foo
100+
} = React;"
101+
`;
102+
103+
exports[`React hook transforms should support hook imports with no default 1`] = `
104+
"import React from \\"react\\";
105+
const {
106+
useState
107+
} = React;"
108+
`;
109+
110+
exports[`React hook transforms should support mixed hook imports 1`] = `
111+
"import React from \\"react\\";
112+
import \\"react\\";
113+
const {
114+
memo,
115+
useState
116+
} = React;"
117+
`;
118+
119+
exports[`React hook transforms should support mixed hook imports with no default #2 1`] = `
120+
"import React from \\"react\\";
121+
const {
122+
memo,
123+
useRef,
124+
useState
125+
} = React;
126+
export const Portal = memo(() => null);"
127+
`;
128+
129+
exports[`React hook transforms should support mixed hook imports with no default 1`] = `
130+
"import React from \\"react\\";
131+
const {
132+
useState
133+
} = React;
134+
import \\"react\\";
135+
const {
136+
memo
137+
} = React;"
138+
`;
139+
140+
exports[`React hook transforms should support transform hook imports 1`] = `
141+
"import React from \\"react\\";
142+
const {
143+
useState
144+
} = React;"
145+
`;

‎packages/babel-plugin-optimize-react/__tests__/createElement-test.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
'use strict';
2+
3+
const plugin = require('../index.js');
4+
const babel = require('@babel/core');
5+
6+
function transform(code) {
7+
return babel.transform(code, {
8+
plugins: [plugin],
9+
}).code;
10+
}
11+
12+
describe('React createElement transforms', () => {
13+
it('should transform React.createElement calls', () => {
14+
const test = `
15+
import React from "react";
16+
17+
export function MyComponent() {
18+
return React.createElement("div");
19+
}
20+
`;
21+
const output = transform(test);
22+
expect(output).toMatchSnapshot();
23+
});
24+
25+
it('should transform React.createElement calls #2', () => {
26+
const test = `
27+
const React = require("react");
28+
29+
export function MyComponent() {
30+
return React.createElement("div", null, React.createElement("span", null, "Hello world!"));
31+
}
32+
`;
33+
const output = transform(test);
34+
expect(output).toMatchSnapshot();
35+
});
36+
37+
it('should transform React.createElement calls #3', () => {
38+
const test = `
39+
const React = require("react");
40+
41+
const node = React.createElement("div", null, React.createElement("span", null, "Hello world!"));
42+
43+
export function MyComponent() {
44+
return node;
45+
}
46+
`;
47+
const output = transform(test);
48+
expect(output).toMatchSnapshot();
49+
});
50+
51+
it('should transform React.createElement calls #4', () => {
52+
const test = `
53+
import * as React from "react";
54+
55+
const node = React.createElement("div", null, React.createElement("span", null, "Hello world!"));
56+
57+
export function MyComponent() {
58+
return node;
59+
}
60+
`;
61+
const output = transform(test);
62+
expect(output).toMatchSnapshot();
63+
});
64+
});

0 commit comments

Comments
 (0)