From 2becb9e23b588fc602178ba4ef14c00c4f0312b5 Mon Sep 17 00:00:00 2001
From: VincentBel <buaazqh@gmail.com>
Date: Sat, 20 Jan 2018 19:34:19 +0800
Subject: [PATCH 1/4] remove hoist transform

---
 src/index.ts                                  |   3 -
 .../react-hoist-generics-transform.ts         | 124 -------------
 ...react-js-make-props-and-state-transform.ts | 166 ++++++++++--------
 .../non-react/input.tsx                       |  18 --
 .../non-react/output.tsx                      |  10 --
 .../propless-stateless/input.tsx              |   7 -
 .../propless-stateless/output.tsx             |  10 --
 .../props-and-state/input.tsx                 |   7 -
 .../props-and-state/output.tsx                |  14 --
 .../propless-stateless/output.tsx             |   8 +-
 .../set-state-advanced/output.tsx             |   6 +-
 .../set-state-only/output.tsx                 |   6 +-
 .../state-in-class-member/output.tsx          |   6 +-
 .../state-in-constructor/output.tsx           |   6 +-
 .../static-proptypes-getter-simple/output.tsx |  10 +-
 .../static-proptypes-many-props/output.tsx    |  84 ++++-----
 .../static-proptypes-simple/output.tsx        |  10 +-
 test/runner.ts                                |   2 -
 18 files changed, 164 insertions(+), 333 deletions(-)
 delete mode 100644 src/transforms/react-hoist-generics-transform.ts
 delete mode 100644 test/react-hoist-generics-transform/non-react/input.tsx
 delete mode 100644 test/react-hoist-generics-transform/non-react/output.tsx
 delete mode 100644 test/react-hoist-generics-transform/propless-stateless/input.tsx
 delete mode 100644 test/react-hoist-generics-transform/propless-stateless/output.tsx
 delete mode 100644 test/react-hoist-generics-transform/props-and-state/input.tsx
 delete mode 100644 test/react-hoist-generics-transform/props-and-state/output.tsx

diff --git a/src/index.ts b/src/index.ts
index 7e824e0..0ba4b33 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,7 +2,6 @@ import * as ts from 'typescript';
 
 import { compile } from './compiler';
 import { reactJSMakePropsAndStateInterfaceTransformFactoryFactory } from './transforms/react-js-make-props-and-state-transform';
-import { reactHoistGenericsTransformFactoryFactory } from './transforms/react-hoist-generics-transform';
 import { reactRemovePropTypesAssignmentTransformFactoryFactory } from './transforms/react-remove-prop-types-assignment-transform';
 import { reactMovePropTypesToClassTransformFactoryFactory } from './transforms/react-move-prop-types-to-class-transform';
 import { collapseIntersectionInterfacesTransformFactoryFactory } from './transforms/collapse-intersection-interfaces-transform';
@@ -11,7 +10,6 @@ import { reactRemoveStaticPropTypesMemberTransformFactoryFactory } from './trans
 export {
     reactMovePropTypesToClassTransformFactoryFactory,
     reactJSMakePropsAndStateInterfaceTransformFactoryFactory,
-    reactHoistGenericsTransformFactoryFactory,
     collapseIntersectionInterfacesTransformFactoryFactory,
     reactRemovePropTypesAssignmentTransformFactoryFactory,
     reactRemoveStaticPropTypesMemberTransformFactoryFactory,
@@ -21,7 +19,6 @@ export {
 export const allTransforms = [
     reactMovePropTypesToClassTransformFactoryFactory,
     reactJSMakePropsAndStateInterfaceTransformFactoryFactory,
-    reactHoistGenericsTransformFactoryFactory,
     collapseIntersectionInterfacesTransformFactoryFactory,
     reactRemovePropTypesAssignmentTransformFactoryFactory,
     reactRemoveStaticPropTypesMemberTransformFactoryFactory,
diff --git a/src/transforms/react-hoist-generics-transform.ts b/src/transforms/react-hoist-generics-transform.ts
deleted file mode 100644
index 768517c..0000000
--- a/src/transforms/react-hoist-generics-transform.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-import * as ts from 'typescript';
-import * as _ from 'lodash';
-
-import * as helpers from '../helpers';
-
-export type Factory = ts.TransformerFactory<ts.SourceFile>;
-
-/**
- * Hoist generics to top of a class declarations in a React component
- *
- * @example
- * Before:
- * class SomeComponent extends React.Component<{foo: number;}, {bar: string;}> {}
- *
- * After
- * type SomeComponentProps = {foo: number;};
- * type SomeComponentState = {bar: string;};
- * class SomeComponent extends React.Component<SomeComponentProps, SomeComponentState> {}
- */
-export function reactHoistGenericsTransformFactoryFactory(typeChecker: ts.TypeChecker): Factory {
-    return function reactHoistGenericsTransformFactory(context: ts.TransformationContext) {
-        return function reactHoistGenericsTransform(node: ts.SourceFile) {
-            return visitSourceFile(node);
-        };
-    };
-
-    function visitSourceFile(sourceFile: ts.SourceFile) {
-
-        for (const statement of sourceFile.statements) {
-            if (ts.isClassDeclaration(statement) && helpers.isReactComponent(statement, typeChecker)) {
-                return hoist(statement, sourceFile);
-            }
-        }
-
-        return sourceFile;
-    }
-}
-
-/**
- * Hoist props and state generic types
- * @param reactClass
- * @param sourceFile
- */
-function hoist(reactClass: ts.ClassDeclaration, sourceFile: ts.SourceFile) {
-    if (!reactClass.heritageClauses) {
-        return sourceFile;
-    }
-    const className = reactClass && reactClass.name && reactClass.name.getText(sourceFile);
-    const reactHeritageClauses = _.find(reactClass.heritageClauses, helpers.isReactHeritageClause);
-
-    if (reactHeritageClauses === undefined || !reactHeritageClauses.types == undefined) {
-        return sourceFile;
-    }
-    const [reactType] = reactHeritageClauses.types;
-    if (reactType.typeArguments === undefined || reactType.typeArguments.length < 2) {
-        return sourceFile;
-    }
-
-    const [propType, stateType] = reactType.typeArguments;
-    const propTypeName = `${className}Props`;
-    const stateTypeName = `${className}State`;
-    const propTypeDeclaration = ts.createTypeAliasDeclaration([], [], propTypeName, [], propType);
-    const stateTypeDeclaration = ts.createTypeAliasDeclaration([], [], stateTypeName, [], stateType);
-    const propTypeRef = ts.createTypeReferenceNode(propTypeName, []);
-    const stateTypeRef = ts.createTypeReferenceNode(stateTypeName, []);
-    const newClassStatement = insertTypeRefs(reactClass, propTypeRef, stateTypeRef);
-
-    let statements = helpers.insertBefore(sourceFile.statements, reactClass, propTypeDeclaration)
-    statements = helpers.insertAfter(statements, propTypeDeclaration, stateTypeDeclaration);
-    statements = helpers.replaceItem(statements, reactClass, newClassStatement);
-
-    return ts.updateSourceFileNode(sourceFile, statements);
-}
-
-/**
- * Replace props and state types in a React component with type references
- *
- * @example
- * input
- * ```
- * class MyComp extends React.Component<{}, {}> {}
- * ```
- *
- * output
- * ```
- * class MyComp extends React.Component<IFoo, IBar> {}
- * ```
- *
- * @param reactClassDeclaration A React class declaration
- * @param propTypeRef React Props type reference
- * @param stateTypeRef React State type reference
- */
-function insertTypeRefs(
-    reactClassDeclaration: ts.ClassDeclaration,
-    propTypeRef: ts.TypeReferenceNode,
-    stateTypeRef: ts.TypeReferenceNode,
-) {
-    if (reactClassDeclaration.heritageClauses === undefined) {
-        return reactClassDeclaration;
-    }
-    const reactHeritageClause = _.find(reactClassDeclaration.heritageClauses, helpers.isReactHeritageClause);
-
-    if (reactHeritageClause === undefined) {
-        return reactClassDeclaration;
-    }
-
-    const [reactExpression] = reactHeritageClause.types;
-    const newReactExpression = ts.updateExpressionWithTypeArguments(
-        reactExpression,
-        [propTypeRef, stateTypeRef],
-        reactExpression.expression,
-    );
-    const newHeritageClauses = ts.updateHeritageClause(reactHeritageClause, [newReactExpression]);
-
-    return ts.updateClassDeclaration(
-        reactClassDeclaration,
-        reactClassDeclaration.decorators,
-        reactClassDeclaration.modifiers,
-        reactClassDeclaration.name,
-        reactClassDeclaration.typeParameters,
-        helpers.replaceItem(reactClassDeclaration.heritageClauses, reactHeritageClause, newHeritageClauses),
-        reactClassDeclaration.members,
-    );
-}
diff --git a/src/transforms/react-js-make-props-and-state-transform.ts b/src/transforms/react-js-make-props-and-state-transform.ts
index e6dd233..0b5e968 100644
--- a/src/transforms/react-js-make-props-and-state-transform.ts
+++ b/src/transforms/react-js-make-props-and-state-transform.ts
@@ -12,31 +12,57 @@ export type Factory = ts.TransformerFactory<ts.SourceFile>;
 export function reactJSMakePropsAndStateInterfaceTransformFactoryFactory(typeChecker: ts.TypeChecker): Factory {
     return function reactJSMakePropsAndStateInterfaceTransformFactory(context: ts.TransformationContext) {
         return function reactJSMakePropsAndStateInterfaceTransform(sourceFile: ts.SourceFile) {
-            const visited = ts.visitEachChild(sourceFile, visitor, context);
+            const visited = visitSourceFile(sourceFile, typeChecker);
             ts.addEmitHelpers(visited, context.readEmitHelpers());
 
             return visited;
+        };
+    };
+}
 
-            function visitor(node: ts.Node) {
-                if (ts.isClassDeclaration(node)) {
-                    return visitClassDeclaration(node, sourceFile, typeChecker);
-                }
-
-                return node;
-            }
+function visitSourceFile(sourceFile: ts.SourceFile, typeChecker: ts.TypeChecker) {
+    for (const statement of sourceFile.statements) {
+        if (ts.isClassDeclaration(statement) && helpers.isReactComponent(statement, typeChecker)) {
+            return visitReactClassDeclaration(statement, sourceFile, typeChecker);
         }
     }
+
+    return sourceFile;
 }
 
-function visitClassDeclaration(
+function visitReactClassDeclaration(
     classDeclaration: ts.ClassDeclaration,
     sourceFile: ts.SourceFile,
-    typeChecker: ts.TypeChecker
+    typeChecker: ts.TypeChecker,
 ) {
-    if (!helpers.isReactComponent(classDeclaration, typeChecker)) {
-        return classDeclaration;
+    if (!classDeclaration.heritageClauses || !classDeclaration.heritageClauses.length) {
+        return sourceFile;
     }
+    const className = classDeclaration && classDeclaration.name && classDeclaration.name.getText(sourceFile);
+    const propType = getPropsTypeOfReactComponentClass(classDeclaration, sourceFile);
+    const stateType = getStateTypeOfReactComponentClass(classDeclaration, typeChecker);
+    const propTypeName = `${className}Props`;
+    const stateTypeName = `${className}State`;
+    const propTypeDeclaration = ts.createTypeAliasDeclaration([], [], propTypeName, [], propType);
+    const stateTypeDeclaration = ts.createTypeAliasDeclaration([], [], stateTypeName, [], stateType);
+    const propTypeRef = ts.createTypeReferenceNode(propTypeName, []);
+    const stateTypeRef = ts.createTypeReferenceNode(stateTypeName, []);
+
+    const newClassDeclaration = getNewReactClassDeclaration(classDeclaration, propTypeRef, stateTypeRef);
+
+    let statements = helpers.insertBefore(sourceFile.statements, classDeclaration, [
+        propTypeDeclaration,
+        stateTypeDeclaration,
+    ]);
+    statements = helpers.replaceItem(statements, classDeclaration, newClassDeclaration);
+    return ts.updateSourceFileNode(sourceFile, statements);
+}
 
+function getNewReactClassDeclaration(
+    classDeclaration: ts.ClassDeclaration,
+    propTypeRef: ts.TypeNode,
+    stateTypeRef: ts.TypeNode,
+) {
     if (!classDeclaration.heritageClauses || !classDeclaration.heritageClauses.length) {
         return classDeclaration;
     }
@@ -48,10 +74,7 @@ function visitClassDeclaration(
         firstHeritageClause.types[0],
         ts.updateExpressionWithTypeArguments(
             firstHeritageClause.types[0],
-            [
-                getPropsTypeOfReactComponentClass(classDeclaration, sourceFile),
-                getStateTypeOfReactComponentClass(classDeclaration, typeChecker),
-            ],
+            [propTypeRef, stateTypeRef],
             firstHeritageClause.types[0].expression,
         ),
     );
@@ -77,44 +100,45 @@ function getPropsTypeOfReactComponentClass(
     classDeclaration: ts.ClassDeclaration,
     sourceFile: ts.SourceFile,
 ): ts.TypeNode {
-    const staticPropTypesMember = _.find(classDeclaration.members, (member) => {
-        return ts.isPropertyDeclaration(member) &&
+    const staticPropTypesMember = _.find(classDeclaration.members, member => {
+        return (
+            ts.isPropertyDeclaration(member) &&
             helpers.hasStaticModifier(member) &&
-            helpers.isPropTypesMember(member, sourceFile);
+            helpers.isPropTypesMember(member, sourceFile)
+        );
     });
 
     if (
-        staticPropTypesMember !== undefined
-        && ts.isPropertyDeclaration(staticPropTypesMember) // check to satisfy type checker
-        && staticPropTypesMember.initializer
-        && ts.isObjectLiteralExpression(staticPropTypesMember.initializer)
+        staticPropTypesMember !== undefined &&
+        ts.isPropertyDeclaration(staticPropTypesMember) && // check to satisfy type checker
+        staticPropTypesMember.initializer &&
+        ts.isObjectLiteralExpression(staticPropTypesMember.initializer)
     ) {
-        return buildInterfaceFromPropTypeObjectLiteral(staticPropTypesMember.initializer)
+        return buildInterfaceFromPropTypeObjectLiteral(staticPropTypesMember.initializer);
     }
 
-    const staticPropTypesGetterMember = _.find(classDeclaration.members, (member) => {
-        return ts.isGetAccessorDeclaration(member) &&
+    const staticPropTypesGetterMember = _.find(classDeclaration.members, member => {
+        return (
+            ts.isGetAccessorDeclaration(member) &&
             helpers.hasStaticModifier(member) &&
-            helpers.isPropTypesMember(member, sourceFile);
+            helpers.isPropTypesMember(member, sourceFile)
+        );
     });
 
     if (
-        staticPropTypesGetterMember !== undefined
-        && ts.isGetAccessorDeclaration(staticPropTypesGetterMember) // check to satisfy typechecker
+        staticPropTypesGetterMember !== undefined &&
+        ts.isGetAccessorDeclaration(staticPropTypesGetterMember) // check to satisfy typechecker
     ) {
-        const returnStatement = _.find(
-            staticPropTypesGetterMember.body.statements,
-            (statement) => ts.isReturnStatement(statement),
+        const returnStatement = _.find(staticPropTypesGetterMember.body.statements, statement =>
+            ts.isReturnStatement(statement),
         );
         if (
-            returnStatement !== undefined
-            && ts.isReturnStatement(returnStatement) // check to satisfy typechecker
-            && returnStatement.expression
-            && ts.isObjectLiteralExpression(returnStatement.expression)
+            returnStatement !== undefined &&
+            ts.isReturnStatement(returnStatement) && // check to satisfy typechecker
+            returnStatement.expression &&
+            ts.isObjectLiteralExpression(returnStatement.expression)
         ) {
-            return buildInterfaceFromPropTypeObjectLiteral(
-                returnStatement.expression
-            )
+            return buildInterfaceFromPropTypeObjectLiteral(returnStatement.expression);
         }
     }
 
@@ -132,7 +156,7 @@ function getStateTypeOfReactComponentClass(
         return ts.createTypeLiteralNode([]);
     }
     if (!initialStateIsVoid) {
-        collectedStateTypes.push(initialState)
+        collectedStateTypes.push(initialState);
     }
 
     return ts.createUnionOrIntersectionTypeNode(ts.SyntaxKind.IntersectionType, collectedStateTypes);
@@ -149,30 +173,24 @@ function getInitialStateFromClassDeclaration(
 ): ts.TypeNode {
     // initial state class member
 
-    const initialStateMember = _.find(classDeclaration.members, (member) => {
+    const initialStateMember = _.find(classDeclaration.members, member => {
         try {
-            return ts.isPropertyDeclaration(member) &&
-                member.name &&
-                member.name.getText() === 'state';
-        } catch(e) {
+            return ts.isPropertyDeclaration(member) && member.name && member.name.getText() === 'state';
+        } catch (e) {
             return false;
         }
     });
 
-    if (initialStateMember
-        && ts.isPropertyDeclaration(initialStateMember)
-        && initialStateMember.initializer
-    ) {
-        const type = typeChecker.getTypeAtLocation(initialStateMember.initializer)!
+    if (initialStateMember && ts.isPropertyDeclaration(initialStateMember) && initialStateMember.initializer) {
+        const type = typeChecker.getTypeAtLocation(initialStateMember.initializer)!;
 
         return typeChecker.typeToTypeNode(type);
     }
 
     // Initial state in constructor
-    const constructor = _.find(
-        classDeclaration.members,
-        (member) => member.kind === ts.SyntaxKind.Constructor,
-    ) as ts.ConstructorDeclaration | undefined;
+    const constructor = _.find(classDeclaration.members, member => member.kind === ts.SyntaxKind.Constructor) as
+        | ts.ConstructorDeclaration
+        | undefined;
 
     if (constructor && constructor.body) {
         for (const statement of constructor.body.statements) {
@@ -181,9 +199,7 @@ function getInitialStateFromClassDeclaration(
                 ts.isBinaryExpression(statement.expression) &&
                 statement.expression.left.getText() === 'this.state'
             ) {
-                return typeChecker.typeToTypeNode(
-                    typeChecker.getTypeAtLocation(statement.expression.right)
-                );
+                return typeChecker.typeToTypeNode(typeChecker.getTypeAtLocation(statement.expression.right));
             }
         }
     }
@@ -204,20 +220,20 @@ function getStateLookingForSetStateCalls(
     const typeNodes: ts.TypeNode[] = [];
     for (const member of classDeclaration.members) {
         if (member && ts.isMethodDeclaration(member) && member.body) {
-            lookForSetState(member.body)
+            lookForSetState(member.body);
         }
     }
 
     return typeNodes;
 
     function lookForSetState(node: ts.Node) {
-        ts.forEachChild(node, lookForSetState)
+        ts.forEachChild(node, lookForSetState);
         if (
             ts.isExpressionStatement(node) &&
             ts.isCallExpression(node.expression) &&
             node.expression.expression.getText().match(/setState/)
         ) {
-            const type = typeChecker.getTypeAtLocation(node.expression.arguments[0])
+            const type = typeChecker.getTypeAtLocation(node.expression.arguments[0]);
             typeNodes.push(typeChecker.typeToTypeNode(type));
         }
     }
@@ -258,8 +274,8 @@ function buildInterfaceFromPropTypeObjectLiteral(objectLiteral: ts.ObjectLiteral
             const initializer = propertyAssignment.initializer;
             const isRequired = isPropTypeRequired(initializer);
             const typeExpression = isRequired
-                // We have guaranteed the type in `isPropTypeRequired()`
-                ? (initializer as ts.PropertyAccessExpression).expression
+                ? // We have guaranteed the type in `isPropTypeRequired()`
+                  (initializer as ts.PropertyAccessExpression).expression
                 : initializer;
             const typeValue = getTypeFromReactPropTypeExpression(typeExpression);
 
@@ -272,7 +288,7 @@ function buildInterfaceFromPropTypeObjectLiteral(objectLiteral: ts.ObjectLiteral
             );
         });
 
-        return ts.createTypeLiteralNode(members)
+    return ts.createTypeLiteralNode(members);
 }
 
 /**
@@ -323,11 +339,7 @@ function getTypeFromReactPropTypeExpression(node: ts.Expression): ts.TypeNode {
                 ts.createArrayTypeNode(ts.createKeywordTypeNode(ts.SyntaxKind.AnyKeyword)),
                 undefined,
             );
-            result = ts.createFunctionTypeNode(
-                [],
-                [arrayOfAny],
-                ts.createKeywordTypeNode(ts.SyntaxKind.AnyKeyword),
-            );
+            result = ts.createFunctionTypeNode([], [arrayOfAny], ts.createKeywordTypeNode(ts.SyntaxKind.AnyKeyword));
         }
     } else if (ts.isCallExpression(node)) {
         /**
@@ -345,9 +357,9 @@ function getTypeFromReactPropTypeExpression(node: ts.Expression): ts.TypeNode {
                 if (argument.elements.every(elm => ts.isStringLiteral(elm) || ts.isNumericLiteral(elm))) {
                     result = ts.createUnionTypeNode(
                         (argument.elements as ts.NodeArray<ts.StringLiteral | ts.NumericLiteral>).map(elm =>
-                            ts.createLiteralTypeNode(elm)
+                            ts.createLiteralTypeNode(elm),
                         ),
-                    )
+                    );
                 }
             }
         } else if (/oneOfType$/.test(text)) {
@@ -361,9 +373,7 @@ function getTypeFromReactPropTypeExpression(node: ts.Expression): ts.TypeNode {
         } else if (/arrayOf$/.test(text)) {
             const argument = node.arguments[0];
             if (argument) {
-                result = ts.createArrayTypeNode(
-                    getTypeFromReactPropTypeExpression(argument)
-                )
+                result = ts.createArrayTypeNode(getTypeFromReactPropTypeExpression(argument));
             }
         } else if (/objectOf$/.test(text)) {
             const argument = node.arguments[0];
@@ -380,16 +390,16 @@ function getTypeFromReactPropTypeExpression(node: ts.Expression): ts.TypeNode {
                                 'key',
                                 undefined,
                                 ts.createKeywordTypeNode(ts.SyntaxKind.StringKeyword),
-                            )
+                            ),
                         ],
                         getTypeFromReactPropTypeExpression(argument),
-                    )
-                ])
+                    ),
+                ]);
             }
         } else if (/shape$/.test(text)) {
             const argument = node.arguments[0];
             if (ts.isObjectLiteralExpression(argument)) {
-                return buildInterfaceFromPropTypeObjectLiteral(argument)
+                return buildInterfaceFromPropTypeObjectLiteral(argument);
             }
         }
     }
@@ -402,7 +412,7 @@ function getTypeFromReactPropTypeExpression(node: ts.Expression): ts.TypeNode {
         result = ts.createKeywordTypeNode(ts.SyntaxKind.AnyKeyword);
     }
 
-    return result
+    return result;
 }
 
 /**
diff --git a/test/react-hoist-generics-transform/non-react/input.tsx b/test/react-hoist-generics-transform/non-react/input.tsx
deleted file mode 100644
index c0e4a28..0000000
--- a/test/react-hoist-generics-transform/non-react/input.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-interface IFoo {
-
-}
-class Foo {
-
-}
-
-class Bar extends Foo {
-
-}
-
-class Foo2 implements IFoo {
-
-}
-
-class Bar2 extends Foo implements IFoo {
-
-}
diff --git a/test/react-hoist-generics-transform/non-react/output.tsx b/test/react-hoist-generics-transform/non-react/output.tsx
deleted file mode 100644
index ea73175..0000000
--- a/test/react-hoist-generics-transform/non-react/output.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-interface IFoo {
-}
-class Foo {
-}
-class Bar extends Foo {
-}
-class Foo2 implements IFoo {
-}
-class Bar2 extends Foo  implements IFoo {
-}
diff --git a/test/react-hoist-generics-transform/propless-stateless/input.tsx b/test/react-hoist-generics-transform/propless-stateless/input.tsx
deleted file mode 100644
index ab0d702..0000000
--- a/test/react-hoist-generics-transform/propless-stateless/input.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as React from 'react';
-
-export default class MyComponent extends React.Component<{}, {}> {
-    render() {
-        return <div />;
-    }
-}
diff --git a/test/react-hoist-generics-transform/propless-stateless/output.tsx b/test/react-hoist-generics-transform/propless-stateless/output.tsx
deleted file mode 100644
index 5dae9ae..0000000
--- a/test/react-hoist-generics-transform/propless-stateless/output.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as React from 'react';
-type MyComponentProps = {
-};
-type MyComponentState = {
-};
-export default class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
-    render() {
-        return <div />;
-    }
-}
diff --git a/test/react-hoist-generics-transform/props-and-state/input.tsx b/test/react-hoist-generics-transform/props-and-state/input.tsx
deleted file mode 100644
index c1e13db..0000000
--- a/test/react-hoist-generics-transform/props-and-state/input.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as React from 'react';
-
-export default class MyComponent extends React.Component<{foo: string; bar: object;}, {baz: string; [k: string]: string}> {
-    render() {
-        return <div />;
-    }
-}
diff --git a/test/react-hoist-generics-transform/props-and-state/output.tsx b/test/react-hoist-generics-transform/props-and-state/output.tsx
deleted file mode 100644
index a2321a1..0000000
--- a/test/react-hoist-generics-transform/props-and-state/output.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as React from 'react';
-type MyComponentProps = {
-    foo: string;
-    bar: object;
-};
-type MyComponentState = {
-    baz: string;
-    [k: string]: string;
-};
-export default class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
-    render() {
-        return <div />;
-    }
-}
diff --git a/test/react-js-make-props-and-state-transform/propless-stateless/output.tsx b/test/react-js-make-props-and-state-transform/propless-stateless/output.tsx
index b2d81de..5dae9ae 100644
--- a/test/react-js-make-props-and-state-transform/propless-stateless/output.tsx
+++ b/test/react-js-make-props-and-state-transform/propless-stateless/output.tsx
@@ -1,7 +1,9 @@
 import * as React from 'react';
-export default class MyComponent extends React.Component<{
-    }, {
-    }> {
+type MyComponentProps = {
+};
+type MyComponentState = {
+};
+export default class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
     render() {
         return <div />;
     }
diff --git a/test/react-js-make-props-and-state-transform/set-state-advanced/output.tsx b/test/react-js-make-props-and-state-transform/set-state-advanced/output.tsx
index ec13c77..d95b659 100644
--- a/test/react-js-make-props-and-state-transform/set-state-advanced/output.tsx
+++ b/test/react-js-make-props-and-state-transform/set-state-advanced/output.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
-export default class MyComponent extends React.Component<{
-    }, { foo: number; bar: number; } & { baz: number; } & { something: { big: number; here: string; of: { a: number; }[]; }; }> {
+type MyComponentProps = {
+};
+type MyComponentState = { foo: number; bar: number; } & { baz: number; } & { something: { big: number; here: string; of: { a: number; }[]; }; };
+export default class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
     render() {
         return <button onClick={this.onclick.bind(this)}/>;
     }
diff --git a/test/react-js-make-props-and-state-transform/set-state-only/output.tsx b/test/react-js-make-props-and-state-transform/set-state-only/output.tsx
index 90cff71..a1d1f36 100644
--- a/test/react-js-make-props-and-state-transform/set-state-only/output.tsx
+++ b/test/react-js-make-props-and-state-transform/set-state-only/output.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
-export default class MyComponent extends React.Component<{
-    }, { foo: number; bar: number; }> {
+type MyComponentProps = {
+};
+type MyComponentState = { foo: number; bar: number; };
+export default class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
     render() {
         return <button onClick={this.onclick.bind(this)}/>;
     }
diff --git a/test/react-js-make-props-and-state-transform/state-in-class-member/output.tsx b/test/react-js-make-props-and-state-transform/state-in-class-member/output.tsx
index 41cb58c..c380ace 100644
--- a/test/react-js-make-props-and-state-transform/state-in-class-member/output.tsx
+++ b/test/react-js-make-props-and-state-transform/state-in-class-member/output.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
-export default class MyComponent extends React.Component<{
-    }, { foo: number; }> {
+type MyComponentProps = {
+};
+type MyComponentState = { foo: number; };
+export default class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
     state = { foo: 1 };
     render() {
         return <div />;
diff --git a/test/react-js-make-props-and-state-transform/state-in-constructor/output.tsx b/test/react-js-make-props-and-state-transform/state-in-constructor/output.tsx
index 0a4e1a5..74a9cdf 100644
--- a/test/react-js-make-props-and-state-transform/state-in-constructor/output.tsx
+++ b/test/react-js-make-props-and-state-transform/state-in-constructor/output.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
-export default class MyComponent extends React.Component<{
-    }, { foo: number; }> {
+type MyComponentProps = {
+};
+type MyComponentState = { foo: number; };
+export default class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
     constructor(props, context) {
         super(props, context);
         this.state = { foo: 1 };
diff --git a/test/react-js-make-props-and-state-transform/static-proptypes-getter-simple/output.tsx b/test/react-js-make-props-and-state-transform/static-proptypes-getter-simple/output.tsx
index f9749a6..3713892 100644
--- a/test/react-js-make-props-and-state-transform/static-proptypes-getter-simple/output.tsx
+++ b/test/react-js-make-props-and-state-transform/static-proptypes-getter-simple/output.tsx
@@ -1,8 +1,10 @@
 import * as React from 'react';
-export default class MyComponent extends React.Component<{
-        foo: string;
-    }, {
-    }> {
+type MyComponentProps = {
+    foo: string;
+};
+type MyComponentState = {
+};
+export default class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
     static get propTypes() {
         return {
             foo: React.PropTypes.string.isRequired,
diff --git a/test/react-js-make-props-and-state-transform/static-proptypes-many-props/output.tsx b/test/react-js-make-props-and-state-transform/static-proptypes-many-props/output.tsx
index b7d105d..caf0150 100644
--- a/test/react-js-make-props-and-state-transform/static-proptypes-many-props/output.tsx
+++ b/test/react-js-make-props-and-state-transform/static-proptypes-many-props/output.tsx
@@ -1,45 +1,47 @@
 import * as React from 'react';
-export default class MyComponent extends React.Component<{
-        any?: any;
-        array?: any[];
-        bool?: boolean;
-        func?: (...args: any[]) => any;
-        number?: number;
-        object?: object;
-        string?: string;
-        node?: React.ReactNode;
-        element?: JSX.Element;
-        oneOf?: 'a' | 'b' | 'c';
-        oneOfType?: string | number;
-        arrayOf?: string[];
-        objectOf?: {
-            [key: string]: string;
-        };
-        shape?: {
-            color?: string;
-            fontSize?: number;
-        };
-        anyRequired: any;
-        arrayRequired: any[];
-        boolRequired: boolean;
-        funcRequired: (...args: any[]) => any;
-        numberRequired: number;
-        objectRequired: object;
-        stringRequired: string;
-        nodeRequired: React.ReactNode;
-        elementRequired: JSX.Element;
-        oneOfRequired: 'a' | 'b' | 'c';
-        oneOfTypeRequired: string | number;
-        arrayOfRequired: string[];
-        objectOfRequired: {
-            [key: string]: string;
-        };
-        shapeRequired: {
-            color?: string;
-            fontSize: number;
-        };
-    }, {
-    }> {
+type MyComponentProps = {
+    any?: any;
+    array?: any[];
+    bool?: boolean;
+    func?: (...args: any[]) => any;
+    number?: number;
+    object?: object;
+    string?: string;
+    node?: React.ReactNode;
+    element?: JSX.Element;
+    oneOf?: 'a' | 'b' | 'c';
+    oneOfType?: string | number;
+    arrayOf?: string[];
+    objectOf?: {
+        [key: string]: string;
+    };
+    shape?: {
+        color?: string;
+        fontSize?: number;
+    };
+    anyRequired: any;
+    arrayRequired: any[];
+    boolRequired: boolean;
+    funcRequired: (...args: any[]) => any;
+    numberRequired: number;
+    objectRequired: object;
+    stringRequired: string;
+    nodeRequired: React.ReactNode;
+    elementRequired: JSX.Element;
+    oneOfRequired: 'a' | 'b' | 'c';
+    oneOfTypeRequired: string | number;
+    arrayOfRequired: string[];
+    objectOfRequired: {
+        [key: string]: string;
+    };
+    shapeRequired: {
+        color?: string;
+        fontSize: number;
+    };
+};
+type MyComponentState = {
+};
+export default class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
     static propTypes = {
         children: React.PropTypes.node,
         any: React.PropTypes.any,
diff --git a/test/react-js-make-props-and-state-transform/static-proptypes-simple/output.tsx b/test/react-js-make-props-and-state-transform/static-proptypes-simple/output.tsx
index 817979c..3694160 100644
--- a/test/react-js-make-props-and-state-transform/static-proptypes-simple/output.tsx
+++ b/test/react-js-make-props-and-state-transform/static-proptypes-simple/output.tsx
@@ -1,8 +1,10 @@
 import * as React from 'react';
-export default class MyComponent extends React.Component<{
-        foo: string;
-    }, {
-    }> {
+type MyComponentProps = {
+    foo: string;
+};
+type MyComponentState = {
+};
+export default class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
     static propTypes = {
         foo: React.PropTypes.string.isRequired,
     };
diff --git a/test/runner.ts b/test/runner.ts
index 6b6e725..3cda645 100644
--- a/test/runner.ts
+++ b/test/runner.ts
@@ -8,7 +8,6 @@ import * as fs from 'fs';
 import * as ts from 'typescript';
 import * as chalk from 'chalk';
 import {
-    reactHoistGenericsTransformFactoryFactory,
     reactJSMakePropsAndStateInterfaceTransformFactoryFactory,
     reactMovePropTypesToClassTransformFactoryFactory,
     reactRemovePropTypesAssignmentTransformFactoryFactory,
@@ -23,7 +22,6 @@ import {
 /** Map between a transform and its test folder */
 const transformToFolderMap: [string, TransformFactoryFactory[]][] = [
     ['react-js-make-props-and-state-transform', [reactJSMakePropsAndStateInterfaceTransformFactoryFactory]],
-    ['react-hoist-generics-transform', [reactHoistGenericsTransformFactoryFactory]],
     ['react-remove-static-prop-types-member-transform', [reactRemoveStaticPropTypesMemberTransformFactoryFactory]],
     ['react-remove-prop-types-assignment-transform', [reactRemovePropTypesAssignmentTransformFactoryFactory]],
     ['collapse-intersection-interfaces-transform', [collapseIntersectionInterfacesTransformFactoryFactory]],

From ebe50db0403d1354fa8b65793e383bb339e2e861 Mon Sep 17 00:00:00 2001
From: VincentBel <buaazqh@gmail.com>
Date: Sat, 20 Jan 2018 20:13:45 +0800
Subject: [PATCH 2/4] support stateless component

---
 src/helpers/build-prop-type-interface.ts      | 188 +++++++++++++++++
 src/helpers/index.ts                          |  73 ++++++-
 src/index.ts                                  |   3 +
 ...react-js-make-props-and-state-transform.ts | 191 +-----------------
 ...eact-move-prop-types-to-class-transform.ts |  32 +--
 ...stateless-function-make-props-transform.ts | 114 +++++++++++
 .../stateless-arrow-function/input.tsx        |   7 +
 .../stateless-arrow-function/output.tsx       |   6 +
 test/end-to-end/stateless-function/input.tsx  |   7 +
 test/end-to-end/stateless-function/output.tsx |   6 +
 .../stateless-arrow-function/input.tsx        |   7 +
 .../stateless-arrow-function/output.tsx       |   9 +
 .../stateless-function-many-props/input.tsx   |  48 +++++
 .../stateless-function-many-props/output.tsx  |  87 ++++++++
 .../stateless-function/input.tsx              |   7 +
 .../stateless-function/output.tsx             |   9 +
 .../stateless-propless/input.tsx              |   6 +
 .../stateless-propless/output.tsx             |   6 +
 test/runner.ts                                |   4 +-
 19 files changed, 589 insertions(+), 221 deletions(-)
 create mode 100644 src/helpers/build-prop-type-interface.ts
 create mode 100644 src/transforms/react-stateless-function-make-props-transform.ts
 create mode 100644 test/end-to-end/stateless-arrow-function/input.tsx
 create mode 100644 test/end-to-end/stateless-arrow-function/output.tsx
 create mode 100644 test/end-to-end/stateless-function/input.tsx
 create mode 100644 test/end-to-end/stateless-function/output.tsx
 create mode 100644 test/react-stateless-function-make-props-transform/stateless-arrow-function/input.tsx
 create mode 100644 test/react-stateless-function-make-props-transform/stateless-arrow-function/output.tsx
 create mode 100644 test/react-stateless-function-make-props-transform/stateless-function-many-props/input.tsx
 create mode 100644 test/react-stateless-function-make-props-transform/stateless-function-many-props/output.tsx
 create mode 100644 test/react-stateless-function-make-props-transform/stateless-function/input.tsx
 create mode 100644 test/react-stateless-function-make-props-transform/stateless-function/output.tsx
 create mode 100644 test/react-stateless-function-make-props-transform/stateless-propless/input.tsx
 create mode 100644 test/react-stateless-function-make-props-transform/stateless-propless/output.tsx

diff --git a/src/helpers/build-prop-type-interface.ts b/src/helpers/build-prop-type-interface.ts
new file mode 100644
index 0000000..df0730a
--- /dev/null
+++ b/src/helpers/build-prop-type-interface.ts
@@ -0,0 +1,188 @@
+import * as ts from 'typescript';
+
+/**
+ * Build props interface from propTypes object
+ * @example
+ * {
+ *   foo: React.PropTypes.string.isRequired
+ * }
+ *
+ * becomes
+ * {
+ *  foo: string;
+ * }
+ * @param objectLiteral
+ */
+export function buildInterfaceFromPropTypeObjectLiteral(objectLiteral: ts.ObjectLiteralExpression) {
+    const members = objectLiteral.properties
+        // We only need to process PropertyAssignment:
+        // {
+        //    a: 123     // PropertyAssignment
+        // }
+        //
+        // filter out:
+        // {
+        //   a() {},     // MethodDeclaration
+        //   b,          // ShorthandPropertyAssignment
+        //   ...c,       // SpreadAssignment
+        //   get d() {}, // AccessorDeclaration
+        // }
+        .filter(ts.isPropertyAssignment)
+        // Ignore children, React types have it
+        .filter(property => property.name.getText() !== 'children')
+        .map(propertyAssignment => {
+            const name = propertyAssignment.name.getText();
+            const initializer = propertyAssignment.initializer;
+            const isRequired = isPropTypeRequired(initializer);
+            const typeExpression = isRequired
+                ? // We have guaranteed the type in `isPropTypeRequired()`
+                  (initializer as ts.PropertyAccessExpression).expression
+                : initializer;
+            const typeValue = getTypeFromReactPropTypeExpression(typeExpression);
+
+            return ts.createPropertySignature(
+                [],
+                name,
+                isRequired ? undefined : ts.createToken(ts.SyntaxKind.QuestionToken),
+                typeValue,
+                undefined,
+            );
+        });
+
+    return ts.createTypeLiteralNode(members);
+}
+
+/**
+ * Turns React.PropTypes.* into TypeScript type value
+ *
+ * @param node React propTypes value
+ */
+function getTypeFromReactPropTypeExpression(node: ts.Expression): ts.TypeNode {
+    let result = null;
+    if (ts.isPropertyAccessExpression(node)) {
+        /**
+         * PropTypes.array,
+         * PropTypes.bool,
+         * PropTypes.func,
+         * PropTypes.number,
+         * PropTypes.object,
+         * PropTypes.string,
+         * PropTypes.symbol, (ignore)
+         * PropTypes.node,
+         * PropTypes.element,
+         * PropTypes.any,
+         */
+        const text = node.getText().replace(/React\.PropTypes\./, '');
+
+        if (/string/.test(text)) {
+            result = ts.createKeywordTypeNode(ts.SyntaxKind.StringKeyword);
+        } else if (/any/.test(text)) {
+            result = ts.createKeywordTypeNode(ts.SyntaxKind.AnyKeyword);
+        } else if (/array/.test(text)) {
+            result = ts.createArrayTypeNode(ts.createKeywordTypeNode(ts.SyntaxKind.AnyKeyword));
+        } else if (/bool/.test(text)) {
+            result = ts.createKeywordTypeNode(ts.SyntaxKind.BooleanKeyword);
+        } else if (/number/.test(text)) {
+            result = ts.createKeywordTypeNode(ts.SyntaxKind.NumberKeyword);
+        } else if (/object/.test(text)) {
+            result = ts.createKeywordTypeNode(ts.SyntaxKind.ObjectKeyword);
+        } else if (/node/.test(text)) {
+            result = ts.createTypeReferenceNode('React.ReactNode', []);
+        } else if (/element/.test(text)) {
+            result = ts.createTypeReferenceNode('JSX.Element', []);
+        } else if (/func/.test(text)) {
+            const arrayOfAny = ts.createParameter(
+                [],
+                [],
+                ts.createToken(ts.SyntaxKind.DotDotDotToken),
+                'args',
+                undefined,
+                ts.createArrayTypeNode(ts.createKeywordTypeNode(ts.SyntaxKind.AnyKeyword)),
+                undefined,
+            );
+            result = ts.createFunctionTypeNode([], [arrayOfAny], ts.createKeywordTypeNode(ts.SyntaxKind.AnyKeyword));
+        }
+    } else if (ts.isCallExpression(node)) {
+        /**
+         * PropTypes.instanceOf(), (ignore)
+         * PropTypes.oneOf(), // only support oneOf([1, 2]), oneOf(['a', 'b'])
+         * PropTypes.oneOfType(),
+         * PropTypes.arrayOf(),
+         * PropTypes.objectOf(),
+         * PropTypes.shape(),
+         */
+        const text = node.expression.getText();
+        if (/oneOf$/.test(text)) {
+            const argument = node.arguments[0];
+            if (ts.isArrayLiteralExpression(argument)) {
+                if (argument.elements.every(elm => ts.isStringLiteral(elm) || ts.isNumericLiteral(elm))) {
+                    result = ts.createUnionTypeNode(
+                        (argument.elements as ts.NodeArray<ts.StringLiteral | ts.NumericLiteral>).map(elm =>
+                            ts.createLiteralTypeNode(elm),
+                        ),
+                    );
+                }
+            }
+        } else if (/oneOfType$/.test(text)) {
+            const argument = node.arguments[0];
+            if (ts.isArrayLiteralExpression(argument)) {
+                result = ts.createUnionOrIntersectionTypeNode(
+                    ts.SyntaxKind.UnionType,
+                    argument.elements.map(elm => getTypeFromReactPropTypeExpression(elm)),
+                );
+            }
+        } else if (/arrayOf$/.test(text)) {
+            const argument = node.arguments[0];
+            if (argument) {
+                result = ts.createArrayTypeNode(getTypeFromReactPropTypeExpression(argument));
+            }
+        } else if (/objectOf$/.test(text)) {
+            const argument = node.arguments[0];
+            if (argument) {
+                result = ts.createTypeLiteralNode([
+                    ts.createIndexSignature(
+                        undefined,
+                        undefined,
+                        [
+                            ts.createParameter(
+                                undefined,
+                                undefined,
+                                undefined,
+                                'key',
+                                undefined,
+                                ts.createKeywordTypeNode(ts.SyntaxKind.StringKeyword),
+                            ),
+                        ],
+                        getTypeFromReactPropTypeExpression(argument),
+                    ),
+                ]);
+            }
+        } else if (/shape$/.test(text)) {
+            const argument = node.arguments[0];
+            if (ts.isObjectLiteralExpression(argument)) {
+                return buildInterfaceFromPropTypeObjectLiteral(argument);
+            }
+        }
+    }
+
+    /**
+     * customProp,
+     * anything others
+     */
+    if (result === null) {
+        result = ts.createKeywordTypeNode(ts.SyntaxKind.AnyKeyword);
+    }
+
+    return result;
+}
+
+/**
+ * Decide if node is required
+ * @param node React propTypes member node
+ */
+function isPropTypeRequired(node: ts.Expression) {
+    if (!ts.isPropertyAccessExpression(node)) return false;
+
+    const text = node.getText().replace(/React\.PropTypes\./, '');
+    return /\.isRequired/.test(text);
+}
diff --git a/src/helpers/index.ts b/src/helpers/index.ts
index 243bdbf..1018c5d 100644
--- a/src/helpers/index.ts
+++ b/src/helpers/index.ts
@@ -1,6 +1,8 @@
 import * as ts from 'typescript';
 import * as _ from 'lodash';
 
+export * from './build-prop-type-interface';
+
 /**
  * If a class declaration a react class?
  * @param classDeclaration
@@ -50,10 +52,12 @@ export function isReactComponent(classDeclaration: ts.ClassDeclaration, typeChec
  * @param clause
  */
 export function isReactHeritageClause(clause: ts.HeritageClause) {
-    return clause.token === ts.SyntaxKind.ExtendsKeyword &&
+    return (
+        clause.token === ts.SyntaxKind.ExtendsKeyword &&
         clause.types.length === 1 &&
         ts.isExpressionWithTypeArguments(clause.types[0]) &&
-        /Component/.test(clause.types[0].expression.getText());
+        /Component/.test(clause.types[0].expression.getText())
+    );
 }
 
 /**
@@ -63,11 +67,13 @@ export function isReactHeritageClause(clause: ts.HeritageClause) {
  * @param statement
  */
 export function isReactPropTypeAssignmentStatement(statement: ts.Statement): statement is ts.ExpressionStatement {
-    return ts.isExpressionStatement(statement)
-        && ts.isBinaryExpression(statement.expression)
-        && statement.expression.operatorToken.kind === ts.SyntaxKind.FirstAssignment
-        && ts.isPropertyAccessExpression(statement.expression.left)
-        && /\.propTypes$|\.propTypes\..+$/.test(statement.expression.left.getText())
+    return (
+        ts.isExpressionStatement(statement) &&
+        ts.isBinaryExpression(statement.expression) &&
+        statement.expression.operatorToken.kind === ts.SyntaxKind.FirstAssignment &&
+        ts.isPropertyAccessExpression(statement.expression.left) &&
+        /\.propTypes$|\.propTypes\..+$/.test(statement.expression.left.getText())
+    );
 }
 
 /**
@@ -78,7 +84,7 @@ export function hasStaticModifier(classMember: ts.ClassElement) {
     if (!classMember.modifiers) {
         return false;
     }
-    const staticModifier = _.find(classMember.modifiers, (modifier) => {
+    const staticModifier = _.find(classMember.modifiers, modifier => {
         return modifier.kind == ts.SyntaxKind.StaticKeyword;
     });
     return staticModifier !== undefined;
@@ -91,12 +97,61 @@ export function hasStaticModifier(classMember: ts.ClassElement) {
  */
 export function isPropTypesMember(classMember: ts.ClassElement, sourceFile: ts.SourceFile) {
     try {
-         return classMember.name !== undefined && classMember.name.getFullText(sourceFile) !== 'propTypes'
+        return classMember.name !== undefined && classMember.name.getFullText(sourceFile) !== 'propTypes';
     } catch (e) {
         return false;
     }
 }
 
+/**
+ * Get component name off of a propType assignment statement
+ * @param propTypeAssignment
+ * @param sourceFile
+ */
+export function getComponentName(propTypeAssignment: ts.Statement, sourceFile: ts.SourceFile) {
+    const text = propTypeAssignment.getText(sourceFile);
+    return text.substr(0, text.indexOf('.'));
+}
+
+/**
+ * Convert react stateless function to arrow function
+ * @example
+ * Before:
+ * function Hello(message) {
+ *   return <div>{message}</div>
+ * }
+ *
+ * After:
+ * const Hello = message => {
+ *   return <div>{message}</div>
+ * }
+ */
+export function convertReactStatelessFunctionToArrowFunction(
+    statelessFunc: ts.FunctionDeclaration | ts.VariableStatement,
+) {
+    if (ts.isVariableStatement(statelessFunc)) return statelessFunc;
+
+    const funcName = statelessFunc.name || 'Component';
+    const funcBody = statelessFunc.body || ts.createBlock([]);
+
+    const initializer = ts.createArrowFunction(
+        undefined,
+        undefined,
+        statelessFunc.parameters,
+        undefined,
+        undefined,
+        funcBody,
+    );
+
+    return ts.createVariableStatement(
+        statelessFunc.modifiers,
+        ts.createVariableDeclarationList(
+            [ts.createVariableDeclaration(funcName, undefined, initializer)],
+            ts.NodeFlags.Const,
+        ),
+    );
+}
+
 /**
  * Insert an item in middle of an array after a specific item
  * @param collection
diff --git a/src/index.ts b/src/index.ts
index 0ba4b33..3915006 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -6,10 +6,12 @@ import { reactRemovePropTypesAssignmentTransformFactoryFactory } from './transfo
 import { reactMovePropTypesToClassTransformFactoryFactory } from './transforms/react-move-prop-types-to-class-transform';
 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';
 
 export {
     reactMovePropTypesToClassTransformFactoryFactory,
     reactJSMakePropsAndStateInterfaceTransformFactoryFactory,
+    reactStatelessFunctionMakePropsTransformFactoryFactory,
     collapseIntersectionInterfacesTransformFactoryFactory,
     reactRemovePropTypesAssignmentTransformFactoryFactory,
     reactRemoveStaticPropTypesMemberTransformFactoryFactory,
@@ -19,6 +21,7 @@ export {
 export const allTransforms = [
     reactMovePropTypesToClassTransformFactoryFactory,
     reactJSMakePropsAndStateInterfaceTransformFactoryFactory,
+    reactStatelessFunctionMakePropsTransformFactoryFactory,
     collapseIntersectionInterfacesTransformFactoryFactory,
     reactRemovePropTypesAssignmentTransformFactoryFactory,
     reactRemoveStaticPropTypesMemberTransformFactoryFactory,
diff --git a/src/transforms/react-js-make-props-and-state-transform.ts b/src/transforms/react-js-make-props-and-state-transform.ts
index 0b5e968..4f678a9 100644
--- a/src/transforms/react-js-make-props-and-state-transform.ts
+++ b/src/transforms/react-js-make-props-and-state-transform.ts
@@ -114,7 +114,7 @@ function getPropsTypeOfReactComponentClass(
         staticPropTypesMember.initializer &&
         ts.isObjectLiteralExpression(staticPropTypesMember.initializer)
     ) {
-        return buildInterfaceFromPropTypeObjectLiteral(staticPropTypesMember.initializer);
+        return helpers.buildInterfaceFromPropTypeObjectLiteral(staticPropTypesMember.initializer);
     }
 
     const staticPropTypesGetterMember = _.find(classDeclaration.members, member => {
@@ -138,7 +138,7 @@ function getPropsTypeOfReactComponentClass(
             returnStatement.expression &&
             ts.isObjectLiteralExpression(returnStatement.expression)
         ) {
-            return buildInterfaceFromPropTypeObjectLiteral(returnStatement.expression);
+            return helpers.buildInterfaceFromPropTypeObjectLiteral(returnStatement.expression);
         }
     }
 
@@ -238,190 +238,3 @@ function getStateLookingForSetStateCalls(
         }
     }
 }
-
-/**
- * Build props interface from propTypes object
- * @example
- * {
- *   foo: React.PropTypes.string.isRequired
- * }
- *
- * becomes
- * {
- *  foo: string;
- * }
- * @param objectLiteral
- */
-function buildInterfaceFromPropTypeObjectLiteral(objectLiteral: ts.ObjectLiteralExpression) {
-    const members = objectLiteral.properties
-        // We only need to process PropertyAssignment:
-        // {
-        //    a: 123     // PropertyAssignment
-        // }
-        //
-        // filter out:
-        // {
-        //   a() {},     // MethodDeclaration
-        //   b,          // ShorthandPropertyAssignment
-        //   ...c,       // SpreadAssignment
-        //   get d() {}, // AccessorDeclaration
-        // }
-        .filter(ts.isPropertyAssignment)
-        // Ignore children, React types have it
-        .filter(property => property.name.getText() !== 'children')
-        .map(propertyAssignment => {
-            const name = propertyAssignment.name.getText();
-            const initializer = propertyAssignment.initializer;
-            const isRequired = isPropTypeRequired(initializer);
-            const typeExpression = isRequired
-                ? // We have guaranteed the type in `isPropTypeRequired()`
-                  (initializer as ts.PropertyAccessExpression).expression
-                : initializer;
-            const typeValue = getTypeFromReactPropTypeExpression(typeExpression);
-
-            return ts.createPropertySignature(
-                [],
-                name,
-                isRequired ? undefined : ts.createToken(ts.SyntaxKind.QuestionToken),
-                typeValue,
-                undefined,
-            );
-        });
-
-    return ts.createTypeLiteralNode(members);
-}
-
-/**
- * Turns React.PropTypes.* into TypeScript type value
- *
- * @param node React propTypes value
- */
-function getTypeFromReactPropTypeExpression(node: ts.Expression): ts.TypeNode {
-    let result = null;
-    if (ts.isPropertyAccessExpression(node)) {
-        /**
-         * PropTypes.array,
-         * PropTypes.bool,
-         * PropTypes.func,
-         * PropTypes.number,
-         * PropTypes.object,
-         * PropTypes.string,
-         * PropTypes.symbol, (ignore)
-         * PropTypes.node,
-         * PropTypes.element,
-         * PropTypes.any,
-         */
-        const text = node.getText().replace(/React\.PropTypes\./, '');
-
-        if (/string/.test(text)) {
-            result = ts.createKeywordTypeNode(ts.SyntaxKind.StringKeyword);
-        } else if (/any/.test(text)) {
-            result = ts.createKeywordTypeNode(ts.SyntaxKind.AnyKeyword);
-        } else if (/array/.test(text)) {
-            result = ts.createArrayTypeNode(ts.createKeywordTypeNode(ts.SyntaxKind.AnyKeyword));
-        } else if (/bool/.test(text)) {
-            result = ts.createKeywordTypeNode(ts.SyntaxKind.BooleanKeyword);
-        } else if (/number/.test(text)) {
-            result = ts.createKeywordTypeNode(ts.SyntaxKind.NumberKeyword);
-        } else if (/object/.test(text)) {
-            result = ts.createKeywordTypeNode(ts.SyntaxKind.ObjectKeyword);
-        } else if (/node/.test(text)) {
-            result = ts.createTypeReferenceNode('React.ReactNode', []);
-        } else if (/element/.test(text)) {
-            result = ts.createTypeReferenceNode('JSX.Element', []);
-        } else if (/func/.test(text)) {
-            const arrayOfAny = ts.createParameter(
-                [],
-                [],
-                ts.createToken(ts.SyntaxKind.DotDotDotToken),
-                'args',
-                undefined,
-                ts.createArrayTypeNode(ts.createKeywordTypeNode(ts.SyntaxKind.AnyKeyword)),
-                undefined,
-            );
-            result = ts.createFunctionTypeNode([], [arrayOfAny], ts.createKeywordTypeNode(ts.SyntaxKind.AnyKeyword));
-        }
-    } else if (ts.isCallExpression(node)) {
-        /**
-         * PropTypes.instanceOf(), (ignore)
-         * PropTypes.oneOf(), // only support oneOf([1, 2]), oneOf(['a', 'b'])
-         * PropTypes.oneOfType(),
-         * PropTypes.arrayOf(),
-         * PropTypes.objectOf(),
-         * PropTypes.shape(),
-         */
-        const text = node.expression.getText();
-        if (/oneOf$/.test(text)) {
-            const argument = node.arguments[0];
-            if (ts.isArrayLiteralExpression(argument)) {
-                if (argument.elements.every(elm => ts.isStringLiteral(elm) || ts.isNumericLiteral(elm))) {
-                    result = ts.createUnionTypeNode(
-                        (argument.elements as ts.NodeArray<ts.StringLiteral | ts.NumericLiteral>).map(elm =>
-                            ts.createLiteralTypeNode(elm),
-                        ),
-                    );
-                }
-            }
-        } else if (/oneOfType$/.test(text)) {
-            const argument = node.arguments[0];
-            if (ts.isArrayLiteralExpression(argument)) {
-                result = ts.createUnionOrIntersectionTypeNode(
-                    ts.SyntaxKind.UnionType,
-                    argument.elements.map(elm => getTypeFromReactPropTypeExpression(elm)),
-                );
-            }
-        } else if (/arrayOf$/.test(text)) {
-            const argument = node.arguments[0];
-            if (argument) {
-                result = ts.createArrayTypeNode(getTypeFromReactPropTypeExpression(argument));
-            }
-        } else if (/objectOf$/.test(text)) {
-            const argument = node.arguments[0];
-            if (argument) {
-                result = ts.createTypeLiteralNode([
-                    ts.createIndexSignature(
-                        undefined,
-                        undefined,
-                        [
-                            ts.createParameter(
-                                undefined,
-                                undefined,
-                                undefined,
-                                'key',
-                                undefined,
-                                ts.createKeywordTypeNode(ts.SyntaxKind.StringKeyword),
-                            ),
-                        ],
-                        getTypeFromReactPropTypeExpression(argument),
-                    ),
-                ]);
-            }
-        } else if (/shape$/.test(text)) {
-            const argument = node.arguments[0];
-            if (ts.isObjectLiteralExpression(argument)) {
-                return buildInterfaceFromPropTypeObjectLiteral(argument);
-            }
-        }
-    }
-
-    /**
-     * customProp,
-     * anything others
-     */
-    if (result === null) {
-        result = ts.createKeywordTypeNode(ts.SyntaxKind.AnyKeyword);
-    }
-
-    return result;
-}
-
-/**
- * Decide if node is required
- * @param node React propTypes member node
- */
-function isPropTypeRequired(node: ts.Expression) {
-    if (!ts.isPropertyAccessExpression(node)) return false;
-
-    const text = node.getText().replace(/React\.PropTypes\./, '');
-    return /\.isRequired/.test(text);
-}
diff --git a/src/transforms/react-move-prop-types-to-class-transform.ts b/src/transforms/react-move-prop-types-to-class-transform.ts
index 9eae358..5a7f7b2 100644
--- a/src/transforms/react-move-prop-types-to-class-transform.ts
+++ b/src/transforms/react-move-prop-types-to-class-transform.ts
@@ -47,22 +47,21 @@ function visitSourceFile(sourceFile: ts.SourceFile, typeChecker: ts.TypeChecker)
     let statements = sourceFile.statements;
 
     // Look for propType assignment statements
-    const propTypeAssignments = statements.filter(
-        (statement) => helpers.isReactPropTypeAssignmentStatement(statement)
+    const propTypeAssignments = statements.filter(statement =>
+        helpers.isReactPropTypeAssignmentStatement(statement),
     ) as ts.ExpressionStatement[];
 
-
     for (const propTypeAssignment of propTypeAssignments) {
-
         // Look for the class declarations with the same name
-        const componentName = getComponentName(propTypeAssignment, sourceFile);
+        const componentName = helpers.getComponentName(propTypeAssignment, sourceFile);
 
-        const classStatement = _.find(
+        const classStatement = (_.find(
             statements,
-            (statement) => ts.isClassDeclaration(statement) &&
+            statement =>
+                ts.isClassDeclaration(statement) &&
                 statement.name !== undefined &&
                 statement.name.getText(sourceFile) === componentName,
-        ) as {} as ts.ClassDeclaration; // Type weirdness
+        ) as {}) as ts.ClassDeclaration; // Type weirdness
 
         // && helpers.isBinaryExpression(propTypeAssignment.expression) is redundant to satisfy the type checker
         if (classStatement && ts.isBinaryExpression(propTypeAssignment.expression)) {
@@ -80,17 +79,6 @@ function visitSourceFile(sourceFile: ts.SourceFile, typeChecker: ts.TypeChecker)
     return ts.updateSourceFileNode(sourceFile, statements);
 }
 
-
-/**
- * Get component name off of a propType assignment statement
- * @param propTypeAssignment
- * @param sourceFile
- */
-function getComponentName(propTypeAssignment: ts.Statement, sourceFile: ts.SourceFile) {
-    const text = propTypeAssignment.getText(sourceFile);
-    return text.substr(0, text.indexOf('.'));
-}
-
 /**
  * Insert a new static member into a class
  * @param classDeclaration
@@ -98,7 +86,7 @@ function getComponentName(propTypeAssignment: ts.Statement, sourceFile: ts.Sourc
  * @param value
  */
 function addStaticMemberToClass(classDeclaration: ts.ClassDeclaration, name: string, value: ts.Expression) {
-    const staticModifier = ts.createToken(ts.SyntaxKind.StaticKeyword)
+    const staticModifier = ts.createToken(ts.SyntaxKind.StaticKeyword);
     const propertyDeclaration = ts.createProperty([], [staticModifier], name, undefined, undefined, value);
     return ts.updateClassDeclaration(
         classDeclaration,
@@ -107,6 +95,6 @@ function addStaticMemberToClass(classDeclaration: ts.ClassDeclaration, name: str
         classDeclaration.name,
         classDeclaration.typeParameters,
         ts.createNodeArray(classDeclaration.heritageClauses),
-        ts.createNodeArray([propertyDeclaration, ...classDeclaration.members])
-    )
+        ts.createNodeArray([propertyDeclaration, ...classDeclaration.members]),
+    );
 }
diff --git a/src/transforms/react-stateless-function-make-props-transform.ts b/src/transforms/react-stateless-function-make-props-transform.ts
new file mode 100644
index 0000000..e2e7942
--- /dev/null
+++ b/src/transforms/react-stateless-function-make-props-transform.ts
@@ -0,0 +1,114 @@
+import * as ts from 'typescript';
+import * as _ from 'lodash';
+
+import * as helpers from '../helpers';
+
+export type Factory = ts.TransformerFactory<ts.SourceFile>;
+
+/**
+ * Transform react stateless components
+ *
+ * @example
+ * Before:
+ * const Hello = ({ message }) => {
+ *   return <div>hello {message}</div>
+ * }
+ * // Or:
+ * // const Hello = ({ message }) => <div>hello {message}</div>
+ *
+ * Hello.propTypes = {
+ *   message: React.PropTypes.string,
+ * }
+ *
+ * After:
+ * Type HelloProps = {
+ *   message: string;
+ * }
+ *
+ * const Hello: React.SFC<HelloProps> = ({ message }) => {
+ *   return <div>hello {message}</div>
+ * }
+ *
+ * Hello.propTypes = {
+ *   message: React.PropTypes.string,
+ * }
+ */
+export function reactStatelessFunctionMakePropsTransformFactoryFactory(typeChecker: ts.TypeChecker): Factory {
+    return function reactStatelessFunctionMakePropsTransformFactory(context: ts.TransformationContext) {
+        return function reactStatelessFunctionMakePropsTransform(sourceFile: ts.SourceFile) {
+            return visitSourceFile(sourceFile, typeChecker);
+        };
+    };
+}
+
+function visitSourceFile(sourceFile: ts.SourceFile, typeChecker: ts.TypeChecker) {
+    let statements = sourceFile.statements;
+
+    // Look for propType assignment statements
+    const propTypeAssignments = statements.filter(statement =>
+        helpers.isReactPropTypeAssignmentStatement(statement),
+    ) as ts.ExpressionStatement[];
+
+    for (const propTypeAssignment of propTypeAssignments) {
+        const componentName = helpers.getComponentName(propTypeAssignment, sourceFile);
+
+        const funcComponent = (_.find(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);
+        }
+    }
+
+    return sourceFile;
+}
+
+function visitReactStatelessComponent(
+    component: ts.FunctionDeclaration | ts.VariableStatement,
+    propTypesExpressionStatement: ts.ExpressionStatement,
+    sourceFile: ts.SourceFile,
+) {
+    let arrowFuncComponent = helpers.convertReactStatelessFunctionToArrowFunction(component);
+    let componentName = arrowFuncComponent.declarationList.declarations[0].name.getText();
+    let componentInitializer = arrowFuncComponent.declarationList.declarations[0].initializer;
+
+    const propType = getPropTypesFromTypeAssignment(propTypesExpressionStatement);
+
+    const propTypeName = `${componentName}Props`;
+    const propTypeDeclaration = ts.createTypeAliasDeclaration([], [], propTypeName, [], propType);
+    const propTypeRef = ts.createTypeReferenceNode(propTypeName, []);
+
+    let componentType = ts.createTypeReferenceNode(ts.createQualifiedName(ts.createIdentifier('React'), 'SFC'), [
+        propTypeRef,
+    ]);
+
+    // replace component with ts stateless component
+    const typedComponent = ts.createVariableStatement(
+        arrowFuncComponent.modifiers,
+        ts.createVariableDeclarationList(
+            [ts.createVariableDeclaration(componentName, componentType, componentInitializer)],
+            arrowFuncComponent.declarationList.flags,
+        ),
+    );
+
+    let statements = helpers.insertBefore(sourceFile.statements, component, [propTypeDeclaration]);
+
+    statements = helpers.replaceItem(statements, component, typedComponent);
+    return ts.updateSourceFileNode(sourceFile, statements);
+}
+
+function getPropTypesFromTypeAssignment(propTypesExpressionStatement: ts.ExpressionStatement) {
+    if (
+        propTypesExpressionStatement !== undefined &&
+        ts.isBinaryExpression(propTypesExpressionStatement.expression) &&
+        ts.isObjectLiteralExpression(propTypesExpressionStatement.expression.right)
+    ) {
+        return helpers.buildInterfaceFromPropTypeObjectLiteral(propTypesExpressionStatement.expression.right);
+    }
+
+    return ts.createTypeLiteralNode([]);
+}
diff --git a/test/end-to-end/stateless-arrow-function/input.tsx b/test/end-to-end/stateless-arrow-function/input.tsx
new file mode 100644
index 0000000..9ddb8b7
--- /dev/null
+++ b/test/end-to-end/stateless-arrow-function/input.tsx
@@ -0,0 +1,7 @@
+const Hello = ({ message }) => {
+  return <div>hello {message}</div>
+};
+
+Hello.propTypes = {
+  message: React.PropTypes.string,
+}
diff --git a/test/end-to-end/stateless-arrow-function/output.tsx b/test/end-to-end/stateless-arrow-function/output.tsx
new file mode 100644
index 0000000..818a84d
--- /dev/null
+++ b/test/end-to-end/stateless-arrow-function/output.tsx
@@ -0,0 +1,6 @@
+type HelloProps = {
+    message?: string;
+};
+const Hello: React.SFC<HelloProps> = ({ message }) => {
+    return <div>hello {message}</div>;
+};
diff --git a/test/end-to-end/stateless-function/input.tsx b/test/end-to-end/stateless-function/input.tsx
new file mode 100644
index 0000000..402c686
--- /dev/null
+++ b/test/end-to-end/stateless-function/input.tsx
@@ -0,0 +1,7 @@
+export function Hello({ message }) {
+  return <div>hello {message}</div>
+}
+
+Hello.propTypes = {
+  message: React.PropTypes.string,
+}
diff --git a/test/end-to-end/stateless-function/output.tsx b/test/end-to-end/stateless-function/output.tsx
new file mode 100644
index 0000000..fb38d33
--- /dev/null
+++ b/test/end-to-end/stateless-function/output.tsx
@@ -0,0 +1,6 @@
+type HelloProps = {
+    message?: string;
+};
+export const Hello: React.SFC<HelloProps> = ({ message }) => {
+    return <div>hello {message}</div>;
+};
diff --git a/test/react-stateless-function-make-props-transform/stateless-arrow-function/input.tsx b/test/react-stateless-function-make-props-transform/stateless-arrow-function/input.tsx
new file mode 100644
index 0000000..9ddb8b7
--- /dev/null
+++ b/test/react-stateless-function-make-props-transform/stateless-arrow-function/input.tsx
@@ -0,0 +1,7 @@
+const Hello = ({ message }) => {
+  return <div>hello {message}</div>
+};
+
+Hello.propTypes = {
+  message: React.PropTypes.string,
+}
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
new file mode 100644
index 0000000..ba53855
--- /dev/null
+++ b/test/react-stateless-function-make-props-transform/stateless-arrow-function/output.tsx
@@ -0,0 +1,9 @@
+type HelloProps = {
+    message?: string;
+};
+const Hello: React.SFC<HelloProps> = ({ message }) => {
+    return <div>hello {message}</div>;
+};
+Hello.propTypes = {
+    message: React.PropTypes.string,
+};
diff --git a/test/react-stateless-function-make-props-transform/stateless-function-many-props/input.tsx b/test/react-stateless-function-make-props-transform/stateless-function-many-props/input.tsx
new file mode 100644
index 0000000..6847265
--- /dev/null
+++ b/test/react-stateless-function-make-props-transform/stateless-function-many-props/input.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+function MyComponent() {
+  return <div />
+}
+
+MyComponent.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,
+    }),
+    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,
+    }).isRequired,
+};
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
new file mode 100644
index 0000000..e21a182
--- /dev/null
+++ b/test/react-stateless-function-make-props-transform/stateless-function-many-props/output.tsx
@@ -0,0 +1,87 @@
+import * as React from 'react';
+type MyComponentProps = {
+    any?: any;
+    array?: any[];
+    bool?: boolean;
+    func?: (...args: any[]) => any;
+    number?: number;
+    object?: object;
+    string?: string;
+    node?: React.ReactNode;
+    element?: JSX.Element;
+    oneOf?: 'a' | 'b' | 'c';
+    oneOfType?: string | number;
+    arrayOf?: string[];
+    objectOf?: {
+        [key: string]: string;
+    };
+    shape?: {
+        color?: string;
+        fontSize?: number;
+    };
+    anyRequired: any;
+    arrayRequired: any[];
+    boolRequired: boolean;
+    funcRequired: (...args: any[]) => any;
+    numberRequired: number;
+    objectRequired: object;
+    stringRequired: string;
+    nodeRequired: React.ReactNode;
+    elementRequired: JSX.Element;
+    oneOfRequired: 'a' | 'b' | 'c';
+    oneOfTypeRequired: string | number;
+    arrayOfRequired: string[];
+    objectOfRequired: {
+        [key: string]: string;
+    };
+    shapeRequired: {
+        color?: string;
+        fontSize: number;
+    };
+};
+const MyComponent: React.SFC<MyComponentProps> = () => {
+    return <div />;
+};
+MyComponent.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,
+    }),
+    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,
+    }).isRequired,
+};
diff --git a/test/react-stateless-function-make-props-transform/stateless-function/input.tsx b/test/react-stateless-function-make-props-transform/stateless-function/input.tsx
new file mode 100644
index 0000000..fd1d4ce
--- /dev/null
+++ b/test/react-stateless-function-make-props-transform/stateless-function/input.tsx
@@ -0,0 +1,7 @@
+function Hello({ message }) {
+		return <div>hello {message}</div>;
+}
+
+Hello.propTypes = {
+		message: React.PropTypes.string,
+};
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
new file mode 100644
index 0000000..ba53855
--- /dev/null
+++ b/test/react-stateless-function-make-props-transform/stateless-function/output.tsx
@@ -0,0 +1,9 @@
+type HelloProps = {
+    message?: string;
+};
+const Hello: React.SFC<HelloProps> = ({ message }) => {
+    return <div>hello {message}</div>;
+};
+Hello.propTypes = {
+    message: React.PropTypes.string,
+};
diff --git a/test/react-stateless-function-make-props-transform/stateless-propless/input.tsx b/test/react-stateless-function-make-props-transform/stateless-propless/input.tsx
new file mode 100644
index 0000000..40da377
--- /dev/null
+++ b/test/react-stateless-function-make-props-transform/stateless-propless/input.tsx
@@ -0,0 +1,6 @@
+const Hello1 = ({ message }) => {
+	return <div>hello {message}</div>;
+};
+function Hello2({ message }) {
+	return <div>hello {message}</div>;
+}
diff --git a/test/react-stateless-function-make-props-transform/stateless-propless/output.tsx b/test/react-stateless-function-make-props-transform/stateless-propless/output.tsx
new file mode 100644
index 0000000..c0f444c
--- /dev/null
+++ b/test/react-stateless-function-make-props-transform/stateless-propless/output.tsx
@@ -0,0 +1,6 @@
+const Hello1 = ({ message }) => {
+    return <div>hello {message}</div>;
+};
+function Hello2({ message }) {
+    return <div>hello {message}</div>;
+}
diff --git a/test/runner.ts b/test/runner.ts
index 3cda645..864d20f 100644
--- a/test/runner.ts
+++ b/test/runner.ts
@@ -9,11 +9,12 @@ import * as ts from 'typescript';
 import * as chalk from 'chalk';
 import {
     reactJSMakePropsAndStateInterfaceTransformFactoryFactory,
+    reactStatelessFunctionMakePropsTransformFactoryFactory,
     reactMovePropTypesToClassTransformFactoryFactory,
     reactRemovePropTypesAssignmentTransformFactoryFactory,
     reactRemoveStaticPropTypesMemberTransformFactoryFactory,
-    allTransforms,
     collapseIntersectionInterfacesTransformFactoryFactory,
+    allTransforms,
     compile,
     TransformFactoryFactory
 } from '../src';
@@ -22,6 +23,7 @@ import {
 /** Map between a transform and its test folder */
 const transformToFolderMap: [string, TransformFactoryFactory[]][] = [
     ['react-js-make-props-and-state-transform', [reactJSMakePropsAndStateInterfaceTransformFactoryFactory]],
+    ['react-stateless-function-make-props-transform', [reactStatelessFunctionMakePropsTransformFactoryFactory]],
     ['react-remove-static-prop-types-member-transform', [reactRemoveStaticPropTypesMemberTransformFactoryFactory]],
     ['react-remove-prop-types-assignment-transform', [reactRemovePropTypesAssignmentTransformFactoryFactory]],
     ['collapse-intersection-interfaces-transform', [collapseIntersectionInterfacesTransformFactoryFactory]],

From 43907b7330e81f5bd6bf22820648c3fe80bcf4e7 Mon Sep 17 00:00:00 2001
From: VincentBel <buaazqh@gmail.com>
Date: Sat, 20 Jan 2018 20:26:26 +0800
Subject: [PATCH 3/4] don't make type alias if prop or state types are empty

---
 ...react-js-make-props-and-state-transform.ts | 32 +++++++++++++++----
 ...stateless-function-make-props-transform.ts |  8 +++--
 test/end-to-end/basic/output.tsx              |  8 ++---
 .../propless-stateless/output.tsx             |  8 ++---
 .../set-state-advanced/output.tsx             |  5 ++-
 .../set-state-only/output.tsx                 |  5 ++-
 .../state-in-class-member/output.tsx          |  5 ++-
 .../state-in-constructor/output.tsx           |  5 ++-
 .../static-proptypes-getter-simple/output.tsx |  5 ++-
 .../static-proptypes-many-props/output.tsx    |  5 ++-
 .../static-proptypes-simple/output.tsx        |  5 ++-
 .../empty-prop/input.tsx                      |  6 ++++
 .../empty-prop/output.tsx                     |  5 +++
 13 files changed, 62 insertions(+), 40 deletions(-)
 create mode 100644 test/react-stateless-function-make-props-transform/empty-prop/input.tsx
 create mode 100644 test/react-stateless-function-make-props-transform/empty-prop/output.tsx

diff --git a/src/transforms/react-js-make-props-and-state-transform.ts b/src/transforms/react-js-make-props-and-state-transform.ts
index 4f678a9..3bb3169 100644
--- a/src/transforms/react-js-make-props-and-state-transform.ts
+++ b/src/transforms/react-js-make-props-and-state-transform.ts
@@ -41,6 +41,8 @@ function visitReactClassDeclaration(
     const className = classDeclaration && classDeclaration.name && classDeclaration.name.getText(sourceFile);
     const propType = getPropsTypeOfReactComponentClass(classDeclaration, sourceFile);
     const stateType = getStateTypeOfReactComponentClass(classDeclaration, typeChecker);
+    const shouldMakePropTypeDeclaration = propType.members.length > 0;
+    const shouldMakeStateTypeDeclaration = !isStateTypeMemberEmpty(stateType);
     const propTypeName = `${className}Props`;
     const stateTypeName = `${className}State`;
     const propTypeDeclaration = ts.createTypeAliasDeclaration([], [], propTypeName, [], propType);
@@ -48,12 +50,17 @@ function visitReactClassDeclaration(
     const propTypeRef = ts.createTypeReferenceNode(propTypeName, []);
     const stateTypeRef = ts.createTypeReferenceNode(stateTypeName, []);
 
-    const newClassDeclaration = getNewReactClassDeclaration(classDeclaration, propTypeRef, stateTypeRef);
+    const newClassDeclaration = getNewReactClassDeclaration(
+        classDeclaration,
+        shouldMakePropTypeDeclaration ? propTypeRef : propType,
+        shouldMakeStateTypeDeclaration ? stateTypeRef : stateType,
+    );
+
+    const allTypeDeclarations = [];
+    if (shouldMakePropTypeDeclaration) allTypeDeclarations.push(propTypeDeclaration);
+    if (shouldMakeStateTypeDeclaration) allTypeDeclarations.push(stateTypeDeclaration);
 
-    let statements = helpers.insertBefore(sourceFile.statements, classDeclaration, [
-        propTypeDeclaration,
-        stateTypeDeclaration,
-    ]);
+    let statements = helpers.insertBefore(sourceFile.statements, classDeclaration, allTypeDeclarations);
     statements = helpers.replaceItem(statements, classDeclaration, newClassDeclaration);
     return ts.updateSourceFileNode(sourceFile, statements);
 }
@@ -99,7 +106,7 @@ function getNewReactClassDeclaration(
 function getPropsTypeOfReactComponentClass(
     classDeclaration: ts.ClassDeclaration,
     sourceFile: ts.SourceFile,
-): ts.TypeNode {
+): ts.TypeLiteralNode {
     const staticPropTypesMember = _.find(classDeclaration.members, member => {
         return (
             ts.isPropertyDeclaration(member) &&
@@ -238,3 +245,16 @@ function getStateLookingForSetStateCalls(
         }
     }
 }
+
+function isStateTypeMemberEmpty(stateType: ts.TypeNode): boolean {
+    // Only need to handle TypeLiteralNode & IntersectionTypeNode
+    if (ts.isTypeLiteralNode(stateType)) {
+        return stateType.members.length === 0;
+    }
+
+    if (!ts.isIntersectionTypeNode(stateType)) {
+        return true;
+    }
+
+    return stateType.types.every(isStateTypeMemberEmpty);
+}
diff --git a/src/transforms/react-stateless-function-make-props-transform.ts b/src/transforms/react-stateless-function-make-props-transform.ts
index e2e7942..5be555a 100644
--- a/src/transforms/react-stateless-function-make-props-transform.ts
+++ b/src/transforms/react-stateless-function-make-props-transform.ts
@@ -77,13 +77,13 @@ function visitReactStatelessComponent(
     let componentInitializer = arrowFuncComponent.declarationList.declarations[0].initializer;
 
     const propType = getPropTypesFromTypeAssignment(propTypesExpressionStatement);
-
+    const shouldMakePropTypeDeclaration = propType.members.length > 0;
     const propTypeName = `${componentName}Props`;
     const propTypeDeclaration = ts.createTypeAliasDeclaration([], [], propTypeName, [], propType);
     const propTypeRef = ts.createTypeReferenceNode(propTypeName, []);
 
     let componentType = ts.createTypeReferenceNode(ts.createQualifiedName(ts.createIdentifier('React'), 'SFC'), [
-        propTypeRef,
+        shouldMakePropTypeDeclaration ? propTypeRef : propType,
     ]);
 
     // replace component with ts stateless component
@@ -95,7 +95,9 @@ function visitReactStatelessComponent(
         ),
     );
 
-    let statements = helpers.insertBefore(sourceFile.statements, component, [propTypeDeclaration]);
+    let statements = shouldMakePropTypeDeclaration
+        ? helpers.insertBefore(sourceFile.statements, component, [propTypeDeclaration])
+        : sourceFile.statements;
 
     statements = helpers.replaceItem(statements, component, typedComponent);
     return ts.updateSourceFileNode(sourceFile, statements);
diff --git a/test/end-to-end/basic/output.tsx b/test/end-to-end/basic/output.tsx
index 5dae9ae..b2d81de 100644
--- a/test/end-to-end/basic/output.tsx
+++ b/test/end-to-end/basic/output.tsx
@@ -1,9 +1,7 @@
 import * as React from 'react';
-type MyComponentProps = {
-};
-type MyComponentState = {
-};
-export default class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
+export default class MyComponent extends React.Component<{
+    }, {
+    }> {
     render() {
         return <div />;
     }
diff --git a/test/react-js-make-props-and-state-transform/propless-stateless/output.tsx b/test/react-js-make-props-and-state-transform/propless-stateless/output.tsx
index 5dae9ae..b2d81de 100644
--- a/test/react-js-make-props-and-state-transform/propless-stateless/output.tsx
+++ b/test/react-js-make-props-and-state-transform/propless-stateless/output.tsx
@@ -1,9 +1,7 @@
 import * as React from 'react';
-type MyComponentProps = {
-};
-type MyComponentState = {
-};
-export default class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
+export default class MyComponent extends React.Component<{
+    }, {
+    }> {
     render() {
         return <div />;
     }
diff --git a/test/react-js-make-props-and-state-transform/set-state-advanced/output.tsx b/test/react-js-make-props-and-state-transform/set-state-advanced/output.tsx
index d95b659..15ae2c3 100644
--- a/test/react-js-make-props-and-state-transform/set-state-advanced/output.tsx
+++ b/test/react-js-make-props-and-state-transform/set-state-advanced/output.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
-type MyComponentProps = {
-};
 type MyComponentState = { foo: number; bar: number; } & { baz: number; } & { something: { big: number; here: string; of: { a: number; }[]; }; };
-export default class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
+export default class MyComponent extends React.Component<{
+    }, MyComponentState> {
     render() {
         return <button onClick={this.onclick.bind(this)}/>;
     }
diff --git a/test/react-js-make-props-and-state-transform/set-state-only/output.tsx b/test/react-js-make-props-and-state-transform/set-state-only/output.tsx
index a1d1f36..91605f1 100644
--- a/test/react-js-make-props-and-state-transform/set-state-only/output.tsx
+++ b/test/react-js-make-props-and-state-transform/set-state-only/output.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
-type MyComponentProps = {
-};
 type MyComponentState = { foo: number; bar: number; };
-export default class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
+export default class MyComponent extends React.Component<{
+    }, MyComponentState> {
     render() {
         return <button onClick={this.onclick.bind(this)}/>;
     }
diff --git a/test/react-js-make-props-and-state-transform/state-in-class-member/output.tsx b/test/react-js-make-props-and-state-transform/state-in-class-member/output.tsx
index c380ace..5f0d504 100644
--- a/test/react-js-make-props-and-state-transform/state-in-class-member/output.tsx
+++ b/test/react-js-make-props-and-state-transform/state-in-class-member/output.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
-type MyComponentProps = {
-};
 type MyComponentState = { foo: number; };
-export default class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
+export default class MyComponent extends React.Component<{
+    }, MyComponentState> {
     state = { foo: 1 };
     render() {
         return <div />;
diff --git a/test/react-js-make-props-and-state-transform/state-in-constructor/output.tsx b/test/react-js-make-props-and-state-transform/state-in-constructor/output.tsx
index 74a9cdf..0226e15 100644
--- a/test/react-js-make-props-and-state-transform/state-in-constructor/output.tsx
+++ b/test/react-js-make-props-and-state-transform/state-in-constructor/output.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
-type MyComponentProps = {
-};
 type MyComponentState = { foo: number; };
-export default class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
+export default class MyComponent extends React.Component<{
+    }, MyComponentState> {
     constructor(props, context) {
         super(props, context);
         this.state = { foo: 1 };
diff --git a/test/react-js-make-props-and-state-transform/static-proptypes-getter-simple/output.tsx b/test/react-js-make-props-and-state-transform/static-proptypes-getter-simple/output.tsx
index 3713892..4a505d6 100644
--- a/test/react-js-make-props-and-state-transform/static-proptypes-getter-simple/output.tsx
+++ b/test/react-js-make-props-and-state-transform/static-proptypes-getter-simple/output.tsx
@@ -2,9 +2,8 @@ import * as React from 'react';
 type MyComponentProps = {
     foo: string;
 };
-type MyComponentState = {
-};
-export default class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
+export default class MyComponent extends React.Component<MyComponentProps, {
+    }> {
     static get propTypes() {
         return {
             foo: React.PropTypes.string.isRequired,
diff --git a/test/react-js-make-props-and-state-transform/static-proptypes-many-props/output.tsx b/test/react-js-make-props-and-state-transform/static-proptypes-many-props/output.tsx
index caf0150..abecef9 100644
--- a/test/react-js-make-props-and-state-transform/static-proptypes-many-props/output.tsx
+++ b/test/react-js-make-props-and-state-transform/static-proptypes-many-props/output.tsx
@@ -39,9 +39,8 @@ type MyComponentProps = {
         fontSize: number;
     };
 };
-type MyComponentState = {
-};
-export default class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
+export default class MyComponent extends React.Component<MyComponentProps, {
+    }> {
     static propTypes = {
         children: React.PropTypes.node,
         any: React.PropTypes.any,
diff --git a/test/react-js-make-props-and-state-transform/static-proptypes-simple/output.tsx b/test/react-js-make-props-and-state-transform/static-proptypes-simple/output.tsx
index 3694160..70b324d 100644
--- a/test/react-js-make-props-and-state-transform/static-proptypes-simple/output.tsx
+++ b/test/react-js-make-props-and-state-transform/static-proptypes-simple/output.tsx
@@ -2,9 +2,8 @@ import * as React from 'react';
 type MyComponentProps = {
     foo: string;
 };
-type MyComponentState = {
-};
-export default class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
+export default class MyComponent extends React.Component<MyComponentProps, {
+    }> {
     static propTypes = {
         foo: React.PropTypes.string.isRequired,
     };
diff --git a/test/react-stateless-function-make-props-transform/empty-prop/input.tsx b/test/react-stateless-function-make-props-transform/empty-prop/input.tsx
new file mode 100644
index 0000000..6831632
--- /dev/null
+++ b/test/react-stateless-function-make-props-transform/empty-prop/input.tsx
@@ -0,0 +1,6 @@
+function Hello() {
+  return <div />
+}
+
+Hello.propTypes = {
+};
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
new file mode 100644
index 0000000..8846655
--- /dev/null
+++ b/test/react-stateless-function-make-props-transform/empty-prop/output.tsx
@@ -0,0 +1,5 @@
+const Hello: React.SFC<{
+    }> = () => {
+    return <div />;
+};
+Hello.propTypes = {};

From 391f0667e31b5ab4b9da30ba82a65a465243a623 Mon Sep 17 00:00:00 2001
From: VincentBel <buaazqh@gmail.com>
Date: Sat, 20 Jan 2018 20:29:45 +0800
Subject: [PATCH 4/4] fix: should only transform current source file

---
 src/compiler.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/compiler.ts b/src/compiler.ts
index ee4c64c..acfce10 100644
--- a/src/compiler.ts
+++ b/src/compiler.ts
@@ -14,7 +14,10 @@ export function compile(filePath: string, factoryFactories: TransformFactoryFact
     };
 
     const program = ts.createProgram([filePath], compilerOptions);
-    const sourceFiles = program.getSourceFiles().filter(sf => !sf.isDeclarationFile);
+    // `program.getSourceFiles()` will include those imported files,
+    // like: `import * as a from './file-a'`.
+    // We should only transform current file.
+    const sourceFiles = program.getSourceFiles().filter(sf => sf.fileName === filePath);
     const typeChecker = program.getTypeChecker();
 
     const result = ts.transform(