halfzebra · halfzebra · Sep 14, 2017 · Sep 13, 2017 · Sep 13, 2017 · Sep 13, 2017
diff --git a/config/env.js b/config/env.js
@@ -58,21 +58,23 @@ process.env.NODE_PATH = (process.env.NODE_PATH || '')
 const ELM_APP = /^ELM_APP_/i;
 
 function getClientEnvironment(publicUrl) {
-  const raw = Object.keys(process.env).filter(key => ELM_APP.test(key)).reduce((
-    env,
-    key
-  ) => {
-    env[key] = process.env[key];
-    return env;
-  }, {
-    // Useful for determining whether we’re running in production mode.
-    NODE_ENV: process.env.NODE_ENV || 'development',
-    // Useful for resolving the correct path to static assets in `public`.
-    // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
-    // This should only be used as an escape hatch. Normally you would put
-    // images into the `src` and `import` them in code to get their paths.
-    PUBLIC_URL: publicUrl
-  });
+  const raw = Object.keys(process.env)
+    .filter(key => ELM_APP.test(key))
+    .reduce(
+      (env, key) => {
+        env[key] = process.env[key];
+        return env;
+      },
+      {
+        // Useful for determining whether we’re running in production mode.
+        NODE_ENV: process.env.NODE_ENV || 'development',
+        // Useful for resolving the correct path to static assets in `public`.
+        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
+        // This should only be used as an escape hatch. Normally you would put
+        // images into the `src` and `import` them in code to get their paths.
+        PUBLIC_URL: publicUrl
+      }
+    );
   // Stringify all values so we can feed into Webpack DefinePlugin
   const stringified = {
     'process.env': Object.keys(raw).reduce((env, key) => {

diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
@@ -74,10 +74,24 @@ module.exports = {
         exclude: [/elm-stuff/, /node_modules/],
         loader: require.resolve('babel-loader'),
         query: {
+          // Latest stable ECMAScript features
           presets: [
-            require.resolve('babel-preset-es2015'),
-            require.resolve('babel-preset-es2016'),
-            require.resolve('babel-preset-es2017')
+            [
+              require.resolve('babel-preset-env'),
+              {
+                targets: {
+                  // React parses on ie 9, so we should too
+                  ie: 9,
+                  // We currently minify with uglify
+                  // Remove after https://github.com/mishoo/UglifyJS2/issues/448
+                  uglify: true
+                },
+                // Disable polyfill transforms
+                useBuiltIns: false,
+                // Do not transform modules to CJS
+                modules: false
+              }
+            ]
           ]
         }
       },

diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js
@@ -71,10 +71,24 @@ module.exports = {
         exclude: [/elm-stuff/, /node_modules/],
         loader: require.resolve('babel-loader'),
         query: {
+          // Latest stable ECMAScript features
           presets: [
-            require.resolve('babel-preset-es2015'),
-            require.resolve('babel-preset-es2016'),
-            require.resolve('babel-preset-es2017')
+            [
+              require.resolve('babel-preset-env'),
+              {
+                targets: {
+                  // React parses on ie 9, so we should too
+                  ie: 9,
+                  // We currently minify with uglify
+                  // Remove after https://github.com/mishoo/UglifyJS2/issues/448
+                  uglify: true
+                },
+                // Disable polyfill transforms
+                useBuiltIns: false,
+                // Do not transform modules to CJS
+                modules: false
+              }
+            ]
           ]
         }
       },
@@ -226,7 +240,7 @@ module.exports = {
       // https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
       navigateFallbackWhitelist: [/^(?!\/__).*/],
       // Don't precache sourcemaps (they're large) and build asset manifest:
-      staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
-    }),
+      staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/]
+    })
   ]
 };
diff --git a/config/webpackDevServer.config.js b/config/webpackDevServer.config.js
@@ -1,6 +1,6 @@
 'use strict';
 
-const errorOverlayMiddleware = require('react-error-overlay/middleware');
+const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
 const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
 const config = require('./webpack.config.dev');
 const paths = require('./paths');

diff --git a/package.json b/package.json
@@ -18,19 +18,17 @@
   },
   "dependencies": {
     "assets-webpack-plugin": "^3.5.1",
-    "autoprefixer": "^7.1.2",
+    "autoprefixer": "^7.1.4",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.2",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-es2016": "^6.24.1",
-    "babel-preset-es2017": "^6.24.1",
-    "chalk": "^2.0.1",
+    "babel-preset-env": "^1.6.0",
+    "chalk": "^2.1.0",
     "clean-webpack-plugin": "^0.1.16",
     "cli-table": "0.3.1",
     "connect-history-api-fallback": "^1.3.0",
     "cross-spawn": "^5.1.0",
-    "css-loader": "^0.28.5",
+    "css-loader": "^0.28.7",
     "dotenv": "^4.0.0",
     "elm": "^0.18.0",
     "elm-hot-loader": "0.5.4",
@@ -44,29 +42,29 @@
     "minimist": "1.2.0",
     "postcss-loader": "^2.0.5",
     "prompt": "1.0.0",
-    "react-dev-utils": "^3.1.1",
-    "react-error-overlay": "^1.0.10",
+    "react-dev-utils": "^4.0.1",
+    "react-error-overlay": "^2.0.1",
     "string-replace-loader": "^1.3.0",
     "style-loader": "^0.18.1",
     "sw-precache-webpack-plugin": "^0.11.4",
     "url-loader": "^0.5.9",
-    "webpack": "^3.5.5",
-    "webpack-dev-server": "^2.7.1"
+    "webpack": "^3.5.6",
+    "webpack-dev-server": "^2.8.1"
   },
   "devDependencies": {
-    "babel-eslint": "^7.2.3",
-    "chai": "^4.1.0",
+    "babel-eslint": "^8.0.0",
     "commitizen": "^2.9.6",
     "cz-conventional-changelog": "^2.0.0",
     "dir-compare": "^1.3.0",
-    "eslint": "^4.3.0",
-    "eslint-plugin-prettier": "^2.1.2",
+    "eslint": "^4.6.1",
+    "eslint-plugin-prettier": "^2.2.0",
     "husky": "^0.14.3",
-    "mocha": "^3.5.0",
+    "mocha": "^3.5.2",
     "nightmare": "^2.10.0",
-    "prettier": "^1.5.3",
+    "prettier": "^1.7.0",
     "rimraf": "^2.5.4",
-    "semantic-release": "^6.3.2"
+    "semantic-release": "^7.0.2",
+    "unexpected": "^10.35.0"
   },
   "engines": {
     "node": ">=6.0.0"
@@ -93,7 +91,7 @@
     "eslint": "eslint .",
     "prettier": "prettier --write --single-quote '{bin,config,scripts,template/src,tests}/**/*.js'",
     "semantic-release": "semantic-release pre && npm publish && semantic-release post",
-    "test": "npm run -s test:cli && npm run -s test:functional",
+    "test": "npm run test:cli && npm run test:functional",
     "test:cli": "mocha tests/cliAccessibility.js --reporter spec --timeout 15000",
     "test:functional": "mocha tests/*.spec.js --reporter spec --timeout 15000"
   }

diff --git a/scripts/utils/webpackHotDevClient.js b/scripts/utils/webpackHotDevClient.js
@@ -12,146 +12,29 @@
 var SockJS = require('sockjs-client');
 var stripAnsi = require('strip-ansi');
 var url = require('url');
+var launchEditorEndpoint = require('react-dev-utils/launchEditorEndpoint');
 var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
-var Entities = require('html-entities').AllHtmlEntities;
-var ansiHTML = require('react-dev-utils/ansiHTML');
+var ErrorOverlay = require('react-error-overlay');
 var highlightElmCompilerErrors = require('./highlightElmCompilerErrors');
-var entities = new Entities();
-
-function createOverlayIframe(onIframeLoad) {
-  var iframe = document.createElement('iframe');
-  iframe.id = 'react-dev-utils-webpack-hot-dev-client-overlay';
-  iframe.src = 'about:blank';
-  iframe.style.position = 'fixed';
-  iframe.style.left = 0;
-  iframe.style.top = 0;
-  iframe.style.right = 0;
-  iframe.style.bottom = 0;
-  iframe.style.width = '100vw';
-  iframe.style.height = '100vh';
-  iframe.style.border = 'none';
-  iframe.style.zIndex = 2147483647;
-  iframe.onload = onIframeLoad;
-  return iframe;
-}
-
-function addOverlayDivTo(iframe) {
-  // TODO: unify these styles with react-error-overlay
-  iframe.contentDocument.body.style.margin = 0;
-  iframe.contentDocument.body.style.maxWidth = '100vw';
-
-  var outerDiv = iframe.contentDocument.createElement('div');
-  outerDiv.id = 'react-dev-utils-webpack-hot-dev-client-overlay-div';
-  outerDiv.style.width = '100%';
-  outerDiv.style.height = '100%';
-  outerDiv.style.boxSizing = 'border-box';
-  outerDiv.style.textAlign = 'center';
-  outerDiv.style.backgroundColor = 'rgb(255, 255, 255)';
-
-  var div = iframe.contentDocument.createElement('div');
-  div.style.position = 'relative';
-  div.style.display = 'inline-flex';
-  div.style.flexDirection = 'column';
-  div.style.height = '100%';
-  div.style.width = '1024px';
-  div.style.maxWidth = '100%';
-  div.style.overflowX = 'hidden';
-  div.style.overflowY = 'auto';
-  div.style.padding = '0.5rem';
-  div.style.boxSizing = 'border-box';
-  div.style.textAlign = 'left';
-  div.style.fontFamily = 'Consolas, Menlo, monospace';
-  div.style.fontSize = '11px';
-  div.style.whiteSpace = 'pre-wrap';
-  div.style.wordBreak = 'break-word';
-  div.style.lineHeight = '1.5';
-  div.style.color = 'rgb(41, 50, 56)';
-
-  outerDiv.appendChild(div);
-  iframe.contentDocument.body.appendChild(outerDiv);
-  return div;
-}
-
-function overlayHeaderStyle() {
-  return (
-    'font-size: 2em;' +
-    'font-family: sans-serif;' +
-    'color: rgb(206, 17, 38);' +
-    'white-space: pre-wrap;' +
-    'margin: 0 2rem 0.75rem 0px;' +
-    'flex: 0 0 auto;' +
-    'max-height: 35%;' +
-    'overflow: auto;'
-  );
-}
-
-var overlayIframe = null;
-var overlayDiv = null;
-var lastOnOverlayDivReady = null;
-
-function ensureOverlayDivExists(onOverlayDivReady) {
-  if (overlayDiv) {
-    // Everything is ready, call the callback right away.
-    onOverlayDivReady(overlayDiv);
-    return;
-  }
-
-  // Creating an iframe may be asynchronous so we'll schedule the callback.
-  // In case of multiple calls, last callback wins.
-  lastOnOverlayDivReady = onOverlayDivReady;
-
-  if (overlayIframe) {
-    // We're already creating it.
-    return;
-  }
-
-  // Create iframe and, when it is ready, a div inside it.
-  overlayIframe = createOverlayIframe(function onIframeLoad() {
-    overlayDiv = addOverlayDivTo(overlayIframe);
-    // Now we can talk!
-    lastOnOverlayDivReady(overlayDiv);
-  });
-
-  // Zalgo alert: onIframeLoad() will be called either synchronously
-  // or asynchronously depending on the browser.
-  // We delay adding it so `overlayIframe` is set when `onIframeLoad` fires.
-  document.body.appendChild(overlayIframe);
-}
 
-function showErrorOverlay(message) {
-  ensureOverlayDivExists(function onOverlayDivReady(overlayDiv) {
-    // TODO: unify this with our runtime overlay
-    overlayDiv.innerHTML =
-      '<div style="' +
-      overlayHeaderStyle() +
-      '">Failed to compile</div>' +
-      '<pre style="' +
-      'display: block; padding: 0.5em; margin-top: 0; ' +
-      'margin-bottom: 0.5em; overflow-x: auto; white-space: pre-wrap; ' +
-      'border-radius: 0.25rem; background-color: rgba(206, 17, 38, 0.05)">' +
-      '<code style="font-family: Consolas, Menlo, monospace;">' +
-      ansiHTML(entities.encode(message)) +
-      '</code></pre>' +
-      '<div style="' +
-      'font-family: sans-serif; color: rgb(135, 142, 145); margin-top: 0.5rem; ' +
-      'flex: 0 0 auto">' +
-      'This error occurred during the build time and cannot be dismissed.</div>';
+ErrorOverlay.startReportingRuntimeErrors({
+  launchEditorEndpoint: launchEditorEndpoint,
+  onError: function() {
+    // TODO: why do we need this?
+    if (module.hot && typeof module.hot.decline === 'function') {
+      module.hot.decline();
+    }
+  },
+  filename: '/static/js/bundle.js'
+});
+
+if (module.hot && typeof module.hot.dispose === 'function') {
+  module.hot.dispose(function() {
+    // TODO: why do we need this?
+    ErrorOverlay.stopReportingRuntimeErrors();
   });
 }
 
-function destroyErrorOverlay() {
-  if (!overlayDiv) {
-    // It is not there in the first place.
-    return;
-  }
-
-  // Clean up and reset internal state.
-  document.body.removeChild(overlayIframe);
-  overlayDiv = null;
-  overlayIframe = null;
-  lastOnOverlayDivReady = null;
-}
-
 // Connect to WebpackDevServer via a socket.
 var connection = new SockJS(
   url.format({
@@ -199,9 +82,9 @@ function handleSuccess() {
   // Attempt to apply hot updates or reload.
   if (isHotUpdate) {
     tryApplyUpdates(function onHotUpdateSuccess() {
-      // Only destroy it when we're sure it's a hot update.
+      // Only dismiss it when we're sure it's a hot update.
       // Otherwise it would flicker right before the reload.
-      destroyErrorOverlay();
+      ErrorOverlay.dismissBuildError();
     });
   }
 }
@@ -241,9 +124,9 @@ function handleWarnings(warnings) {
       // Only print warnings if we aren't refreshing the page.
       // Otherwise they'll disappear right away anyway.
       printWarnings();
-      // Only destroy it when we're sure it's a hot update.
+      // Only dismiss it when we're sure it's a hot update.
       // Otherwise it would flicker right before the reload.
-      destroyErrorOverlay();
+      ErrorOverlay.dismissBuildError();
     });
   } else {
     // Print initial warnings immediately.
@@ -267,7 +150,7 @@ function handleErrors(errors) {
   );
 
   // Only show the first error.
-  showErrorOverlay(formatted.errors[0]);
+  ErrorOverlay.reportBuildError(formatted.errors[0]);
 
   // Also log them to the console.
   if (typeof console !== 'undefined' && typeof console.error === 'function') {