Rename React.SFC to React.FC

Author: wdoug

package.json

@@ -48,7 +48,7 @@
         "@types/lodash": "^4.14.109",
         "@types/node": "^10.1.2",
         "@types/prettier": "^1.12.2",
-        "@types/react": "^16.3.14",
+        "@types/react": "^16.9.2",
         "dedent": "^0.7.0",
         "husky": "^0.14.3",
         "jest": "^22.4.4",

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

@@ -68,10 +68,17 @@
   version "1.12.2"
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-1.12.2.tgz#4a37f0aa8ed20366ada6fa7994b1c6dfe787fdd1"
 
-"@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.2":
+  version "16.9.2"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.2.tgz#6d1765431a1ad1877979013906731aae373de268"
+  integrity sha512-jYP2LWwlh+FTqGd9v7ynUKZzjj98T8x7Yclz479QdRhHfuW9yQ+0jjnD31eXSXutmBpppj5PYNLYLRfnZJvcfg==
   dependencies:
+    "@types/prop-types" "*"
     csstype "^2.2.0"
 
 abab@^1.0.4: