Skip to content

Commit 623cffe

Browse files
authored
Add prettier precommit hook for source (lyft#21)
1 parent ca89c56 commit 623cffe

13 files changed

+669
-338
lines changed

.prettierignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
test/
2+
dist/

.prettierrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"singleQuote": true,
3+
"printWidth": 120,
4+
"tabWidth": 4,
5+
"trailingComma": "all"
6+
}

.vscode/launch.json

+2-4
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,7 @@
1313
"preLaunchTask": "compile",
1414
"program": "${workspaceRoot}/node_modules/.bin/jest",
1515
"request": "launch",
16-
"runtimeArgs": [
17-
18-
],
16+
"runtimeArgs": [],
1917
"runtimeExecutable": null,
2018
"sourceMaps": true,
2119
"stopOnEntry": false,
@@ -28,4 +26,4 @@
2826
"port": 5858
2927
}
3028
]
31-
}
29+
}

.vscode/tasks.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,4 @@
77
"args": ["-p", "."],
88
"showOutput": "silent",
99
"problemMatcher": "$tsc"
10-
}
10+
}

LICENSE.md

+183-184
Large diffs are not rendered by default.

README.md

+44-34
Original file line numberDiff line numberDiff line change
@@ -11,53 +11,62 @@ Transforms React code written in JavaScript to TypeScript.
1111
* Hoist large interfaces for props and state out of `React.Component<P, S>` into declared types
1212
* Convert functional components with `PropTypes` property to TypeScript and uses propTypes to generate function type declaration
1313

14-
1514
## Example
1615

1716
**input**
17+
1818
```jsx
1919
class MyComponent extends React.Component {
20-
static propTypes = {
21-
prop1: React.PropTypes.string.isRequired,
22-
prop2: React.PropTypes.number
23-
}
24-
constructor() {
25-
super();
26-
this.state = { foo: 1, bar: 'str' };
27-
}
28-
render() {
29-
return <div>{this.state.foo}, {this.state.bar}, {this.state.baz}</div>
30-
}
31-
onClick() {
32-
this.setState({ baz: 3 })
33-
}
20+
static propTypes = {
21+
prop1: React.PropTypes.string.isRequired,
22+
prop2: React.PropTypes.number,
23+
};
24+
constructor() {
25+
super();
26+
this.state = { foo: 1, bar: 'str' };
27+
}
28+
render() {
29+
return (
30+
<div>
31+
{this.state.foo}, {this.state.bar}, {this.state.baz}
32+
</div>
33+
);
34+
}
35+
onClick() {
36+
this.setState({ baz: 3 });
37+
}
3438
}
3539
```
3640

3741
**output**
42+
3843
```tsx
3944
type MyComponentProps = {
40-
prop1: string;
41-
prop2?: number;
42-
}
45+
prop1: string;
46+
prop2?: number;
47+
};
4348

4449
type MyComponentState = {
45-
foo: number;
46-
bar: string;
47-
baz: number;
48-
}
50+
foo: number;
51+
bar: string;
52+
baz: number;
53+
};
4954

5055
class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
51-
constructor() {
52-
super();
53-
this.state = { foo: 1, bar: 'str' };
54-
}
55-
render() {
56-
return <div>{this.state.foo}, {this.state.bar}, {this.state.baz}</div>
57-
}
58-
onClick() {
59-
this.setState({ baz: 3 })
60-
}
56+
constructor() {
57+
super();
58+
this.state = { foo: 1, bar: 'str' };
59+
}
60+
render() {
61+
return (
62+
<div>
63+
{this.state.foo}, {this.state.bar}, {this.state.baz}
64+
</div>
65+
);
66+
}
67+
onClick() {
68+
this.setState({ baz: 3 });
69+
}
6170
}
6271
```
6372

@@ -73,8 +82,8 @@ npm install -g react-js-to-ts
7382
react-js-to-ts my-react-js-file.js
7483
```
7584

76-
7785
### VSCode plugin
86+
7887
details
7988
[Download from VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=mohsen1.react-javascript-to-typescript-transform-vscode#overview)
8089

@@ -91,13 +100,14 @@ npm test
91100
#### Watch mode
92101

93102
Pass `-w` to `npm test`
103+
94104
```
95105
npm test -- -w
96106
```
97107

98108
#### Only a single test case
99109

100-
Pass `-t` with transform name and case name space separated to `npm test`
110+
Pass `-t` with transform name and case name space separated to `npm test`
101111

102112
```
103113
npm test -- -t "react-js-make-props-and-state-transform propless-stateless"

package.json

+54-49
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,57 @@
11
{
2-
"name": "react-js-to-ts",
3-
"version": "1.2.0",
4-
"description": "Convert React code from JavaScript to TypeScript",
5-
"main": "dist/index.js",
6-
"scripts": {
7-
"pretest": "npm run build",
8-
"test": "jest",
9-
"coverage": "jest --coverage",
10-
"posttest": "npm run lint",
11-
"prelint": "npm run clean",
12-
"lint": "tslint --type-check --project tsconfig.json --format codeFrame --exclude test/**/*.tsx",
13-
"prepublish": "npm run build",
14-
"clean": "rm -rf dist",
15-
"prebuild": "npm run clean",
16-
"build": "tsc --pretty"
17-
},
18-
"jest": {
19-
"mapCoverage": true,
20-
"transform": {
21-
".ts": "<rootDir>/node_modules/ts-jest/preprocessor.js"
2+
"name": "react-js-to-ts",
3+
"version": "1.2.0",
4+
"description": "Convert React code from JavaScript to TypeScript",
5+
"main": "dist/index.js",
6+
"scripts": {
7+
"pretest": "npm run build",
8+
"test": "jest",
9+
"coverage": "jest --coverage",
10+
"posttest": "npm run lint",
11+
"prelint": "npm run clean",
12+
"lint": "tslint --type-check --project tsconfig.json --format codeFrame --exclude test/**/*.tsx",
13+
"prepublish": "npm run build",
14+
"clean": "rm -rf dist",
15+
"prebuild": "npm run clean",
16+
"build": "tsc --pretty",
17+
"precommit": "lint-staged",
18+
"prettier": "prettier --write *.{js,json,css,md,ts,tsx}"
2219
},
23-
"testRegex": "test/runner.ts",
24-
"moduleFileExtensions": [
25-
"ts",
26-
"js"
27-
]
28-
},
29-
"bin": "dist/cli.js",
30-
"author": "Mohsen Azimi <me@azimi.me>",
31-
"license": "Apache-2.0",
32-
"dependencies": {
33-
"chalk": "^1.1.3",
34-
"commander": "^2.10.0",
35-
"glob": "^7.1.2",
36-
"lodash": "^4.17.4",
37-
"typescript": "^2.6.2"
38-
},
39-
"devDependencies": {
40-
"@types/chalk": "^0.4.31",
41-
"@types/commander": "^2.9.1",
42-
"@types/glob": "^5.0.30",
43-
"@types/jest": "^20.0.2",
44-
"@types/lodash": "^4.14.93",
45-
"@types/node": "^8.0.2",
46-
"@types/react": "^15.0.31",
47-
"jest": "^20.0.4",
48-
"ts-jest": "^20.0.6",
49-
"ts-node": "^3.1.0",
50-
"tslint": "^5.2.0"
51-
}
20+
"jest": {
21+
"mapCoverage": true,
22+
"transform": {
23+
".ts": "<rootDir>/node_modules/ts-jest/preprocessor.js"
24+
},
25+
"testRegex": "test/runner.ts",
26+
"moduleFileExtensions": ["ts", "js"]
27+
},
28+
"lint-staged": {
29+
"*.{js,json,css,md,ts,tsx}": ["npm run prettier", "git add"]
30+
},
31+
"bin": "dist/cli.js",
32+
"author": "Mohsen Azimi <me@azimi.me>",
33+
"license": "Apache-2.0",
34+
"dependencies": {
35+
"chalk": "^1.1.3",
36+
"commander": "^2.10.0",
37+
"glob": "^7.1.2",
38+
"lodash": "^4.17.4",
39+
"typescript": "^2.6.2"
40+
},
41+
"devDependencies": {
42+
"@types/chalk": "^0.4.31",
43+
"@types/commander": "^2.9.1",
44+
"@types/glob": "^5.0.30",
45+
"@types/jest": "^20.0.2",
46+
"@types/lodash": "^4.14.93",
47+
"@types/node": "^8.0.2",
48+
"@types/react": "^15.0.31",
49+
"husky": "^0.14.3",
50+
"jest": "^20.0.4",
51+
"lint-staged": "^6.0.1",
52+
"prettier": "^1.10.2",
53+
"ts-jest": "^20.0.6",
54+
"ts-node": "^3.1.0",
55+
"tslint": "^5.2.0"
56+
}
5257
}

src/cli.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ program
1111
.version('1.0.0')
1212
.usage('[options] <filename or glob>')
1313
.command('* <glob>')
14-
.action((globPattern) => {
14+
.action(globPattern => {
1515
if (!globPattern) {
1616
throw new Error('You must provide a file name or glob pattern to transform');
1717
}
@@ -24,7 +24,7 @@ program
2424
fs.renameSync(filePath, newPath);
2525
const result = run(newPath);
2626
fs.writeFileSync(newPath, result);
27-
} catch(error) {
27+
} catch (error) {
2828
console.warn(`Failed to convert ${file}`);
2929
console.warn(error);
3030
}

src/compiler.ts

+6-5
Original file line numberDiff line numberDiff line change
@@ -22,20 +22,21 @@ export function compile(filePath: string, factoryFactories: TransformFactoryFact
2222
factoryFactories.map(factoryFactory => factoryFactory(typeChecker), compilerOptions),
2323
);
2424

25-
2625
if (result.diagnostics && result.diagnostics.length) {
27-
console.log(chalk.yellow(`
26+
console.log(
27+
chalk.yellow(`
2828
======================= Diagnostics for ${filePath} =======================
29-
`));
29+
`),
30+
);
3031
for (const diag of result.diagnostics) {
3132
if (diag.file && diag.start) {
3233
const pos = diag.file.getLineAndCharacterOfPosition(diag.start);
33-
console.log(`(${pos.line}, ${pos.character}) ${diag.messageText}`)
34+
console.log(`(${pos.line}, ${pos.character}) ${diag.messageText}`);
3435
}
3536
}
3637
}
3738

38-
const printer = ts.createPrinter()
39+
const printer = ts.createPrinter();
3940

4041
// TODO: fix the index 0 access... What if program have multiple source files?
4142
return printer.printNode(ts.EmitHint.SourceFile, result.transformed[0], sourceFiles[0]);

src/index.ts

+6-18
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,12 @@
11
import * as ts from 'typescript';
22

33
import { compile } from './compiler';
4-
import {
5-
reactJSMakePropsAndStateInterfaceTransformFactoryFactory,
6-
} from './transforms/react-js-make-props-and-state-transform';
7-
import {
8-
reactHoistGenericsTransformFactoryFactory,
9-
} from './transforms/react-hoist-generics-transform';
10-
import {
11-
reactRemovePropTypesAssignmentTransformFactoryFactory,
12-
} from './transforms/react-remove-prop-types-assignment-transform';
13-
import {
14-
reactMovePropTypesToClassTransformFactoryFactory,
15-
} from './transforms/react-move-prop-types-to-class-transform';
16-
import {
17-
collapseIntersectionInterfacesTransformFactoryFactory,
18-
} from './transforms/collapse-intersection-interfaces-transform';
19-
import {
20-
reactRemoveStaticPropTypesMemberTransformFactoryFactory,
21-
} from './transforms/react-remove-static-prop-types-member-transform';
4+
import { reactJSMakePropsAndStateInterfaceTransformFactoryFactory } from './transforms/react-js-make-props-and-state-transform';
5+
import { reactHoistGenericsTransformFactoryFactory } from './transforms/react-hoist-generics-transform';
6+
import { reactRemovePropTypesAssignmentTransformFactoryFactory } from './transforms/react-remove-prop-types-assignment-transform';
7+
import { reactMovePropTypesToClassTransformFactoryFactory } from './transforms/react-move-prop-types-to-class-transform';
8+
import { collapseIntersectionInterfacesTransformFactoryFactory } from './transforms/collapse-intersection-interfaces-transform';
9+
import { reactRemoveStaticPropTypesMemberTransformFactoryFactory } from './transforms/react-remove-static-prop-types-member-transform';
2210

2311
export {
2412
reactMovePropTypesToClassTransformFactoryFactory,

tsconfig.json

+3-11
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,7 @@
1111
"outDir": "dist",
1212
"sourceRoot": "../src"
1313
},
14-
"exclude": [
15-
"node_modules",
16-
"test"
17-
],
18-
"types": [
19-
"node",
20-
"jest"
21-
],
22-
"lib": [
23-
"es2017"
24-
]
14+
"exclude": ["node_modules", "test"],
15+
"types": ["node", "jest"],
16+
"lib": ["es2017"]
2517
}

tslint.json

+6-20
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,11 @@
44
},
55
"defaultSeverity": "warning",
66
"rules": {
7-
"quotemark": [
8-
true,
9-
"single",
10-
"avoid-escape"
11-
],
12-
"max-line-length": [
13-
true,
14-
120
15-
],
16-
"indent": [
17-
"error",
18-
4
19-
],
20-
"only-arrow-functions": [
21-
false
22-
],
7+
"quotemark": [true, "single", "avoid-escape"],
8+
"max-line-length": [true, 120],
9+
"indent": ["error", 4],
10+
"only-arrow-functions": [false],
2311
// Disabled rules
24-
"typedef": [
25-
false
26-
]
12+
"typedef": [false]
2713
}
28-
}
14+
}

0 commit comments

Comments
 (0)