[react-refresh/babel] Always insert registrations after var (facebook…

…#18794)

Previously, we transformed

```
let Foo = styled.div``;
```

to

```
let Foo = _c1 = styled.div``;
```

and then babel-plugin-styled-components would infer `_c1` as the display name. Widen the existing case that applies to function expressions to apply to any type of variable declaration.

packages/react-refresh/src/ReactFreshBabelPlugin.js

@@ -689,16 +689,15 @@ export default function(babel, opts = {}) {
               return;
             }
             const handle = createRegistration(programPath, persistentID);
-            if (
-              (targetExpr.type === 'ArrowFunctionExpression' ||
-                targetExpr.type === 'FunctionExpression') &&
-              targetPath.parent.type === 'VariableDeclarator'
-            ) {
-              // Special case when a function would get an inferred name:
+            if (targetPath.parent.type === 'VariableDeclarator') {
+              // Special case when a variable would get an inferred name:
               // let Foo = () => {}
               // let Foo = function() {}
+              // let Foo = styled.div``;
               // We'll register it on next line so that
               // we don't mess up the inferred 'Foo' function name.
+              // (eg: with @babel/plugin-transform-react-display-name or
+              // babel-plugin-styled-components)
               insertAfterPath.insertAfter(
                 t.expressionStatement(
                   t.assignmentExpression('=', handle, declPath.node.id),
@@ -710,7 +709,7 @@ export default function(babel, opts = {}) {
               targetPath.replaceWith(
                 t.assignmentExpression('=', handle, targetExpr),
               );
-              // Result: let Foo = _c1 = hoc(() => {})
+              // Result: let Foo = hoc(_c1 = () => {})
             }
           },
         );

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

@@ -37,12 +37,12 @@ const Bar = () => {
 _s4(Bar, "useContext{}");
 
 _c2 = Bar;
-
-const Baz = _c4 = memo(_c3 = _s5(() => {
+const Baz = memo(_c3 = _s5(() => {
   _s5();
 
   return useContext(X);
 }, "useContext{}"));
+_c4 = Baz;
 
 const Qux = () => {
   _s6();
@@ -108,20 +108,22 @@ exports[`ReactFreshBabelPlugin generates signatures for function expressions cal
 var _s = $RefreshSig$(),
     _s2 = $RefreshSig$();
 
-export const A = _c3 = React.memo(_c2 = React.forwardRef(_c = _s((props, ref) => {
+export const A = React.memo(_c2 = React.forwardRef(_c = _s((props, ref) => {
   _s();
 
   const [foo, setFoo] = useState(0);
   React.useEffect(() => {});
   return <h1 ref={ref}>{foo}</h1>;
 }, "useState{[foo, setFoo](0)}\\nuseEffect{}")));
-export const B = _c6 = React.memo(_c5 = React.forwardRef(_c4 = _s2(function (props, ref) {
+_c3 = A;
+export const B = React.memo(_c5 = React.forwardRef(_c4 = _s2(function (props, ref) {
   _s2();
 
   const [foo, setFoo] = useState(0);
   React.useEffect(() => {});
   return <h1 ref={ref}>{foo}</h1>;
 }, "useState{[foo, setFoo](0)}\\nuseEffect{}")));
+_c6 = B;
 
 function hoc() {
   var _s3 = $RefreshSig$();
@@ -326,9 +328,10 @@ function Foo() {
 
 _c = Foo;
 export default _c2 = hoc(Foo);
-export const A = _c3 = hoc(Foo);
-
-const B = _c4 = hoc(Foo);
+export const A = hoc(Foo);
+_c3 = A;
+const B = hoc(Foo);
+_c4 = B;
 
 var _c, _c2, _c3, _c4;
 
@@ -342,7 +345,8 @@ exports[`ReactFreshBabelPlugin registers identifiers used in JSX at definition s
 import A from './A';
 import Store from './Store';
 Store.subscribe();
-const Header = _c = styled.div\`color: red\`;
+const Header = styled.div\`color: red\`;
+_c = Header;
 const Factory = funny.factory\`\`;
 let Alias1 = A;
 let Alias2 = A.Foo;
@@ -353,12 +357,12 @@ function Foo() {
 }
 
 _c2 = Foo;
+const B = hoc(A); // This is currently registered as a false positive:
 
-const B = _c3 = hoc(A); // This is currently registered as a false positive:
-
-
-const NotAComponent = _c4 = wow(A); // We could avoid it but it also doesn't hurt.
+_c3 = B;
+const NotAComponent = wow(A); // We could avoid it but it also doesn't hurt.
 
+_c4 = NotAComponent;
 
 var _c, _c2, _c3, _c4;
 
@@ -372,7 +376,8 @@ exports[`ReactFreshBabelPlugin registers identifiers used in React.createElement
 import A from './A';
 import Store from './Store';
 Store.subscribe();
-const Header = _c = styled.div\`color: red\`;
+const Header = styled.div\`color: red\`;
+_c = Header;
 const Factory = funny.factory\`\`;
 let Alias1 = A;
 let Alias2 = A.Foo;
@@ -384,12 +389,12 @@ function Foo() {
 
 _c2 = Foo;
 React.createContext(Store);
+const B = hoc(A); // This is currently registered as a false positive:
 
-const B = _c3 = hoc(A); // This is currently registered as a false positive:
-
-
-const NotAComponent = _c4 = wow(A); // We could avoid it but it also doesn't hurt.
+_c3 = B;
+const NotAComponent = wow(A); // We could avoid it but it also doesn't hurt.
 
+_c4 = NotAComponent;
 
 var _c, _c2, _c3, _c4;
 
@@ -400,14 +405,14 @@ $RefreshReg$(_c4, "NotAComponent");
 `;
 
 exports[`ReactFreshBabelPlugin registers likely HOCs with inline functions 1`] = `
-const A = _c2 = forwardRef(_c = function () {
+const A = forwardRef(_c = function () {
   return <h1>Foo</h1>;
 });
-
-const B = _c5 = memo(_c4 = React.forwardRef(_c3 = () => {
+_c2 = A;
+const B = memo(_c4 = React.forwardRef(_c3 = () => {
   return <h1>Foo</h1>;
 }));
-
+_c5 = B;
 export default _c8 = React.memo(_c7 = forwardRef(_c6 = (props, ref) => {
   return <h1>Foo</h1>;
 }));