support multi components in one file

Author: vincentbel

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

test/react-remove-static-prop-types-member-transform/multiple-components/input.tsx

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

test/react-remove-static-prop-types-member-transform/multiple-components/output.tsx

@@ -0,0 +1,12 @@
+class SomeComponent extends React.Component<{
+        foo: number;
+    }, {
+        bar: string;
+    }> {
+}
+class AnotherComponent extends React.Component<{
+        foo: number;
+    }, {
+        bar: string;
+    }> {
+}

test/react-stateless-function-make-props-transform/multiple-components/input.tsx

@@ -0,0 +1,15 @@
+const Hello = ({ message }) => {
+  return <div>hello {message}</div>
+};
+
+function Hey({ name }) {
+  return <div>hey, {name}</div>
+}
+
+Hey.propTypes = {
+  name: React.PropTypes.string.isRequired,
+}
+
+Hello.propTypes = {
+  message: React.PropTypes.string,
+}

test/react-stateless-function-make-props-transform/multiple-components/output.tsx

@@ -0,0 +1,18 @@
+type HelloProps = {
+    message?: string;
+};
+const Hello: React.SFC<HelloProps> = ({ message }) => {
+    return <div>hello {message}</div>;
+};
+type HeyProps = {
+    name: string;
+};
+const Hey: React.SFC<HeyProps> = ({ name }) => {
+    return <div>hey, {name}</div>;
+};
+Hey.propTypes = {
+    name: React.PropTypes.string.isRequired,
+};
+Hello.propTypes = {
+    message: React.PropTypes.string,
+};