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`] = `