Register more node types that are used later as JSXIdentifiers (#19514)

Author: Andarist

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;
           }

packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js

@@ -261,15 +261,18 @@ 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;
         const Dict = {};
 
         function Foo() {
           return (
-            <div><A /><B /><Alias1 /><Alias2 /><Header /><Dict.X /></div>
+            <div><A /><B /><StyledFactory1 /><StyledFactory2 /><StyledFactory3 /><Alias1 /><Alias2 /><Header /><Dict.X /></div>
           );
         }
 
@@ -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 <h1>{bar}</h1>;

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 <div><A /><B /><Alias1 /><Alias2 /><Header /><Dict.X /></div>;
+  return <div><A /><B /><StyledFactory1 /><StyledFactory2 /><StyledFactory3 /><Alias1 /><Alias2 /><Header /><Dict.X /></div>;
 }
 
-_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`] = `