From c064f0b67f00953607301551cbb0778f29c75dfc Mon Sep 17 00:00:00 2001 From: "Morten N.O. Henriksen" Date: Wed, 4 Nov 2020 00:49:02 +0100 Subject: [PATCH 1/2] Update fork-ts-checker-webpack-plugin@5.2.1 References: * [hook rename](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/issues/490) * [include/exclude](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/issues/450) and [issue options](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#issues-options) * [release notes 5.0.0](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/releases/tag/v5.0.0) --- .../react-dev-utils/WebpackDevServerUtils.js | 2 +- packages/react-dev-utils/package.json | 2 +- .../react-scripts/config/webpack.config.js | 55 ++++++++++++------- 3 files changed, 37 insertions(+), 22 deletions(-) diff --git a/packages/react-dev-utils/WebpackDevServerUtils.js b/packages/react-dev-utils/WebpackDevServerUtils.js index a4aafedd0a1..3c2d0a9e39f 100644 --- a/packages/react-dev-utils/WebpackDevServerUtils.js +++ b/packages/react-dev-utils/WebpackDevServerUtils.js @@ -148,7 +148,7 @@ function createCompiler({ forkTsCheckerWebpackPlugin .getCompilerHooks(compiler) - .receive.tap('afterTypeScriptCheck', (diagnostics, lints) => { + .issues.tap('afterTypeScriptCheck', (diagnostics, lints) => { const allMsgs = [...diagnostics, ...lints]; const format = message => `${message.file}\n${typescriptFormatter(message, true)}`; diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index 972539eb17b..773e76eec37 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -62,7 +62,7 @@ "escape-string-regexp": "2.0.0", "filesize": "6.1.0", "find-up": "4.1.0", - "fork-ts-checker-webpack-plugin": "4.1.6", + "fork-ts-checker-webpack-plugin": "5.2.1", "global-modules": "2.0.0", "globby": "11.0.1", "gzip-size": "5.1.1", diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index 8efff0b96c7..905b05d58c1 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -718,31 +718,46 @@ module.exports = function (webpackEnv) { // TypeScript type checking useTypeScript && new ForkTsCheckerWebpackPlugin({ - typescript: resolve.sync('typescript', { - basedir: paths.appNodeModules, - }), async: isEnvDevelopment, - checkSyntacticErrors: true, - resolveModuleNameModule: process.versions.pnp - ? `${__dirname}/pnpTs.js` - : undefined, - resolveTypeReferenceDirectiveModule: process.versions.pnp - ? `${__dirname}/pnpTs.js` - : undefined, - tsconfig: paths.appTsConfig, - reportFiles: [ + typescript: { + typescriptPath: resolve.sync('typescript', { + basedir: paths.appNodeModules, + }), + configOverwrite: { + compilerOptions: { + sourceMap: isEnvProduction + ? shouldUseSourceMap + : isEnvDevelopment, + skipLibCheck: true, + inlineSourceMap: false, + declarationMap: false, + noEmit: true, + incremental: true, + }, + }, + context: paths.appPath, + diagnosticOptions: { + syntactic: true, + }, + mode: 'write-references', + // profile: true, + }, + issue: { // This one is specifically to match during CI tests, // as micromatch doesn't match // '../cra-template-typescript/template/src/App.tsx' // otherwise. - '../**/src/**/*.{ts,tsx}', - '**/src/**/*.{ts,tsx}', - '!**/src/**/__tests__/**', - '!**/src/**/?(*.)(spec|test).*', - '!**/src/setupProxy.*', - '!**/src/setupTests.*', - ], - silent: true, + include: ['../**/src/**/*.{ts,tsx}', '**/src/**/*.{ts,tsx}'], + exclude: [ + '**/src/**/__tests__/**', + '**/src/**/?(*.)(spec|test).*', + '**/src/setupProxy.*', + '**/src/setupTests.*', + ], + }, + logger: { + infrastructure: 'silent', + }, // The formatter is invoked directly in WebpackDevServerUtils during development formatter: isEnvProduction ? typescriptFormatter : undefined, }), From ac5c2e339f72cb3952bd939eecd8001944ed344b Mon Sep 17 00:00:00 2001 From: "Morten N.O. Henriksen" Date: Sat, 5 Dec 2020 10:26:45 +0100 Subject: [PATCH 2/2] Update fork-ts-checker-webpack-plugin 6.0.5 --- packages/react-dev-utils/README.md | 6 +- .../react-dev-utils/WebpackDevServerUtils.js | 69 ++----------------- packages/react-dev-utils/package.json | 2 +- .../react-dev-utils/typescriptFormatter.js | 45 ------------ .../react-scripts/config/webpack.config.js | 10 +-- packages/react-scripts/scripts/start.js | 2 - 6 files changed, 14 insertions(+), 120 deletions(-) delete mode 100644 packages/react-dev-utils/typescriptFormatter.js diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md index 6a6ab28b32f..262b9a51685 100644 --- a/packages/react-dev-utils/README.md +++ b/packages/react-dev-utils/README.md @@ -231,11 +231,11 @@ var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages'); var compiler = webpack(config); -compiler.hooks.invalid.tap('invalid', function() { +compiler.hooks.invalid.tap('invalid', function () { console.log('Compiling...'); }); -compiler.hooks.done.tap('done', function(stats) { +compiler.hooks.done.tap('done', function (stats) { var rawMessages = stats.toJson({}, true); var messages = formatWebpackMessages(rawMessages); if (!messages.errors.length && !messages.warnings.length) { @@ -338,11 +338,9 @@ The `args` object accepts a number of properties: - **appName** `string`: The name that will be printed to the terminal. - **config** `Object`: The webpack configuration options to be provided to the webpack constructor. -- **devSocket** `Object`: Required if `useTypeScript` is `true`. This object should include `errors` and `warnings` which are functions accepting an array of errors or warnings emitted by the type checking. This is useful when running `fork-ts-checker-webpack-plugin` with `async: true` to report errors that are emitted after the webpack build is complete. - **urls** `Object`: To provide the `urls` argument, use `prepareUrls()` described below. - **useYarn** `boolean`: If `true`, yarn instructions will be emitted in the terminal instead of npm. - **useTypeScript** `boolean`: If `true`, TypeScript type checking will be enabled. Be sure to provide the `devSocket` argument above if this is set to `true`. -- **tscCompileOnError** `boolean`: If `true`, errors in TypeScript type checking will not prevent start script from running app, and will not cause build script to exit unsuccessfully. Also downgrades all TypeScript type checking error messages to warning messages. - **webpack** `function`: A reference to the webpack constructor. ##### `prepareProxy(proxySetting: string, appPublicFolder: string, servedPathname: string): Object` diff --git a/packages/react-dev-utils/WebpackDevServerUtils.js b/packages/react-dev-utils/WebpackDevServerUtils.js index 3c2d0a9e39f..579124724fc 100644 --- a/packages/react-dev-utils/WebpackDevServerUtils.js +++ b/packages/react-dev-utils/WebpackDevServerUtils.js @@ -17,7 +17,6 @@ const inquirer = require('inquirer'); const clearConsole = require('./clearConsole'); const formatWebpackMessages = require('./formatWebpackMessages'); const getProcessForPort = require('./getProcessForPort'); -const typescriptFormatter = require('./typescriptFormatter'); const forkTsCheckerWebpackPlugin = require('./ForkTsCheckerWebpackPlugin'); const isInteractive = process.stdout.isTTY; @@ -104,11 +103,9 @@ function printInstructions(appName, urls, useYarn) { function createCompiler({ appName, config, - devSocket, urls, useYarn, useTypeScript, - tscCompileOnError, webpack, }) { // "Compiler" is a low-level interface to webpack. @@ -137,28 +134,16 @@ function createCompiler({ let isFirstCompile = true; let tsMessagesPromise; - let tsMessagesResolver; if (useTypeScript) { - compiler.hooks.beforeCompile.tap('beforeCompile', () => { - tsMessagesPromise = new Promise(resolve => { - tsMessagesResolver = msgs => resolve(msgs); - }); - }); - forkTsCheckerWebpackPlugin .getCompilerHooks(compiler) - .issues.tap('afterTypeScriptCheck', (diagnostics, lints) => { - const allMsgs = [...diagnostics, ...lints]; - const format = message => - `${message.file}\n${typescriptFormatter(message, true)}`; - - tsMessagesResolver({ - errors: allMsgs.filter(msg => msg.severity === 'error').map(format), - warnings: allMsgs - .filter(msg => msg.severity === 'warning') - .map(format), - }); + .waiting.tap('awaitingTypeScriptCheck', () => { + console.log( + chalk.yellow( + 'Files successfully emitted, waiting for typecheck results...' + ) + ); }); } @@ -180,48 +165,6 @@ function createCompiler({ errors: true, }); - if (useTypeScript && statsData.errors.length === 0) { - const delayedMsg = setTimeout(() => { - console.log( - chalk.yellow( - 'Files successfully emitted, waiting for typecheck results...' - ) - ); - }, 100); - - const messages = await tsMessagesPromise; - clearTimeout(delayedMsg); - if (tscCompileOnError) { - statsData.warnings.push(...messages.errors); - } else { - statsData.errors.push(...messages.errors); - } - statsData.warnings.push(...messages.warnings); - - // Push errors and warnings into compilation result - // to show them after page refresh triggered by user. - if (tscCompileOnError) { - stats.compilation.warnings.push(...messages.errors); - } else { - stats.compilation.errors.push(...messages.errors); - } - stats.compilation.warnings.push(...messages.warnings); - - if (messages.errors.length > 0) { - if (tscCompileOnError) { - devSocket.warnings(messages.errors); - } else { - devSocket.errors(messages.errors); - } - } else if (messages.warnings.length > 0) { - devSocket.warnings(messages.warnings); - } - - if (isInteractive) { - clearConsole(); - } - } - const messages = formatWebpackMessages(statsData); const isSuccessful = !messages.errors.length && !messages.warnings.length; if (isSuccessful) { diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index 773e76eec37..742268da523 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -62,7 +62,7 @@ "escape-string-regexp": "2.0.0", "filesize": "6.1.0", "find-up": "4.1.0", - "fork-ts-checker-webpack-plugin": "5.2.1", + "fork-ts-checker-webpack-plugin": "6.0.5", "global-modules": "2.0.0", "globby": "11.0.1", "gzip-size": "5.1.1", diff --git a/packages/react-dev-utils/typescriptFormatter.js b/packages/react-dev-utils/typescriptFormatter.js deleted file mode 100644 index 1fb1276c6bd..00000000000 --- a/packages/react-dev-utils/typescriptFormatter.js +++ /dev/null @@ -1,45 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -'use strict'; - -const os = require('os'); -const codeFrame = require('@babel/code-frame').codeFrameColumns; -const chalk = require('chalk'); -const fs = require('fs'); - -const issueOrigins = { - typescript: 'TypeScript', - internal: 'fork-ts-checker-webpack-plugin', -}; - -function formatter(issue) { - const { origin, severity, file, line, message, code, character } = issue; - - const colors = new chalk.constructor(); - const messageColor = severity === 'warning' ? colors.yellow : colors.red; - const fileAndNumberColor = colors.bold.cyan; - - const source = file && fs.existsSync(file) && fs.readFileSync(file, 'utf-8'); - const frame = source - ? codeFrame(source, { start: { line: line, column: character } }) - .split('\n') - .map(str => ' ' + str) - .join(os.EOL) - : ''; - - return [ - messageColor.bold(`${issueOrigins[origin]} ${severity.toLowerCase()} in `) + - fileAndNumberColor(`${file}(${line},${character})`) + - messageColor(':'), - message + ' ' + messageColor.underline(`TS${code}`), - '', - frame, - ].join(os.EOL); -} - -module.exports = formatter; diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index 905b05d58c1..8c286ed3561 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -32,7 +32,6 @@ const modules = require('./modules'); const getClientEnvironment = require('./env'); const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin'); const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin'); -const typescriptFormatter = require('react-dev-utils/typescriptFormatter'); const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); // @remove-on-eject-begin const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier'); @@ -747,19 +746,20 @@ module.exports = function (webpackEnv) { // as micromatch doesn't match // '../cra-template-typescript/template/src/App.tsx' // otherwise. - include: ['../**/src/**/*.{ts,tsx}', '**/src/**/*.{ts,tsx}'], + include: [ + '../**/src/**/*.{ts,tsx}', + '**/src/**/*.{ts,tsx}', + ].map(file => ({ file })), exclude: [ '**/src/**/__tests__/**', '**/src/**/?(*.)(spec|test).*', '**/src/setupProxy.*', '**/src/setupTests.*', - ], + ].map(file => ({ file })), }, logger: { infrastructure: 'silent', }, - // The formatter is invoked directly in WebpackDevServerUtils during development - formatter: isEnvProduction ? typescriptFormatter : undefined, }), new ESLintPlugin({ // Plugin options diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js index ffbb15d1204..4eb6ffdcf4e 100644 --- a/packages/react-scripts/scripts/start.js +++ b/packages/react-scripts/scripts/start.js @@ -118,11 +118,9 @@ checkBrowsers(paths.appPath, isInteractive) const compiler = createCompiler({ appName, config, - devSocket, urls, useYarn, useTypeScript, - tscCompileOnError, webpack, }); // Load proxy config