Add support for fork-ts-checker-webpack-plugin #160

packages/create-react-app/createReactApp.js

@@ -455,7 +455,9 @@ function checkNpmVersion() {
   let hasMinNpm = false;
   let npmVersion = null;
   try {
-    npmVersion = execSync('npm --version').toString().trim();
+    npmVersion = execSync('npm --version')
+      .toString()
+      .trim();
     hasMinNpm = semver.gte(npmVersion, '3.0.0');
   } catch (err) {
     // ignore

packages/react-dev-utils/launchEditor.js

@@ -43,7 +43,7 @@ const COMMON_EDITORS_OSX = {
   '/Applications/CLion.app/Contents/MacOS/clion':
     '/Applications/CLion.app/Contents/MacOS/clion',
   '/Applications/IntelliJ IDEA.app/Contents/MacOS/idea':
-      '/Applications/IntelliJ IDEA.app/Contents/MacOS/idea',
+    '/Applications/IntelliJ IDEA.app/Contents/MacOS/idea',
   '/Applications/PhpStorm.app/Contents/MacOS/phpstorm':
     '/Applications/PhpStorm.app/Contents/MacOS/phpstorm',
   '/Applications/PyCharm.app/Contents/MacOS/pycharm':
@@ -53,7 +53,7 @@ const COMMON_EDITORS_OSX = {
   '/Applications/RubyMine.app/Contents/MacOS/rubymine':
     '/Applications/RubyMine.app/Contents/MacOS/rubymine',
   '/Applications/WebStorm.app/Contents/MacOS/webstorm':
-      '/Applications/WebStorm.app/Contents/MacOS/webstorm',
+    '/Applications/WebStorm.app/Contents/MacOS/webstorm',
 };
 
 const COMMON_EDITORS_WIN = [

packages/react-error-overlay/src/components/Header.js

@@ -29,11 +29,7 @@ type HeaderPropType = {|
 |};
 
 function Header(props: HeaderPropType) {
-  return (
-    <div style={headerStyle}>
-      {props.headerText}
-    </div>
-  );
+  return <div style={headerStyle}>{props.headerText}</div>;
 }
 
 export default Header;

packages/react-error-overlay/src/containers/RuntimeErrorContainer.js

@@ -54,13 +54,14 @@ class RuntimeErrorContainer extends PureComponent {
     return (
       <ErrorOverlay shortcutHandler={this.shortcutHandler}>
         <CloseButton close={close} />
-        {totalErrors > 1 &&
+        {totalErrors > 1 && (
           <NavigationBar
             currentError={this.state.currentIndex + 1}
             totalErrors={totalErrors}
             previous={this.previous}
             next={this.next}
-          />}
+          />
+        )}
         <RuntimeError
           errorRecord={errorRecords[this.state.currentIndex]}
           launchEditorEndpoint={this.props.launchEditorEndpoint}

packages/react-error-overlay/src/containers/StackFrame.js

@@ -155,9 +155,7 @@ class StackFrame extends Component {
     const canOpenInEditor = this.canOpenInEditor();
     return (
       <div>
-        <div>
-          {functionName}
-        </div>
+        <div>{functionName}</div>
         <div style={linkStyle}>
           <a
             style={canOpenInEditor ? anchorStyle : null}
@@ -168,7 +166,7 @@ class StackFrame extends Component {
             {url}
           </a>
         </div>
-        {codeBlockProps &&
+        {codeBlockProps && (
           <span>
             <a
               onClick={canOpenInEditor ? this.openInEditor : null}
@@ -179,7 +177,8 @@ class StackFrame extends Component {
             <button style={toggleStyle} onClick={this.toggleCompiled}>
               {'View ' + (compiled ? 'source' : 'compiled')}
             </button>
-          </span>}
+          </span>
+        )}
       </div>
     );
   }

packages/react-error-overlay/src/containers/StackTrace.js

@@ -84,11 +84,7 @@ class StackTrace extends Component {
   }
 
   render() {
-    return (
-      <div style={traceStyle}>
-        {this.renderFrames()}
-      </div>
-    );
+    return <div style={traceStyle}>{this.renderFrames()}</div>;
   }
 }
 

packages/react-error-overlay/src/utils/parser.js

@@ -13,13 +13,16 @@ import StackFrame from './stack-frame';
 const regexExtractLocation = /\(?(.+?)(?::(\d+))?(?::(\d+))?\)?$/;
 
 function extractLocation(token: string): [string, number, number] {
-  return regexExtractLocation.exec(token).slice(1).map(v => {
-    const p = Number(v);
-    if (!isNaN(p)) {
-      return p;
-    }
-    return v;
-  });
+  return regexExtractLocation
+    .exec(token)
+    .slice(1)
+    .map(v => {
+      const p = Number(v);
+      if (!isNaN(p)) {
+        return p;
+      }
+      return v;
+    });
 }
 
 const regexValidFrame_Chrome = /^\s*(at|in)\s.+(:\d+)/;
@@ -55,7 +58,10 @@ function parseStack(stack: string[]): StackFrame[] {
         if (e.indexOf('(at ') !== -1) {
           e = e.replace(/\(at /, '(');
         }
-        const data = e.trim().split(/\s+/g).slice(1);
+        const data = e
+          .trim()
+          .split(/\s+/g)
+          .slice(1);
         const last = data.pop();
         return new StackFrame(data.join(' ') || null, ...extractLocation(last));
       }

packages/react-error-overlay/src/utils/warnings.js

@@ -11,7 +11,10 @@
 import type { ReactFrame } from '../effects/proxyConsole';
 
 function stripInlineStacktrace(message: string): string {
-  return message.split('\n').filter(line => !line.match(/^\s*in/)).join('\n'); // "  in Foo"
+  return message
+    .split('\n')
+    .filter(line => !line.match(/^\s*in/))
+    .join('\n'); // "  in Foo"
 }
 
 function massage(

packages/react-scripts/config/paths.js

@@ -114,6 +114,7 @@ if (
     testsSetup: resolveOwn('template/src/setupTests.ts'),
     appNodeModules: resolveOwn('node_modules'),
     appTsConfig: resolveOwn('template/tsconfig.json'),
+    appTsLint: resolveOwn('template/tslint.json'),
     appTsTestConfig: resolveOwn('template/tsconfig.test.json'),
     publicUrl: getPublicUrl(resolveOwn('package.json')),
     servedPath: getServedPath(resolveOwn('package.json')),

packages/react-scripts/config/webpack.config.dev.js

@@ -18,6 +18,7 @@ const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const getClientEnvironment = require('./env');
 const paths = require('./paths');
 
@@ -134,14 +135,6 @@ module.exports = {
       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
       // { parser: { requireEnsure: false } },
 
-      // First, run the linter.
-      // It's important to do this before Babel processes the JS.
-      {
-        test: /\.(ts|tsx)$/,
-        loader: require.resolve('tslint-loader'),
-        enforce: 'pre',
-        include: paths.appSrc,
-      },
       {
         test: /\.js$/,
         loader: require.resolve('source-map-loader'),
@@ -168,7 +161,15 @@ module.exports = {
           {
             test: /\.(ts|tsx)$/,
             include: paths.appSrc,
-            loader: require.resolve('ts-loader'),
+            use: [
+              {
+                loader: require.resolve('ts-loader'),
+                options: {
+                  // disable type checker - we will use it in fork plugin
+                  transpileOnly: true,
+                },
+              },
+            ],
           },
           // "postcss" loader applies autoprefixer to our CSS.
           // "css" loader resolves paths in CSS and adds assets as dependencies.
@@ -262,6 +263,13 @@ module.exports = {
     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
     // You can remove this if you don't use Moment.js:
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+    // Perform type checking and linting in a separate process to speed up compilation
+    new ForkTsCheckerWebpackPlugin({
+      async: false,
+      watch: paths.appSrc,
+      tsconfig: paths.appTsConfig,
+      tslint: paths.appTsLint,
+    }),
   ],
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.

packages/react-scripts/config/webpack.config.prod.js

@@ -19,6 +19,7 @@ const ManifestPlugin = require('webpack-manifest-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const paths = require('./paths');
 const getClientEnvironment = require('./env');
 
@@ -138,14 +139,6 @@ module.exports = {
       // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
       // { parser: { requireEnsure: false } },
 
-      // First, run the linter.
-      // It's important to do this before Typescript runs.
-      {
-        test: /\.(ts|tsx)$/,
-        loader: require.resolve('tslint-loader'),
-        enforce: 'pre',
-        include: paths.appSrc,
-      },
       {
         test: /\.js$/,
         loader: require.resolve('source-map-loader'),
@@ -167,11 +160,19 @@ module.exports = {
               name: 'static/media/[name].[hash:8].[ext]',
             },
           },
-          //Compile .tsx?
+          // Compile .tsx?
           {
             test: /\.(ts|tsx)$/,
             include: paths.appSrc,
-            loader: require.resolve('ts-loader')
+            use: [
+              {
+                loader: require.resolve('ts-loader'),
+                options: {
+                  // disable type checker - we will use it in fork plugin
+                  transpileOnly: true,
+                },
+              },
+            ],
           },
           // The notation here is somewhat confusing.
           // "postcss" loader applies autoprefixer to our CSS.
@@ -341,6 +342,12 @@ module.exports = {
     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
     // You can remove this if you don't use Moment.js:
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+    // Perform type checking and linting in a separate process to speed up compilation
+    new ForkTsCheckerWebpackPlugin({
+      async: false,
+      tsconfig: paths.appTsConfig,
+      tslint: paths.appTsLint,
+    }),
   ],
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.

packages/react-scripts/package.json

@@ -28,6 +28,7 @@
     "dotenv": "4.0.0",
     "extract-text-webpack-plugin": "3.0.0",
     "file-loader": "0.11.2",
+    "fork-ts-checker-webpack-plugin": "^0.2.8",
     "fs-extra": "3.0.1",
     "html-webpack-plugin": "2.29.0",
     "jest": "20.0.4",
@@ -40,7 +41,6 @@
     "ts-jest": "^20.0.7",
     "ts-loader": "^2.2.1",
     "tslint": "^5.2.0",
-    "tslint-loader": "^3.5.3",
     "tslint-react": "^3.0.0",
     "typescript": "~2.4.0",
     "source-map-loader": "^0.2.1",

packages/react-scripts/scripts/utils/createJestConfig.js

@@ -54,13 +54,13 @@ module.exports = (resolve, rootDir) => {
       'web.jsx',
       'jsx',
       'json',
-      'node'
+      'node',
     ],
     globals: {
       'ts-jest': {
         tsConfigFile: paths.appTsTestConfig,
       },
-    }
+    },
   };
   if (rootDir) {
     config.rootDir = rootDir;