diff --git a/package.json b/package.json index be9c39f..78aafcd 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,6 @@ "chalk": "^2.4.1", "consola": "^2.0.0-0", "figures": "^2.0.0", - "lodash": "^4.17.11", "log-update": "^2.3.0", "pretty-time": "^1.1.0", "std-env": "^2.0.2", diff --git a/src/description.js b/src/description.js index 5fc2d04..1f11aaa 100644 --- a/src/description.js +++ b/src/description.js @@ -1,8 +1,8 @@ -import _ from 'lodash'; +import { startCase } from './utils'; const DB = { loader: { - get: (loader) => _.startCase(loader), + get: (loader) => startCase(loader), }, ext: { get: (ext) => `${ext} files`, @@ -16,7 +16,7 @@ const DB = { export default function getDescription(category, keyword) { if (!DB[category]) { - return _.startCase(keyword); + return startCase(keyword); } if (DB[category][keyword]) { diff --git a/src/index.js b/src/index.js index 9a3a885..2e31b1b 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,5 @@ import webpack from 'webpack'; import chalk from 'chalk'; -import _ from 'lodash'; import logUpdate from 'log-update'; import env from 'std-env'; import Consola from 'consola'; @@ -15,6 +14,7 @@ import { formatStats, colorize, ellipsisLeft, + throttle, } from './utils'; const consola = Consola.withTag('webpackbar'); @@ -50,7 +50,7 @@ export default class WebpackBarPlugin extends webpack.ProgressPlugin { this.handler = (percent, msg, ...details) => this.updateProgress(percent, msg, details); - this._render = _.throttle(this.render, 100); + this._render = throttle(this.render.bind(this), 1, 100); this.logUpdate = this.options.logUpdate || $logUpdate; @@ -152,29 +152,33 @@ export default class WebpackBarPlugin extends webpack.ProgressPlugin { const columns = this.stream.columns || 80; - const stateLines = _.sortBy(Object.keys(sharedState)).map((name) => { - const state = sharedState[name]; - const color = colorize(state.color); + const stateLines = Object.keys(sharedState) + .sort() + .map((name) => { + const state = sharedState[name]; + const color = colorize(state.color); - if (!state.isRunning) { - const color2 = state.progress === 100 ? color : chalk.grey; - return color2(`${BULLET} ${name}\n`); - } + if (!state.isRunning) { + const color2 = state.progress === 100 ? color : chalk.grey; + return color2(`${BULLET} ${name}\n`); + } - return `${[ - color(BULLET), - color(name), - renderBar(state.progress, state.color), - state.msg, - `(${state.progress || 0}%)`, - chalk.grey((state.details && state.details[0]) || ''), - chalk.grey((state.details && state.details[1]) || ''), - ].join(' ')}\n ${ - state.request - ? chalk.grey(ellipsisLeft(formatRequest(state.request), columns - 2)) - : '' - }\n`; - }); + return `${[ + color(BULLET), + color(name), + renderBar(state.progress, state.color), + state.msg, + `(${state.progress || 0}%)`, + chalk.grey((state.details && state.details[0]) || ''), + chalk.grey((state.details && state.details[1]) || ''), + ].join(' ')}\n ${ + state.request + ? chalk.grey( + ellipsisLeft(formatRequest(state.request), columns - 2) + ) + : '' + }\n`; + }); if (hasRunning()) { const title = chalk.underline.blue('Compiling'); diff --git a/src/utils.js b/src/utils.js index 62b4af1..2b34f0a 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,7 +1,6 @@ import path from 'path'; import chalk from 'chalk'; -import _ from 'lodash'; import figures from 'figures'; import { table } from 'table'; import prettyTime from 'pretty-time'; @@ -13,6 +12,35 @@ const BLOCK_CHAR = '█'; const BLOCK_CHAR2 = '█'; const NEXT = chalk.blue(figures(' › ')); +export const first = (arr) => arr[0]; +export const last = (arr) => (arr.length ? arr[arr.length - 1] : null); +export const startCase = (str) => str[0].toUpperCase() + str.substr(1); +export const range = (len) => { + const arr = []; + for (let i = 0; i < len; i++) { + arr.push(i); + } + return arr; +}; +export function throttle(callback, limit, time) { + let calledCount = 0; + let timeout = null; + + return function throttledFn() { + if (limit > calledCount) { + calledCount += 1; + callback(); + } + + if (!timeout) { + timeout = setTimeout(() => { + calledCount = 0; + timeout = null; + }, time); + } + }; +} + export const BULLET = figures('●'); export const TICK = chalk.green(figures('✔')); @@ -29,7 +57,7 @@ export const renderBar = (progress, color) => { const bg = chalk.white(BLOCK_CHAR); const fg = colorize(color)(BLOCK_CHAR2); - return _.range(BAR_LENGTH) + return range(BAR_LENGTH) .map((i) => (i < w ? fg : bg)) .join(''); }; @@ -37,8 +65,8 @@ export const renderBar = (progress, color) => { const hasValue = (s) => s && s.length; const nodeModules = `${path.delimiter}node_modules${path.delimiter}`; -const removeAfter = (delimiter, str) => _.first(str.split(delimiter)); -const removeBefore = (delimiter, str) => _.last(str.split(delimiter)); +const removeAfter = (delimiter, str) => first(str.split(delimiter)); +const removeBefore = (delimiter, str) => last(str.split(delimiter)); const firstMatch = (regex, str) => { const m = regex.exec(str); @@ -79,19 +107,13 @@ export const formatStats = (allStats) => { Object.keys(allStats).forEach((category) => { const stats = allStats[category]; - lines.push(`Stats by ${chalk.bold(_.startCase(category))}`); + lines.push(`Stats by ${chalk.bold(startCase(category))}`); let totalRequests = 0; const totalTime = [0, 0]; const data = [ - [ - _.startCase(category), - 'Requests', - 'Time', - 'Time/Request', - 'Description', - ], + [startCase(category), 'Requests', 'Time', 'Time/Request', 'Description'], ]; Object.keys(stats).forEach((item) => {