[react] improve handling of React types

1. Handle named imports

In addition to supporting `React.*` types:
```js
import * as React from 'react';
type T = React.Node | React.Element | React.ChildrenArray;
```

We also support named imports:
```js
import { type Node as ReactNode, type Element as ReactElement, type ChildrenArray } from 'react';
type T = ReactNode | ReactElement | ChildrenArray;
```

NOTE: To avoid name conflicts with the DOM `Node` and `Element` type, it is important to alias `React.Node` as `ReactNode` and `React.Element` as `ReactElement`.

2. Strip type annotations from React function component return types in favor of inference

Flow:
```js
const App = ({ message }: AppProps): React.Node => <div>{message}</div>;
```

TypeScript:
```ts
const App = ({ message }: AppProps) => <div>{message}</div>;
```

Why not simply change `React.Node` to `React.ReactNode`?

If we leave it as `React.ReactNode`, we'll receive the error `'Component' cannot be used as a JSX component`. To address this, we simply strip out the type annotation from the return type of the function component and allow TypeScript to infer it.

3. Strip out `AbstractComponent` in favor of inference

Flow:
```js
// @flow
const C: React.AbstractComponent<Props, mixed> = React.forwardRef<Props, Ref>(Comp);
export default (forwardRef<Props, Ref>(Comp): React.AbstractComponent<Props, mixed>);
```

TypeScript:
```ts
const C = forwardRef<Ref, Props>(Comp);
export default forwardRef<Ref, Props>(Comp);
```

Why? Because there is no `React.AbstractComponent` equivalent in TypeScript. We can simply strip it out and allow TypeScript to infer the type.

4. Reverse params for `forwardRef`

Flow:
```js
forwardRef<Props, Ref>(Comp);
```

TypeScript:
```ts
forwardRef<Ref, Props>(Comp);
```

Why? Because the arguments are swapped in TypeScript.

5. Rename `ElementConfig`, `ElementProps`, `Portal`, and `StatelessFunctionalComponent`

- `ElementConfig` --> `ComponentProps`
- `ElementProps` --> `ComponentProps`
- `Portal` --> `PortalProps`
- `StatelessFunctionalComponent` --> `FC`

Author: jackhsu978

NOTES.md

@@ -1,10 +1,15 @@
 # Notes
-## React.Node -> React.ReactElement
+## Strip React.Node from function component return types
 
 One issue we encountered was most codemods convert `React.Node` to `React.ReactNode` when they're a function return type. While the names are similar, they behave [differently](https://stackoverflow.com/questions/58123398/when-to-use-jsx-element-vs-reactnode-vs-reactelement?rq=1). In TypeScript, `React.ReactNode` is primarily used to type things that can be children of a React node, and it includes things like booleans or null. When we return `React.Node`, we're usually annotating a functional component that can be instantiated in JSX (`<Component />`). In TypeScript that's inferred [as React.ReactElement or JSX.Element](https://github.com/TypeScript-cheatsheets/react#function-components). This also needs to be done for the `render` method of class components as well, despite some of the [React types](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L3087) suggesting otherwise. If you leave it as `React.ReactNode` you'll receive the error `'Component' cannot be used as a JSX component`. In addition, if the function returns `null`, we have to add a `| null` to allow it. Strings and numbers will throw an error if returned in TS.
 
 [TS Playground](https://www.TypeScriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wG4Aoc4AOxiSk3STgAUcwBnOAb3Ln7gcA-AC5BMKDQDmFAL6UkAD0iw4aCNQ7wAKki0BGOAF44ACgCUxgHw8+AojACuUanAA8AE2AA3K3S1uAPRevuTy5Eoq8OqaOnowAEzGZmDsHGJsEJyWRja8AnDAmClpAHQclvkF9khOLu4hVtypWRzlskGNdvzyBQ7OrtSOADbDYQrK0NEaWnC6WgDMyaYtnBlp5mLI6DCl2xgAchAezLm2BUUlreWV3dX99Z4+TattHB3Bz3e9NXWDI2NwpEpmoZnEtAAWZavdatTaIYi7fYwACiwyQICQtDgAB84ENRtZzgJLisyhVidU4A9XE9fM1yR8ugUfvwafiAXJKJQYrNMBAIMkAEIC9EoaimfTmCjkNDDFAcLjzGAAVjgSjo1A8XGRpQAwrhINQsfAqmysScoBYtoi9oi0RiTZTqqT+RBLOzTHS4IErNK7n1agMOaMKCy5DK5QqlfEAGzqxSa7UInb6w0aJ1m6kW+jWlMYO07B2Y7F4gnDZ0XYqmN0eoP1L0hH1+sNU7N-EPDVs9CM8sFwPUACyQaAA1sscnk7p6AwI3FZZ1S3MrDL7F9Vl-Ekmu2xvlUsd7u58qoYej+5lWqz0fN1p49eCkE-eNyEA)
 
+To address the issue, we remove the function component return type annotations and allow TypeScript to infer the return types.
+```ts
+const App = ({ message }: AppProps) => <div>{message}</div>;
+```
+
 ## {\[KeyType\]: ValueType} -> Partial<Record<KeyType, ValueType>>
 Object index types work pretty differently between Flow and TypeScript. Flow allows any type to be an index, while TypeScript supports only strings and numbers. One other difference I found is Flow marks all of the keys of the object as optional by default. To get this same behavior, we have to wrap the object in `Partial`.
 
@@ -83,7 +88,7 @@ All of the types are imported and namespaced, and the codemod automatically adds
 
 ## React.AbstractComponent
 
-[AbstractComponent](https://flow.org/en/docs/react/types/#toc-react-abstractcomponent) is a Flow type that helps you construct higher order components, and there is no direct TypeScript equivalent. The identical type is a `ComponentType` with the type of `ref` modified. That is a lot more verbose, so we added the `Flow.AbstractComponent` utility to keep things concise.
+[AbstractComponent](https://flow.org/en/docs/react/types/#toc-react-abstractcomponent) is a Flow type that helps you construct higher order components, and there is no direct TypeScript equivalent. We remove the annotations of `AbstractComponent` and allow TypeScript to infer them.
 
 ## export type * from './foo`
 
@@ -94,11 +99,11 @@ In many cases, it's ideal to keep `type` imports when TypeScript supports it. Th
 We've encountered some global Flow types like [`TimeoutID`](https://github.com/facebook/flow/issues/5627) that needed conversions.
 
 
-## React.ElementConfig -> JSX.LibraryManagedAttributes
+## React.ElementConfig -> React.ComponentProps
 
-Flow has a utility type which gets the props from a component. [TypeScript has a similar type](https://github.com/Microsoft/TypeScript/issues/26704) called `JSX.LibraryManagedAttributes` but there's some extra conversion needed to make the type parameters work.
+Flow has a utility type which gets the props from a component. TypeScript has a similar type called `ComponentProps`.
 
-[TS Playground example](https://www.TypeScriptlang.org/play?ts=4.4.2#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wG4BYAKCuADsYkpN0k4AFHMAZzgG8q4cGAE8ANowBccAEYQI4lLQqUAvlSppRKLjwAqSLvCQAPBrQAmPZOhgA6AMK5ItJPQA8HCNwB8fAXDQIWkMoAFcMaAAKME4uKU9uAEo-SkFBLlCwRmjYxOVBNWpUuCILbMSpawxbKpgAOQhzVn5iwSIYUKhaOEj-NLg3c2AANzgAem8+uDz-QsL1SjoGJhY4R3Ag13gWwRivLgB+KUVhZXnKESy4fUMEngBeOAApAGUADVsAGWBpKBQoYQAWUUKAA5khzABBGAwKA-UIMLhuG4wAA01wMMAA2gAiPbcHEAXW8ykurF0YkYcEeKLuWPwInEUHwhNIQA)
+[TS Playground example](https://www.typescriptlang.org/play?ts=4.4.2#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wG4BYAKCuADsYkpN0k4AFHMAZzgG8q4cGAE8ANowBccAEYQI4lLQqUAvlSppRKLjwAqSLvCQAPBrQAmPZOhgA6AMK5ItJPQA8HCNwB8fAXDQIWkMoAFcMaAAKME4uKU9uAEo-SkFBLlCwRmjYxOVBNWpUuCILbMSpawxbKpgAOQhzVn5iwSIYUKhaOEj-NLg3c2AANzgAem8+uDz-QsL1SjoGJhY4R3Ag13gWwRivLgB+KUVhZXnKESy4fUMEngBeRGI7dectu7dLpAhMa4MYbzKL7XMSMOCPG4wO4AbXwInEUHwAF1SEA)
 
 ## Utility types
 

src/convert/declarations.test.ts

@@ -107,6 +107,12 @@ describe("transform declarations", () => {
       expectMigrationReporterMethodNotCalled(`importWithExtension`);
     });
 
+    it("drops React.AbstractComponent imports", async () => {
+      const src = `import {type AbstractComponent, forwardRef} from 'react';`;
+      const expected = `import {forwardRef} from 'react';`;
+      expect(await transform(src)).toBe(expected);
+    });
+
     describe("Flow to TypeScript React import transformations", () => {
       Object.entries(ReactTypes).forEach(([flowType, tsType]) => {
         it(`transforms type imports of ${flowType} from react`, async () => {
@@ -561,43 +567,33 @@ describe("transform declarations", () => {
     expect(await transform(src)).toBe(expected);
   });
 
-  it("Converts React.Node to React.ReactElement in render", async () => {
-    const src = dedent`class Foo extends React.Component {
-      render(): React.Node {return <div />};
-    };`;
-    const expected = dedent`class Foo extends React.Component {
-      render(): React.ReactElement {return <div />};
-    };`;
-    expect(await transform(src)).toBe(expected);
-  });
-
-  it("Adds null to React.ReactElement in render", async () => {
+  it("Converts React.Node to ReactNode in render", async () => {
     const src = dedent`class Foo extends React.Component {
       render(): React.Node {
         if (foo) return (<div />);
         return null;
       };
     };`;
     const expected = dedent`class Foo extends React.Component {
-      render(): React.ReactElement | null {
+      render(): ReactNode {
         if (foo) return (<div />);
         return null;
       };
     };`;
     expect(await transform(src)).toBe(expected);
   });
 
-  it("Converts React.Node to React.ReactElement for render in arrow", async () => {
+  it("Strips out React.Node for render in arrow", async () => {
     const src = dedent`class Foo extends React.Component {
       render = (): React.Node => {return <div />};
     };`;
     const expected = dedent`class Foo extends React.Component {
-      render = (): React.ReactElement => {return <div />};
+      render = () => {return <div />};
     };`;
     expect(await transform(src)).toBe(expected);
   });
 
-  it("Does not convert React.Node to React.ReactElement in non-render", async () => {
+  it("Does not convert React.Node to ReactNode in non-render", async () => {
     const src = dedent`class Foo extends React.Component {
       rendering(): React.Node {return <div />};
     };`;
@@ -607,6 +603,19 @@ describe("transform declarations", () => {
     expect(await transform(src)).toBe(expected);
   });
 
+  it("removes React.AbstractComponent<>", async () => {
+    const src = dedent`
+    // @flow
+    const C1: AbstractComponent<Props, Ref> = memo<Props>((props) => null);
+    const C2: AbstractComponent<Props, Ref> = memo<Props>(Comp);
+    `;
+    const expected = dedent`
+    const C1 = memo<Props>((props) => null);
+    const C2 = memo<Props>(Comp);
+    `;
+    expect(await transform(src)).toBe(expected);
+  });
+
   describe("untyped usestate", () => {
     it("Applies any and creates warning for untyped empty useState.", async () => {
       const src = `const test = React.useState();`;

src/convert/declarations.ts

@@ -145,6 +145,18 @@ export function transformDeclarations({
           }
         }
 
+        // `import {type AbstractComponent, ...} from 'react'` => `import {...} from 'react'`
+        if (path.node.source.value === "react") {
+          path.node.specifiers = path.node.specifiers.filter(
+            (s) =>
+              !(
+                s.type === "ImportSpecifier" &&
+                s.imported.type === "Identifier" &&
+                s.imported.name === "AbstractComponent"
+              )
+          );
+        }
+
         return;
       }
 
@@ -291,6 +303,19 @@ export function transformDeclarations({
     },
 
     VariableDeclarator(path) {
+      // `const c: AbstractComponent<Props, RefType> =` → `const c =`
+      if (
+        path.node.id.type === "Identifier" &&
+        path.node.id.typeAnnotation?.type === "TypeAnnotation" &&
+        path.node.id.typeAnnotation.typeAnnotation.type ===
+          "GenericTypeAnnotation" &&
+        path.node.id.typeAnnotation.typeAnnotation.id.type === "Identifier" &&
+        path.node.id.typeAnnotation.typeAnnotation.id.name ===
+          "AbstractComponent"
+      ) {
+        path.node.id.typeAnnotation = null;
+      }
+
       if (
         path.parent.type === "VariableDeclaration" &&
         path.parentPath.parent.type !== "ForStatement" &&

src/convert/expressions.test.ts

@@ -220,6 +220,69 @@ describe("transform expressions", () => {
     });
   });
 
+  describe("React.AbstractComponent", () => {
+    it("should handle anonymous component", async () => {
+      const src = dedent`
+      // @flow
+      export default (memo<Props>((props) => null): AbstractComponent<Props, Ref>);
+      `;
+      const expected = dedent`
+      export default memo<Props>((props) => null);
+      `;
+      expect(await transform(src)).toBe(expected);
+    });
+
+    it("should handle named component", async () => {
+      const src = dedent`
+      // @flow
+      export default (memo<Props>(Comp): AbstractComponent<Props, Ref>);
+      `;
+      const expected = dedent`
+      export default memo<Props>(Comp);
+      `;
+      expect(await transform(src)).toBe(expected);
+    });
+
+    it("should not remove when annotation is not for a function call", async () => {
+      const src = dedent`
+      export default function withFoo(f: Foo): <P>(S: AbstractComponent<P>) => AbstractComponent<P> {
+        return function withFoo<P>(Subject: AbstractComponent<P>): AbstractComponent<P & InjectedP> {
+          return () => null;
+        };
+      }
+      `;
+      expect(await transform(src)).toBe(src);
+    });
+  });
+
+  describe("React.forwardRef", () => {
+    it("should handle anonymous component", async () => {
+      const src = dedent`
+      // @flow
+      const C: AbstractComponent<Props, Ref> = forwardRef<Props, Ref>((props, ref) => null);
+      export default (forwardRef<Props, Ref>((props, ref) => null): AbstractComponent<Props, Ref>);
+      `;
+      const expected = dedent`
+      const C = forwardRef<Ref, Props>((props, ref) => null);
+      export default forwardRef<Ref, Props>((props, ref) => null);
+      `;
+      expect(await transform(src)).toBe(expected);
+    });
+
+    it("should handle named component", async () => {
+      const src = dedent`
+      // @flow
+      const C: AbstractComponent<Props, mixed> = forwardRef<Props, Ref>(Comp);
+      export default (forwardRef<Props, Ref>(Comp): AbstractComponent<Props, mixed>);
+      `;
+      const expected = dedent`
+      const C = forwardRef<Ref, Props>(Comp);
+      export default forwardRef<Ref, Props>(Comp);
+      `;
+      expect(await transform(src)).toBe(expected);
+    });
+  });
+
   describe.each(JEST_MOCK_METHODS)("jest.%s paths", (mockMethod) => {
     it("should do nothing if there is no extension already", async () => {
       const src = dedent`jest.${mockMethod}('foo');`;

src/convert/expressions.ts

@@ -168,6 +168,15 @@ export function transformExpressions({
         );
       }
     },
+    TSAsExpression(path) {
+      if (
+        path.node.typeAnnotation.type === "TSTypeReference" &&
+        path.node.typeAnnotation.typeName.type === "Identifier" &&
+        path.node.typeAnnotation.typeName.name === "AbstractComponent"
+      ) {
+        path.replaceWith(path.node.expression);
+      }
+    },
     ArrowFunctionExpression(path) {
       // Arrow functions with a generic type parameter (<T>() => {}) often don't typecheck in tsx files
       // since they can be parsed as a JSX tag. To solve this the type parameters usually extend unknown,
@@ -188,6 +197,19 @@ export function transformExpressions({
     CallExpression(path) {
       migrateArgumentsToParameters(path, reporter, state);
 
+      // forwardRef<> in TS has the type parameters in reverse order
+      // `forwardRef<Props, Ref>` → `forwardRef<Ref, Props>`
+      if (
+        path.node.type === "CallExpression" &&
+        path.node.callee.type === "Identifier" &&
+        path.node.callee.name === "forwardRef" &&
+        path.node.typeParameters?.type === "TSTypeParameterInstantiation"
+      ) {
+        path.node.typeParameters.params = path.node.typeParameters.params
+          .concat()
+          .reverse();
+      }
+
       if (
         t.isMemberExpression(path.node.callee) &&
         t.isIdentifier(path.node.callee.property) &&