diff --git a/packages/react-refresh/src/ReactFreshBabelPlugin.js b/packages/react-refresh/src/ReactFreshBabelPlugin.js index a0e89c9270118..034c2666c4d06 100644 --- a/packages/react-refresh/src/ReactFreshBabelPlugin.js +++ b/packages/react-refresh/src/ReactFreshBabelPlugin.js @@ -140,9 +140,6 @@ export default function(babel, opts = {}) { } else if (calleeType === 'MemberExpression') { // Could be something like React.forwardRef(...) // Pass through. - } else { - // More complicated call. - return false; } break; } diff --git a/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js b/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js index 359aa70ccd869..c06961bae7a3f 100644 --- a/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js +++ b/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js @@ -261,7 +261,10 @@ describe('ReactFreshBabelPlugin', () => { Store.subscribe(); const Header = styled.div\`color: red\` - const Factory = funny.factory\`\`; + const StyledFactory1 = styled('div')\`color: hotpink\` + const StyledFactory2 = styled('div')({ color: 'hotpink' }) + const StyledFactory3 = styled(A)({ color: 'hotpink' }) + const FunnyFactory = funny.factory\`\`; let Alias1 = A; let Alias2 = A.Foo; @@ -269,7 +272,7 @@ describe('ReactFreshBabelPlugin', () => { function Foo() { return ( -
+
); } @@ -294,7 +297,10 @@ describe('ReactFreshBabelPlugin', () => { Store.subscribe(); const Header = styled.div\`color: red\` - const Factory = funny.factory\`\`; + const StyledFactory1 = styled('div')\`color: hotpink\` + const StyledFactory2 = styled('div')({ color: 'hotpink' }) + const StyledFactory3 = styled(A)({ color: 'hotpink' }) + const FunnyFactory = funny.factory\`\`; let Alias1 = A; let Alias2 = A.Foo; @@ -304,6 +310,9 @@ describe('ReactFreshBabelPlugin', () => { return [ React.createElement(A), React.createElement(B), + React.createElement(StyledFactory1), + React.createElement(StyledFactory2), + React.createElement(StyledFactory3), React.createElement(Alias1), React.createElement(Alias2), jsx(Header), @@ -408,7 +417,7 @@ describe('ReactFreshBabelPlugin', () => { transform( ` import {useFancyState} from './hooks'; - + export default function App() { const bar = useFancyState(); return

{bar}

; 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 a73bbf5d8d69c..729996f49ea3f 100644 --- a/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap +++ b/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap @@ -347,29 +347,42 @@ import Store from './Store'; Store.subscribe(); const Header = styled.div\`color: red\`; _c = Header; -const Factory = funny.factory\`\`; +const StyledFactory1 = styled('div')\`color: hotpink\`; +_c2 = StyledFactory1; +const StyledFactory2 = styled('div')({ + color: 'hotpink' +}); +_c3 = StyledFactory2; +const StyledFactory3 = styled(A)({ + color: 'hotpink' +}); +_c4 = StyledFactory3; +const FunnyFactory = funny.factory\`\`; let Alias1 = A; let Alias2 = A.Foo; const Dict = {}; function Foo() { - return
; + return
; } -_c2 = Foo; +_c5 = Foo; const B = hoc(A); // This is currently registered as a false positive: -_c3 = B; +_c6 = B; const NotAComponent = wow(A); // We could avoid it but it also doesn't hurt. -_c4 = NotAComponent; +_c7 = NotAComponent; -var _c, _c2, _c3, _c4; +var _c, _c2, _c3, _c4, _c5, _c6, _c7; $RefreshReg$(_c, "Header"); -$RefreshReg$(_c2, "Foo"); -$RefreshReg$(_c3, "B"); -$RefreshReg$(_c4, "NotAComponent"); +$RefreshReg$(_c2, "StyledFactory1"); +$RefreshReg$(_c3, "StyledFactory2"); +$RefreshReg$(_c4, "StyledFactory3"); +$RefreshReg$(_c5, "Foo"); +$RefreshReg$(_c6, "B"); +$RefreshReg$(_c7, "NotAComponent"); `; exports[`ReactFreshBabelPlugin registers identifiers used in React.createElement at definition site 1`] = ` @@ -378,30 +391,43 @@ import Store from './Store'; Store.subscribe(); const Header = styled.div\`color: red\`; _c = Header; -const Factory = funny.factory\`\`; +const StyledFactory1 = styled('div')\`color: hotpink\`; +_c2 = StyledFactory1; +const StyledFactory2 = styled('div')({ + color: 'hotpink' +}); +_c3 = StyledFactory2; +const StyledFactory3 = styled(A)({ + color: 'hotpink' +}); +_c4 = StyledFactory3; +const FunnyFactory = funny.factory\`\`; let Alias1 = A; let Alias2 = A.Foo; const Dict = {}; function Foo() { - return [React.createElement(A), React.createElement(B), React.createElement(Alias1), React.createElement(Alias2), jsx(Header), React.createElement(Dict.X)]; + return [React.createElement(A), React.createElement(B), React.createElement(StyledFactory1), React.createElement(StyledFactory2), React.createElement(StyledFactory3), React.createElement(Alias1), React.createElement(Alias2), jsx(Header), React.createElement(Dict.X)]; } -_c2 = Foo; +_c5 = Foo; React.createContext(Store); const B = hoc(A); // This is currently registered as a false positive: -_c3 = B; +_c6 = B; const NotAComponent = wow(A); // We could avoid it but it also doesn't hurt. -_c4 = NotAComponent; +_c7 = NotAComponent; -var _c, _c2, _c3, _c4; +var _c, _c2, _c3, _c4, _c5, _c6, _c7; $RefreshReg$(_c, "Header"); -$RefreshReg$(_c2, "Foo"); -$RefreshReg$(_c3, "B"); -$RefreshReg$(_c4, "NotAComponent"); +$RefreshReg$(_c2, "StyledFactory1"); +$RefreshReg$(_c3, "StyledFactory2"); +$RefreshReg$(_c4, "StyledFactory3"); +$RefreshReg$(_c5, "Foo"); +$RefreshReg$(_c6, "B"); +$RefreshReg$(_c7, "NotAComponent"); `; exports[`ReactFreshBabelPlugin registers likely HOCs with inline functions 1`] = `