Print webpack progress to browser console (#1063)

Wernerson · shellscape · commit ccef0d186ef0 · 2017-09-13T10:37:31.000-04:00
* copied status.js from overlay.js

* first version

* added example

* added checkif status is set

* changed description

* fixed config schema

* fixed validation testcase

* added status to title

* changed status div style

* added status window delay

status window now stays for a moment after recompilation before reloading the app

* made status work better with overlay

* added status bar

* added status update

* added progress updates on backend

* changed progress bar color to webpack logo color

* added second webpack logo color as comment 

The second webpack color (the light blue) doesn't look that great as background for the status window, I added it just for reference.

* added compilation status to title

* ran prepublish, posttest and beautify

* fixed codacy issues

* fixed codacy issues

This time for good

* fixed merge error

* console-progress v1

* fixed lint errrors (LF -&gt; CRLF)

* load plugin only if progress is enabled

* linted Server.js
diff --git a/client/index.js b/client/index.js
@@ -18,7 +18,7 @@ function getCurrentScriptSource() {
   const currentScript = scriptElements[scriptElements.length - 1];
   if (currentScript) { return currentScript.getAttribute('src'); }
   // Fail as there was no script to use.
-  throw new Error('[WDS] Failed to get current script source');
+  throw new Error('[WDS] Failed to get current script source.');
 }
 
 let urlParts;
@@ -47,6 +47,7 @@ let initial = true;
 let currentHash = '';
 let useWarningOverlay = false;
 let useErrorOverlay = false;
+let useProgress = false;
 
 const INFO = 'info';
 const WARNING = 'warning';
@@ -122,6 +123,14 @@ const onSocketMsg = {
       }
     }
   },
+  progress(progress) {
+    if (typeof document !== 'undefined') {
+      useProgress = progress;
+    }
+  },
+  'progress-update': function progressUpdate(data) {
+    if (useProgress) log.info(`[WDS] ${data.percent}% - ${data.msg}.`);
+  },
   ok() {
     sendMsg('Ok');
     if (useWarningOverlay || useErrorOverlay) overlay.clear();
diff --git a/examples/progress/README.md b/examples/progress/README.md
@@ -0,0 +1,11 @@
+# Status
+
+```shell
+node ../../bin/webpack-dev-server.js --open
+```
+
+## What should happen
+
+The script should open the browser and show a heading with "Example: progress".
+
+In `app.js`, change the text and save. You should see the compilation progress in the browser console.
diff --git a/examples/progress/app.js b/examples/progress/app.js
@@ -0,0 +1,5 @@
+'use strict';
+
+// Change the following line and save to see the compilation status
+
+document.write('Change me to see compilation progress in console...');
diff --git a/examples/progress/index.html b/examples/progress/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Progress example</title>
+		<script src="/bundle.js" type="text/javascript" charset="utf-8"></script>
+	</head>
+	<body>
+		<h1>Example: progress</h1>
+	</body>
+</html>
diff --git a/examples/progress/webpack.config.js b/examples/progress/webpack.config.js
@@ -0,0 +1,9 @@
+'use strict';
+
+module.exports = {
+  context: __dirname,
+  entry: './app.js',
+  devServer: {
+    progress: true
+  }
+};
diff --git a/lib/Server.js b/lib/Server.js
@@ -42,6 +42,7 @@ function Server(compiler, options) {
   this.headers = options.headers;
   this.clientLogLevel = options.clientLogLevel;
   this.clientOverlay = options.overlay;
+  this.progress = options.progress;
   this.disableHostCheck = !!options.disableHostCheck;
   this.publicHost = options.public;
   this.allowedHosts = options.allowedHosts;
@@ -52,6 +53,15 @@ function Server(compiler, options) {
   const invalidPlugin = () => {
     this.sockWrite(this.sockets, 'invalid');
   };
+  if (this.progress) {
+    const progressPlugin = new webpack.ProgressPlugin((percent, msg, addInfo) => {
+      percent = Math.floor(percent * 100);
+      if (percent === 100) msg = 'Compilation competed';
+      if (addInfo) msg = `${msg} (${addInfo})`;
+      this.sockWrite(this.sockets, 'progress-update', { percent, msg });
+    });
+    compiler.apply(progressPlugin);
+  }
   compiler.plugin('compile', invalidPlugin);
   compiler.plugin('invalid', invalidPlugin);
   compiler.plugin('done', (stats) => {
@@ -563,6 +573,8 @@ Server.prototype.listen = function (port, hostname, fn) {
 
       if (this.clientLogLevel) { this.sockWrite([conn], 'log-level', this.clientLogLevel); }
 
+      if (this.progress) { this.sockWrite([conn], 'progress', this.progress); }
+
       if (this.clientOverlay) { this.sockWrite([conn], 'overlay', this.clientOverlay); }
 
       if (this.hot) this.sockWrite([conn], 'hot');
diff --git a/lib/optionsSchema.json b/lib/optionsSchema.json
@@ -97,6 +97,14 @@
         }
       ]
     },
+    "progress": {
+      "description": "Shows compilation progress in browser console.",
+      "anyOf": [
+        {
+          "type": "boolean"
+        }
+      ]
+    },
     "key": {
       "description": "The contents of a SSL key.",
       "anyOf": [
diff --git a/test/Validation.test.js b/test/Validation.test.js
@@ -49,7 +49,7 @@ describe('Validation', () => {
     message: [
       " - configuration has an unknown property 'asdf'. These properties are valid:",
       '   object { hot?, hotOnly?, lazy?, bonjour?, host?, allowedHosts?, filename?, publicPath?, port?, socket?, ' +
-      'watchOptions?, headers?, clientLogLevel?, overlay?, key?, cert?, ca?, pfx?, pfxPassphrase?, requestCert?, ' +
+      'watchOptions?, headers?, clientLogLevel?, overlay?, progress?, key?, cert?, ca?, pfx?, pfxPassphrase?, requestCert?, ' +
       'inline?, disableHostCheck?, public?, https?, contentBase?, watchContentBase?, open?, useLocalIp?, openPage?, features?, ' +
       'compress?, proxy?, historyApiFallback?, staticOptions?, setup?, stats?, reporter?, ' +
       'noInfo?, quiet?, serverSideRender?, index?, log?, warn? }'
