Skip to content

Commit f472a2a

Browse files
trueadmtrueadm
committed
Fixed more bugs + added more tests + bumped version
1 parent 835fcbd commit f472a2a

4 files changed

Lines changed: 67 additions & 109 deletions

File tree

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

Lines changed: 18 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`Babel plugin optimize React hooks should support destructuring hooks from imports #2 1`] = `
3+
exports[`React hook transforms should support destructuring hooks from imports #2 1`] = `
44
"import React from \\"react\\";
55
const __reactCreateElement__ = React.createElement;
66
const {
@@ -15,7 +15,7 @@ export function MyComponent() {
1515
}"
1616
`;
1717

18-
exports[`Babel plugin optimize React hooks should support destructuring hooks from imports #3 1`] = `
18+
exports[`React hook transforms should support destructuring hooks from imports #3 1`] = `
1919
"import React from \\"react\\";
2020
const __reactCreateElement__ = React.createElement;
2121
const useState = React.useState;
@@ -28,7 +28,7 @@ export function MyComponent() {
2828
}"
2929
`;
3030

31-
exports[`Babel plugin optimize React hooks should support destructuring hooks from imports #4 1`] = `
31+
exports[`React hook transforms should support destructuring hooks from imports #4 1`] = `
3232
"import React from \\"react\\";
3333
const __reactCreateElement__ = React.createElement;
3434
const foo = React.useState;
@@ -41,7 +41,7 @@ export function MyComponent() {
4141
}"
4242
`;
4343

44-
exports[`Babel plugin optimize React hooks should support destructuring hooks from imports #5 1`] = `
44+
exports[`React hook transforms should support destructuring hooks from imports #5 1`] = `
4545
"import React from \\"react\\";
4646
const __reactCreateElement__ = React.createElement;
4747
const {
@@ -56,7 +56,7 @@ export function MyComponent() {
5656
}"
5757
`;
5858

59-
exports[`Babel plugin optimize React hooks should support destructuring hooks from imports 1`] = `
59+
exports[`React hook transforms should support destructuring hooks from imports 1`] = `
6060
"import React from \\"react\\";
6161
const __reactCreateElement__ = React.createElement;
6262
const {
@@ -71,7 +71,7 @@ export function MyComponent() {
7171
}"
7272
`;
7373

74-
exports[`Babel plugin optimize React hooks should support destructuring hooks from require calls 1`] = `
74+
exports[`React hook transforms should support destructuring hooks from require calls 1`] = `
7575
"const React = require(\\"react\\");
7676
7777
const __reactCreateElement__ = React.createElement;
@@ -87,105 +87,40 @@ export function MyComponent() {
8787
}"
8888
`;
8989

90-
exports[`Babel plugin optimize React hooks should support transform hook imports 1`] = `
91-
"import React from \\"react\\";
92-
const {
90+
exports[`React hook transforms should support hook CJS require with no default 1`] = `
91+
"const {
9392
useState
94-
} = React;"
93+
} = require(\\"react\\");"
9594
`;
9695

97-
exports[`Babel plugin optimize React hooks should support transform hook imports with aliasing 1`] = `
96+
exports[`React hook transforms should support hook imports with aliasing 1`] = `
9897
"import React from \\"react\\";
9998
const {
10099
useState: foo
101100
} = React;"
102101
`;
103102

104-
exports[`React hook transforms should support destructuring hooks from imports #2 1`] = `
103+
exports[`React hook transforms should support hook imports with no default 1`] = `
105104
"import React from \\"react\\";
106-
const __reactCreateElement__ = React.createElement;
107105
const {
108106
useState
109-
} = React;
110-
export function MyComponent() {
111-
const _ref_0 = useState(0);
112-
113-
const setCounter = _ref_0[1];
114-
const counter = _ref_0[0];
115-
return __reactCreateElement__(\\"div\\", null, counter);
116-
}"
117-
`;
118-
119-
exports[`React hook transforms should support destructuring hooks from imports #3 1`] = `
120-
"import React from \\"react\\";
121-
const __reactCreateElement__ = React.createElement;
122-
const useState = React.useState;
123-
export function MyComponent() {
124-
const _ref_0 = useState(0);
125-
126-
const setCounter = _ref_0[1];
127-
const counter = _ref_0[0];
128-
return __reactCreateElement__(\\"div\\", null, counter);
129-
}"
130-
`;
131-
132-
exports[`React hook transforms should support destructuring hooks from imports #4 1`] = `
133-
"import React from \\"react\\";
134-
const __reactCreateElement__ = React.createElement;
135-
const foo = React.useState;
136-
export function MyComponent() {
137-
const _ref_0 = foo(0);
138-
139-
const setCounter = _ref_0[1];
140-
const counter = _ref_0[0];
141-
return __reactCreateElement__(\\"div\\", null, counter);
142-
}"
143-
`;
144-
145-
exports[`React hook transforms should support destructuring hooks from imports #5 1`] = `
146-
"import React from \\"react\\";
147-
const __reactCreateElement__ = React.createElement;
148-
const {
149-
useState: foo
150-
} = React;
151-
export function MyComponent() {
152-
const _ref_0 = foo(0);
153-
154-
const setCounter = _ref_0[1];
155-
const counter = _ref_0[0];
156-
return __reactCreateElement__(\\"div\\", null, counter);
157-
}"
107+
} = React;"
158108
`;
159109

160-
exports[`React hook transforms should support destructuring hooks from imports 1`] = `
110+
exports[`React hook transforms should support mixed hook imports 1`] = `
161111
"import React from \\"react\\";
162-
const __reactCreateElement__ = React.createElement;
112+
import { memo } from \\"react\\";
163113
const {
164114
useState
165-
} = React;
166-
export function MyComponent() {
167-
const _ref_0 = useState(0);
168-
169-
const setCounter = _ref_0[1];
170-
const counter = _ref_0[0];
171-
return __reactCreateElement__(\\"div\\", null, counter);
172-
}"
115+
} = React;"
173116
`;
174117

175-
exports[`React hook transforms should support destructuring hooks from require calls 1`] = `
176-
"const React = require(\\"react\\");
177-
178-
const __reactCreateElement__ = React.createElement;
118+
exports[`React hook transforms should support mixed hook imports with no default 1`] = `
119+
"import React from \\"react\\";
179120
const {
180121
useState
181122
} = React;
182-
export function MyComponent() {
183-
const _ref_0 = useState(0);
184-
185-
const setCounter = _ref_0[1];
186-
const counter = _ref_0[0];
187-
return __reactCreateElement__(\\"div\\", null, counter);
188-
}"
123+
import { memo } from \\"react\\";"
189124
`;
190125

191126
exports[`React hook transforms should support transform hook imports 1`] = `
@@ -194,17 +129,3 @@ const {
194129
useState
195130
} = React;"
196131
`;
197-
198-
exports[`React hook transforms should support transform hook imports with aliasing 1`] = `
199-
"import React from \\"react\\";
200-
const {
201-
useState: foo
202-
} = React;"
203-
`;
204-
205-
exports[`React hook transforms should support transform hook imports with no default 1`] = `
206-
"import React from \\"react\\";
207-
const {
208-
useState
209-
} = React;"
210-
`;

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

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ describe('React hook transforms', () => {
1818
expect(output).toMatchSnapshot();
1919
});
2020

21-
it('should support transform hook imports with aliasing', () => {
21+
it('should support hook imports with aliasing', () => {
2222
const test = `
2323
import React, {useState as foo} from "react";
2424
`;
@@ -114,11 +114,37 @@ describe('React hook transforms', () => {
114114
expect(output).toMatchSnapshot();
115115
});
116116

117-
it('should support transform hook imports with no default', () => {
117+
it('should support hook imports with no default', () => {
118118
const test = `
119119
import {useState} from "react";
120120
`;
121121
const output = transform(test);
122122
expect(output).toMatchSnapshot();
123123
});
124+
125+
it('should support hook CJS require with no default', () => {
126+
const test = `
127+
const {useState} = require("react");
128+
`;
129+
const output = transform(test);
130+
expect(output).toMatchSnapshot();
131+
});
132+
133+
it('should support mixed hook imports', () => {
134+
const test = `
135+
import React from "react";
136+
import {memo, useState} from "react";
137+
`;
138+
const output = transform(test);
139+
expect(output).toMatchSnapshot();
140+
});
141+
142+
it('should support mixed hook imports with no default', () => {
143+
const test = `
144+
import {useState} from "react";
145+
import {memo} from "react";
146+
`;
147+
const output = transform(test);
148+
expect(output).toMatchSnapshot();
149+
});
124150
});

‎packages/babel-plugin-optimize-react/index.js‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,14 @@ module.exports = function(babel) {
1717
const { types: t } = babel;
1818

1919
// Collects named imports of React hooks from the "react" package
20-
function collectReactHooksAndRemoveTheirNamedImports(path) {
20+
function collectReactHooksAndRemoveTheirNamedImports(path, state) {
2121
const node = path.node;
2222
const hooks = [];
2323
if (t.isStringLiteral(node.source) && node.source.value === 'react') {
2424
const specifiers = path.get('specifiers');
25-
let hasDefaultSpecifier = false;
25+
if (state.hasDefaultSpecifier === undefined) {
26+
state.hasDefaultSpecifier = false;
27+
}
2628

2729
for (let specifier of specifiers) {
2830
if (t.isImportSpecifier(specifier)) {
@@ -39,14 +41,17 @@ module.exports = function(babel) {
3941
}
4042
}
4143
} else if (t.isImportDefaultSpecifier(specifier)) {
42-
hasDefaultSpecifier = true;
44+
state.hasDefaultSpecifier = true;
4345
}
4446
}
4547
// If there is no default specifier for React, add one
46-
if (!hasDefaultSpecifier && specifiers.length > 0) {
47-
const defaultSpecifierNode = t.importDefaultSpecifier(t.identifier("React"));
48-
48+
if (state.hasDefaultSpecifier === false && specifiers.length > 0) {
49+
const defaultSpecifierNode = t.importDefaultSpecifier(
50+
t.identifier('React')
51+
);
52+
4953
path.pushContainer('specifiers', defaultSpecifierNode);
54+
state.hasDefaultSpecifier = true;
5055
}
5156
}
5257
return hooks;
@@ -180,7 +185,10 @@ module.exports = function(babel) {
180185
]);
181186
const bindingPath = binding.path;
182187

183-
if (t.isImportDefaultSpecifier(bindingPath) || t.isVariableDeclarator(bindingPath)) {
188+
if (
189+
t.isImportDefaultSpecifier(bindingPath) ||
190+
t.isVariableDeclarator(bindingPath)
191+
) {
184192
bindingPath.parentPath.insertAfter(createElementDeclaration);
185193
// Make sure we declare our new now so scope tracking continues to work
186194
const reactElementDeclarationPath = bindingPath.parentPath.getNextSibling();
@@ -192,12 +200,15 @@ module.exports = function(babel) {
192200
return {
193201
name: 'babel-plugin-optimize-react',
194202
visitor: {
195-
ImportDeclaration(path) {
203+
ImportDeclaration(path, state) {
196204
// Collect all hooks that are named imports from the React package. i.e.:
197205
// import React, {useState} from "react";
198206
// As we collection them, we also remove the imports from the declaration.
199207

200-
const importedHooks = collectReactHooksAndRemoveTheirNamedImports(path);
208+
const importedHooks = collectReactHooksAndRemoveTheirNamedImports(
209+
path,
210+
state
211+
);
201212
if (importedHooks.length > 0) {
202213
// Create a destructured variable declaration. i.e.:
203214
// const {useEffect, useState} = React;

‎packages/babel-plugin-optimize-react/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "babel-plugin-optimize-react",
3-
"version": "0.0.2",
3+
"version": "0.0.3",
44
"description": "Babel plugin for optimizing common React patterns",
55
"repository": "facebookincubator/create-react-app",
66
"license": "MIT",

0 commit comments

Comments
 (0)