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 = {

test/react-stateless-function-make-props-transform/stateless-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 = {

yarn.lock

@@ -426,10 +426,17 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-1.18.2.tgz#069e7d132024d436fd1f5771f6932426a695f230"
   integrity sha512-2JBasa5Qaj81Qsp/dxX2Njy+MdKC767WytHUDsRM7TYEfQvKPxsnGpnCBlBS1i2Aiv1YwCpmKSbQ6O6v8TpiKg==
 
-"@types/react@^16.3.14":
-  version "16.3.14"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.3.14.tgz#f90ac6834de172e13ecca430dcb6814744225d36"
+"@types/prop-types@*":
+  version "15.7.2"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.2.tgz#0e58ae66773d7fd7c372a493aff740878ec9ceaa"
+  integrity sha512-f8JzJNWVhKtc9dg/dyDNfliTKNOJSLa7Oht/ElZdF/UbMUmAH3rLmAk3ODNjw0mZajDEgatA03tRjB4+Dp/tzA==
+
+"@types/react@^16.9.11":
+  version "16.9.11"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.11.tgz#70e0b7ad79058a7842f25ccf2999807076ada120"
+  integrity sha512-UBT4GZ3PokTXSWmdgC/GeCGEJXE5ofWyibCcecRLUVN2ZBpXQGVgQGtG2foS7CrTKFKlQVVswLvf7Js6XA/CVQ==
   dependencies:
+    "@types/prop-types" "*"
     csstype "^2.2.0"
 
 "@types/stack-utils@^1.0.1":