diff --git a/package.json b/package.json index 55994ac..6fe5e56 100644 --- a/package.json +++ b/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", diff --git a/src/transforms/react-stateless-function-make-props-transform.ts b/src/transforms/react-stateless-function-make-props-transform.ts index 0222cec..a470ef0 100644 --- a/src/transforms/react-stateless-function-make-props-transform.ts +++ b/src/transforms/react-stateless-function-make-props-transform.ts @@ -25,7 +25,7 @@ export type Factory = ts.TransformerFactory; * message: string; * } * - * const Hello: React.SFC = ({ message }) => { + * const Hello: React.FC = ({ message }) => { * return
hello {message}
* } * @@ -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, ]); diff --git a/test/collapse-intersection-interfaces-transform/repeated/output.tsx b/test/collapse-intersection-interfaces-transform/repeated/output.tsx index 5dc0eec..cc2144f 100644 --- a/test/collapse-intersection-interfaces-transform/repeated/output.tsx +++ b/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, diff --git a/test/end-to-end/multiple-components/output.tsx b/test/end-to-end/multiple-components/output.tsx index 5495538..94cddf4 100644 --- a/test/end-to-end/multiple-components/output.tsx +++ b/test/end-to-end/multiple-components/output.tsx @@ -1,13 +1,13 @@ type HelloProps = { message?: string, }; -const Hello: React.SFC = ({ message }) => { +const Hello: React.FC = ({ message }) => { return
hello {message}
; }; type HeyProps = { message?: string, }; -const Hey: React.SFC = ({ name }) => { +const Hey: React.FC = ({ name }) => { return
hey, {name}
; }; type MyComponentState = { diff --git a/test/end-to-end/stateless-arrow-function/output.tsx b/test/end-to-end/stateless-arrow-function/output.tsx index b80083c..cc7e40e 100644 --- a/test/end-to-end/stateless-arrow-function/output.tsx +++ b/test/end-to-end/stateless-arrow-function/output.tsx @@ -1,6 +1,6 @@ type HelloProps = { message?: string, }; -const Hello: React.SFC = ({ message }) => { +const Hello: React.FC = ({ message }) => { return
hello {message}
; }; diff --git a/test/end-to-end/stateless-function/output.tsx b/test/end-to-end/stateless-function/output.tsx index 2028009..41e7e7e 100644 --- a/test/end-to-end/stateless-function/output.tsx +++ b/test/end-to-end/stateless-function/output.tsx @@ -1,6 +1,6 @@ type HelloProps = { message?: string, }; -export const Hello: React.SFC = ({ message }) => { +export const Hello: React.FC = ({ message }) => { return
hello {message}
; }; diff --git a/test/react-stateless-function-make-props-transform/empty-prop/output.tsx b/test/react-stateless-function-make-props-transform/empty-prop/output.tsx index ecb8d4a..d9778f8 100644 --- a/test/react-stateless-function-make-props-transform/empty-prop/output.tsx +++ b/test/react-stateless-function-make-props-transform/empty-prop/output.tsx @@ -1,4 +1,4 @@ -const Hello: React.SFC<{}> = () => { +const Hello: React.FC<{}> = () => { return
; }; Hello.propTypes = {}; diff --git a/test/react-stateless-function-make-props-transform/multiple-components/output.tsx b/test/react-stateless-function-make-props-transform/multiple-components/output.tsx index 39f3039..fa986e5 100644 --- a/test/react-stateless-function-make-props-transform/multiple-components/output.tsx +++ b/test/react-stateless-function-make-props-transform/multiple-components/output.tsx @@ -1,13 +1,13 @@ type HelloProps = { message?: string, }; -const Hello: React.SFC = ({ message }) => { +const Hello: React.FC = ({ message }) => { return
hello {message}
; }; type HeyProps = { name: string, }; -const Hey: React.SFC = ({ name }) => { +const Hey: React.FC = ({ name }) => { return
hey, {name}
; }; Hey.propTypes = { diff --git a/test/react-stateless-function-make-props-transform/stateless-arrow-function/output.tsx b/test/react-stateless-function-make-props-transform/stateless-arrow-function/output.tsx index f706915..d5f5b83 100644 --- a/test/react-stateless-function-make-props-transform/stateless-arrow-function/output.tsx +++ b/test/react-stateless-function-make-props-transform/stateless-arrow-function/output.tsx @@ -1,7 +1,7 @@ type HelloProps = { message?: string, }; -const Hello: React.SFC = ({ message }) => { +const Hello: React.FC = ({ message }) => { return
hello {message}
; }; Hello.propTypes = { diff --git a/test/react-stateless-function-make-props-transform/stateless-function-many-props/output.tsx b/test/react-stateless-function-make-props-transform/stateless-function-many-props/output.tsx index f68ac25..5ba8a44 100644 --- a/test/react-stateless-function-make-props-transform/stateless-function-many-props/output.tsx +++ b/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 = () => { +const MyComponent: React.FC = () => { return
; }; MyComponent.propTypes = { diff --git a/test/react-stateless-function-make-props-transform/stateless-function/output.tsx b/test/react-stateless-function-make-props-transform/stateless-function/output.tsx index f706915..d5f5b83 100644 --- a/test/react-stateless-function-make-props-transform/stateless-function/output.tsx +++ b/test/react-stateless-function-make-props-transform/stateless-function/output.tsx @@ -1,7 +1,7 @@ type HelloProps = { message?: string, }; -const Hello: React.SFC = ({ message }) => { +const Hello: React.FC = ({ message }) => { return
hello {message}
; }; Hello.propTypes = { diff --git a/yarn.lock b/yarn.lock index fcb2ae6..26d000c 100644 --- a/yarn.lock +++ b/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: