fixes #1084: template literals causing errors on IE (#1089)

* fixes #1084: template literals causing errors on IE

* regressing back to strip-ansi@3.x to prevent IE errors
cleaning up erroneous ES6 in client for IE
updating client eslintrc to prevent es6 errors in IE

client/.eslintrc

@@ -0,0 +1,7 @@
+{
+  "rules": {
+    "object-shorthand": ["error", "never"],
+    "prefer-arrow-callback": ["off"],
+    "prefer-template": ["off"]
+  }
+}

client/index.js

@@ -65,24 +65,24 @@ function sendMsg(type, data) {
   !(self instanceof WorkerGlobalScope))
   ) {
     self.postMessage({
-      type: `webpack${type}`,
-      data
+      type: 'webpack' + type,
+      data: data
     }, '*');
   }
 }
 
 const onSocketMsg = {
-  hot() {
+  hot: function msgHot() {
     hot = true;
     log.info('[WDS] Hot Module Replacement enabled.');
   },
-  invalid() {
+  invalid: function msgInvalid() {
     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(hash) {
+  hash: function msgHash(hash) {
     currentHash = hash;
   },
   'still-ok': function stillOk() {
@@ -109,10 +109,10 @@ const onSocketMsg = {
         log.disableAll();
         break;
       default:
-        log.error(`[WDS] Unknown clientLogLevel '${level}'`);
+        log.error('[WDS] Unknown clientLogLevel \'' + level + '\'');
     }
   },
-  overlay(value) {
+  overlay: function msgOverlay(value) {
     if (typeof document !== 'undefined') {
       if (typeof (value) === 'boolean') {
         useWarningOverlay = false;
@@ -123,15 +123,15 @@ const onSocketMsg = {
       }
     }
   },
-  progress(progress) {
+  progress: function msgProgress(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() {
+  ok: function msgOk() {
     sendMsg('Ok');
     if (useWarningOverlay || useErrorOverlay) overlay.clear();
     if (initial) return initial = false; // eslint-disable-line no-return-assign
@@ -141,27 +141,27 @@ const onSocketMsg = {
     log.info('[WDS] Content base changed. Reloading...');
     self.location.reload();
   },
-  warnings(warnings) {
+  warnings: function msgWarnings(warnings) {
     log.warn('[WDS] Warnings while compiling.');
-    const strippedWarnings = warnings.map(warning => stripAnsi(warning));
+    const strippedWarnings = warnings.map(function map(warning) { return 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(errors) {
+  errors: function msgErrors(errors) {
     log.error('[WDS] Errors while compiling. Reload prevented.');
-    const strippedErrors = errors.map(error => stripAnsi(error));
+    const strippedErrors = errors.map(function map(error) { return stripAnsi(error); });
     sendMsg('Errors', strippedErrors);
     for (let i = 0; i < strippedErrors.length; i++) { log.error(strippedErrors[i]); }
     if (useErrorOverlay) overlay.showMessage(errors);
   },
-  error(error) {
+  error: function msgError(error) {
     log.error(error);
   },
-  close() {
+  close: function msgClose() {
     log.error('[WDS] Disconnected!');
     sendMsg('Close');
   }
@@ -191,17 +191,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', () => {
+self.addEventListener('beforeunload', function beforeUnload() {
   isUnloading = true;
 });
 
@@ -216,7 +216,7 @@ 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 {
     log.info('[WDS] App updated. Reloading...');

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 @@ $(() => {
   });
 
   const onSocketMsg = {
-    hot() {
+    hot: function msgHot() {
       hot = true;
       iframe.attr('src', contentPage + window.location.hash);
     },
-    invalid() {
+    invalid: function msgInvalid() {
       okness.text('');
       status.text('App updated. Recompiling...');
       header.css({
@@ -41,7 +41,7 @@ $(() => {
       $errors.hide();
       if (!hot) iframe.hide();
     },
-    hash(hash) {
+    hash: function msgHash(hash) {
       currentHash = hash;
     },
     'still-ok': function stillOk() {
@@ -53,27 +53,27 @@ $(() => {
       $errors.hide();
       if (!hot) iframe.show();
     },
-    ok() {
+    ok: function msgOk() {
       okness.text('');
       $errors.hide();
       reloadApp();
     },
-    warnings() {
+    warnings: function msgWarnings() {
       okness.text('Warnings while compiling.');
       $errors.hide();
       reloadApp();
     },
-    errors(errors) {
+    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() {
+    close: function msgClose() {
       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 @@ $(() => {
 
   socket('/sockjs-node', onSocketMsg);
 
-  iframe.on('load', () => {
+  iframe.on('load', function load() {
     status.text('App ready.');
     header.css({
       borderColor: ''
@@ -99,7 +99,7 @@ $(() => {
     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 @@ $(() => {
         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(() => {
+  overlayIframe = createOverlayIframe(function cb() {
     overlayDiv = addOverlayDivTo(overlayIframe);
     // Now we can talk!
     lastOnOverlayDivReady(overlayDiv);
@@ -96,13 +96,11 @@ function ensureOverlayDivExists(onOverlayDivReady) {
 }
 
 function showMessageOverlay(message) {
-  ensureOverlayDivExists((div) => {
+  ensureOverlayDivExists(function cb(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 @@ function socket(url, handlers) {
       const retryInMs = 1000 * Math.pow(2, retries) + Math.random() * 100;
       retries += 1;
 
-      setTimeout(() => {
+      setTimeout(function cb() {
         socket(url, handlers);
       }, retryInMs);
     }

package.json

@@ -60,7 +60,7 @@
     "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"