Rename React.SFC to React.FC

Author: wdoug

package.json

@@ -58,7 +58,7 @@
         "@types/lodash": "^4.14.109",
         "@types/node": "^12.7.5",
         "@types/prettier": "^1.18.2",
-        "@types/react": "^16.3.14",
+        "@types/react": "^16.9.11",
         "dedent": "^0.7.0",
         "husky": "^3.0.5",
         "jest": "^24.9.0",

src/transforms/react-stateless-function-make-props-transform.ts

@@ -25,7 +25,7 @@ export type Factory = ts.TransformerFactory<ts.SourceFile>;
  *   message: string;
  * }
  *
- * const Hello: React.SFC<HelloProps> = ({ message }) => {
+ * const Hello: React.FC<HelloProps> = ({ message }) => {
  *   return <div>hello {message}</div>
  * }
  *
@@ -83,7 +83,7 @@ function visitReactStatelessComponent(
     const propTypeDeclaration = ts.createTypeAliasDeclaration([], [], propTypeName, [], propType);
     const propTypeRef = ts.createTypeReferenceNode(propTypeName, []);
 
-    let componentType = ts.createTypeReferenceNode(ts.createQualifiedName(ts.createIdentifier('React'), 'SFC'), [
+    let componentType = ts.createTypeReferenceNode(ts.createQualifiedName(ts.createIdentifier('React'), 'FC'), [
         shouldMakePropTypeDeclaration ? propTypeRef : propType,
     ]);
 

test/collapse-intersection-interfaces-transform/repeated/output.tsx

@@ -1,12 +1,10 @@
 type A = {
     foo: string,
 };
-
 type B = {
     foo: string | number,
     bar: number,
 };
-
 type C = {
     foo: string | number,
     bar: number,

test/end-to-end/multiple-components/output.tsx

@@ -1,13 +1,13 @@
 type HelloProps = {
     message?: string,
 };
-const Hello: React.SFC<HelloProps> = ({ message }) => {
+const Hello: React.FC<HelloProps> = ({ message }) => {
     return <div>hello {message}</div>;
 };
 type HeyProps = {
     message?: string,
 };
-const Hey: React.SFC<HeyProps> = ({ name }) => {
+const Hey: React.FC<HeyProps> = ({ name }) => {
     return <div>hey, {name}</div>;
 };
 type MyComponentState = {

test/end-to-end/stateless-arrow-function/output.tsx

@@ -1,6 +1,6 @@
 type HelloProps = {
     message?: string,
 };
-const Hello: React.SFC<HelloProps> = ({ message }) => {
+const Hello: React.FC<HelloProps> = ({ message }) => {
     return <div>hello {message}</div>;
 };

test/end-to-end/stateless-function/output.tsx

@@ -1,6 +1,6 @@
 type HelloProps = {
     message?: string,
 };
-export const Hello: React.SFC<HelloProps> = ({ message }) => {
+export const Hello: React.FC<HelloProps> = ({ message }) => {
     return <div>hello {message}</div>;
 };

test/react-stateless-function-make-props-transform/empty-prop/output.tsx

@@ -1,4 +1,4 @@
-const Hello: React.SFC<{}> = () => {
+const Hello: React.FC<{}> = () => {
     return <div />;
 };
 Hello.propTypes = {};

test/react-stateless-function-make-props-transform/multiple-components/output.tsx

@@ -1,13 +1,13 @@
 type HelloProps = {
     message?: string,
 };
-const Hello: React.SFC<HelloProps> = ({ message }) => {
+const Hello: React.FC<HelloProps> = ({ message }) => {
     return <div>hello {message}</div>;
 };
 type HeyProps = {
     name: string,
 };
-const Hey: React.SFC<HeyProps> = ({ name }) => {
+const Hey: React.FC<HeyProps> = ({ name }) => {
     return <div>hey, {name}</div>;
 };
 Hey.propTypes = {

test/react-stateless-function-make-props-transform/stateless-arrow-function/output.tsx

@@ -1,7 +1,7 @@
 type HelloProps = {
     message?: string,
 };
-const Hello: React.SFC<HelloProps> = ({ message }) => {
+const Hello: React.FC<HelloProps> = ({ message }) => {
     return <div>hello {message}</div>;
 };
 Hello.propTypes = {

test/react-stateless-function-make-props-transform/stateless-function-many-props/output.tsx

@@ -39,7 +39,7 @@ type MyComponentProps = {
         fontSize: number,
     },
 };
-const MyComponent: React.SFC<MyComponentProps> = () => {
+const MyComponent: React.FC<MyComponentProps> = () => {
     return <div />;
 };
 MyComponent.propTypes = {