Stop getting PropTypes from React (#4)

Author: wdoug

README.md

@@ -18,8 +18,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();

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,7 +17,7 @@ export type Factory = ts.TransformerFactory<ts.SourceFile>;
  * // const Hello = ({ message }) => <div>hello {message}</div>
  *
  * Hello.propTypes = {
- *   message: React.PropTypes.string,
+ *   message: PropTypes.string,
  * }
  *
  * After:
@@ -30,7 +30,7 @@ export type Factory = ts.TransformerFactory<ts.SourceFile>;
  * }
  *
  * Hello.propTypes = {
- *   message: React.PropTypes.string,
+ *   message: PropTypes.string,
  * }
  */
 export function reactStatelessFunctionMakePropsTransformFactoryFactory(typeChecker: ts.TypeChecker): Factory {

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/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-function/input.tsx

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

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() {

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

@@ -41,40 +41,40 @@ type MyComponentProps = {
 };
 export default class MyComponent extends React.Component<MyComponentProps, {}> {
     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]),
-        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,
+        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: 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]).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,
+        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: PropTypes.arrayOf(PropTypes.string).isRequired,
+        objectOfRequired: PropTypes.objectOf(PropTypes.string).isRequired,
+        shapeRequired: PropTypes.shape({
+            color: PropTypes.string,
+            fontSize: PropTypes.number.isRequired,
         }).isRequired,
     };
     render() {

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 export default class MyComponent 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/static-proptypes-simple/output.tsx

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

test/react-move-prop-types-to-class-transform/multiple-components/input.tsx

@@ -7,7 +7,7 @@ class SomeComponent extends React.Component<{
         return null;
     }
 }
-SomeComponent.propTypes = { foo: React.PropTypes.string };
+SomeComponent.propTypes = { foo: PropTypes.string };
 
 class AnotherComponent extends React.Component<{
     baz: number;
@@ -16,4 +16,4 @@ class AnotherComponent extends React.Component<{
         return null;
     }
 }
-AnotherComponent.propTypes = { baz: React.PropTypes.string };
+AnotherComponent.propTypes = { baz: PropTypes.string };

test/react-move-prop-types-to-class-transform/multiple-components/output.tsx

@@ -6,18 +6,18 @@ class SomeComponent extends React.Component<
         bar: string;
     }
 > {
-    static propTypes = { foo: React.PropTypes.string };
+    static propTypes = { foo: PropTypes.string };
     render() {
         return null;
     }
 }
-SomeComponent.propTypes = { foo: React.PropTypes.string };
+SomeComponent.propTypes = { foo: PropTypes.string };
 class AnotherComponent extends React.Component<{
     baz: number;
 }> {
-    static propTypes = { baz: React.PropTypes.string };
+    static propTypes = { baz: PropTypes.string };
     render() {
         return null;
     }
 }
-AnotherComponent.propTypes = { baz: React.PropTypes.string };
+AnotherComponent.propTypes = { baz: PropTypes.string };