ui
This commit is contained in:
+20
@@ -0,0 +1,20 @@
|
||||
Copyright JS Foundation and other contributors
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
'Software'), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
||||
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
|
||||
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
||||
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
|
||||
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
+193
@@ -0,0 +1,193 @@
|
||||
[![Standard JS][standard-js-src]][standard-js-href]
|
||||
[![npm version][npm-version-src]][npm-version-href]
|
||||
[![npm downloads][npm-downloads-src]][npm-downloads-href]
|
||||
[![package phobia][package-phobia-src]][package-phobia-href]
|
||||
[![github actions][checks-src]][checks-href]
|
||||
|
||||
|
||||
<div align="center">
|
||||
<!-- replace with accurate logo e.g from https://worldvectorlogo.com/ -->
|
||||
<img width="200" height="200" hspace="25" src="./assets/logo.svg">
|
||||
<a href="https://webpack.js.org/">
|
||||
<img width="200" height="200" hspace="25" src="https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon-square-big.svg">
|
||||
</a>
|
||||
<p>Elegant ProgressBar and Profiler for Webpack</p>
|
||||
</div>
|
||||
|
||||
✔ Display elegant progress bar while building or watch
|
||||
|
||||
✔ Support of multiple concurrent builds (useful for SSR)
|
||||
|
||||
✔ Pretty print filename and loaders
|
||||
|
||||
✔ Windows compatible
|
||||
|
||||
✔ **Fully** customizable using reporters
|
||||
|
||||
✔ Advanced build profiler
|
||||
|
||||
<div align="center">
|
||||
<br>
|
||||
<img src="./assets/screen1.png" width="600px">
|
||||
<p>Multi progress bars</p>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<div align="center">
|
||||
<br>
|
||||
<img src="./assets/screen2.png" width="600px">
|
||||
<p>Build Profiler</p>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<h2 align="center">Getting Started</h2>
|
||||
|
||||
To begin, you'll need to install `webpackbar`:
|
||||
|
||||
Using npm:
|
||||
|
||||
```bash
|
||||
npm install webpackbar -D
|
||||
```
|
||||
|
||||
Using yarn:
|
||||
|
||||
```bash
|
||||
yarn add webpackbar -D
|
||||
```
|
||||
|
||||
Then add the reporter as a plugin to your webpack config.
|
||||
|
||||
**webpack.config.js**
|
||||
|
||||
```js
|
||||
const webpack = require('webpack');
|
||||
const WebpackBar = require('webpackbar');
|
||||
|
||||
module.exports = {
|
||||
context: path.resolve(__dirname),
|
||||
devtool: 'source-map',
|
||||
entry: './entry.js',
|
||||
output: {
|
||||
filename: './output.js',
|
||||
path: path.resolve(__dirname)
|
||||
},
|
||||
plugins: [
|
||||
new WebpackBar()
|
||||
]
|
||||
};
|
||||
```
|
||||
|
||||
<h2 align="center">Options</h2>
|
||||
|
||||
### `name`
|
||||
- Default: `webpack`
|
||||
|
||||
Name.
|
||||
|
||||
### `color`
|
||||
- Default: `green`
|
||||
|
||||
Primary color (can be HEX like `#xxyyzz` or a web color like `green`).
|
||||
|
||||
### `profile`
|
||||
- Default: `false`
|
||||
|
||||
Enable profiler.
|
||||
|
||||
### `fancy`
|
||||
|
||||
- Default: `true` when not in CI or testing mode.
|
||||
|
||||
Enable bars reporter.
|
||||
|
||||
### `basic`
|
||||
|
||||
- Default: `true` when running in minimal environments.
|
||||
|
||||
Enable a simple log reporter (only start and end).
|
||||
|
||||
### `reporter`
|
||||
|
||||
Register a custom reporter.
|
||||
|
||||
### `reporters`
|
||||
- Default: `[]`
|
||||
|
||||
Register an Array of your custom reporters. (Same as `reporter` but array)
|
||||
|
||||
<h2 align="center">Custom Reporters</h2>
|
||||
|
||||
Webpackbar comes with a fancy progress-bar out of the box.
|
||||
But you may want to show progress somewhere else or provide your own.
|
||||
|
||||
For this purpose, you can provide one or more extra reporters using `reporter` and `reporters` options.
|
||||
|
||||
**NOTE:** 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.
|
||||
|
||||
**Simple logger:**
|
||||
|
||||
```js
|
||||
{
|
||||
start(context) {
|
||||
// Called when (re)compile is started
|
||||
},
|
||||
change(context) {
|
||||
// Called when a file changed on watch mode
|
||||
},
|
||||
update(context) {
|
||||
// Called after each progress update
|
||||
},
|
||||
done(context) {
|
||||
// Called when compile finished
|
||||
},
|
||||
progress(context) {
|
||||
// Called when build progress updated
|
||||
},
|
||||
allDone(context) {
|
||||
// Called when _all_ compiles finished
|
||||
},
|
||||
beforeAllDone(context) {
|
||||
},
|
||||
afterAllDone(context) {
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
`context` is the reference to the plugin. You can use `context.state` to access status.
|
||||
|
||||
|
||||
**Schema of `context.state`:**
|
||||
|
||||
```js
|
||||
{
|
||||
start,
|
||||
progress,
|
||||
message,
|
||||
details,
|
||||
request,
|
||||
hasErrors
|
||||
}
|
||||
```
|
||||
|
||||
<h2 align="center">License</h2>
|
||||
|
||||
MIT - Made with 💖 By Nuxt.js team!
|
||||
|
||||
<!-- Refs -->
|
||||
[standard-js-src]: https://flat.badgen.net/badge/code%20style/standard/green
|
||||
[standard-js-href]: https://standardjs.com
|
||||
|
||||
[npm-version-src]: https://flat.badgen.net/npm/v/webpackbar/latest
|
||||
[npm-version-href]: https://npmjs.com/package/webpackbar
|
||||
|
||||
[npm-downloads-src]: https://flat.badgen.net/npm/dm/webpackbar
|
||||
[npm-downloads-href]: https://npmjs.com/package/webpackbar
|
||||
|
||||
[package-phobia-src]: https://flat.badgen.net/packagephobia/install/webpackbar
|
||||
[package-phobia-href]: https://packagephobia.now.sh/result?p=webpackbar
|
||||
|
||||
[checks-src]: https://flat.badgen.net/github/checks/nuxt-contrib/webpackbar/master
|
||||
[checks-href]: https://github.com/nuxt-contrib/webpackbar/actions
|
||||
+1834
File diff suppressed because one or more lines are too long
+121
@@ -0,0 +1,121 @@
|
||||
import Webpack, { Stats } from 'webpack';
|
||||
|
||||
type ReporterContextFunc<T = any> = (context: WebpackBarPlugin, opts: T) => void
|
||||
|
||||
interface State {
|
||||
start: [number, number] | null
|
||||
progress: number
|
||||
done: boolean
|
||||
message: string
|
||||
details: string[]
|
||||
request: null | {
|
||||
file: null | string
|
||||
loaders: string[]
|
||||
}
|
||||
hasErrors: boolean
|
||||
color: string
|
||||
name: string
|
||||
}
|
||||
|
||||
interface Reporter {
|
||||
/**
|
||||
* Called when (re)compile is started
|
||||
*/
|
||||
start?: ReporterContextFunc
|
||||
|
||||
/**
|
||||
* Called when a file changed on watch mode
|
||||
*/
|
||||
change?: ReporterContextFunc<{ shortPath: string }>
|
||||
|
||||
/**
|
||||
* Called after each progress update
|
||||
*/
|
||||
update?: ReporterContextFunc
|
||||
|
||||
/**
|
||||
* Called when compile finished
|
||||
*/
|
||||
done?: ReporterContextFunc<{ stats: Stats }>
|
||||
|
||||
/**
|
||||
* Called when build progress updated
|
||||
*/
|
||||
progress?: ReporterContextFunc
|
||||
|
||||
/**
|
||||
* Called when _all_ compiles finished
|
||||
*/
|
||||
allDone?: ReporterContextFunc
|
||||
|
||||
beforeAllDone?: ReporterContextFunc
|
||||
|
||||
afterAllDone?: ReporterContextFunc
|
||||
}
|
||||
|
||||
type ReporterOpts = { reporter: Reporter | string, options?: any }
|
||||
type ReporterInput = string | [Reporter | string, any?] | ReporterOpts
|
||||
|
||||
interface WebpackBarOptions {
|
||||
/**
|
||||
* Display name
|
||||
* @default 'webpack'
|
||||
*/
|
||||
name?: string
|
||||
|
||||
/**
|
||||
* Color output of the progress bar
|
||||
* @default 'green'
|
||||
*/
|
||||
color?: string
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
reporter?: ReporterInput
|
||||
|
||||
/**
|
||||
* Register an Array of your custom reporters.
|
||||
* @default ['basic'] | ['fancy']
|
||||
*/
|
||||
reporters?: ReporterInput[]
|
||||
}
|
||||
|
||||
declare class WebpackBarPlugin extends Webpack.ProgressPlugin {
|
||||
private options;
|
||||
private reporters;
|
||||
constructor(options?: WebpackBarOptions);
|
||||
callReporters(fn: any, payload?: {}): void;
|
||||
get hasRunning(): boolean;
|
||||
get hasErrors(): boolean;
|
||||
get statesArray(): any[];
|
||||
get states(): {
|
||||
[key: string]: State;
|
||||
};
|
||||
get state(): State;
|
||||
_ensureState(): void;
|
||||
apply(compiler: any): void;
|
||||
updateProgress(percent?: number, message?: string, details?: any[]): void;
|
||||
}
|
||||
|
||||
export { Reporter, State, WebpackBarPlugin as default };
|
||||
+1824
File diff suppressed because one or more lines are too long
+55
@@ -0,0 +1,55 @@
|
||||
{
|
||||
"name": "webpackbar",
|
||||
"version": "5.0.2",
|
||||
"description": "Elegant ProgressBar and Profiler for Webpack",
|
||||
"repository": "unjs/webpackbar",
|
||||
"license": "MIT",
|
||||
"main": "./dist/index.cjs",
|
||||
"type": "module",
|
||||
"exports": {
|
||||
"import": "./dist/index.mjs",
|
||||
"require": "./dist/index.cjs"
|
||||
},
|
||||
"types": "./dist/index.d.ts",
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "webpack --config ./playground/webpack.config.cjs",
|
||||
"lint": "eslint --ext .ts,.mjs",
|
||||
"prepack": "unbuild",
|
||||
"release": "yarn test && standard-version && npm publish && git push --follow-tags",
|
||||
"test": "yarn lint && mocha ./test/*.test.*"
|
||||
},
|
||||
"dependencies": {
|
||||
"chalk": "^4.1.0",
|
||||
"consola": "^2.15.3",
|
||||
"pretty-time": "^1.1.0",
|
||||
"std-env": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"markdown-table": "^3.0.1",
|
||||
"figures": "^4.0.0",
|
||||
"ansi-escapes": "^5.0.0",
|
||||
"wrap-ansi": "^8.0.1",
|
||||
"@nuxtjs/eslint-config-typescript": "latest",
|
||||
"@types/mocha": "^9.0.0",
|
||||
"@types/node": "latest",
|
||||
"codecov": "latest",
|
||||
"eslint": "latest",
|
||||
"jiti": "latest",
|
||||
"memory-fs": "latest",
|
||||
"mocha": "latest",
|
||||
"standard-version": "latest",
|
||||
"typescript": "latest",
|
||||
"unbuild": "latest",
|
||||
"webpack": "latest",
|
||||
"webpack-cli": "latest"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"webpack": "3 || 4 || 5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user