update(webpackbar): update to v4.0 (#43075)

- v2 bacward compatibility
- v4 API changes
- tests updates

https://github.com/nuxt/webpackbar#readme
https://github.com/nuxt/webpackbar#options

Thanks!

types/webpackbar/index.d.ts

@@ -1,61 +1,122 @@
-// Type definitions for webpackbar 2.6
+// Type definitions for webpackbar 4.0
 // Project: https://github.com/nuxt/webpackbar
 // Definitions by: Ryan Clark <https://github.com/rynclark>
+//                 Piotr Błażejewicz <https://github.com/peterblazejewicz>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.3
-
 /// <reference types="node" />
 
-import { Plugin } from 'webpack';
+import { Plugin, ProgressPlugin } from 'webpack';
 
 export = WebpackBar;
 
-declare class WebpackBar extends Plugin {
-	constructor(options?: WebpackBar.Options);
-
-  state: WebpackBar.State;
+/**
+ * Elegant ProgressBar and Profiler for Webpack
+ */
+declare class WebpackBar extends ProgressPlugin {
+    constructor(options?: WebpackBar.Options);
+    readonly state: WebpackBar.Status;
 }
 
 declare namespace WebpackBar {
-  interface Stats {
-    count: number;
-    time: [number, number];
-  }
+    /**
+     * 'context' is the reference to the plugin
+     * You can use 'context.state' to access status
+     */
+    type ReporterContextFunc = (context: WebpackBar) => void;
 
-  class Profile {
-    requests: any[];
+    interface Status {
+        /** @default null */
+        readonly start: [number, number] | null;
+        /** @default -1 */
+        readonly progress: number;
+        /** @default false */
+        readonly done: boolean;
+        /** @default '' */
+        readonly message: string;
+        readonly details: string[];
+        readonly request: null | {
+            readonly file: null | string;
+            readonly loaders: string[];
+        };
+        /** @default false */
+        readonly hasErrors: boolean;
+        readonly color: string;
+        readonly name: string;
+    }
 
-    name: string;
+    /**
+     * If you plan to provide your own reporter,
+     * don't forget to setting fancy and basic options to false to prevent conflicts.
+     * A reporter should be instance of a class or plain object and functions for special hooks.
+     * It is not necessary to implement all functions, webpackbar only calls those that exists
+     */
+    interface Reporter {
+        /**
+         * Called when (re)compile is started
+         */
+        start?: ReporterContextFunc;
+        /**
+         * Called when a file changed on watch mode
+         */
+        change?: ReporterContextFunc;
+        /**
+         * Called after each progress update
+         */
+        update?: ReporterContextFunc;
+        /**
+         * Called when compile finished
+         */
+        done?: ReporterContextFunc;
+        /**
+         * Called when build progress updated
+         */
+        progress?: ReporterContextFunc;
+        /**
+         * Called when _all_ compiles finished
+         */
+        allDone?: ReporterContextFunc;
+        beforeAllDone?: ReporterContextFunc;
+        afterAllDone?: ReporterContextFunc;
+    }
 
-    constructor(name: string);
+    interface Options {
+        /**
+         * Display name
+         * @default 'webpack'
+         */
+        name?: string;
+        /**
+         * Color output of the progress bar
+         * @default 'green'
+         */
+        color?: string;
 
-    getStats(): { ext: Stats, loader: Stats };
-  }
-
-  interface State {
-    isRunning: boolean;
-    color: string;
-    profile: Profile | null;
-  }
-
-  interface SharedState {
-    [name: string]: State;
-  }
-
-  interface Options {
-    /** Display name */
-    name?: string;
-    /** Color output of the progress bar */
-    color?: string;
-    /** Enable the profiler for files and loaders */
-    profile?: boolean;
-    /** Stream to rwite to */
-    stream?: NodeJS.WriteStream;
-    /** Minimal output */
-    minimal?: boolean;
-    /** Show compiled in time */
-    compiledIn?: boolean;
-    /** Function called when all builds are finished */
-    done?: (sharedState: SharedState, ctx: WebpackBar) => void;
-  }
+        /**
+         * Enable profiler
+         * @default false
+         */
+        profile?: boolean;
+        /**
+         * Enable bars reporter
+         * Defaults to 'true' when not in CI or testing mod
+         * @default true
+         */
+        fancy?: boolean;
+        /**
+         * Enable a simple log reporter (only start and end)
+         * Defaults to 'true' when running in minimal environments
+         * @default true
+         */
+        basic?: boolean;
+        /**
+         * Register a custom reporter
+         * @default null
+         */
+        reporter?: Reporter | null;
+        /**
+         * Register an Array of your custom reporters.
+         * @default ['basic'] | ['fancy']
+         */
+        reporters?: string[];
+    }
 }

types/webpackbar/v2/index.d.ts

@@ -0,0 +1,61 @@
+// Type definitions for webpackbar 2.6
+// Project: https://github.com/nuxt/webpackbar
+// Definitions by: Ryan Clark <https://github.com/rynclark>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.3
+
+/// <reference types="node" />
+
+import { Plugin } from 'webpack';
+
+export = WebpackBar;
+
+declare class WebpackBar extends Plugin {
+	constructor(options?: WebpackBar.Options);
+
+  state: WebpackBar.State;
+}
+
+declare namespace WebpackBar {
+  interface Stats {
+    count: number;
+    time: [number, number];
+  }
+
+  class Profile {
+    requests: any[];
+
+    name: string;
+
+    constructor(name: string);
+
+    getStats(): { ext: Stats, loader: Stats };
+  }
+
+  interface State {
+    isRunning: boolean;
+    color: string;
+    profile: Profile | null;
+  }
+
+  interface SharedState {
+    [name: string]: State;
+  }
+
+  interface Options {
+    /** Display name */
+    name?: string;
+    /** Color output of the progress bar */
+    color?: string;
+    /** Enable the profiler for files and loaders */
+    profile?: boolean;
+    /** Stream to rwite to */
+    stream?: NodeJS.WriteStream;
+    /** Minimal output */
+    minimal?: boolean;
+    /** Show compiled in time */
+    compiledIn?: boolean;
+    /** Function called when all builds are finished */
+    done?: (sharedState: SharedState, ctx: WebpackBar) => void;
+  }
+}

types/webpackbar/v2/tsconfig.json

@@ -0,0 +1,28 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../../",
+        "typeRoots": [
+            "../../"
+        ],
+        "paths": {
+            "webpackbar": [
+                "webpackbar/v2"
+            ]
+        },
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "webpackbar-tests.ts"
+    ]
+}

types/webpackbar/v2/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }

types/webpackbar/v2/webpackbar-tests.ts

@@ -0,0 +1,9 @@
+import WebpackBar = require('webpackbar');
+
+new WebpackBar();
+
+new WebpackBar({ color: '#ff0000' });
+
+new WebpackBar({ stream: process.stdout });
+
+new WebpackBar({ done: (sharedState, ctx) => {} });

types/webpackbar/webpackbar-tests.ts

@@ -1,9 +1,49 @@
+import path = require('path');
+
 import WebpackBar = require('webpackbar');
 
-new WebpackBar();
+module.exports = {
+    context: path.resolve(__dirname),
+    devtool: 'source-map',
+    entry: './entry.js',
+    output: {
+        filename: './output.js',
+        path: path.resolve(__dirname),
+    },
+    plugins: [new WebpackBar()],
+};
 
-new WebpackBar({ color: '#ff0000' });
+let lastProgress: number;
 
-new WebpackBar({ stream: process.stdout });
+const config = (name: string, color: string) => ({
+    mode: 'production',
+    context: __dirname,
+    devtool: false,
+    target: 'node',
+    entry: './index.js',
+    stats: false,
+    output: {
+        filename: './output.js',
+        path: path.join(__dirname, '/dist'),
+    },
+    module: {
+        rules: [{ test: /\.js$/, use: path.resolve(__dirname, 'test-loader.js') }],
+    },
+    plugins: [
+        new WebpackBar({
+            color,
+            name,
+            reporters: ['fancy'],
+            reporter: {
+                progress({ state }) {
+                    if (lastProgress !== state.progress && state.progress % 5 === 0) {
+                        process.stderr.write(state.progress + '%\n');
+                        lastProgress = state.progress;
+                    }
+                },
+            },
+        }),
+    ],
+});
 
-new WebpackBar({ done: (sharedState, ctx) => {} });
+module.exports = [config('OrangeBar', 'orange'), config('GreenBar', 'green')];