Upgrade all deprecated dependencies

CONTRIBUTING.md

@@ -16,6 +16,15 @@ Following these guidelines helps to communicate that you respect the time of the
 
 3. Run `npm link` in the root `create-elm-app` folder to install local module globally.
 
+## Running tests
+
+You can run tests by running `$npm run test`. 
+
+If you run into failures while ugrading dependencies, running `$npm run app:build` will allow you to check the build faster.
+
+_NOTE: Functional tests may take a while to run because they interact with your system_.
+
+
 ## Submitting a Pull Request
 
 When you have a local copy of the project up and running, create a new branch with a name, such as `patch-1`

config/paths.js

@@ -3,19 +3,19 @@
 const path = require('path');
 const fs = require('fs');
 const url = require('url');
-const cosmiconfig = require('cosmiconfig');
+const { cosmiconfigSync } = require('cosmiconfig');
 
 // Make sure any symlinks in the project folder are resolved:
 // https://github.com/facebookincubator/create-react-app/issues/637
 const appDirectory = fs.realpathSync(process.cwd());
-const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
+const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);
 
 // We look for configration in files supported by cosmiconfig by default:
 // https://github.com/davidtheclark/cosmiconfig
-const explorer = cosmiconfig('elmapp');
-const result = explorer.searchSync(appDirectory);
+const explorerSync = cosmiconfigSync('elmapp');
+const result = explorerSync.search(appDirectory);
 const config = result ? result.config : loadElmJson();
-const id = x => x;
+const id = (x) => x;
 const configureWebpack =
   typeof config.configureWebpack === 'function' ? config.configureWebpack : id;
 
@@ -46,7 +46,7 @@ function ensureSlash(path, needsSlash) {
   return path;
 }
 
-const getPublicUrl = appConfig => {
+const getPublicUrl = (appConfig) => {
   if (envPublicUrl) {
     return envPublicUrl;
   }
@@ -81,5 +81,5 @@ module.exports = {
   servedPath: getServedPath(config),
   proxy: config.proxy,
   setupProxy: config.setupProxy,
-  configureWebpack
+  configureWebpack,
 };

config/webpack.config.prod.js

@@ -61,13 +61,13 @@ module.exports = {
     minimizer: [
       new UglifyJsPlugin({
         uglifyOptions: {
+          warnings: false,
           // ES5 is required in the minified code if you want compatibility with IE11,
           // otherwise you can bump it up to ES8
           ecma: 5,
           // Compression settings mostly based on <https://guide.elm-lang.org/optimization/asset_size.html>
           compress: {
             passes: 2,
-            warnings: false,
             // Disabled because of an issue with Uglify breaking seemingly valid code:
             // https://github.com/facebook/create-react-app/issues/2376
             // Pending further investigation:
@@ -96,9 +96,6 @@ module.exports = {
               'F9',
             ],
           },
-          mangle: {
-            safari10: true,
-          },
           output: {
             comments: false,
             // Turned on because emoji and regex is not minified properly using default
@@ -346,7 +343,9 @@ module.exports = {
       publicPath: publicPath,
     }),
     // Copies the public folder to the build folder
-    new CopyPlugin([{ from: './public/', to: './' }]),
+    new CopyPlugin({
+      patterns: [{ from: './public/', to: './' }],
+    }),
     // Generate a service worker script that will precache, and keep up to date,
     // the HTML & assets that are part of the Webpack build.
     new workboxPlugin.GenerateSW({

package.json

@@ -27,35 +27,35 @@
     "babel-loader": "8.2.2",
     "babel-runtime": "6.26.0",
     "case-sensitive-paths-webpack-plugin": "2.3.0",
-    "chalk": "2.4.2",
+    "chalk": "4.1.0",
     "cli-table": "0.3.4",
     "connect-history-api-fallback": "1.6.0",
-    "copy-webpack-plugin": "5.1.2",
-    "cosmiconfig": "5.2.1",
+    "copy-webpack-plugin": "6.2.0",
+    "cosmiconfig": "7.0.0",
     "cross-spawn": "7.0.3",
     "css-loader": "4.3.0",
     "dotenv": "8.2.0",
     "elm": "latest-0.19.1",
     "elm-asset-webpack-loader": "1.1.2",
     "elm-hot-webpack-loader": "1.1.7",
     "elm-test": "latest-0.19.1",
-    "elm-webpack-loader": "6.0.1",
+    "elm-webpack-loader": "7.0.1",
     "file-loader": "6.2.0",
-    "fs-extra": "6.0.1",
+    "fs-extra": "9.0.1",
     "html-webpack-plugin": "4.5.0",
-    "http-proxy-middleware": "0.21.0",
+    "http-proxy-middleware": "1.0.5",
     "mini-css-extract-plugin": "0.12.0",
     "minimist": "1.2.5",
     "object-assign": "4.1.1",
-    "optimize-css-assets-webpack-plugin": "5.0.3",
+    "optimize-css-assets-webpack-plugin": "5.0.4",
     "postcss-flexbugs-fixes": "4.2.1",
     "postcss-loader": "4.1.0",
     "postcss-safe-parser": "5.0.2",
     "promise": "8.1.0",
     "prompt": "1.0.0",
     "react-dev-utils": "6.1.1",
-    "react-error-overlay": "4.0.1",
-    "sockjs-client": "1.4.0",
+    "react-error-overlay": "6.0.7",
+    "sockjs-client": "1.5.0",
     "string-replace-loader": "2.3.0",
     "strip-ansi": "6.0.0",
     "style-loader": "1.3.0",
@@ -65,7 +65,7 @@
     "webpack-dev-server": "3.11.0",
     "webpack-manifest-plugin": "2.2.0",
     "whatwg-fetch": "3.5.0",
-    "workbox-webpack-plugin": "4.3.1"
+    "workbox-webpack-plugin": "5.1.4"
   },
   "devDependencies": {
     "@commitlint/cli": "11.0.0",
@@ -141,3 +141,4 @@
     }
   }
 }
+

scripts/utils/formatElmCompilerErrors.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var chalk = require('chalk');
-var ctx = new chalk.constructor({ enabled: true });
+var ctx = new chalk.Instance({ enabled: true });
 var error = ctx.bold.red;
 var filename = ctx.cyan;
 var isBrowser = typeof window === 'object';
@@ -28,16 +28,16 @@ module.exports = function formatElmCompilerErrors(messages) {
   return errors.length > 0
     ? {
         errors: errors
-          .map(x =>
+          .map((x) =>
             x
               .replace(/(--\s[A-Z\s]+-+\s.*\.elm\r?\n)/g, filename('$1'))
               .replace(/(\n\s*)(\^+)/g, '$1' + error('$2'))
               .replace(/(\d+)(\|>)/g, '$1' + error('$2'))
           )
           .map(stripRedundantInfo)
           // drop errors that only contain whitespace
-          .filter(err => err.trim()),
-        warnings: warnings
+          .filter((err) => err.trim()),
+        warnings: warnings,
       }
     : messages;
 };

tests/elm-app.eject.spec.js

@@ -12,10 +12,10 @@ const testAppDir = path.join(rootDir, testAppName);
 const createElmAppCmd = path.join(rootDir, 'bin/create-elm-app-cli.js');
 const elmAppCmd = path.join(rootDir, 'bin/elm-app-cli.js');
 
-describe('Ejecting Elm application. (Please wait...)', function() {
+describe('Ejecting Elm application. (Please wait...)', function () {
   this.timeout(60000);
 
-  before(done => {
+  before((done) => {
     const { status } = spawn.sync('node', [createElmAppCmd, testAppName]);
     if (status === 0) {
       process.chdir(testAppDir);
@@ -33,7 +33,7 @@ describe('Ejecting Elm application. (Please wait...)', function() {
   it(`'elm-app eject' should succeed in '${testAppName}'`, () => {
     const { status, output } = spawn.sync('node', [elmAppCmd, 'eject']);
     const outputString = output
-      .map(out => (out !== null ? out.toString() : ''))
+      .map((out) => (out !== null ? out.toString() : ''))
       .join('');
 
     expect(status, 'to be', 0);
@@ -50,7 +50,7 @@ describe('Ejecting Elm application. (Please wait...)', function() {
       start: 'node scripts/start.js',
       make: 'elm make',
       repl: 'elm repl',
-      reactor: 'elm reactor'
+      reactor: 'elm reactor',
     });
   });
 
@@ -77,7 +77,7 @@ describe('Ejecting Elm application. (Please wait...)', function() {
   it('It should be possible to build ejected application, using npm scripts', () => {
     const { status, output } = spawn.sync('npm', ['run', 'build']);
     const outputString = output
-      .map(out => (out !== null ? out.toString() : ''))
+      .map((out) => (out !== null ? out.toString() : ''))
       .join('');
 
     expect(status, 'to be', 0);