fix(dev-utils): refactor hotDevClient to ES5 compat (#522)

Fixes #515

core/dev-utils/colors.js

@@ -0,0 +1,77 @@
+/* eslint-disable */
+/**
+ * This file should be written in ES5
+ * Code is taken from https://github.com/jorgebucaran/colorette/blob/master/index.js
+ * Copy it to https://buble.surge.sh and paste here
+ */
+"use strict"
+
+var enabled =
+  process.env.FORCE_COLOR ||
+  process.platform === "win32" ||
+  (process.stdout && process.stdout.isTTY && process.env.TERM && process.env.TERM !== "dumb")
+
+var rawInit = function (open, close, searchRegex, replaceValue) { return function (s) { return enabled
+    ? open +
+      (~(s += "").indexOf(close, 4) // skip opening \x1b[
+        ? s.replace(searchRegex, replaceValue)
+        : s) +
+      close
+    : s; }; }
+
+var init = function (open, close) {
+  return rawInit(
+    ("\u001b[" + open + "m"),
+    ("\u001b[" + close + "m"),
+    new RegExp(("\\x1b\\[" + close + "m"), "g"),
+    ("\u001b[" + open + "m")
+  )
+}
+
+module.exports = {
+  options: Object.defineProperty({}, "enabled", {
+    get: function () { return enabled; },
+    set: function (value) { return (enabled = value); }
+  }),
+  reset: init(0, 0),
+  bold: rawInit("\x1b[1m", "\x1b[22m", /\x1b\[22m/g, "\x1b[22m\x1b[1m"),
+  dim: rawInit("\x1b[2m", "\x1b[22m", /\x1b\[22m/g, "\x1b[22m\x1b[2m"),
+  italic: init(3, 23),
+  underline: init(4, 24),
+  inverse: init(7, 27),
+  hidden: init(8, 28),
+  strikethrough: init(9, 29),
+  black: init(30, 39),
+  red: init(31, 39),
+  green: init(32, 39),
+  yellow: init(33, 39),
+  blue: init(34, 39),
+  magenta: init(35, 39),
+  cyan: init(36, 39),
+  white: init(37, 39),
+  gray: init(90, 39),
+  bgBlack: init(40, 49),
+  bgRed: init(41, 49),
+  bgGreen: init(42, 49),
+  bgYellow: init(43, 49),
+  bgBlue: init(44, 49),
+  bgMagenta: init(45, 49),
+  bgCyan: init(46, 49),
+  bgWhite: init(47, 49),
+  blackBright: init(90, 39),
+  redBright: init(91, 39),
+  greenBright: init(92, 39),
+  yellowBright: init(93, 39),
+  blueBright: init(94, 39),
+  magentaBright: init(95, 39),
+  cyanBright: init(96, 39),
+  whiteBright: init(97, 39),
+  bgBlackBright: init(100, 49),
+  bgRedBright: init(101, 49),
+  bgGreenBright: init(102, 49),
+  bgYellowBright: init(103, 49),
+  bgBlueBright: init(104, 49),
+  bgMagentaBright: init(105, 49),
+  bgCyanBright: init(106, 49),
+  bgWhiteBright: init(107, 49)
+}

core/dev-utils/formatWebpackMessages.js

@@ -3,13 +3,11 @@
 
 // WARNING: this code is untranspiled and is used in browser too.
 // Please make sure any changes are in ES5 or contribute a Babel compile step.
+var colors = require('./colors')
 
 // Some custom utilities to prettify Webpack output.
 // This is quite hacky and hopefully won't be needed when Webpack fixes this.
 // https://github.com/webpack/webpack/issues/2878
-
-var chalk = require('chalk');
-
 var friendlySyntaxErrorLabel = 'Syntax error:';
 
 function isLikelyASyntaxError(message) {
@@ -69,12 +67,12 @@ function formatMessage(message, isError) {
     lines[1] = lines[1].replace(exportError, '$1 \'$4\' does not contain an export named \'$3\'.');
   }
 
-  lines[0] = chalk.inverse(lines[0]);
+  lines[0] = colors.inverse(lines[0]);
 
   // Reassemble the message.
-  message = lines.map(line => {
+  message = lines.map(function (line) {
     if (line.indexOf('vue-template-compiler must be installed as a peer dependency') > -1) {
-      return `You need to install "vue-template-compiler" alongside "vue" in your project.`
+      return 'You need to install "vue-template-compiler" alongside "vue" in your project.'
     }
     return line
   }).join('\n');

core/dev-utils/openBrowser.js

@@ -1,10 +1,10 @@
 /* eslint-disable */
 'use strict';
 
-var chalk = require('chalk');
 var execSync = require('child_process').execSync;
 var spawn = require('cross-spawn');
 var opn = require('opn');
+var colors = require('./colors');
 
 // https://github.com/sindresorhus/opn#app
 var OSX_CHROME = 'google chrome';
@@ -43,11 +43,11 @@ function executeNodeScript(scriptPath, url) {
     if (code !== 0) {
       console.log();
       console.log(
-        chalk.red(
+        colors.red(
           'The script specified as BROWSER environment variable failed.'
         )
       );
-      console.log(chalk.cyan(scriptPath) + ' exited with code ' + code + '.');
+      console.log(colors.cyan(scriptPath) + ' exited with code ' + code + '.');
       console.log();
       return;
     }

core/dev-utils/package.json

@@ -11,12 +11,11 @@
   "license": "MIT",
   "dependencies": {
     "address": "^1.0.3",
-    "chalk": "^2.4.1",
     "cross-spawn": "^6.0.5",
     "opn": "^5.4.0",
     "react-error-overlay": "^4.0.1",
     "sockjs-client": "^1.1.5",
-    "strip-ansi": "^4.0.0"
+    "strip-ansi": "3.0.0"
   },
   "xo": false
 }

core/dev-utils/prepareProxy.js

@@ -1,8 +1,8 @@
 const fs = require('fs')
 const path = require('path')
 const url = require('url')
-const chalk = require('chalk')
 const address = require('address')
+const colors = require('./colors')
 
 module.exports = function(proxy, appPublicFolder, debug) {
   // `proxy` lets you specify alternate servers for specific requests.
@@ -74,18 +74,18 @@ function onProxyError(proxy) {
   return (err, req, res) => {
     const host = req.headers && req.headers.host
     console.log(
-      chalk.red('Proxy error:') +
+      colors.red('Proxy error:') +
         ' Could not proxy request ' +
-        chalk.cyan(req.url) +
+        colors.cyan(req.url) +
         ' from ' +
-        chalk.cyan(host) +
+        colors.cyan(host) +
         ' to ' +
-        chalk.cyan(proxy) +
+        colors.cyan(proxy) +
         '.'
     )
     console.log(
       'See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (' +
-        chalk.cyan(err.code) +
+        colors.cyan(err.code) +
         ').'
     )
     console.log()

core/dev-utils/printServeMessage.js

@@ -1,5 +1,5 @@
-const chalk = require('chalk')
 const address = require('address')
+const colors = require('./colors')
 
 module.exports = ({ host, port, open, isFirstBuild }) => {
   const ip = address.ip()
@@ -8,8 +8,8 @@ module.exports = ({ host, port, open, isFirstBuild }) => {
   const prettyHost = isUnspecifiedHost ? 'localhost' : host
 
   console.log()
-  console.log(`Local:             http://${prettyHost}:${chalk.bold(port)}`)
-  console.log(`On Your Network:   http://${ip}:${chalk.bold(port)}`)
+  console.log(`Local:             http://${prettyHost}:${colors.bold(port)}`)
+  console.log(`On Your Network:   http://${ip}:${colors.bold(port)}`)
   console.log()
 
   if (open && isFirstBuild) {

yarn.lock

@@ -11647,6 +11647,13 @@ stringify-object@^3.2.2, stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
+[email protected]:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.0.tgz#7510b665567ca914ccb5d7e072763ac968be3724"
+  integrity sha1-dRC2ZVZ8qRTMtdfgcnY6yWi+NyQ=
+  dependencies:
+    ansi-regex "^2.0.0"
+
 strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   version "3.0.1"
   resolved "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"