React upd to 16.8.23, react.props to props

Author: Ivan Grekov

README.md

@@ -20,8 +20,8 @@ Transforms React code written in JavaScript to TypeScript.
 ```jsx
 class MyComponent extends React.Component {
     static propTypes = {
-        prop1: React.PropTypes.string.isRequired,
-        prop2: React.PropTypes.number,
+        prop1: PropTypes.string.isRequired,
+        prop2: PropTypes.number,
     };
     constructor() {
         super();

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.8.23",
         "dedent": "^0.7.0",
         "husky": "^0.14.3",
         "jest": "^22.4.4",

src/helpers/build-prop-type-interface.ts

@@ -4,7 +4,7 @@ import * as ts from 'typescript';
  * Build props interface from propTypes object
  * @example
  * {
- *   foo: React.PropTypes.string.isRequired
+ *   foo: PropTypes.string.isRequired
  * }
  *
  * becomes
@@ -53,7 +53,7 @@ export function buildInterfaceFromPropTypeObjectLiteral(objectLiteral: ts.Object
 }
 
 /**
- * Turns React.PropTypes.* into TypeScript type value
+ * Turns PropTypes.* into TypeScript type value
  *
  * @param node React propTypes value
  */

src/helpers/index.ts

@@ -63,7 +63,7 @@ export function isReactHeritageClause(clause: ts.HeritageClause) {
 /**
  * Return true if a statement is a React propType assignment statement
  * @example
- * SomeComponent.propTypes = { foo: React.PropTypes.string };
+ * SomeComponent.propTypes = { foo: PropTypes.string };
  * @param statement
  */
 export function isReactPropTypeAssignmentStatement(statement: ts.Statement): statement is ts.ExpressionStatement {

src/transforms/react-move-prop-types-to-class-transform.ts

@@ -15,19 +15,19 @@ export type Factory = ts.TransformerFactory<ts.SourceFile>;
  * @example
  * Before:
  * class SomeComponent extends React.Component<{foo: number;}, {bar: string;}> {}
- * SomeComponent.propTypes = { foo: React.PropTypes.string }
+ * SomeComponent.propTypes = { foo: PropTypes.string }
  *
  * After
  * class SomeComponent extends React.Component<{foo: number;}, {bar: string;}> {
- *   static propTypes = { foo: React.PropTypes.string }
+ *   static propTypes = { foo: PropTypes.string }
  * }
  *
  * @todo
  * This is not supporting multiple statements for a single class yet
  * ```
  * class SomeComponent extends React.Component<{foo: number;}, {bar: string;}> {}
- * SomeComponent.propTypes = { foo: React.PropTypes.string }
- * SomeComponent.propTypes.bar = React.PropTypes.number;
+ * SomeComponent.propTypes = { foo: PropTypes.string }
+ * SomeComponent.propTypes.bar = PropTypes.number;
  * ```
  */
 export function reactMovePropTypesToClassTransformFactoryFactory(typeChecker: ts.TypeChecker): Factory {

src/transforms/react-remove-prop-types-assignment-transform.ts

@@ -10,7 +10,7 @@ export type Factory = ts.TransformerFactory<ts.SourceFile>;
  * @example
  * Before:
  * class SomeComponent extends React.Component<{foo: number;}, {bar: string;}> {}
- * SomeComponent.propTypes = { foo: React.PropTypes.string }
+ * SomeComponent.propTypes = { foo: PropTypes.string }
  *
  * After
  * class SomeComponent extends React.Component<{foo: number;}, {bar: string;}> {}

src/transforms/react-remove-static-prop-types-member-transform.ts

@@ -11,7 +11,7 @@ export type Factory = ts.TransformerFactory<ts.SourceFile>;
  * Before:
  * class SomeComponent extends React.Component<{foo: number;}, {bar: string;}> {
  *   static propTypes = {
- *      foo: React.PropTypes.number.isRequired,
+ *      foo: PropTypes.number.isRequired,
  *   }
  * }
  *

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

@@ -17,20 +17,20 @@ export type Factory = ts.TransformerFactory<ts.SourceFile>;
  * // const Hello = ({ message }) => <div>hello {message}</div>
  *
  * Hello.propTypes = {
- *   message: React.PropTypes.string,
+ *   message: PropTypes.string,
  * }
  *
  * After:
  * Type HelloProps = {
  *   message: string;
  * }
  *
- * const Hello: React.SFC<HelloProps> = ({ message }) => {
+ * const Hello: React.FunctionComponent<HelloProps> = ({ message }) => {
  *   return <div>hello {message}</div>
  * }
  *
  * Hello.propTypes = {
- *   message: React.PropTypes.string,
+ *   message: PropTypes.string,
  * }
  */
 export function reactStatelessFunctionMakePropsTransformFactoryFactory(typeChecker: ts.TypeChecker): Factory {
@@ -83,9 +83,10 @@ function visitReactStatelessComponent(
     const propTypeDeclaration = ts.createTypeAliasDeclaration([], [], propTypeName, [], propType);
     const propTypeRef = ts.createTypeReferenceNode(propTypeName, []);
 
-    let componentType = ts.createTypeReferenceNode(ts.createQualifiedName(ts.createIdentifier('React'), 'SFC'), [
-        shouldMakePropTypeDeclaration ? propTypeRef : propType,
-    ]);
+    let componentType = ts.createTypeReferenceNode(
+        ts.createQualifiedName(ts.createIdentifier('React'), 'FunctionComponent'),
+        [shouldMakePropTypeDeclaration ? propTypeRef : propType],
+    );
 
     // replace component with ts stateless component
     const typedComponent = ts.createVariableStatement(

test/end-to-end/initial-state-and-proprypes-and-set-state/input.tsx

@@ -11,5 +11,5 @@ export default class MyComponent extends React.Component {
 }
 
 MyComponent.propTypes = {
-    baz: React.PropTypes.string.isRequired,
+    baz: PropTypes.string.isRequired,
 }

test/end-to-end/initial-state-and-proprypes/input.tsx

@@ -8,5 +8,5 @@ export default class MyComponent extends React.Component {
 }
 
 MyComponent.propTypes = {
-    baz: React.PropTypes.string.isRequired;
+    baz: PropTypes.string.isRequired;
 }

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

@@ -7,11 +7,11 @@ const Hey = ({ name }) => {
 }
 
 Hey.propTypes = {
-  message: React.PropTypes.string,
+  message: PropTypes.string,
 }
 
 Hello.propTypes = {
-  message: React.PropTypes.string,
+  message: PropTypes.string,
 }
 
 export default class MyComponent extends React.Component {
@@ -26,7 +26,7 @@ export default class MyComponent extends React.Component {
 
 export class AnotherComponent extends React.Component {
     static propTypes = {
-        foo: React.PropTypes.string.isRequired,
+        foo: PropTypes.string.isRequired,
     };
     render() {
         return <div />;

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.FunctionComponent<HelloProps> = ({ message }) => {
     return <div>hello {message}</div>;
 };
 type HeyProps = {
     message?: string,
 };
-const Hey: React.SFC<HeyProps> = ({ name }) => {
+const Hey: React.FunctionComponent<HeyProps> = ({ name }) => {
     return <div>hey, {name}</div>;
 };
 type MyComponentState = {

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

@@ -3,5 +3,5 @@ const Hello = ({ message }) => {
 };
 
 Hello.propTypes = {
-  message: React.PropTypes.string,
+  message: PropTypes.string,
 }

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.FunctionComponent<HelloProps> = ({ message }) => {
     return <div>hello {message}</div>;
 };

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

@@ -3,5 +3,5 @@ export function Hello({ message }) {
 }
 
 Hello.propTypes = {
-  message: React.PropTypes.string,
+  message: PropTypes.string,
 }

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.FunctionComponent<HelloProps> = ({ message }) => {
     return <div>hello {message}</div>;
 };

test/react-js-make-props-and-state-transform/multiple-components/input.tsx

@@ -12,7 +12,7 @@ export default class MyComponent extends React.Component {
 
 export class AnotherComponent extends React.Component {
     static propTypes = {
-        foo: React.PropTypes.string.isRequired,
+        foo: PropTypes.string.isRequired,
     };
     render() {
         return <div />;

test/react-js-make-props-and-state-transform/multiple-components/output.tsx

@@ -13,7 +13,7 @@ type AnotherComponentProps = {
 };
 export class AnotherComponent extends React.Component<AnotherComponentProps, {}> {
     static propTypes = {
-        foo: React.PropTypes.string.isRequired,
+        foo: PropTypes.string.isRequired,
     };
     render() {
         return <div />;

test/react-js-make-props-and-state-transform/static-proptypes-getter-simple/input.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 export default class MyComponent extends React.Component {
     static get propTypes() {
         return {
-            foo: React.PropTypes.string.isRequired,
+            foo: PropTypes.string.isRequired,
         };
     }
     render() {

test/react-js-make-props-and-state-transform/static-proptypes-getter-simple/output.tsx

@@ -5,7 +5,7 @@ type MyComponentProps = {
 export default class MyComponent extends React.Component<MyComponentProps, {}> {
     static get propTypes() {
         return {
-            foo: React.PropTypes.string.isRequired,
+            foo: PropTypes.string.isRequired,
         };
     }
     render() {

test/react-js-make-props-and-state-transform/static-proptypes-many-props/input.tsx

@@ -2,46 +2,46 @@ import * as React from 'react';
 
 export default class MyComponent extends React.Component {
     static propTypes = {
-        children: React.PropTypes.node,
-        any: React.PropTypes.any,
-        array: React.PropTypes.array,
-        bool: React.PropTypes.bool,
-        func: React.PropTypes.func,
-        number: React.PropTypes.number,
-        object: React.PropTypes.object,
-        string: React.PropTypes.string,
-        node: React.PropTypes.node,
-        element: React.PropTypes.element,
-        oneOf: React.PropTypes.oneOf(['a', 'b', 'c']),
-        oneOfType: React.PropTypes.oneOfType([
-            React.PropTypes.string,
-            React.PropTypes.number,
+        children: PropTypes.node,
+        any: PropTypes.any,
+        array: PropTypes.array,
+        bool: PropTypes.bool,
+        func: PropTypes.func,
+        number: PropTypes.number,
+        object: PropTypes.object,
+        string: PropTypes.string,
+        node: PropTypes.node,
+        element: PropTypes.element,
+        oneOf: PropTypes.oneOf(['a', 'b', 'c']),
+        oneOfType: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.number,
         ]),
-        arrayOf: React.PropTypes.arrayOf(React.PropTypes.string),
-        objectOf: React.PropTypes.objectOf(React.PropTypes.string),
-        shape: React.PropTypes.shape({
-            color: React.PropTypes.string,
-            fontSize: React.PropTypes.number,
+        arrayOf: PropTypes.arrayOf(PropTypes.string),
+        objectOf: PropTypes.objectOf(PropTypes.string),
+        shape: PropTypes.shape({
+            color: PropTypes.string,
+            fontSize: PropTypes.number,
         }),
-        anyRequired: React.PropTypes.any.isRequired,
-        arrayRequired: React.PropTypes.array.isRequired,
-        boolRequired: React.PropTypes.bool.isRequired,
-        funcRequired: React.PropTypes.func.isRequired,
-        numberRequired: React.PropTypes.number.isRequired,
-        objectRequired: React.PropTypes.object.isRequired,
-        stringRequired: React.PropTypes.string.isRequired,
-        nodeRequired: React.PropTypes.node.isRequired,
-        elementRequired: React.PropTypes.element.isRequired,
-        oneOfRequired: React.PropTypes.oneOf(['a', 'b', 'c']).isRequired,
-        oneOfTypeRequired: React.PropTypes.oneOfType([
-            React.PropTypes.string,
-            React.PropTypes.number,
+        anyRequired: PropTypes.any.isRequired,
+        arrayRequired: PropTypes.array.isRequired,
+        boolRequired: PropTypes.bool.isRequired,
+        funcRequired: PropTypes.func.isRequired,
+        numberRequired: PropTypes.number.isRequired,
+        objectRequired: PropTypes.object.isRequired,
+        stringRequired: PropTypes.string.isRequired,
+        nodeRequired: PropTypes.node.isRequired,
+        elementRequired: PropTypes.element.isRequired,
+        oneOfRequired: PropTypes.oneOf(['a', 'b', 'c']).isRequired,
+        oneOfTypeRequired: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.number,
         ]).isRequired,
-        arrayOfRequired: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
-        objectOfRequired: React.PropTypes.objectOf(React.PropTypes.string).isRequired,
-        shapeRequired: React.PropTypes.shape({
-            color: React.PropTypes.string,
-            fontSize: React.PropTypes.number.isRequired,
+        arrayOfRequired: PropTypes.arrayOf(PropTypes.string).isRequired,
+        objectOfRequired: PropTypes.objectOf(PropTypes.string).isRequired,
+        shapeRequired: PropTypes.shape({
+            color: PropTypes.string,
+            fontSize: PropTypes.number.isRequired,
         }).isRequired,
     };
     render() {