diff --git a/package.json b/package.json index 4fdbecf..c6f75e5 100644 --- a/package.json +++ b/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", 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 d2d3e9e..cd37b2b 100644 --- a/yarn.lock +++ b/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":