From 1250f604bc8fbfc54541ed00201eb2add75f7096 Mon Sep 17 00:00:00 2001 From: Eduard Kyvenko Date: Sat, 23 Sep 2017 13:37:12 +0200 Subject: [PATCH 1/5] feat($scripts): Clean-up errors from Elm Compiler before showing them Added a function for stripping redundant text from error messages --- config/webpack.config.dev.js | 3 ++- scripts/build.js | 4 +-- scripts/eject.js | 4 +-- scripts/start.js | 4 +-- scripts/utils/formatElmCompilerErrors.js | 27 +++++++++++++++++++++ scripts/utils/highlightElmCompilerErrors.js | 19 --------------- scripts/utils/webpackHotDevClient.js | 4 +-- 7 files changed, 37 insertions(+), 28 deletions(-) create mode 100644 scripts/utils/formatElmCompilerErrors.js delete mode 100644 scripts/utils/highlightElmCompilerErrors.js diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js index d78e75d8..72bfbbc5 100644 --- a/config/webpack.config.dev.js +++ b/config/webpack.config.dev.js @@ -34,7 +34,8 @@ module.exports = { // the line below with these two lines if you prefer the stock client: // require.resolve('webpack-dev-server/client') + '?/', // require.resolve('webpack/hot/dev-server'), - require.resolve('react-dev-utils/webpackHotDevClient'), + // require.resolve('react-dev-utils/webpackHotDevClient'), + require.resolve('../scripts/utils/webpackHotDevClient'), // Errors should be considered fatal in development require.resolve('react-error-overlay'), diff --git a/scripts/build.js b/scripts/build.js index b44498ec..06ea6ec0 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -22,7 +22,7 @@ const paths = require('../config/paths'); const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles'); const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages'); const FileSizeReporter = require('react-dev-utils/FileSizeReporter'); -const highlightElmCompilerErrors = require('./utils/highlightElmCompilerErrors'); +const formatElmCompilerErrors = require('./utils/formatElmCompilerErrors'); const measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild; @@ -90,7 +90,7 @@ function build(previousFileSizes) { if (err) { return reject(err); } - const messages = highlightElmCompilerErrors( + const messages = formatElmCompilerErrors( formatWebpackMessages(stats.toJson({}, true)) ); if (messages.errors.length) { diff --git a/scripts/eject.js b/scripts/eject.js index d8a43f90..28c173e2 100644 --- a/scripts/eject.js +++ b/scripts/eject.js @@ -72,8 +72,8 @@ function performEject(pkg) { fs.copySync(path.resolve(__dirname, 'build.js'), './scripts/build.js'); fs.copySync(path.resolve(__dirname, 'start.js'), './scripts/start.js'); fs.copySync( - path.resolve(__dirname, './utils/highlightElmCompilerErrors.js'), - './scripts/utils/highlightElmCompilerErrors.js' + path.resolve(__dirname, './utils/formatElmCompilerErrors.js'), + './scripts/utils/formatElmCompilerErrors.js' ); fs.copySync(path.resolve(__dirname, '../config'), './config'); } catch (err) { diff --git a/scripts/start.js b/scripts/start.js index 1bd322a0..321de433 100644 --- a/scripts/start.js +++ b/scripts/start.js @@ -29,7 +29,7 @@ const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages'); const clearConsole = require('react-dev-utils/clearConsole'); const openBrowser = require('react-dev-utils/openBrowser'); const createDevServerConfig = require('../config/webpackDevServer.config'); -const highlightElmCompilerErrors = require('./utils/highlightElmCompilerErrors'); +const formatElmCompilerErrors = require('./utils/formatElmCompilerErrors'); const paths = require('../config/paths'); if (fs.existsSync('elm-package.json') === false) { @@ -100,7 +100,7 @@ function createCompiler(webpack, config, appName, urls) { // We have switched off the default Webpack output in WebpackDevServer // options so we are going to "massage" the warnings and errors and present // them in a readable focused way. - const messages = highlightElmCompilerErrors( + const messages = formatElmCompilerErrors( formatWebpackMessages(stats.toJson({}, true)) ); diff --git a/scripts/utils/formatElmCompilerErrors.js b/scripts/utils/formatElmCompilerErrors.js new file mode 100644 index 00000000..775b2efb --- /dev/null +++ b/scripts/utils/formatElmCompilerErrors.js @@ -0,0 +1,27 @@ +'use strict'; + +var chalk = require('chalk'); + +function stripRedundantInfo(error) { + console.log(error); + return error.replace( + /(Module build failed: Error: Compiler process exited with error Compilation failed)\n--/g, + '\n--' + ); +} + +module.exports = function formatElmCompilerErrors(messages) { +var errors = messages.errors; +var warnings = messages.warnings; +return errors.length > 0 + ? { + errors: errors.map(x => + x + .replace(/(--\s[A-Z\s]+-+\s.*\.elm\n)/g, chalk.cyan('$1')) + .replace(/(\n\s*)(\^+)/g, '$1' + chalk.red('$2')) + .replace(/(\d+\|)(>)/g, '$1' + chalk.bold(chalk.red('$2'))) + ).map(stripRedundantInfo), + warnings: warnings + } + : messages; +}; diff --git a/scripts/utils/highlightElmCompilerErrors.js b/scripts/utils/highlightElmCompilerErrors.js deleted file mode 100644 index 45548d67..00000000 --- a/scripts/utils/highlightElmCompilerErrors.js +++ /dev/null @@ -1,19 +0,0 @@ -'use strict'; - -var chalk = require('chalk'); - -module.exports = function highlightElmCompilerErrors(messages) { - var errors = messages.errors; - var warnings = messages.warnings; - return errors.length > 0 - ? { - errors: errors.map(x => - x - .replace(/(--\s[A-Z\s]+-+\s.*\.elm\n)/g, chalk.cyan('$1')) - .replace(/(\n\s*)(\^+)/g, '$1' + chalk.red('$2')) - .replace(/(\d+\|)(>)/g, '$1' + chalk.bold(chalk.red('$2'))) - ), - warnings: warnings - } - : messages; -}; diff --git a/scripts/utils/webpackHotDevClient.js b/scripts/utils/webpackHotDevClient.js index 0222b473..1c57132f 100644 --- a/scripts/utils/webpackHotDevClient.js +++ b/scripts/utils/webpackHotDevClient.js @@ -15,7 +15,7 @@ var url = require('url'); var launchEditorEndpoint = require('react-dev-utils/launchEditorEndpoint'); var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages'); var ErrorOverlay = require('react-error-overlay'); -var highlightElmCompilerErrors = require('./highlightElmCompilerErrors'); +var formatElmCompilerErrors = require('./formatElmCompilerErrors'); ErrorOverlay.startReportingRuntimeErrors({ launchEditorEndpoint: launchEditorEndpoint, @@ -142,7 +142,7 @@ function handleErrors(errors) { hasCompileErrors = true; // "Massage" webpack messages. - var formatted = highlightElmCompilerErrors( + var formatted = formatElmCompilerErrors( formatWebpackMessages({ errors: errors, warnings: [] From 523483858ecce437c6d5da7f4c8b8ce6a84329ab Mon Sep 17 00:00:00 2001 From: Eduard Kyvenko Date: Sat, 23 Sep 2017 13:38:37 +0200 Subject: [PATCH 2/5] feat($config): Mock-out Node.js libraries to secure the run-time in the browser --- config/webpack.config.dev.js | 12 +++++++++++- config/webpack.config.prod.js | 11 ++++++++++- 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js index 72bfbbc5..693194dc 100644 --- a/config/webpack.config.dev.js +++ b/config/webpack.config.dev.js @@ -197,5 +197,15 @@ module.exports = { new HotModuleReplacementPlugin(), new NamedModulesPlugin() - ] + ], + + // 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. + node: { + dgram: 'empty', + fs: 'empty', + net: 'empty', + tls: 'empty', + child_process: 'empty', + }, }; diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js index ee50a50f..1ad93f4c 100644 --- a/config/webpack.config.prod.js +++ b/config/webpack.config.prod.js @@ -242,5 +242,14 @@ module.exports = { // Don't precache sourcemaps (they're large) and build asset manifest: staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/] }) - ] + ], + // 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. + node: { + dgram: 'empty', + fs: 'empty', + net: 'empty', + tls: 'empty', + child_process: 'empty', + }, }; From 49af44ca48de995305d1ecb5026bda91fe46321e Mon Sep 17 00:00:00 2001 From: Eduard Kyvenko Date: Sat, 23 Sep 2017 15:46:03 +0200 Subject: [PATCH 3/5] style: prettify the code --- config/webpack.config.dev.js | 4 +-- config/webpack.config.prod.js | 4 +-- scripts/utils/formatElmCompilerErrors.js | 33 ++++++++++++------------ 3 files changed, 21 insertions(+), 20 deletions(-) diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js index 693194dc..5edcb0de 100644 --- a/config/webpack.config.dev.js +++ b/config/webpack.config.dev.js @@ -206,6 +206,6 @@ module.exports = { fs: 'empty', net: 'empty', tls: 'empty', - child_process: 'empty', - }, + child_process: 'empty' + } }; diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js index 1ad93f4c..019b0ca5 100644 --- a/config/webpack.config.prod.js +++ b/config/webpack.config.prod.js @@ -250,6 +250,6 @@ module.exports = { fs: 'empty', net: 'empty', tls: 'empty', - child_process: 'empty', - }, + child_process: 'empty' + } }; diff --git a/scripts/utils/formatElmCompilerErrors.js b/scripts/utils/formatElmCompilerErrors.js index 775b2efb..85aa6a40 100644 --- a/scripts/utils/formatElmCompilerErrors.js +++ b/scripts/utils/formatElmCompilerErrors.js @@ -3,25 +3,26 @@ var chalk = require('chalk'); function stripRedundantInfo(error) { - console.log(error); return error.replace( - /(Module build failed: Error: Compiler process exited with error Compilation failed)\n--/g, - '\n--' + /Module build failed: Error: Compiler process exited with error Compilation failed/g, + '' ); } module.exports = function formatElmCompilerErrors(messages) { -var errors = messages.errors; -var warnings = messages.warnings; -return errors.length > 0 - ? { - errors: errors.map(x => - x - .replace(/(--\s[A-Z\s]+-+\s.*\.elm\n)/g, chalk.cyan('$1')) - .replace(/(\n\s*)(\^+)/g, '$1' + chalk.red('$2')) - .replace(/(\d+\|)(>)/g, '$1' + chalk.bold(chalk.red('$2'))) - ).map(stripRedundantInfo), - warnings: warnings - } - : messages; + var errors = messages.errors; + var warnings = messages.warnings; + return errors.length > 0 + ? { + errors: errors + .map(x => + x + .replace(/(--\s[A-Z\s]+-+\s.*\.elm\n)/g, chalk.cyan('$1')) + .replace(/(\n\s*)(\^+)/g, '$1' + chalk.red('$2')) + .replace(/(\d+\|)(>)/g, '$1' + chalk.bold(chalk.red('$2'))) + ) + .map(stripRedundantInfo), + warnings: warnings + } + : messages; }; From f63aeeba984229c3f386cdecef3c272952b87de5 Mon Sep 17 00:00:00 2001 From: Eduard Kyvenko Date: Mon, 25 Sep 2017 00:01:03 +0200 Subject: [PATCH 4/5] feat($scripts): Add color highlighting for Elm compiler errors --- scripts/utils/formatElmCompilerErrors.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/scripts/utils/formatElmCompilerErrors.js b/scripts/utils/formatElmCompilerErrors.js index 85aa6a40..2e257a9d 100644 --- a/scripts/utils/formatElmCompilerErrors.js +++ b/scripts/utils/formatElmCompilerErrors.js @@ -1,6 +1,16 @@ 'use strict'; var chalk = require('chalk'); +var ctx = new chalk.constructor({ enabled: true }); +var error = ctx.bold.red; +var filename = ctx.cyan; +var isBrowser = typeof window === 'object'; + +if (isBrowser) { + ctx.level = 1; + error = ctx.cyan; + filename = ctx.green; +} function stripRedundantInfo(error) { return error.replace( @@ -17,9 +27,9 @@ module.exports = function formatElmCompilerErrors(messages) { errors: errors .map(x => x - .replace(/(--\s[A-Z\s]+-+\s.*\.elm\n)/g, chalk.cyan('$1')) - .replace(/(\n\s*)(\^+)/g, '$1' + chalk.red('$2')) - .replace(/(\d+\|)(>)/g, '$1' + chalk.bold(chalk.red('$2'))) + .replace(/(--\s[A-Z\s]+-+\s.*\.elm\n)/g, filename('$1')) + .replace(/(\n\s*)(\^+)/g, '$1' + error('$2')) + .replace(/(\d+)(\|>)/g, '$1' + error('$2')) ) .map(stripRedundantInfo), warnings: warnings From be6d5c995deeed2ecb771c0bcba5d16ded9a2528 Mon Sep 17 00:00:00 2001 From: Eduard Kyvenko Date: Mon, 25 Sep 2017 00:08:35 +0200 Subject: [PATCH 5/5] fix($dependencies): Update dependencies --- yarn.lock | 49 +++++++++++++++++++++++++------------------------ 1 file changed, 25 insertions(+), 24 deletions(-) diff --git a/yarn.lock b/yarn.lock index 47aec105..883b096f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2327,6 +2327,7 @@ elm-test@^0.18.8: find-parent-dir "^0.3.0" firstline "1.2.1" fs-extra "0.30.0" + fsevents "1.1.2" glob "^7.1.1" lodash "4.13.1" minimist "^1.2.0" @@ -2493,11 +2494,11 @@ escope@^3.6.0: estraverse "^4.1.1" eslint-plugin-prettier@^2.2.0: - version "2.2.0" - resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-2.2.0.tgz#f2837ad063903d73c621e7188fb3d41486434088" + version "2.3.1" + resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-2.3.1.tgz#e7a746c67e716f335274b88295a9ead9f544e44d" dependencies: fast-diff "^1.1.1" - jest-docblock "^20.0.1" + jest-docblock "^21.0.0" eslint-scope@^3.7.1: version "3.7.1" @@ -2507,18 +2508,18 @@ eslint-scope@^3.7.1: estraverse "^4.1.1" eslint@^4.6.1: - version "4.6.1" - resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.6.1.tgz#ddc7fc7fd70bf93205b0b3449bb16a1e9e7d4950" + version "4.7.2" + resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.7.2.tgz#ff6f5f5193848a27ee9b627be3e73fb9cb5e662e" dependencies: ajv "^5.2.0" babel-code-frame "^6.22.0" chalk "^2.1.0" concat-stream "^1.6.0" cross-spawn "^5.1.0" - debug "^2.6.8" + debug "^3.0.1" doctrine "^2.0.0" eslint-scope "^3.7.1" - espree "^3.5.0" + espree "^3.5.1" esquery "^1.0.0" estraverse "^4.2.0" esutils "^2.0.2" @@ -2539,7 +2540,7 @@ eslint@^4.6.1: natural-compare "^1.4.0" optionator "^0.8.2" path-is-inside "^1.0.2" - pluralize "^4.0.0" + pluralize "^7.0.0" progress "^2.0.0" require-uncached "^1.0.3" semver "^5.3.0" @@ -2548,9 +2549,9 @@ eslint@^4.6.1: table "^4.0.1" text-table "~0.2.0" -espree@^3.5.0: - version "3.5.0" - resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.0.tgz#98358625bdd055861ea27e2867ea729faf463d8d" +espree@^3.5.1: + version "3.5.1" + resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.1.tgz#0c988b8ab46db53100a1954ae4ba995ddd27d87e" dependencies: acorn "^5.1.1" acorn-jsx "^3.0.0" @@ -3948,9 +3949,9 @@ isstream@0.1.x, isstream@~0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a" -jest-docblock@^20.0.1: - version "20.0.3" - resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-20.0.3.tgz#17bea984342cc33d83c50fbe1545ea0efaa44712" +jest-docblock@^21.0.0: + version "21.1.0" + resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-21.1.0.tgz#43154be2441fb91403e36bb35cb791a5017cea81" js-base64@^2.1.9: version "2.1.9" @@ -5210,9 +5211,9 @@ pkginfo@0.x.x: version "0.4.0" resolved "https://registry.yarnpkg.com/pkginfo/-/pkginfo-0.4.0.tgz#349dbb7ffd38081fcadc0853df687f0c7744cd65" -pluralize@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-4.0.0.tgz#59b708c1c0190a2f692f1c7618c446b052fd1762" +pluralize@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777" portfinder@^1.0.9: version "1.0.13" @@ -7180,8 +7181,8 @@ webpack-dev-middleware@^1.11.0: range-parser "^1.0.3" webpack-dev-server@^2.8.1: - version "2.8.1" - resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.8.1.tgz#344e312bf560498ee0c518f2fcc709951630f667" + version "2.8.2" + resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.8.2.tgz#abd61f410778cc4c843d7cebbf41465b1ab7734c" dependencies: ansi-html "0.0.7" array-includes "^3.0.3" @@ -7203,10 +7204,10 @@ webpack-dev-server@^2.8.1: sockjs "0.3.18" sockjs-client "1.1.4" spdy "^3.4.1" - strip-ansi "^4.0.0" + strip-ansi "^3.0.1" supports-color "^4.2.1" webpack-dev-middleware "^1.11.0" - yargs "^8.0.2" + yargs "^6.6.0" webpack-sources@^1.0.1: version "1.0.1" @@ -7216,8 +7217,8 @@ webpack-sources@^1.0.1: source-map "~0.5.3" webpack@^3.5.6: - version "3.5.6" - resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.5.6.tgz#a492fb6c1ed7f573816f90e00c8fbb5a20cc5c36" + version "3.6.0" + resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.6.0.tgz#a89a929fbee205d35a4fa2cc487be9cbec8898bc" dependencies: acorn "^5.0.0" acorn-dynamic-import "^2.0.0" @@ -7383,7 +7384,7 @@ yargs-parser@^7.0.0: dependencies: camelcase "^4.1.0" -yargs@^6.5.0: +yargs@^6.5.0, yargs@^6.6.0: version "6.6.0" resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208" dependencies: