Skip to content

Commit 6678115

Browse files
committed
Merge remote-tracking branch 'upstream/master' into solutionBuilder
2 parents 793ba10 + ab3ba29 commit 6678115

File tree

296 files changed

+15196
-369
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

296 files changed

+15196
-369
lines changed

README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ You probably don't want to give up type checking; that's rather the point of Typ
2929

3030
If you'd like to see a simple setup take a look at [our simple example](examples/fork-ts-checker-webpack-plugin/). For a more complex setup take a look at our [more involved example](examples/react-babel-karma-gulp).
3131

32-
### Yarn Plug’n’Play
32+
### Yarn Plug’n’Play
3333

3434
`ts-loader` supports [Yarn Plug’n’Play](https://yarnpkg.com/en/docs/pnp). The recommended way to integrate is using the [pnp-webpack-plugin](https://github.com/arcanis/pnp-webpack-plugin#ts-loader-integration).
3535

@@ -41,7 +41,7 @@ ts-loader works very well in combination with [babel](https://babeljs.io/) and [
4141

4242
It's possible to parallelise your builds. Historically this was useful from a performance perspective with webpack 2 / 3. [With webpack 4+ there appears to be significantly less benefit and perhaps even cost.](https://blog.johnnyreilly.com/2018/12/you-might-not-need-thread-loader.html)
4343

44-
But if that's what you want to do, there's two ways to achieve this: [happypack](https://github.com/amireh/happypack) and [thread-loader](https://github.com/webpack-contrib/thread-loader). Both should be used in combination with [fork-ts-checker-webpack-plugin](https://github.com/Realytics/fork-ts-checker-webpack-plugin) for typechecking.)
44+
But if that's what you want to do, there's two ways to achieve this: [happypack](https://github.com/amireh/happypack) and [thread-loader](https://github.com/webpack-contrib/thread-loader). Both should be used in combination with [fork-ts-checker-webpack-plugin](https://github.com/Realytics/fork-ts-checker-webpack-plugin) for typechecking.)
4545

4646
To read more, look at [this post](https://medium.com/webpack/typescript-webpack-super-pursuit-mode-83cc568dea79) by [@johnny_reilly](https://twitter.com/johnny_reilly) on the webpack publication channel.
4747

@@ -251,7 +251,7 @@ module.exports = {
251251

252252
If you're using [HappyPack](https://github.com/amireh/happypack) or [thread-loader](https://github.com/webpack-contrib/thread-loader) to parallise your builds then you'll need to set this to `true`. This implicitly sets `*transpileOnly*` to `true` and **WARNING!** stops registering **_all_** errors to webpack.
253253

254-
It's advisable to use this with the [fork-ts-checker-webpack-plugin](https://github.com/Realytics/fork-ts-checker-webpack-plugin) to get full type checking again. To see what this looks like in practice then either take a look at [our simple HappyPack example](examples/happypack) / [our simple thread-loader example](examples/thread-loader). For a more complex setup take a look at our [more involved HappyPack example](examples/react-babel-karma-gulp-happypack) / [more involved thread-loader example](examples/react-babel-karma-gulp-thread-loader). **_IMPORTANT_**: If you are using fork-ts-checker-webpack-plugin alongside HappyPack or thread-loader then ensure you set the `checkSyntacticErrors` option like so:
254+
It's advisable to use this with the [fork-ts-checker-webpack-plugin](https://github.com/Realytics/fork-ts-checker-webpack-plugin) to get full type checking again. To see what this looks like in practice then either take a look at [our simple thread-loader example](examples/thread-loader). **_IMPORTANT_**: If you are using fork-ts-checker-webpack-plugin alongside HappyPack or thread-loader then ensure you set the `checkSyntacticErrors` option like so:
255255

256256
```javascript
257257
new ForkTsCheckerWebpackPlugin({ checkSyntacticErrors: true })
@@ -614,7 +614,7 @@ It's worth noting that use of the `LoaderOptionsPlugin` is [only supposed to be
614614

615615
### Hot Module replacement
616616

617-
We do not support HMR as we did not yet work out a reliable way how to set it up.
617+
We do not support HMR as we did not yet work out a reliable way how to set it up.
618618

619619
If you want to give `webpack-dev-server` HMR a try, follow the official [webpack HMR guide](https://webpack.js.org/guides/hot-module-replacement/), then tweak a few config options for `ts-loader`:
620620

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
// Useful references:
2+
// https://www.npmjs.com/package/eslint-config-react-app
3+
// https://github.com/facebook/create-react-app/blob/master/packages/eslint-config-react-app/index.js
4+
// https://medium.com/@dors718/linting-your-react-typescript-project-with-eslint-and-prettier-2423170c3d42
5+
6+
const path = require('path');
7+
module.exports = {
8+
parser: '@typescript-eslint/parser', // Specifies the ESLint parser
9+
plugins: [
10+
'@typescript-eslint',
11+
'react'
12+
// 'prettier' commented as we don't want to run performance hog prettier through eslint as it's slow
13+
],
14+
env: {
15+
browser: true,
16+
jest: true
17+
},
18+
extends: [
19+
'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
20+
'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
21+
// 'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
22+
'prettier/react', // disables react-specific linting rules that conflict with prettier
23+
// 'plugin:prettier/recommended' // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
24+
],
25+
parserOptions: {
26+
project: path.resolve(__dirname, './tsconfig.json'),
27+
tsconfigRootDir: __dirname,
28+
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
29+
sourceType: 'module', // Allows for the use of imports
30+
ecmaFeatures: {
31+
jsx: true // Allows for the parsing of JSX
32+
}
33+
},
34+
rules: {
35+
// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
36+
// e.g. "@typescript-eslint/explicit-function-return-type": "off",
37+
'@typescript-eslint/explicit-function-return-type': 'off',
38+
'@typescript-eslint/no-unused-vars': 'off',
39+
40+
// These rules don't add much value, are better covered by TypeScript and good definition files
41+
'react/no-direct-mutation-state': 'off',
42+
'react/no-deprecated': 'off',
43+
'react/no-string-refs': 'off',
44+
'react/require-render-return': 'off',
45+
46+
// we want to check ".tsx" files
47+
'react/jsx-filename-extension': [
48+
'warn',
49+
{
50+
extensions: ['.jsx', '.tsx']
51+
}
52+
],
53+
'react/prop-types': 'off' // Is this incompatible with TS props type?
54+
},
55+
settings: {
56+
react: {
57+
version: 'detect' // Tells eslint-plugin-react to automatically detect the version of React to use
58+
}
59+
}
60+
};
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
semi: true,
3+
trailingComma: 'all',
4+
singleQuote: true,
5+
printWidth: 120,
6+
tabWidth: 4,
7+
};
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"eslint.autoFixOnSave": false,
3+
"eslint.validate": [
4+
"javascript",
5+
"javascriptreact",
6+
{ "language": "typescript", "autoFix": true },
7+
{ "language": "typescriptreact", "autoFix": true }
8+
]
9+
}

examples/fork-ts-checker-webpack-plugin/package.json

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,41 @@
66
"scripts": {
77
"start": "webpack-dev-server --progress --color --mode development --config webpack.config.development.js",
88
"prebuild": "rimraf ./dist/*",
9-
"build": "webpack --color --mode production --config webpack.config.production.js"
9+
"build": "webpack --color --mode production --config webpack.config.production.js",
10+
"lint": "eslint ./",
11+
"lint-rule-timings": "cross-env TIMING=1 yarn lint"
1012
},
1113
"devDependencies": {
12-
"@types/jest": "^23.0.0",
13-
"@types/react": "^16.0.0",
14-
"@types/react-dom": "^16.0.0",
15-
"@types/react-router": "^4.0.12",
14+
"@types/jest": "^24.0.0",
15+
"@types/react": "^16.8.0",
16+
"@types/react-dom": "^16.8.0",
17+
"@types/react-router": "^5.0.0",
1618
"@types/react-router-dom": "^4.0.5",
17-
"@types/react-test-renderer": "^16.0.0",
19+
"@types/react-test-renderer": "^16.8.0",
1820
"@types/react-transition-group": "^2.0.2",
21+
"@typescript-eslint/eslint-plugin": "^1.11.0",
22+
"@typescript-eslint/parser": "^1.11.0",
23+
"cross-env": "^5.2.0",
24+
"eslint": "^6.0.1",
25+
"eslint-config-prettier": "^6.0.0",
26+
"eslint-plugin-prettier": "^3.1.0",
27+
"eslint-plugin-react": "^7.14.2",
1928
"fork-ts-checker-notifier-webpack-plugin": "^1.0.0",
20-
"fork-ts-checker-webpack-plugin": "^1.0.0",
29+
"fork-ts-checker-webpack-plugin": "^1.4.0",
2130
"html-webpack-plugin": "next",
31+
"prettier": "1.18.2",
2232
"rimraf": "^2.6.1",
23-
"source-map-loader": "^0.2.1",
24-
"ts-loader": "^5.0.0",
33+
"ts-loader": "^6.0.0",
2534
"tslib": "^1.7.1",
26-
"tslint": "^5.5.0",
27-
"tslint-react": "^3.2.0",
2835
"typescript": "^3.0.0",
2936
"webpack": "^4.0.0",
3037
"webpack-cli": "^3.0.0",
3138
"webpack-dev-server": "^3.0.0"
3239
},
3340
"dependencies": {
34-
"core-js": "^2.4.1",
35-
"react": "^16.0.0",
36-
"react-dom": "^16.0.0",
41+
"core-js": "^3.0.0",
42+
"react": "^16.8.0",
43+
"react-dom": "^16.8.0",
3744
"whatwg-fetch": "^3.0.0"
3845
}
3946
}

examples/fork-ts-checker-webpack-plugin/src/app.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { Layout } from './components/layout';
33

4-
export const App: React.SFC<{}> = _props => (
4+
export const App: React.SFC = _props => (
55
<div className="ui container">
66
<Layout />
77
</div>
Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
11
import * as React from 'react';
22

3-
export const Layout: React.SFC<{}> = _props => (
4-
<h1>Heya, heya, heya!!</h1>
5-
);
3+
export const Layout: React.SFC = _props => <h1>Heya, heya, heya!!</h1>;

examples/fork-ts-checker-webpack-plugin/src/index.tsx

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,4 @@ import * as React from 'react';
22
import * as ReactDOM from 'react-dom';
33
import { App } from './app';
44

5-
const rootEl = document.getElementById('root');
6-
const render = (Component: React.SFC) =>
7-
ReactDOM.render(
8-
<Component />,
9-
rootEl
10-
);
11-
12-
render(App);
5+
ReactDOM.render(<App />, document.getElementById('root'));
Lines changed: 25 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,26 @@
11
{
2-
"include": [
3-
"src/**/*.ts",
4-
"src/**/*.tsx"
5-
],
6-
"compilerOptions": {
7-
"allowSyntheticDefaultImports": false,
8-
"target": "es5",
9-
"downlevelIteration": true,
10-
"importHelpers": true,
11-
"sourceMap": true,
12-
"module": "esnext",
13-
"moduleResolution": "node",
14-
"jsx": "react",
15-
"allowJs": false,
16-
"checkJs": false,
17-
"lib": [
18-
"dom",
19-
"es2015",
20-
"es2016",
21-
"es2017",
22-
"esnext"
23-
],
24-
"forceConsistentCasingInFileNames": true,
25-
"experimentalDecorators": true,
26-
"noImplicitAny": true,
27-
"noUnusedParameters": true,
28-
"noImplicitReturns": true,
29-
"noImplicitThis": true,
30-
"noUnusedLocals": true,
31-
"skipLibCheck": true,
32-
"strictNullChecks": false,
33-
"suppressImplicitAnyIndexErrors": true
34-
}
35-
}
2+
"compilerOptions": {
3+
"allowSyntheticDefaultImports": false,
4+
"target": "es5",
5+
"downlevelIteration": true,
6+
"importHelpers": true,
7+
"sourceMap": true,
8+
"module": "esnext",
9+
"moduleResolution": "node",
10+
"jsx": "react",
11+
"allowJs": false,
12+
"checkJs": false,
13+
"lib": ["dom", "es2015", "es2016", "es2017", "esnext"],
14+
"forceConsistentCasingInFileNames": true,
15+
"experimentalDecorators": true,
16+
"noImplicitAny": true,
17+
"noUnusedParameters": true,
18+
"noImplicitReturns": true,
19+
"noImplicitThis": true,
20+
"noUnusedLocals": true,
21+
"skipLibCheck": true,
22+
"strictNullChecks": false,
23+
"suppressImplicitAnyIndexErrors": true,
24+
"types": ["jest"]
25+
}
26+
}

examples/fork-ts-checker-webpack-plugin/tslint.json

Lines changed: 0 additions & 127 deletions
This file was deleted.

0 commit comments

Comments
 (0)