transpile client bundles with babel (#1242)

note: travis is acting up. we know this passed previously. merging and sorting it out afterwards.

client/index.js

@@ -65,24 +65,24 @@ function sendMsg(type, data) {
   !(self instanceof WorkerGlobalScope))
   ) {
     self.postMessage({
-      type: 'webpack' + type,
-      data: data
+      type: `webpack${type}`,
+      data
     }, '*');
   }
 }
 
 const onSocketMsg = {
-  hot: function msgHot() {
+  hot() {
     hot = true;
     log.info('[WDS] Hot Module Replacement enabled.');
   },
-  invalid: function msgInvalid() {
+  invalid() {
     log.info('[WDS] App updated. Recompiling...');
     // fixes #1042. overlay doesn't clear if errors are fixed but warnings remain.
     if (useWarningOverlay || useErrorOverlay) overlay.clear();
     sendMsg('Invalid');
   },
-  hash: function msgHash(hash) {
+  hash(hash) {
     currentHash = hash;
   },
   'still-ok': function stillOk() {
@@ -108,10 +108,10 @@ const onSocketMsg = {
         log.disableAll();
         break;
       default:
-        log.error('[WDS] Unknown clientLogLevel \'' + level + '\'');
+        log.error(`[WDS] Unknown clientLogLevel '${level}'`);
     }
   },
-  overlay: function msgOverlay(value) {
+  overlay(value) {
     if (typeof document !== 'undefined') {
       if (typeof (value) === 'boolean') {
         useWarningOverlay = false;
@@ -122,15 +122,15 @@ const onSocketMsg = {
       }
     }
   },
-  progress: function msgProgress(progress) {
+  progress(progress) {
     if (typeof document !== 'undefined') {
       useProgress = progress;
     }
   },
   'progress-update': function progressUpdate(data) {
-    if (useProgress) log.info('[WDS] ' + data.percent + '% - ' + data.msg + '.');
+    if (useProgress) log.info(`[WDS] ${data.percent}% - ${data.msg}.`);
   },
-  ok: function msgOk() {
+  ok() {
     sendMsg('Ok');
     if (useWarningOverlay || useErrorOverlay) overlay.clear();
     if (initial) return initial = false; // eslint-disable-line no-return-assign
@@ -140,27 +140,27 @@ const onSocketMsg = {
     log.info('[WDS] Content base changed. Reloading...');
     self.location.reload();
   },
-  warnings: function msgWarnings(warnings) {
+  warnings(warnings) {
     log.warn('[WDS] Warnings while compiling.');
-    const strippedWarnings = warnings.map(function map(warning) { return stripAnsi(warning); });
+    const strippedWarnings = warnings.map(warning => stripAnsi(warning));
     sendMsg('Warnings', strippedWarnings);
     for (let i = 0; i < strippedWarnings.length; i++) { log.warn(strippedWarnings[i]); }
     if (useWarningOverlay) overlay.showMessage(warnings);
 
     if (initial) return initial = false; // eslint-disable-line no-return-assign
     reloadApp();
   },
-  errors: function msgErrors(errors) {
+  errors(errors) {
     log.error('[WDS] Errors while compiling. Reload prevented.');
-    const strippedErrors = errors.map(function map(error) { return stripAnsi(error); });
+    const strippedErrors = errors.map(error => stripAnsi(error));
     sendMsg('Errors', strippedErrors);
     for (let i = 0; i < strippedErrors.length; i++) { log.error(strippedErrors[i]); }
     if (useErrorOverlay) overlay.showMessage(errors);
   },
-  error: function msgError(error) {
+  error(error) {
     log.error(error);
   },
-  close: function msgClose() {
+  close() {
     log.error('[WDS] Disconnected!');
     sendMsg('Close');
   }
@@ -190,17 +190,17 @@ if (hostname && (self.location.protocol === 'https:' || urlParts.hostname === '0
 }
 
 const socketUrl = url.format({
-  protocol: protocol,
+  protocol,
   auth: urlParts.auth,
-  hostname: hostname,
+  hostname,
   port: urlParts.port,
   pathname: urlParts.path == null || urlParts.path === '/' ? '/sockjs-node' : urlParts.path
 });
 
 socket(socketUrl, onSocketMsg);
 
 let isUnloading = false;
-self.addEventListener('beforeunload', function beforeUnload() {
+self.addEventListener('beforeunload', () => {
   isUnloading = true;
 });
 
@@ -215,12 +215,12 @@ function reloadApp() {
     hotEmitter.emit('webpackHotUpdate', currentHash);
     if (typeof self !== 'undefined' && self.window) {
       // broadcast update to window
-      self.postMessage('webpackHotUpdate' + currentHash, '*');
+      self.postMessage(`webpackHotUpdate${currentHash}`, '*');
     }
   } else {
     let rootWindow = self;
     // use parent window for reload (in case we're in an iframe with no valid src)
-    const intervalId = self.setInterval(function findRootWindow() {
+    const intervalId = self.setInterval(() => {
       if (rootWindow.location.protocol !== 'about:') {
         // reload immediately if protocol is valid
         applyReload(rootWindow, intervalId);

client/live.js

@@ -10,7 +10,7 @@ require('./style.css');
 let hot = false;
 let currentHash = '';
 
-$(function ready() {
+$(() => {
   $('body').html(require('./page.pug')());
   const status = $('#status');
   const okness = $('#okness');
@@ -28,11 +28,11 @@ $(function ready() {
   });
 
   const onSocketMsg = {
-    hot: function msgHot() {
+    hot() {
       hot = true;
       iframe.attr('src', contentPage + window.location.hash);
     },
-    invalid: function msgInvalid() {
+    invalid() {
       okness.text('');
       status.text('App updated. Recompiling...');
       header.css({
@@ -41,7 +41,7 @@ $(function ready() {
       $errors.hide();
       if (!hot) iframe.hide();
     },
-    hash: function msgHash(hash) {
+    hash(hash) {
       currentHash = hash;
     },
     'still-ok': function stillOk() {
@@ -53,27 +53,27 @@ $(function ready() {
       $errors.hide();
       if (!hot) iframe.show();
     },
-    ok: function msgOk() {
+    ok() {
       okness.text('');
       $errors.hide();
       reloadApp();
     },
-    warnings: function msgWarnings() {
+    warnings() {
       okness.text('Warnings while compiling.');
       $errors.hide();
       reloadApp();
     },
     errors: function msgErrors(errors) {
       status.text('App updated with errors. No reload!');
       okness.text('Errors while compiling.');
-      $errors.text('\n' + stripAnsi(errors.join('\n\n\n')) + '\n\n');
+      $errors.text(`\n${stripAnsi(errors.join('\n\n\n'))}\n\n`);
       header.css({
         borderColor: '#ebcb8b'
       });
       $errors.show();
       iframe.hide();
     },
-    close: function msgClose() {
+    close() {
       status.text('');
       okness.text('Disconnected.');
       $errors.text('\n\n\n  Lost connection to webpack-dev-server.\n  Please restart the server to reestablish connection...\n\n\n\n');
@@ -87,7 +87,7 @@ $(function ready() {
 
   socket('/sockjs-node', onSocketMsg);
 
-  iframe.on('load', function load() {
+  iframe.on('load', () => {
     status.text('App ready.');
     header.css({
       borderColor: ''
@@ -99,7 +99,7 @@ $(function ready() {
     if (hot) {
       status.text('App hot update.');
       try {
-        iframe[0].contentWindow.postMessage('webpackHotUpdate' + currentHash, '*');
+        iframe[0].contentWindow.postMessage(`webpackHotUpdate${currentHash}`, '*');
       } catch (e) {
         console.warn(e); // eslint-disable-line
       }
@@ -110,7 +110,7 @@ $(function ready() {
         borderColor: '#96b5b4'
       });
       try {
-        let old = iframe[0].contentWindow.location + '';
+        let old = `${iframe[0].contentWindow.location}`;
         if (old.indexOf('about') === 0) old = null;
         iframe.attr('src', old || (contentPage + window.location.hash));
         if (old) {

client/overlay.js

@@ -83,7 +83,7 @@ function ensureOverlayDivExists(onOverlayDivReady) {
   }
 
   // Create iframe and, when it is ready, a div inside it.
-  overlayIframe = createOverlayIframe(function cb() {
+  overlayIframe = createOverlayIframe(() => {
     overlayDiv = addOverlayDivTo(overlayIframe);
     // Now we can talk!
     lastOnOverlayDivReady(overlayDiv);
@@ -96,11 +96,12 @@ function ensureOverlayDivExists(onOverlayDivReady) {
 }
 
 function showMessageOverlay(message) {
-  ensureOverlayDivExists(function cb(div) {
+  ensureOverlayDivExists((div) => {
     // Make it look similar to our terminal.
-    div.innerHTML = '<span style="color: #' + colors.red +
-                    '">Failed to compile.</span><br><br>' +
-                    ansiHTML(entities.encode(message));
+    div.innerHTML = `<span style="color: #${
+      colors.red
+    }">Failed to compile.</span><br><br>${
+      ansiHTML(entities.encode(message))}`;
   });
 }
 

client/socket.js

@@ -26,7 +26,7 @@ const socket = function initSocket(url, handlers) {
       const retryInMs = 1000 * Math.pow(2, retries) + Math.random() * 100;
       retries += 1;
 
-      setTimeout(function cb() {
+      setTimeout(() => {
         socket(url, handlers);
       }, retryInMs);
     }

client/webpack.config.js

@@ -5,6 +5,18 @@ const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 module.exports = {
   module: {
     rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules|web_modules/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              presets: ['env']
+            }
+          }
+        ]
+      },
       {
         test: /\.pug$/,
         use: [

package.json

@@ -70,6 +70,9 @@
     "yargs": "^10.0.3"
   },
   "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-env": "^1.6.1",
     "codecov.io": "^0.1.6",
     "css-loader": "^0.28.5",
     "eslint": "^4.5.0",