-
- {functionName}
-
+ {functionName}
- {codeBlockProps &&
+ {codeBlockProps && (
{'View ' + (compiled ? 'source' : 'compiled')}
- }
+
+ )}
);
}
diff --git a/packages/react-error-overlay/src/containers/StackTrace.js b/packages/react-error-overlay/src/containers/StackTrace.js
index 4cb20bce1..8d81cc942 100644
--- a/packages/react-error-overlay/src/containers/StackTrace.js
+++ b/packages/react-error-overlay/src/containers/StackTrace.js
@@ -84,11 +84,7 @@ class StackTrace extends Component {
}
render() {
- return (
-
- {this.renderFrames()}
-
- );
+ return {this.renderFrames()}
;
}
}
diff --git a/packages/react-error-overlay/src/utils/parser.js b/packages/react-error-overlay/src/utils/parser.js
index 1cbee1d1c..6bc65ed8d 100644
--- a/packages/react-error-overlay/src/utils/parser.js
+++ b/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));
}
diff --git a/packages/react-error-overlay/src/utils/warnings.js b/packages/react-error-overlay/src/utils/warnings.js
index bcc54ceb7..1cdb53dc0 100644
--- a/packages/react-error-overlay/src/utils/warnings.js
+++ b/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(
diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js
index e860d9b04..0d85ff15b 100644
--- a/packages/react-scripts/config/paths.js
+++ b/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')),
diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index 07c0a3adf..6c619f4f4 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/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.
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 9582ee731..a3a3da9ca 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/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.
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 7d690ff5e..8af214eb6 100644
--- a/packages/react-scripts/package.json
+++ b/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",
diff --git a/packages/react-scripts/scripts/utils/createJestConfig.js b/packages/react-scripts/scripts/utils/createJestConfig.js
index c5886ce0c..f584331fd 100644
--- a/packages/react-scripts/scripts/utils/createJestConfig.js
+++ b/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;
pFad - Phonifier reborn
Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies:
Alternative Proxy
pFad Proxy
pFad v3 Proxy
pFad v4 Proxy