Merge branch 'master' of github.com:FormidableLabs/webpack-dashboard …

…into left-right-navigation

CHANGELOG.md

@@ -3,6 +3,14 @@
 This project adheres to [Semantic Versioning](http://semver.org/).
 Every release, along with the migration instructions, is documented on the Github [Releases](https://github.com/FormidableLabs/webpack-dashboard/releases) page.
 
+## [3.1.0] - 2019-08-27
+
+- Add `DashboardPlugin({ includeAssets: [ "stringPrefix", /regexObj/ ] })` Webpack plugin filtering option.
+- Add `webpack-dashboard --include-assets stringPrefix1 -a stringPrefix2` CLI filtering option.
+- Change `"mode"` SocketIO event to `"options"` as it now passes both `minimal` and `includeAssets` from CLI to the Webpack plugin.
+- Fix unit tests that incorrectly relied on `.complete()` for `most` observables.
+- Add additional `examples` fixture for development.
+
 ## [3.0.7] - 2019-05-15
 
 ### Features

README.md

@@ -15,7 +15,7 @@ When using webpack, especially for a dev server, you are probably used to seeing
 
 That's cool, but it's mostly noise and scrolly and not super helpful. This plugin changes that. Now when you run your dev server, you basically work at NASA:
 
-![http://i.imgur.com/5BWa1hB.png](http://i.imgur.com/5BWa1hB.png)
+![http://i.imgur.com/qL6dXJd.png](http://i.imgur.com/qL6dXJd.png)
 
 ### Install
 
@@ -87,6 +87,7 @@ Webpack Dashboard works in Terminal, iTerm 2, and Hyper. For mouse events, like
 - `-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
+- `-a, --include-assets [string prefix]` - Limit display to asset names matching string prefix (option can be repeated and is concatenated to `new DashboardPlugin({ includeAssets })` options array)
 
 ##### Arguments
 
@@ -98,6 +99,7 @@ Webpack Dashboard works in Terminal, iTerm 2, and Hyper. For mouse events, like
 
 - `host` - Custom host for connection the socket client
 - `port` - Custom port for connecting the socket client
+- `includeAssets` - Limit display to asset names matching string prefix or regex (`Array<String | RegExp>`)
 - `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)`_

bin/webpack-dashboard.js

@@ -12,6 +12,8 @@ const DEFAULT_PORT = 9838;
 const program = new commander.Command("webpack-dashboard");
 const pkg = require("../package.json");
 
+const collect = (val, prev) => prev.concat([val]);
+
 // Wrap up side effects in a script.
 // eslint-disable-next-line max-statements, complexity
 const main = (module.exports = opts => {
@@ -24,6 +26,7 @@ const main = (module.exports = opts => {
   program.option("-m, --minimal", "Minimal mode");
   program.option("-t, --title [title]", "Terminal window title");
   program.option("-p, --port [port]", "Socket listener port");
+  program.option("-a, --include-assets [string prefix]", "Asset names to limit to", collect, []);
   program.usage("[options] -- [script] [arguments]");
   program.parse(argv);
 
@@ -64,7 +67,10 @@ const main = (module.exports = opts => {
 
   if (logFromChild) {
     server.on("connection", socket => {
-      socket.emit("mode", { minimal: program.minimal || false });
+      socket.emit("options", {
+        minimal: program.minimal || false,
+        includeAssets: program.includeAssets || []
+      });
 
       socket.on("message", (message, ack) => {
         if (message.type !== "log") {

examples/config/webpack.config.js

@@ -14,7 +14,9 @@ module.exports = {
   devtool: false,
   context: resolve(cwd),
   entry: {
-    bundle: "./src/index.js"
+    bundle: "./src/index.js",
+    // Hard-code path to the "hello world" no-dep entry for 2+ asset testing
+    hello: "../simple/src/index.js"
   },
   output: {
     path: resolve(cwd, "dist-development-4"),
@@ -29,6 +31,9 @@ module.exports = {
       verbose: true,
       emitErrors: false
     }),
-    new Dashboard()
+    new Dashboard({
+      // Optionally filter which assets to report on by string prefix or regex.
+      // includeAssets: ["bundle", /bund/]
+    })
   ]
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpack-dashboard",
-  "version": "3.0.7",
+  "version": "3.1.0",
   "description": "a CLI dashboard for webpack dev server",
   "bin": "bin/webpack-dashboard.js",
   "main": "index.js",

plugin/index.js

@@ -5,9 +5,9 @@
 const most = require("most");
 const webpack = require("webpack");
 const SocketIOClient = require("socket.io-client");
-const { actions } = require("inspectpack");
+const inspectpack = require("inspectpack");
 
-const { serializeError } = require("../utils/error-serialization");
+const serializer = require("../utils/error-serialization");
 
 const DEFAULT_PORT = 9838;
 const DEFAULT_HOST = "127.0.0.1";
@@ -55,6 +55,7 @@ class DashboardPlugin {
       options = options || {};
       this.host = options.host || DEFAULT_HOST;
       this.port = options.port || DEFAULT_PORT;
+      this.includeAssets = options.includeAssets || [];
       this.handler = options.handler || null;
     }
 
@@ -83,8 +84,9 @@ class DashboardPlugin {
       this.socket.on("connect", () => {
         handler = this.socket.emit.bind(this.socket, "message");
       });
-      this.socket.once("mode", args => {
+      this.socket.once("options", args => {
         this.minimal = args.minimal;
+        this.includeAssets = this.includeAssets.concat(args.includeAssets || []);
       });
       this.socket.on("error", err => {
         // eslint-disable-next-line no-console
@@ -232,6 +234,27 @@ class DashboardPlugin {
     // Get the **full** stats object here for `inspectpack` analysis.
     const statsToObserve = statsObj.toJson();
 
+    // Truncate off non-included assets.
+    const { includeAssets } = this;
+    if (includeAssets.length) {
+      statsToObserve.assets = statsToObserve.assets.filter(({ name }) =>
+        includeAssets.some(pattern => {
+          if (typeof pattern === "string") {
+            return name.startsWith(pattern);
+          } else if (pattern instanceof RegExp) {
+            return pattern.test(name);
+          }
+
+          // Pass through bad options..
+          return false;
+        })
+      );
+    }
+
+    // Late destructure so that we can stub.
+    const { actions } = inspectpack;
+    const { serializeError } = serializer;
+
     const getSizes = stats =>
       actions("sizes", { stats })
         .then(instance => instance.getData())

test/dashboard/index.spec.js

@@ -199,14 +199,14 @@ describe("dashboard", () => {
         }
       };
 
-      const formattedData = [
-        ["Name", "Size"],
-        ["foo", "456 B"],
-        ["bar", "123 B"],
-        ["Total", "579 B"]
-      ];
-
       it("can setSizes", () => {
+        const formattedData = [
+          ["Name", "Size"],
+          ["foo", "456 B"],
+          ["bar", "123 B"],
+          ["Total", "579 B"]
+        ];
+
         expect(() => dashboard.setSizes(data)).to.not.throw;
 
         dashboard.setSizes(data);

test/plugin/index.spec.js

@@ -1,7 +1,6 @@
 "use strict";
 
 const inspectpack = require("inspectpack");
-const most = require("most");
 
 const base = require("../base.spec");
 const Plugin = require("../../plugin");
@@ -38,8 +37,11 @@ describe("plugin", () => {
     let plugin;
 
     beforeEach(() => {
-      stats = {};
-      toJson = base.sandbox.stub().returns(stats);
+      stats = {
+        modules: [],
+        assets: []
+      };
+      toJson = base.sandbox.stub().callsFake(() => stats);
       compilation = {
         errors: [],
         warnings: [],
@@ -87,31 +89,76 @@ describe("plugin", () => {
 
     it("can do a basic observeMetrics", () => {
       const actions = base.sandbox.spy(inspectpack, "actions");
-      const of = base.sandbox.spy(most, "of");
-      const mergeArray = base.sandbox.spy(most, "mergeArray");
-
-      plugin.observeMetrics({ toJson }).subscribe({
-        next: base.sandbox.spy(),
-        error: base.sandbox.spy(),
-        complete: () => {
-          expect(actions).to.have.been.calledThrice;
-          expect(of).to.have.been.calledTwice;
-          expect(mergeArray).to.have.been.called;
-        }
+
+      return (
+        plugin
+          .observeMetrics({ toJson })
+          .drain()
+          // eslint-disable-next-line promise/always-return
+          .then(() => {
+            expect(actions).to.have.been.calledThrice;
+          })
+      );
+    });
+
+    it("filters assets for includeAssets", () => {
+      const actions = base.sandbox.spy(inspectpack, "actions");
+
+      stats = {
+        assets: [
+          {
+            name: "one.js",
+            modules: []
+          },
+          {
+            name: "two.js",
+            modules: []
+          },
+          {
+            name: "three.js",
+            modules: []
+          }
+        ]
+      };
+
+      plugin = new Plugin({
+        includeAssets: [
+          "one", // string prefix
+          /tw/ // regex match
+        ]
       });
+
+      return (
+        plugin
+          .observeMetrics({ toJson })
+          .drain()
+          // eslint-disable-next-line promise/always-return
+          .then(() => {
+            expect(actions).to.have.been.calledWith("sizes", {
+              stats: {
+                assets: [{ modules: [], name: "one.js" }, { modules: [], name: "two.js" }]
+              }
+            });
+          })
+      );
     });
 
     it("should serialize errors when encountered", () => {
-      base.sandbox.stub(inspectpack, "actions").rejects();
+      const actions = base.sandbox.stub(inspectpack, "actions").rejects();
       const serializeError = base.sandbox.spy(errorSerializer, "serializeError");
 
-      plugin.observeMetrics({ toJson }).subscribe({
-        next: base.sandbox.spy(),
-        error: base.sandbox.spy(),
-        complete: () => {
-          expect(serializeError).to.have.been.calledThrice;
-        }
-      });
+      return (
+        plugin
+          .observeMetrics({ toJson })
+          .drain()
+          // eslint-disable-next-line promise/always-return
+          .then(() => {
+            // All three actions called.
+            expect(actions).to.have.been.calledThrice;
+            // ... but since two are in Promise.all only get one rejection.
+            expect(serializeError).to.have.been.calledTwice;
+          })
+      );
     });
   });
 });

yarn.lock

@@ -1473,14 +1473,16 @@ eslint-scope@^4.0.0, eslint-scope@^4.0.3:
     estraverse "^4.1.1"
 
 eslint-utils@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.3.1.tgz#9a851ba89ee7c460346f97cf8939c7298827e512"
-  integrity sha512-Z7YjnIldX+2XMcjr7ZkgEsOj/bREONV60qYeB/bjMAqqqZ4zxKyWX+BOUkdmRmA9riiIPVvo5x86m5elviOk0Q==
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.2.tgz#166a5180ef6ab7eb462f162fd0e6f2463d7309ab"
+  integrity sha512-eAZS2sEUMlIeCjBeubdj45dmBHQwPHWyBcT1VSYB7o9x9WRRqKxyUoiXlRjyAwzN7YEzHJlYg0NmzDRWx6GP4Q==
+  dependencies:
+    eslint-visitor-keys "^1.0.0"
 
 eslint-visitor-keys@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
-  integrity sha512-qzm/XxIbxm/FHyH341ZrbnMUpe+5Bocte9xkmFMzPMjRaZMcXww+MpBptFvtU+79L362nqiLhekCxCxDPaUMBQ==
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
+  integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==
 
 eslint@^5.16.0:
   version "5.16.0"
@@ -2648,9 +2650,9 @@ [email protected]:
   integrity sha1-E2Xt9DFIBIHvDRxolXpe2Z1J984=
 
 lodash@^4.17.11:
-  version "4.17.11"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
-  integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
+  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
 
 lolex@^2.3.2, lolex@^2.4.2:
   version "2.7.5"
@@ -2862,9 +2864,9 @@ mississippi@^3.0.0:
     through2 "^2.0.0"
 
 mixin-deep@^1.2.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.1.tgz#a49e7268dce1a0d9698e45326c5626df3543d0fe"
-  integrity sha512-8ZItLHeEgaqEvd5lYBXfm4EZSFCX29Jb9K+lAHhDKzReKBQKj3R+7NOF6tjqYi9t4oI8VUfaWITJQm86wnXGNQ==
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
+  integrity sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==
   dependencies:
     for-in "^1.0.2"
     is-extendable "^1.0.1"