Add a --no-clear[-console] flag to disable clearing the console

Replaced 'middleware' and 'test' flags in WebpackStatusPlugin options with
'disableClearConsole` (disable console clearing) and 'quiet' (disable all
logging) flags.

Renamed 'message' in WebpackStatusPlugin options to 'successMessage'

CHANGES.md

@@ -22,10 +22,11 @@
   - `devServer.historyApiFallback.disableDotRule` can be enabled if you need to use dots in your path when using the HTML5 History API
   - `devServer.https` can be used to enable HTTPS
   - `devServer.proxy` can be used to proxy certain URLs to a separate API backend development server
-- Added an `nwb web (run|build)` command for quick development with vanilla JavaScript (i.e. you're in charge of rendering)
+- Added an `nwb web (run|build)` command for quick development with vanilla JavaScript (i.e. you're in charge of rendering).
 - Added a [`type` option](https://github.com/insin/nwb/blob/master/docs/Middleware.md#option) to nwb's Express middleware to set the project type (one of `react`, `preact`, `inferno` or `web`) manually, enabling use of the middleware without a config file.
 - Added [`babel.removePropTypes` config](https://github.com/insin/nwb/blob/master/docs/Configuration.md#removeproptypes-object--false) to disable or configure [removal of `propTypes`](https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types) in React app production builds.
 - Added [`babel.reactConstantElements` config](https://github.com/insin/nwb/blob/master/docs/Configuration.md#reactconstantelements-false) to disable the use of the [React constant element hoisting transform](https://babeljs.io/docs/plugins/transform-react-constant-elements/) in React app production builds.
+- Added a `--no-clear[-console]` flag to disable clearing of the console when running a dev server.
 - Added a `--no-html` flag to disable creation of an `index.html` file if you don't need one (e.g. you're serving your built apps via another means) [[#278](https://github.com/insin/nwb/issues/278)] [[bwendt-mylo][bwendt-mylo]]
 
 **Changed:**

docs/Commands.md

@@ -146,8 +146,9 @@ Passing an argument for `entry` allows you to customise the entry point for your
 **Options:**
 
 - `--install` - automatically install missing npm dependencies (and save them to `package.json` if present)
-- `--fallback` - fall back to serving the index page from any path, for developing apps which use the History API
 - `--host` - change the hostname the dev server binds to *[default: not specifying a host when starting the dev server]*
+- `--no-clear` - don't clear the console when displaying build status
+- `--no-fallback` - disable fallback serving of the index page from any path
 - `--port` - change the port the dev server runs on *[default: 3000]*
 - `--reload` - auto-reload the page when webpack gets stuck
 

src/WebpackStatusPlugin.js

@@ -1,63 +1,72 @@
+// @flow
 import chalk from 'chalk'
 
 import {clearConsole} from './utils'
 import {logErrorsAndWarnings} from './webpackUtils'
 
+import type {ErrBack} from './types'
+
+type StatusPluginOptions = {
+  disableClearConsole?: boolean,
+  quiet?: boolean,
+  successMessage?: ?string,
+};
+
 /**
- * Display current build status for a Webpack watch build.
- * Based on create-react-app@0.2's start script.
+ * Display build status for a Webpack watching build.
  */
 export default class StatusPlugin {
-  constructor({message = '', middleware = false, test = false} = {}) {
-    // Provides details of the URL the dev server is available at
-    this.message = message
-    // Flag: don't clear the console as we're in someone else's server
-    this.middleware = middleware
-    // Flag: ONLY log errors and warnings
-    this.test = test
+  disableClearConsole: boolean;
+  quiet: boolean;
+  successMessage: ?string;
+  isInitialBuild: boolean;
 
-    // We only want to display the "Starting..." message once
-    this.initial = true
+  constructor(options: StatusPluginOptions = {}) {
+    let {
+      disableClearConsole = false,
+      quiet = false,
+      successMessage = '',
+    } = options
+
+    this.disableClearConsole = disableClearConsole
+    this.quiet = quiet
+    this.successMessage = successMessage
 
-    this.watchRun = this.watchRun.bind(this)
-    this.done = this.done.bind(this)
+    // We only want to display the "Starting..." message once
+    this.isInitialBuild = true
   }
 
-  apply(compiler) {
+  apply(compiler: Object) {
     compiler.plugin('watch-run', this.watchRun)
     compiler.plugin('done', this.done)
   }
 
   clearConsole() {
-    if (!this.test) {
+    if (!this.quiet && !this.disableClearConsole) {
       clearConsole()
     }
   }
 
-  log(message) {
-    if (!this.test) {
+  log(message: any) {
+    if (!this.quiet) {
       console.log(message)
     }
   }
 
-  watchRun(watching, cb) {
-    if (!this.middleware) {
-      this.clearConsole()
-    }
-    if (this.initial) {
+  watchRun = (compiler: Object, cb: ErrBack) => {
+    this.clearConsole()
+    if (this.isInitialBuild) {
       this.log(chalk.cyan('Starting Webpack compilation...'))
-      this.initial = false
+      this.isInitialBuild = false
     }
     else {
       this.log('Recompiling...')
     }
     cb()
   }
 
-  done(stats) {
-    if (!this.middleware) {
-      this.clearConsole()
-    }
+  done = (stats: Object) => {
+    this.clearConsole()
 
     let hasErrors = stats.hasErrors()
     let hasWarnings = stats.hasWarnings()
@@ -71,9 +80,9 @@ export default class StatusPlugin {
       if (hasErrors) return
     }
 
-    if (!this.middleware) {
+    if (this.successMessage) {
       this.log('')
-      this.log(this.message)
+      this.log(this.successMessage)
     }
   }
 }

src/cli.js

@@ -95,6 +95,7 @@ Generic project development commands:
     Options:
       ${opt('--install')}      automatically install missing npm dependencies
       ${opt('--host')}         hostname to bind the dev server to
+      ${opt('--no-clear')}     don't clear the console when displaying build status
       ${opt('--no-fallback')}  disable serving of the index page from any path
       ${opt('--port')}         port to run the dev server on ${opt('[default: 3000]')}
       ${opt('--reload')}       auto reload the page if hot reloading fails

src/createKarmaConfig.js

@@ -191,7 +191,7 @@ export default function createKarmaConfig(args, buildConfig, pluginConfig, userC
       },
       plugins: {
         status: {
-          test: true
+          quiet: true,
         }
       },
       resolve: {

src/createWebpackConfig.js

@@ -433,9 +433,9 @@ export function createExtraRules(
 }
 
 /**
- * Plugin for HtmlPlugin which inlines content for an extracted Webpack
- * manifest into the HTML page in a <script> tag before other emitted asssets
- * are injected by HtmlPlugin itself.
+ * Plugin for HtmlPlugin which inlines content for an extracted Webpack manifest
+ * into the HTML in a <script> tag before other emitted asssets are injected by
+ * HtmlPlugin itself.
  */
 function injectManifestPlugin() {
   this.plugin('compilation', (compilation) => {
@@ -448,8 +448,8 @@ function injectManifestPlugin() {
             /^(\s*)<\/body>/m,
             `$1<script>${children[0]._value}</script>\n$1</body>`
           )
-          // Remove the manifest from HtmlPlugin's assets to
-          // prevent a <script> tag being created for it.
+          // Remove the manifest from HtmlPlugin's assets to prevent a <script>
+          // tag being created for it.
           var manifestIndex = data.assets.js.indexOf(data.assets.publicPath + key)
           data.assets.js.splice(manifestIndex, 1)
           delete data.assets.chunks.manifest
@@ -595,7 +595,8 @@ export function createPlugins(
   }
 
   // Automatically install missing npm dependencies and add them to package.json
-  // Must be enabled with an --install or --auto-install flag
+  // if present.
+  // Must be enabled with an --install or --auto-install flag.
   if (buildConfig.autoInstall) {
     plugins.push(new NpmInstallPlugin({
       peerDependencies: false,

src/expressMiddleware.js

@@ -54,7 +54,8 @@ export default function nwbMiddleware(express: Object, options: Object = {}) {
     createServeConfig(args, appTypeConfig.getServeConfig(), {
       plugins: {
         status: {
-          middleware: true
+          disableClearConsole: true,
+          successMessage: null,
         }
       }
     })

src/utils.js

@@ -63,8 +63,7 @@ export function clean(
  * Clear console scrollback.
  */
 export function clearConsole() {
-  // XXX Hack for testing
-  // TODO Give users a way to disable console clearing
+  // Hack for testing
   if (process.env.NWB_TEST) return
   // This will completely wipe scrollback in cmd.exe on Windows - use cmd.exe's
   // `start` command to launch nwb's dev server in a new prompt if you don't

src/webpackServer.js

@@ -23,7 +23,9 @@ function getServerPort(args, cb) {
     // Support use of --force to avoid interactive prompt
     if (args.force) return cb(null, suggestedPort)
 
-    clearConsole()
+    if (args.clear !== false && args.clearConsole !== false) {
+      clearConsole()
+    }
     console.log(yellow(`Something is already running on port ${intendedPort}.`))
     console.log()
     inquirer.prompt([
@@ -69,7 +71,8 @@ export default function webpackServer(args, buildConfig, cb) {
 
     if (!('status' in buildConfig.plugins)) {
       buildConfig.plugins.status = {
-        message: `The app is running at http://${args.host || 'localhost'}:${port}/`,
+        disableClearConsole: args.clear !== false && args.clearConsole !== false,
+        successMessage: `The app is running at http://${args.host || 'localhost'}:${port}/`,
       }
     }