Clone a custom hook node before use (#16019)
Anton Korzunov committed
Jul 3, 2019 at 02:54 UTC
a865e4a64292756cb0d4ef4f23dca55ebe4ae221
3 files changed
+58
-2
packages/react-refresh/src/ReactFreshBabelPlugin.js
+1
-1
@@ -245,7 +245,7 @@ export default function(babel) {
245
key: fnHookCalls.map(call => call.name + '{' + call.key + '}').join('\n'),
246
customHooks: fnHookCalls
247
.filter(call => !isBuiltinHook(call.name))
248
- .map(call => call.callee),
248
+ .map(call => t.cloneDeep(call.callee)),
249
};
250
}
251
packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js
+26
-1
@@ -15,7 +15,12 @@ function transform(input, options = {}) {
15
return wrap(
16
babel.transform(input, {
17
babelrc: false,
18
- plugins: ['syntax-jsx', 'syntax-dynamic-import', freshPlugin],
18
+ plugins: [
19
+ 'syntax-jsx',
20
+ 'syntax-dynamic-import',
21
+ freshPlugin,
22
+ ...(options.plugins || []),
23
+ ],
24
}).code,
25
);
26
}
@@ -387,6 +392,26 @@ describe('ReactFreshBabelPlugin', () => {
392
).toMatchSnapshot();
393
});
394
395
+ it('includes custom hooks into the signatures when commonjs target is used', () => {
396
+ // this test is passing with Babel 6
397
+ // but would fail for Babel 7 _without_ custom hook node being cloned for signature
398
+ expect(
399
+ transform(
400
+ `
401
+ import {useFancyState} from './hooks';
402
+
403
+ export default function App() {
404
+ const bar = useFancyState();
405
+ return <h1>{bar}</h1>;
406
+ }
407
+ `,
408
+ {
409
+ plugins: ['transform-es2015-modules-commonjs'],
410
+ },
411
+ ),
412
+ ).toMatchSnapshot();
413
+ });
414
+
415
it('generates valid signature for exotic ways to call Hooks', () => {
416
expect(
417
transform(`
packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
+31
@@ -218,6 +218,37 @@ var _c;
218
$RefreshReg$(_c, "App");
219
`;
220
221
+exports[`ReactFreshBabelPlugin includes custom hooks into the signatures when commonjs target is used 1`] = `
222
+'use strict';
223
+
224
+Object.defineProperty(exports, "__esModule", {
225
+ value: true
226
+});
227
+
228
+var _s = $RefreshSig$();
229
+
230
+exports.default = App;
231
+
232
+var _hooks = require('./hooks');
233
+
234
+function App() {
235
+ _s();
236
+
237
+ const bar = (0, _hooks.useFancyState)();
238
+ return <h1>{bar}</h1>;
239
+}
240
+
241
+_s(App, 'useFancyState{bar}', false, function () {
242
+ return [_hooks.useFancyState];
243
+});
244
+
245
+_c = App;
246
+
247
+var _c;
248
+
249
+$RefreshReg$(_c, 'App');
250
+`;
251
+
252
exports[`ReactFreshBabelPlugin only registers pascal case functions 1`] = `
253
254
function hello() {