Merge pull request #270 from FormidableLabs/task/migrate-neo-blessed

Migrate to using neo-blessed as underlying blessed renderer.

Author: parkerziegler

.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": "formidable/configurations/es6-node",
+  "extends": ["formidable/configurations/es6-node", "plugin:prettier/recommended"],
   "rules": {
     "func-style": "off",
     "arrow-parens": ["error", "as-needed"]

.travis.yml

@@ -1,7 +1,6 @@
 language: node_js
 
 node_js:
-  - "6"
   - "8"
   - "10"
 

README.md

@@ -18,26 +18,25 @@ That's cool, but it's mostly noise and scrolly and not super helpful. This plugi
 
 ### Use
 
+**`webpack-dashboard@^2.1.1` requires Node 8 or above.** Previous versions support down to Node 6.
+
 First, import the plugin and add it to your webpack config, or apply it to your compiler:
 
 ```js
 // Import the plugin:
-var DashboardPlugin = require('webpack-dashboard/plugin');
+var DashboardPlugin = require("webpack-dashboard/plugin");
 
 // If you aren't using express, add it to your webpack configs plugins section:
-plugins: [
-    new DashboardPlugin()
-]
+plugins: [new DashboardPlugin()];
 
 // If you are using an express based dev server, add it with compiler.apply
 compiler.apply(new DashboardPlugin());
 ```
+
 If using a custom port, the port number must be included in the options object here, as well as passed using the -p flag in the call to webpack-dashboard. See how below:
 
 ```js
-plugins: [
-    new DashboardPlugin({ port: 3001 })
-]
+plugins: [new DashboardPlugin({ port: 3001 })];
 ```
 
 In the latest version, you can either run your app, and run `webpack-dashboard` independently (by installing with `npm install webpack-dashboard -g`) or run webpack-dashboard from your `package.json`. So if your dev server start script previously looked like:
@@ -55,6 +54,7 @@ You would change that to:
     "dev": "webpack-dashboard -- node index.js"
 }
 ```
+
 Now you can just run your start script like normal, except now, you are awesome. Not that you weren't before. I'm just saying. More so.
 
 ### Run it
@@ -64,8 +64,9 @@ Finally, start your server using whatever command you have set up. Either you ha
 Then, sit back and pretend you're an astronaut.
 
 ### Supported Operating Systems and Terminals
+
 **macOS →**
-Webpack Dashboard works in Terminal, iTerm 2, and Hyper. For mouse events, like scrolling, in Terminal you will need to ensure *View → Enable Mouse Reporting* is enabled. This is supported in macOS El Capitan, Sierra, and High Sierra. In iTerm 2, to select full rows of text hold the <kbd>⌥ Opt</kbd> key. To select a block of text hold the <kbd>⌥ Opt</kbd> + <kbd>⌘ Cmd</kbd> key combination.
+Webpack Dashboard works in Terminal, iTerm 2, and Hyper. For mouse events, like scrolling, in Terminal you will need to ensure _View → Enable Mouse Reporting_ is enabled. This is supported in macOS El Capitan, Sierra, and High Sierra. In iTerm 2, to select full rows of text hold the <kbd>⌥ Opt</kbd> key. To select a block of text hold the <kbd>⌥ Opt</kbd> + <kbd>⌘ Cmd</kbd> key combination.
 
 **Windows 10 →** Webpack Dashboard works in Command Prompt, PowerShell, and Linux Subsystem for Windows. Mouse events are not supported at this time, as discussed further in the documentation of the underlying terminal library we use [Blessed](https://github.com/chjj/blessed#windows-compatibility). The main log can be scrolled using the <kbd>↑</kbd>, <kbd>↓</kbd>, <kbd>Page Up</kbd>, and <kbd>Page Down</kbd> keys.
 
@@ -74,25 +75,27 @@ Webpack Dashboard works in Terminal, iTerm 2, and Hyper. For mouse events, like
 ### API
 
 #### webpack-dashboard (CLI)
+
 ##### Options
 
- - `-c, --color [color]` - Custom ANSI color for your dashboard
- - `-m, --minimal` - Runs the dashboard in minimal mode
- - `-t, --title [title]` - Set title of terminal window
- - `-p, --port [port]` - Custom port for socket communication server
+- `-c, --color [color]` - Custom ANSI color for your dashboard
+- `-m, --minimal` - Runs the dashboard in minimal mode
+- `-t, --title [title]` - Set title of terminal window
+- `-p, --port [port]` - Custom port for socket communication server
 
 ##### Arguments
 
 `[command]` - The command you want to run, i.e. `webpack-dashboard -- node index.js`
 
 #### Webpack plugin
+
 #### Options
 
- - `host` - Custom host for connection the socket client
- - `port` - Custom port for connecting the socket client
- - `handler` - Plugin handler method, i.e. `dashboard.setData`
+- `host` - Custom host for connection the socket client
+- `port` - Custom port for connecting the socket client
+- `handler` - Plugin handler method, i.e. `dashboard.setData`
 
-*Note: you can also just pass a function in as an argument, which then becomes the handler, i.e. `new DashboardPlugin(dashboard.setData)`*
+_Note: you can also just pass a function in as an argument, which then becomes the handler, i.e. `new DashboardPlugin(dashboard.setData)`_
 
 ### Local Development
 

bin/webpack-dashboard.js

@@ -13,7 +13,8 @@ const program = new commander.Command("webpack-dashboard");
 const pkg = require("../package.json");
 
 // Wrap up side effects in a script.
-const main = module.exports = opts => { // eslint-disable-line max-statements, complexity
+// eslint-disable-next-line max-statements, complexity
+const main = (module.exports = opts => {
   opts = opts || {};
   const argv = typeof opts.argv === "undefined" ? process.argv : opts.argv;
 
@@ -72,17 +73,21 @@ const main = module.exports = opts => { // eslint-disable-line max-statements, c
     });
 
     child.stdout.on("data", data => {
-      dashboard.setData([{
-        type: "log",
-        value: data.toString("utf8")
-      }]);
+      dashboard.setData([
+        {
+          type: "log",
+          value: data.toString("utf8")
+        }
+      ]);
     });
 
     child.stderr.on("data", data => {
-      dashboard.setData([{
-        type: "log",
-        value: data.toString("utf8")
-      }]);
+      dashboard.setData([
+        {
+          type: "log",
+          value: data.toString("utf8")
+        }
+      ]);
     });
 
     process.on("exit", () => {
@@ -95,7 +100,7 @@ const main = module.exports = opts => { // eslint-disable-line max-statements, c
       });
     });
   }
-};
+});
 
 if (require.main === module) {
   main();

dashboard/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 const chalk = require("chalk");
-const blessed = require("blessed");
+const blessed = require("neo-blessed");
 
 const { formatOutput } = require("../utils/format-output");
 const { formatModules } = require("../utils/format-modules");
@@ -94,13 +94,12 @@ class Dashboard {
 
   setData(dataArray) {
     dataArray
-      .map(
-        data =>
-          data.error
-            ? Object.assign({}, data, {
+      .map(data =>
+        data.error
+          ? Object.assign({}, data, {
               value: deserializeError(data.value)
             })
-            : data
+          : data
       )
       .forEach(data => {
         this.actionForMessageType[data.type](data);
@@ -133,14 +132,14 @@ class Dashboard {
     let content;
 
     switch (data.value) {
-    case "Success":
-      content = `{green-fg}{bold}${data.value}{/}`;
-      break;
-    case "Failed":
-      content = `{red-fg}{bold}${data.value}{/}`;
-      break;
-    default:
-      content = `{bold}${data.value}{/}`;
+      case "Success":
+        content = `{green-fg}{bold}${data.value}{/}`;
+        break;
+      case "Failed":
+        content = `{red-fg}{bold}${data.value}{/}`;
+        break;
+      default:
+        content = `{bold}${data.value}{/}`;
     }
     this.status.setContent(content);
   }
@@ -497,8 +496,8 @@ class Dashboard {
       tags: true,
       padding: this.minimal
         ? {
-          left: 1
-        }
+            left: 1
+          }
         : 1,
       width: this.minimal ? "33%" : "100%",
       height: this.minimal ? "100%" : "34%",

examples/simple/src/index.js

@@ -1,4 +1,3 @@
-
 /* eslint-disable no-console*/
 
 const hello = () => "hello world";

package.json

@@ -12,10 +12,12 @@
     "test": "mocha 'test/**/*.spec.js'",
     "test-cov": "nyc mocha 'test/**/*.spec.js'",
     "lint": "eslint .",
-    "check": "npm run lint && npm run test && npm run check-ts",
-    "check-ci": "npm run lint && npm run test-cov && npm run check-ts",
+    "check": "npm run format-check && npm run lint && npm run test && npm run check-ts",
+    "check-ci": "npm run format-check && npm run lint && npm run test-cov && npm run check-ts",
     "check-ts": "tsc index.d.ts --noEmit",
-    "dev": "cross-env EXAMPLE=duplicates-esm node bin/webpack-dashboard.js -- webpack-cli --config examples/config/webpack.config.js --watch"
+    "dev": "cross-env EXAMPLE=duplicates-esm node bin/webpack-dashboard.js -- webpack-cli --config examples/config/webpack.config.js --watch",
+    "format": "prettier --write './{bin,examples,plugin,test,utils}/**/*.js'",
+    "format-check": "prettier --list-different './{bin,examples,plugin,test,utils}/**/*.js'"
   },
   "repository": {
     "type": "git",
@@ -37,13 +39,13 @@
     "webpack": "*"
   },
   "dependencies": {
-    "blessed": "^0.1.81",
     "commander": "^2.15.1",
     "cross-spawn": "^6.0.5",
     "filesize": "^3.6.1",
     "handlebars": "^4.0.11",
     "inspectpack": "^4.0.0",
     "most": "^1.7.3",
+    "neo-blessed": "^0.2.0",
     "socket.io": "^2.1.1",
     "socket.io-client": "^2.1.1"
   },
@@ -53,11 +55,14 @@
     "cross-env": "^5.2.0",
     "eslint": "^4.19.1",
     "eslint-config-formidable": "^4.0.0",
+    "eslint-config-prettier": "^4.0.0",
     "eslint-plugin-filenames": "^1.1.0",
     "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-prettier": "^3.0.1",
     "eslint-plugin-promise": "^3.7.0",
     "mocha": "^5.2.0",
     "nyc": "^11.8.0",
+    "prettier": "^1.16.4",
     "sinon": "^5.0.7",
     "sinon-chai": "^3.0.0",
     "typescript": "^3.2.4",

plugin/index.js

@@ -159,10 +159,8 @@ class DashboardPlugin {
 
     webpackHook(compiler, "done", stats => {
       const options = stats.compilation.options;
-      const statsOptions
-        = options.devServer && options.devServer.stats
-        || options.stats
-        || { colors: true };
+      const statsOptions = (options.devServer && options.devServer.stats) ||
+        options.stats || { colors: true };
 
       handler([
         {
@@ -207,33 +205,40 @@ class DashboardPlugin {
   observeMetrics(statsObj) {
     const statsToObserve = statsObj.toJson();
 
-    const getSizes = stats => actions("sizes", { stats })
-      .then(instance => instance.getData())
-      .then(data => ({
-        type: "sizes",
-        value: data
-      }))
-      .catch(err => ({
-        type: "sizes",
-        error: true,
-        value: serializeError(err)
-      }));
-
-    const getProblems = stats => Promise
-      .all(INSPECTPACK_PROBLEM_ACTIONS.map(action => actions(action, { stats })
+    const getSizes = stats =>
+      actions("sizes", { stats })
         .then(instance => instance.getData())
-      ))
-      .then(datas => ({
-        type: INSPECTPACK_PROBLEM_TYPE,
-        value: INSPECTPACK_PROBLEM_ACTIONS.reduce((memo, action, i) => Object.assign({}, memo, {
-          [action]: datas[i]
-        }), {})
-      }))
-      .catch(err => ({
-        type: INSPECTPACK_PROBLEM_TYPE,
-        error: true,
-        value: serializeError(err)
-      }));
+        .then(data => ({
+          type: "sizes",
+          value: data
+        }))
+        .catch(err => ({
+          type: "sizes",
+          error: true,
+          value: serializeError(err)
+        }));
+
+    const getProblems = stats =>
+      Promise.all(
+        INSPECTPACK_PROBLEM_ACTIONS.map(action =>
+          actions(action, { stats }).then(instance => instance.getData())
+        )
+      )
+        .then(datas => ({
+          type: INSPECTPACK_PROBLEM_TYPE,
+          value: INSPECTPACK_PROBLEM_ACTIONS.reduce(
+            (memo, action, i) =>
+              Object.assign({}, memo, {
+                [action]: datas[i]
+              }),
+            {}
+          )
+        }))
+        .catch(err => ({
+          type: INSPECTPACK_PROBLEM_TYPE,
+          error: true,
+          value: serializeError(err)
+        }));
 
     const sizesStream = most.of(statsToObserve).map(getSizes);
     const problemsStream = most.of(statsToObserve).map(getProblems);

test/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["formidable/configurations/es6-node-test", "plugin:prettier/recommended"]
+}