diff --git a/packages/react-refresh/src/ReactFreshBabelPlugin.js b/packages/react-refresh/src/ReactFreshBabelPlugin.js index c21e4aa710512..006e3a7358965 100644 --- a/packages/react-refresh/src/ReactFreshBabelPlugin.js +++ b/packages/react-refresh/src/ReactFreshBabelPlugin.js @@ -245,7 +245,7 @@ export default function(babel) { key: fnHookCalls.map(call => call.name + '{' + call.key + '}').join('\n'), customHooks: fnHookCalls .filter(call => !isBuiltinHook(call.name)) - .map(call => call.callee), + .map(call => t.clone(call.callee)), }; } diff --git a/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js b/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js index 2ca46efcb0aee..db21473777392 100644 --- a/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js +++ b/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js @@ -15,7 +15,12 @@ function transform(input, options = {}) { return wrap( babel.transform(input, { babelrc: false, - plugins: ['syntax-jsx', 'syntax-dynamic-import', freshPlugin], + plugins: [ + 'syntax-jsx', + 'syntax-dynamic-import', + freshPlugin, + ...(options.plugins || []), + ], }).code, ); } @@ -387,6 +392,26 @@ describe('ReactFreshBabelPlugin', () => { ).toMatchSnapshot(); }); + it('includes custom hooks into the signatures when commonjs target is used', () => { + // this test is passing with Babel 6 + // but would fail for Babel 7 _without_ custom hook node being cloned for signature + expect( + transform( + ` + import {useFancyState} from './hooks'; + + export default function App() { + const bar = useFancyState(); + return

{bar}

; + } + `, + { + plugins: ['transform-es2015-modules-commonjs'], + }, + ), + ).toMatchSnapshot(); + }); + it('generates valid signature for exotic ways to call Hooks', () => { expect( transform(` diff --git a/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap b/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap index d3e5aa5a760d6..2e878e3e8629d 100644 --- a/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap +++ b/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap @@ -218,6 +218,37 @@ var _c; $RefreshReg$(_c, "App"); `; +exports[`ReactFreshBabelPlugin includes custom hooks into the signatures when commonjs target is used 1`] = ` +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _s = $RefreshSig$(); + +exports.default = App; + +var _hooks = require('./hooks'); + +function App() { + _s(); + + const bar = (0, _hooks.useFancyState)(); + return

{bar}

; +} + +_s(App, 'useFancyState{bar}', false, function () { + return [_hooks.useFancyState]; +}); + +_c = App; + +var _c; + +$RefreshReg$(_c, 'App'); +`; + exports[`ReactFreshBabelPlugin only registers pascal case functions 1`] = ` function hello() {