Looking forward to a support for index.d.ts, because it is inconvenient to use without TypeScript

Please consider casting path in this line to string:

https://github.com/nuxt/webpackbar/blob/73ef3ae64f92a049500d5494f87b684024926d8f/src/utils/index.js#L42

Because in my experience path can be number.

I don't have any good reproduction (sorry), so my proposal is to just add cast to string. Just to be complete, here is full stack trace with this error:

PATH/node_modules/@nuxt/webpack/node_modules/webpackbar/dist/utils/index.js:58
  return path.replace(cwd, '');
              ^

TypeError: path.replace is not a function
    at shortenPath (PATH/node_modules/@nuxt/webpack/node_modules/webpackbar/dist/utils/index.js:58:15)
    at PATH/node_modules/@nuxt/webpack/node_modules/webpackbar/dist/plugin.js:182:43
    at SyncHook.eval [as call] (eval at create (PATH/node_modules/@nuxt/webpack/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at SyncHook.lazyCompileHook (PATH/node_modules/@nuxt/webpack/node_modules/webpack/node_modules/tapable/lib/Hook.js:154:20)
    at Watchpack.watcher.compiler.watchFileSystem.watch (PATH/node_modules/@nuxt/webpack/node_modules/webpack/lib/Watching.js:139:33)
    at Object.onceWrapper (events.js:285:13)
    at Watchpack.emit (events.js:197:13)
    at Watchpack.EventEmitter.emit (domain.js:446:20)
    at Watchpack._onChange (PATH/node_modules/watchpack/lib/watchpack.js:118:7)
    at Watchpack.<anonymous> (PATH/node_modules/watchpack/lib/watchpack.js:109:8)
    at Watcher.emit (events.js:197:13)
    at Watcher.EventEmitter.emit (domain.js:446:20)
    at PATH/node_modules/watchpack/lib/DirectoryWatcher.js:101:9
    at Array.forEach (<anonymous>)
    at DirectoryWatcher.setFileTime (PATH/node_modules/watchpack/lib/DirectoryWatcher.js:99:42)
    at DirectoryWatcher.onFileAdded (PATH/node_modules/watchpack/lib/DirectoryWatcher.js:250:7)
    at FSWatcher.emit (events.js:197:13)
    at FSWatcher.EventEmitter.emit (domain.js:446:20)
    at FSWatcher.<anonymous> (PATH/node_modules/watchpack/node_modules/chokidar/index.js:199:15)
    at FSWatcher._emit (PATH/node_modules/watchpack/node_modules/chokidar/index.js:241:5)
    at FSWatcher.<anonymous> (PATH/node_modules/watchpack/node_modules/chokidar/lib/nodefs-handler.js:465:12)
    at FSReqCallback.oncomplete (fs.js:159:5)

First of all, thanks so much for this wonderful progress bar.

I was using webpackbar and tried to write a stats.json file to be used by webpack-bundle-analyzer.

Here's my npm script:

webpack --env=production --profile --json > stats.json

However, stats.json contains some output from webpackbar. Here's how it looks like:

ℹ Compiling Webpack                                        webpackbar 18:06:57
✔ Webpack: Compiled successfully in 3.22s                  webpackbar 18:07:00
{
  "errors": [],
  "warnings": [],
  "version": "4.29.3",
  "hash": "ed64caf72379ba267639",
  "time": 3228,
  "builtAt": 1549976820840,
  "publicPath": "/",
  "outputPath": "/Users/shahzaib/my-stuff/serious-projects/testing-shaizei/copy-jetsetter/build",
  "assetsByChunkName": {
    "main": [
    // remaining file is not included for brevity
}

Due to these two lines (in the start), stats.json is becoming invalid.

Any workaround for this?

What problem does this feature solve?

As Webpackbar, some other Webpack plugins also show compilation time.
Obviously this information is not needed twice, so it could be nice to be able hide hide it.

Thanks

ERROR [karma]: TypeError: this.__write is not a function
    at WriteStream.write (node_modules/webpackbar/dist/utils/log-update.js:89:16)
    at adapters.forEach (node_modules/karma/lib/reporters/base.js:73:16)
    at Array.forEach (<anonymous>)
    at MochaReporter.BaseReporter.write (node_modules/karma/lib/reporters/base.js:68:19)
    at MochaReporter.BaseReporter.writeCommonMsg (node_modules/karma/lib/reporters/base.js:79:16)
    at MochaReporter.BaseReporter.onBrowserLog (node_modules/karma/lib/reporters/base.js:100:12)
    at Server.<anonymous> (node_modules/karma/lib/events.js:40:26)
    at Server.emit (events.js:187:15)
    at Browser.onInfo (node_modules/karma/lib/browser.js:100:20)
    at Socket.socket.on (node_modules/karma/lib/browser.js:272:38)

It seems that your reporter is clashing with Karma's reporter when overriding process.stdout.write. Am I doing something wrong or is this a known issue?

Version

3.1.3

Reproduction link

https://github.com/nuxt/webpackbar

Steps to reproduce

update webpack to 4.
(Seems webpack 4 updated the plugin interface.)

What is expected ?

No warning log

What is actually happening?

(node:89719) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
    at WebpackBarPlugin.apply (/projects/antd/rc-antd/node_modules/[email protected]3.12.0@webpack/lib/ProgressPlugin.js:59:13)
    at WebpackBarPlugin.apply (/projects/antd/rc-antd/node_modules/[email protected]3.1.3@webpackbar/dist/plugin.js:158:11)
    at webpack (/projects/antd/rc-antd/node_modules/[email protected]4.27.1@webpack/lib/webpack.js:47:13)
    at options.map.options (/projects/antd/rc-antd/node_modules/[email protected]4.27.1@webpack/lib/webpack.js:35:55)
    at Array.map (<anonymous>)
    at webpack (/projects/antd/rc-antd/node_modules/[email protected]4.27.1@webpack/lib/webpack.js:35:40)
    at dist (/projects/antd/rc-antd/node_modules/[email protected]6.1.0@antd-tools/lib/gulpfile.js:40:3)
    at Gulp.gulp.task.done (/projects/antd/rc-antd/node_modules/[email protected]6.1.0@antd-tools/lib/gulpfile.js:102:3)
    at module.exports (/projects/antd/rc-antd/node_modules/_orchestrator@[email protected]orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/projects/antd/rc-antd/node_modules/[email protected]0.3.8@orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/projects/antd/rc-antd/node_modules/[email protected]0.3.8@orchestrator/index.js:214:10)
    at Gulp.Orchestrator.start (/projects/antd/rc-antd/node_modules/[email protected]0.3.8@orchestrator/index.js:134:8)
    at Object.<anonymous> (/projects/antd/rc-antd/node_modules/[email protected]6.1.0@antd-tools/lib/cli/run.js:25:8)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)

Version

v3.0.0

Steps to reproduce

use in webpack 4.x

What is expected ?

run normally

What is actually happening?

"next": "7.0.2"
----"webpack": "4.20.2"
--------"webpackbar": "2.6.3"
------------"table": "4.0.3"

The dependency "table" that has "webpackbar" installs dependencies with the prefix ^. One of its dependencies removed code that caused the next build process to be broken:

Error: Cannot find module 'ajv/lib/compile/equal'
at Function.Module.resolveFilename (module.js:547:15) at Function.Module.load (module.js:474:25)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/nodemodules/table/dist/validateConfig.js:2:13) at Module.compile (module.js:652:30)
at Object.Module.extensions..js (module.js:663:10) at Module.load (module.js:565:32) at tryModuleLoad (module.js:505:12) at Function.Module.load (module.js:497:3)

Hey. This is more of a question than a bug I suppose.

So I've got a client and a server configs for webpack, and both are run simultaneously with npm-run-all.

Both configs have their own webpackbar plugins, but since both webpack builds are run independently at the same time, both progress bars are fighting for the same position which results in a flickering effect between them.

What would be the correct way to set this up to show two sidebars one above another?

Version

v3.0.0

Reproduction link

https://github.com/manniL/lichter.io

Steps to reproduce

1. Download latest master version (linked above)
2. Install deps
3. Run yarn generate
   Happens in WebStorm terminal but also in normal Gnome Terminal. (Running Ubuntu LTS)

What is expected ?

No duplicate Client bar

What is actually happening?

Duplicate bar

node: 8.12.0
webpack: 4.21.0

(node:19004) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'tap' of undefined
(node:19004) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:19004) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

node: 8.12.0
webpack: 4.21.0

(node:19004) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'tap' of undefined
(node:19004) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:19004) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Version

v3.0.3

Reproduction link

https://github.com/nuxt/webpackbar

Steps to reproduce

Build a project with create-react-app, webpack 3 and react-app-rewired, with following config-override :

module.exports = {
    webpack: function (config, env) {

        config.plugins = (config.plugins || []).concat([
            new WebpackBar({
                profile: true,
            })
        ])

        return config

    }
}

Or way to reproduce the issue : run tests for ant-design project (https://github.com/ant-design/ant-design) with npm run dist.
See CI failure here : https://circleci.com/gh/ant-design/ant-design/24699?utm_campaign=vcs-integration-link&utm_medium=referral&utm_source=github-build-link.
The upgrade has been reverted since by this commit : https://github.com/ant-design/ant-design/commit/5204b45e01e91026c8cc63dba343b1c67ca8f7a0

What is expected ?

No error

What is actually happening?

Error Cannot convert undefined or null to object

update to 3.0.0, There's no Stats by Ext or Stats by Loader.
But 2.5.0 is fine.

What problem does this feature solve?

This is a really minor nit, but this formatting drives me crazy

As far as I'm aware, I'm not sure if your new custom reporters will solve this problem. All I want is for the checkmarks to line up and not to have that new line above. I'm combining your module with https://github.com/SamVerschueren/listr in tandem, hence the concern. This has literally zero effect on the actual use of this repo. I just want to align the outputs 😭.

What does the proposed changes look like?

Remove the new line​ above the completed step
Align the checkmark with a single space indentation

This issue is for a:

• <input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"> bug
• <input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;" checked> feature request
• <input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"> modification request

New Feature Use Case

Currently the only output shown is this:

Stats by Ext

╔════════╤══════════╤═══════╤══════════════╤══════════════════╗
║ Ext    │ Requests │ Time  │ Time/Request │ Description      ║
╟────────┼──────────┼───────┼──────────────┼──────────────────╢
║ js     │ 1112     │ 12s   │ 11ms         │ JavaScript files ║
╟────────┼──────────┼───────┼──────────────┼──────────────────╢
║ jsx    │ 369      │ 2s    │ 5ms          │ jsx files        ║
╟────────┼──────────┼───────┼──────────────┼──────────────────╢
║ hbs    │ 295      │ 3s    │ 11ms         │ hbs files        ║
╟────────┼──────────┼───────┼──────────────┼──────────────────╢
║ less   │ 45       │ 641ms │ 14ms         │ less files       ║
╟────────┼──────────┼───────┼──────────────┼──────────────────╢
║ less 0 │ 19       │ 853μs │ 45μs         │ less 0 files     ║
╟────────┼──────────┼───────┼──────────────┼──────────────────╢
║ css 0  │ 13       │ 561μs │ 43μs         │ css 0 files      ║
╟────────┼──────────┼───────┼──────────────┼──────────────────╢
║ svg    │ 1        │ 3ms   │ 3ms          │ svg files        ║
╟────────┼──────────┼───────┼──────────────┼──────────────────╢
║ css    │ 3        │ 53ms  │ 18ms         │ css files        ║
╟────────┼──────────┼───────┼──────────────┼──────────────────╢
║ Total  │ 1857     │ 18s   │              │                  ║
╚════════╧══════════╧═══════╧══════════════╧══════════════════╝


Stats by Loader

╔═══════════════════╤══════════╤═══════╤══════════════╤═══════════════════╗
║ Loader            │ Requests │ Time  │ Time/Request │ Description       ║
╟───────────────────┼──────────┼───────┼──────────────┼───────────────────╢
║ babel-loader      │ 1450     │ 14s   │ 9ms          │ Babel Loader      ║
╟───────────────────┼──────────┼───────┼──────────────┼───────────────────╢
║ handlebars-loader │ 295      │ 3s    │ 11ms         │ Handlebars Loader ║
╟───────────────────┼──────────┼───────┼──────────────┼───────────────────╢
║ expose-loader     │ 1        │ 5ms   │ 5ms          │ Expose Loader     ║
╟───────────────────┼──────────┼───────┼──────────────┼───────────────────╢
║ css-loader        │ 80       │ 696ms │ 9ms          │ Css Loader        ║
╟───────────────────┼──────────┼───────┼──────────────┼───────────────────╢
║ postcss-loader    │ 68       │ 695ms │ 10ms         │ Postcss Loader    ║
╟───────────────────┼──────────┼───────┼──────────────┼───────────────────╢
║ less-loader       │ 64       │ 642ms │ 10ms         │ Less Loader       ║
╟───────────────────┼──────────┼───────┼──────────────┼───────────────────╢
║ exports-loader    │ 29       │ 316ms │ 11ms         │ Exports Loader    ║
╟───────────────────┼──────────┼───────┼──────────────┼───────────────────╢
║ imports-loader    │ 19       │ 256ms │ 13ms         │ Imports Loader    ║
╟───────────────────┼──────────┼───────┼──────────────┼───────────────────╢
║ raw-loader        │ 1        │ 3ms   │ 3ms          │ Raw Loader        ║
╟───────────────────┼──────────┼───────┼──────────────┼───────────────────╢
║ Total             │ 2007     │ 19s   │              │                   ║
╚═══════════════════╧══════════╧═══════╧══════════════╧═══════════════════╝

However, a lot of the webpack build time is also spent in minification and plugins, would it be possible to add that info?

• Operating System: Windows 10 1803
• Node Version: v10.8.0
• NPM Version: 6.2.0
• webpack Version: Whatever comes with [email protected]
• webpack-serve Version: Whatever comes with [email protected]

This issue is for a:

• <input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;" checked> bug
• <input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"> feature request
• <input type="checkbox" disabled style="margin: 0px 0.35em 0.25em -1.6em; vertical-align: middle;"> modification request

Code

CLI Command

  $ nuxt

Expected Behavior

When using the command next it compiles, clears the console on most cases and then it shows you the ip and port where your app is being served on.

Actual Behavior

Lots of text gets left behind, progressbars don't even complete and it fails to show ip and port as shown on the following picture:

How Do We Reproduce?

Just by running the command nuxt.

Congratulation for this very nice and useful plugin.
I wanted to know if it's possible to configure the plugin in some way to have the following:
1) show the dev server host only when the first build is completed.
e.g. "The application is running at http://localhost:8080"
I don't want to show on subsequent builds.

2) Is it possible to only see the colored progress bar without the information about the build ?

thanks