Skip to content

Commit e2bfbc0

Browse files
vincentbelmohsen1
vincentbel
authored and
mohsen1
committed
support multi components in one file (lyft#30)
1 parent 394ae32 commit e2bfbc0

File tree

17 files changed

+252
-15
lines changed

17 files changed

+252
-15
lines changed

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

+3-2
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,14 @@ export function reactJSMakePropsAndStateInterfaceTransformFactoryFactory(typeChe
2121
}
2222

2323
function visitSourceFile(sourceFile: ts.SourceFile, typeChecker: ts.TypeChecker) {
24+
let newSourceFile = sourceFile;
2425
for (const statement of sourceFile.statements) {
2526
if (ts.isClassDeclaration(statement) && helpers.isReactComponent(statement, typeChecker)) {
26-
return visitReactClassDeclaration(statement, sourceFile, typeChecker);
27+
newSourceFile = visitReactClassDeclaration(statement, newSourceFile, typeChecker);
2728
}
2829
}
2930

30-
return sourceFile;
31+
return newSourceFile;
3132
}
3233

3334
function visitReactClassDeclaration(

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

+1-3
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,7 @@ function visitSourceFile(sourceFile: ts.SourceFile, typeChecker: ts.TypeChecker)
7070
'propTypes',
7171
propTypeAssignment.expression.right,
7272
);
73-
statements = ts.createNodeArray(
74-
helpers.replaceItem(sourceFile.statements, classStatement, newClassStatement),
75-
);
73+
statements = ts.createNodeArray(helpers.replaceItem(statements, classStatement, newClassStatement));
7674
}
7775
}
7876

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

+6-7
Original file line numberDiff line numberDiff line change
@@ -42,29 +42,28 @@ export function reactStatelessFunctionMakePropsTransformFactoryFactory(typeCheck
4242
}
4343

4444
function visitSourceFile(sourceFile: ts.SourceFile, typeChecker: ts.TypeChecker) {
45-
let statements = sourceFile.statements;
46-
4745
// Look for propType assignment statements
48-
const propTypeAssignments = statements.filter(statement =>
46+
const propTypeAssignments = sourceFile.statements.filter(statement =>
4947
helpers.isReactPropTypeAssignmentStatement(statement),
5048
) as ts.ExpressionStatement[];
5149

50+
let newSourceFile = sourceFile;
5251
for (const propTypeAssignment of propTypeAssignments) {
53-
const componentName = helpers.getComponentName(propTypeAssignment, sourceFile);
52+
const componentName = helpers.getComponentName(propTypeAssignment, newSourceFile);
5453

55-
const funcComponent = (_.find(statements, s => {
54+
const funcComponent = (_.find(newSourceFile.statements, s => {
5655
return (
5756
(ts.isFunctionDeclaration(s) && s.name !== undefined && s.name.getText() === componentName) ||
5857
(ts.isVariableStatement(s) && s.declarationList.declarations[0].name.getText() === componentName)
5958
);
6059
}) as {}) as ts.FunctionDeclaration | ts.VariableStatement; // Type weirdness
6160

6261
if (funcComponent) {
63-
return visitReactStatelessComponent(funcComponent, propTypeAssignment, sourceFile);
62+
newSourceFile = visitReactStatelessComponent(funcComponent, propTypeAssignment, newSourceFile);
6463
}
6564
}
6665

67-
return sourceFile;
66+
return newSourceFile;
6867
}
6968

7069
function visitReactStatelessComponent(

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

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
type Foo = {foo: string} & {bar: number};
2+
3+
type Bar = {foo: number} & {bar: string};

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

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
type Foo = {
2+
foo: string;
3+
bar: number;
4+
};
5+
type Bar = {
6+
foo: number;
7+
bar: string;
8+
};

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

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
const Hello = ({ message }) => {
2+
return <div>hello {message}</div>
3+
};
4+
5+
const Hey = ({ name }) => {
6+
return <div>hey, {name}</div>
7+
}
8+
9+
Hey.propTypes = {
10+
message: React.PropTypes.string,
11+
}
12+
13+
Hello.propTypes = {
14+
message: React.PropTypes.string,
15+
}
16+
17+
export default class MyComponent extends React.Component {
18+
render() {
19+
return <button onClick={this.onclick.bind(this)} />;
20+
}
21+
22+
onclick() {
23+
this.setState({foo: 1, bar: 2})
24+
}
25+
}
26+
27+
export class AnotherComponent extends React.Component {
28+
static propTypes = {
29+
foo: React.PropTypes.string.isRequired,
30+
};
31+
render() {
32+
return <div />;
33+
}
34+
}

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

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
type HelloProps = {
2+
message?: string;
3+
};
4+
const Hello: React.SFC<HelloProps> = ({ message }) => {
5+
return <div>hello {message}</div>;
6+
};
7+
type HeyProps = {
8+
message?: string;
9+
};
10+
const Hey: React.SFC<HeyProps> = ({ name }) => {
11+
return <div>hey, {name}</div>;
12+
};
13+
type MyComponentState = {
14+
foo: number;
15+
bar: number;
16+
};
17+
export default class MyComponent extends React.Component<{
18+
}, MyComponentState> {
19+
render() {
20+
return <button onClick={this.onclick.bind(this)}/>;
21+
}
22+
onclick() {
23+
this.setState({ foo: 1, bar: 2 });
24+
}
25+
}
26+
type AnotherComponentProps = {
27+
foo: string;
28+
};
29+
export class AnotherComponent extends React.Component<AnotherComponentProps, {
30+
}> {
31+
render() {
32+
return <div />;
33+
}
34+
}

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

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import * as React from 'react';
2+
3+
export default class MyComponent extends React.Component {
4+
render() {
5+
return <button onClick={this.onclick.bind(this)} />;
6+
}
7+
8+
onclick() {
9+
this.setState({foo: 1, bar: 2})
10+
}
11+
}
12+
13+
export class AnotherComponent extends React.Component {
14+
static propTypes = {
15+
foo: React.PropTypes.string.isRequired,
16+
};
17+
render() {
18+
return <div />;
19+
}
20+
}

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

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import * as React from 'react';
2+
type MyComponentState = { foo: number; bar: number; };
3+
export default class MyComponent extends React.Component<{
4+
}, MyComponentState> {
5+
render() {
6+
return <button onClick={this.onclick.bind(this)}/>;
7+
}
8+
onclick() {
9+
this.setState({ foo: 1, bar: 2 });
10+
}
11+
}
12+
type AnotherComponentProps = {
13+
foo: string;
14+
};
15+
export class AnotherComponent extends React.Component<AnotherComponentProps, {
16+
}> {
17+
static propTypes = {
18+
foo: React.PropTypes.string.isRequired,
19+
};
20+
render() {
21+
return <div />;
22+
}
23+
}

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

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
class SomeComponent extends React.Component<{
2+
foo: number;
3+
}, {
4+
bar: string;
5+
}> {
6+
render() {
7+
return null;
8+
}
9+
}
10+
SomeComponent.propTypes = { foo: React.PropTypes.string };
11+
12+
class AnotherComponent extends React.Component<{
13+
baz: number;
14+
}> {
15+
render() {
16+
return null;
17+
}
18+
}
19+
AnotherComponent.propTypes = { baz: React.PropTypes.string };

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

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
class SomeComponent extends React.Component<{
2+
foo: number;
3+
}, {
4+
bar: string;
5+
}> {
6+
static propTypes = { foo: React.PropTypes.string };
7+
render() {
8+
return null;
9+
}
10+
}
11+
SomeComponent.propTypes = { foo: React.PropTypes.string };
12+
class AnotherComponent extends React.Component<{
13+
baz: number;
14+
}> {
15+
static propTypes = { baz: React.PropTypes.string };
16+
render() {
17+
return null;
18+
}
19+
}
20+
AnotherComponent.propTypes = { baz: React.PropTypes.string };

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

+10-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
11
class SomeComponent extends React.Component<{
2-
foo: number;
2+
foo: string;
3+
baz: string;
34
}, {
45
bar: string;
56
}> {
67
}
78
SomeComponent.propTypes = { foo: React.PropTypes.string };
8-
SomeComponent.propTypes.baz = React.PropTypes.string.isRequired;
9+
SomeComponent.propTypes.baz = React.PropTypes.string.isRequired;
10+
11+
12+
class AnotherComponent extends React.Component<{
13+
lol: number;
14+
}> {
15+
}
16+
AnotherComponent.propTypes = { lol: React.PropTypes.number };

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

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
class SomeComponent extends React.Component<{
2-
foo: number;
2+
foo: string;
3+
baz: string;
34
}, {
45
bar: string;
56
}> {
67
}
8+
class AnotherComponent extends React.Component<{
9+
lol: number;
10+
}> {
11+
}

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

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
class SomeComponent extends React.Component<{
2+
foo: number;
3+
}, {
4+
bar: string;
5+
}> {
6+
static propTypes = {
7+
foo: React.PropTypes.string,
8+
baz: React.PropTypes.string.isRequired,
9+
};
10+
}
11+
12+
class AnotherComponent extends React.Component<{
13+
foo: number;
14+
}, {
15+
bar: string;
16+
}> {
17+
static propTypes = {
18+
baz: React.PropTypes.string.isRequired,
19+
};
20+
}

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

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
class SomeComponent extends React.Component<{
2+
foo: number;
3+
}, {
4+
bar: string;
5+
}> {
6+
}
7+
class AnotherComponent extends React.Component<{
8+
foo: number;
9+
}, {
10+
bar: string;
11+
}> {
12+
}

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

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const Hello = ({ message }) => {
2+
return <div>hello {message}</div>
3+
};
4+
5+
function Hey({ name }) {
6+
return <div>hey, {name}</div>
7+
}
8+
9+
Hey.propTypes = {
10+
name: React.PropTypes.string.isRequired,
11+
}
12+
13+
Hello.propTypes = {
14+
message: React.PropTypes.string,
15+
}

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

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
type HelloProps = {
2+
message?: string;
3+
};
4+
const Hello: React.SFC<HelloProps> = ({ message }) => {
5+
return <div>hello {message}</div>;
6+
};
7+
type HeyProps = {
8+
name: string;
9+
};
10+
const Hey: React.SFC<HeyProps> = ({ name }) => {
11+
return <div>hey, {name}</div>;
12+
};
13+
Hey.propTypes = {
14+
name: React.PropTypes.string.isRequired,
15+
};
16+
Hello.propTypes = {
17+
message: React.PropTypes.string,
18+
};

0 commit comments

Comments
 (0)