Merge branch 'master' of github.com:lyft/react-javascript-to-typescript-transform into pass-prettier

# Conflicts:
#	test/react-remove-prop-types-assignment-transform/multiple/output.tsx

Author: mohsen1

src/index.ts

@@ -7,6 +7,7 @@ import { reactMovePropTypesToClassTransformFactoryFactory } from './transforms/r
 import { collapseIntersectionInterfacesTransformFactoryFactory } from './transforms/collapse-intersection-interfaces-transform';
 import { reactRemoveStaticPropTypesMemberTransformFactoryFactory } from './transforms/react-remove-static-prop-types-member-transform';
 import { reactStatelessFunctionMakePropsTransformFactoryFactory } from './transforms/react-stateless-function-make-props-transform';
+import { reactRemovePropTypesImportTransformFactoryFactory } from './transforms/react-remove-prop-types-import';
 
 export {
     reactMovePropTypesToClassTransformFactoryFactory,
@@ -15,6 +16,7 @@ export {
     collapseIntersectionInterfacesTransformFactoryFactory,
     reactRemovePropTypesAssignmentTransformFactoryFactory,
     reactRemoveStaticPropTypesMemberTransformFactoryFactory,
+    reactRemovePropTypesImportTransformFactoryFactory,
     compile,
 };
 
@@ -25,6 +27,7 @@ export const allTransforms = [
     collapseIntersectionInterfacesTransformFactoryFactory,
     reactRemovePropTypesAssignmentTransformFactoryFactory,
     reactRemoveStaticPropTypesMemberTransformFactoryFactory,
+    reactRemovePropTypesImportTransformFactoryFactory,
 ];
 
 export type TransformFactoryFactory = (typeChecker: ts.TypeChecker) => ts.TransformerFactory<ts.SourceFile>;

src/transforms/react-js-make-props-and-state-transform.ts

@@ -21,13 +21,14 @@ export function reactJSMakePropsAndStateInterfaceTransformFactoryFactory(typeChe
 }
 
 function visitSourceFile(sourceFile: ts.SourceFile, typeChecker: ts.TypeChecker) {
+    let newSourceFile = sourceFile;
     for (const statement of sourceFile.statements) {
         if (ts.isClassDeclaration(statement) && helpers.isReactComponent(statement, typeChecker)) {
-            return visitReactClassDeclaration(statement, sourceFile, typeChecker);
+            newSourceFile = visitReactClassDeclaration(statement, newSourceFile, typeChecker);
         }
     }
 
-    return sourceFile;
+    return newSourceFile;
 }
 
 function visitReactClassDeclaration(

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

@@ -70,9 +70,7 @@ function visitSourceFile(sourceFile: ts.SourceFile, typeChecker: ts.TypeChecker)
                 'propTypes',
                 propTypeAssignment.expression.right,
             );
-            statements = ts.createNodeArray(
-                helpers.replaceItem(sourceFile.statements, classStatement, newClassStatement),
-            );
+            statements = ts.createNodeArray(helpers.replaceItem(statements, classStatement, newClassStatement));
         }
     }
 

src/transforms/react-remove-prop-types-import.ts

@@ -0,0 +1,74 @@
+import * as ts from 'typescript';
+import * as _ from 'lodash';
+
+import * as helpers from '../helpers';
+
+export type Factory = ts.TransformerFactory<ts.SourceFile>;
+
+/**
+ * Remove `import PropTypes from 'prop-types'` or
+ * `import { PropTypes } from 'react'`
+ *
+ * @example
+ * Before:
+ * import PropTypes from 'prop-types'
+ * import React, { PropTypes } from 'react'
+ *
+ * After:
+ * import React from 'react'
+ */
+export function reactRemovePropTypesImportTransformFactoryFactory(typeChecker: ts.TypeChecker): Factory {
+    return function reactRemovePropTypesImportTransformFactory(context: ts.TransformationContext) {
+        return function reactRemovePropTypesImportTransform(sourceFile: ts.SourceFile) {
+            return ts.updateSourceFileNode(
+                sourceFile,
+                sourceFile.statements
+                    .filter(s => {
+                        return !(
+                            ts.isImportDeclaration(s) &&
+                            ts.isStringLiteral(s.moduleSpecifier) &&
+                            s.moduleSpecifier.text === 'prop-types'
+                        );
+                    })
+                    .map(updateReactImportIfNeeded),
+            );
+        };
+    };
+}
+
+function updateReactImportIfNeeded(statement: ts.Statement) {
+    if (
+        !ts.isImportDeclaration(statement) ||
+        !ts.isStringLiteral(statement.moduleSpecifier) ||
+        statement.moduleSpecifier.text !== 'react' ||
+        !statement.importClause ||
+        !statement.importClause.namedBindings ||
+        !ts.isNamedImports(statement.importClause.namedBindings)
+    ) {
+        return statement;
+    }
+
+    const namedBindings = statement.importClause.namedBindings;
+    const newNamedBindingElements = namedBindings.elements.filter(elm => elm.name.text !== 'PropTypes');
+
+    if (newNamedBindingElements.length === namedBindings.elements.length) {
+        // Means it has no 'PropTypes' named import
+        return statement;
+    }
+
+    const newImportClause = ts.updateImportClause(
+        statement.importClause,
+        statement.importClause.name,
+        newNamedBindingElements.length === 0
+            ? undefined
+            : ts.updateNamedImports(namedBindings, newNamedBindingElements),
+    );
+
+    return ts.updateImportDeclaration(
+        statement,
+        statement.decorators,
+        statement.modifiers,
+        newImportClause,
+        statement.moduleSpecifier,
+    );
+}

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

@@ -42,29 +42,28 @@ export function reactStatelessFunctionMakePropsTransformFactoryFactory(typeCheck
 }
 
 function visitSourceFile(sourceFile: ts.SourceFile, typeChecker: ts.TypeChecker) {
-    let statements = sourceFile.statements;
-
     // Look for propType assignment statements
-    const propTypeAssignments = statements.filter(statement =>
+    const propTypeAssignments = sourceFile.statements.filter(statement =>
         helpers.isReactPropTypeAssignmentStatement(statement),
     ) as ts.ExpressionStatement[];
 
+    let newSourceFile = sourceFile;
     for (const propTypeAssignment of propTypeAssignments) {
-        const componentName = helpers.getComponentName(propTypeAssignment, sourceFile);
+        const componentName = helpers.getComponentName(propTypeAssignment, newSourceFile);
 
-        const funcComponent = (_.find(statements, s => {
+        const funcComponent = (_.find(newSourceFile.statements, s => {
             return (
                 (ts.isFunctionDeclaration(s) && s.name !== undefined && s.name.getText() === componentName) ||
                 (ts.isVariableStatement(s) && s.declarationList.declarations[0].name.getText() === componentName)
             );
         }) as {}) as ts.FunctionDeclaration | ts.VariableStatement; // Type weirdness
 
         if (funcComponent) {
-            return visitReactStatelessComponent(funcComponent, propTypeAssignment, sourceFile);
+            newSourceFile = visitReactStatelessComponent(funcComponent, propTypeAssignment, newSourceFile);
         }
     }
 
-    return sourceFile;
+    return newSourceFile;
 }
 
 function visitReactStatelessComponent(

test/collapse-intersection-interfaces-transform/multiple/input.tsx

@@ -0,0 +1,3 @@
+type Foo = {foo: string} & {bar: number};
+
+type Bar = {foo: number} & {bar: string};

test/collapse-intersection-interfaces-transform/multiple/output.tsx

@@ -0,0 +1,8 @@
+type Foo = {
+    foo: string;
+    bar: number;
+};
+type Bar = {
+    foo: number;
+    bar: string;
+};

test/end-to-end/basic/input.tsx

@@ -1,7 +1,8 @@
+import PropTypes from 'prop-types';
 import * as React from 'react';
 
 export default class MyComponent extends React.Component {
     render() {
         return <div />;
     }
-}
+}

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

@@ -0,0 +1,34 @@
+const Hello = ({ message }) => {
+  return <div>hello {message}</div>
+};
+
+const Hey = ({ name }) => {
+  return <div>hey, {name}</div>
+}
+
+Hey.propTypes = {
+  message: React.PropTypes.string,
+}
+
+Hello.propTypes = {
+  message: React.PropTypes.string,
+}
+
+export default class MyComponent extends React.Component {
+    render() {
+        return <button onClick={this.onclick.bind(this)} />;
+    }
+
+    onclick() {
+        this.setState({foo: 1, bar: 2})
+    }
+}
+
+export class AnotherComponent extends React.Component {
+    static propTypes = {
+        foo: React.PropTypes.string.isRequired,
+    };
+    render() {
+        return <div />;
+    }
+}

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

@@ -0,0 +1,34 @@
+type HelloProps = {
+    message?: string;
+};
+const Hello: React.SFC<HelloProps> = ({ message }) => {
+    return <div>hello {message}</div>;
+};
+type HeyProps = {
+    message?: string;
+};
+const Hey: React.SFC<HeyProps> = ({ name }) => {
+    return <div>hey, {name}</div>;
+};
+type MyComponentState = {
+    foo: number;
+    bar: number;
+};
+export default class MyComponent extends React.Component<{
+    }, MyComponentState> {
+    render() {
+        return <button onClick={this.onclick.bind(this)}/>;
+    }
+    onclick() {
+        this.setState({ foo: 1, bar: 2 });
+    }
+}
+type AnotherComponentProps = {
+    foo: string;
+};
+export class AnotherComponent extends React.Component<AnotherComponentProps, {
+    }> {
+    render() {
+        return <div />;
+    }
+}

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+export default class MyComponent extends React.Component {
+    render() {
+        return <button onClick={this.onclick.bind(this)} />;
+    }
+
+    onclick() {
+        this.setState({foo: 1, bar: 2})
+    }
+}
+
+export class AnotherComponent extends React.Component {
+    static propTypes = {
+        foo: React.PropTypes.string.isRequired,
+    };
+    render() {
+        return <div />;
+    }
+}

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

@@ -0,0 +1,23 @@
+import * as React from 'react';
+type MyComponentState = { foo: number; bar: number; };
+export default class MyComponent extends React.Component<{
+    }, MyComponentState> {
+    render() {
+        return <button onClick={this.onclick.bind(this)}/>;
+    }
+    onclick() {
+        this.setState({ foo: 1, bar: 2 });
+    }
+}
+type AnotherComponentProps = {
+    foo: string;
+};
+export class AnotherComponent extends React.Component<AnotherComponentProps, {
+    }> {
+    static propTypes = {
+        foo: React.PropTypes.string.isRequired,
+    };
+    render() {
+        return <div />;
+    }
+}

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

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

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

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

test/react-remove-prop-types-assignment-transform/multiple/input.tsx

@@ -1,8 +1,16 @@
 class SomeComponent extends React.Component<{
-        foo: number;
+        foo: string;
+        baz: string;
     }, {
         bar: string;
     }> {
 }
 SomeComponent.propTypes = { foo: React.PropTypes.string };
-SomeComponent.propTypes.baz = React.PropTypes.string.isRequired;
+SomeComponent.propTypes.baz = React.PropTypes.string.isRequired;
+
+
+class AnotherComponent extends React.Component<{
+        lol: number;
+    }> {
+}
+AnotherComponent.propTypes = { lol: React.PropTypes.number };

test/react-remove-prop-types-assignment-transform/multiple/output.tsx

@@ -1,8 +1,11 @@
-class SomeComponent extends React.Component<
-    {
-        foo: number
-    },
-    {
-        bar: string
-    }
-> {}
+class SomeComponent extends React.Component<{
+        foo: string;
+        baz: string;
+    }, {
+        bar: string;
+    }> {
+}
+class AnotherComponent extends React.Component<{
+        lol: number;
+    }> {
+}

test/react-remove-prop-types-import/from-prop-types/input.tsx

@@ -0,0 +1,6 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const Hello = ({ message }) => {
+  return <div>hello {message}</div>
+}

test/react-remove-prop-types-import/from-prop-types/output.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const Hello = ({ message }) => {
+    return <div>hello {message}</div>;
+};