From fe8caeb636db0116166a2a6eaa8a4c5617a746ff Mon Sep 17 00:00:00 2001 From: neverland Date: Mon, 18 Sep 2023 11:02:44 +0800 Subject: [PATCH] feat(builder): unify progress bar style in webpack / Rspack mode (#4665) --- .changeset/unlucky-ants-greet.md | 9 ++++++++ .../src/core/createCompiler.ts | 23 +++++++++++++++---- packages/builder/builder-shared/src/index.ts | 1 + .../builder/builder-shared/src/progress.ts | 17 ++++++++++++++ .../ProgressPlugin/ProgressPlugin.ts | 2 +- .../ProgressPlugin/helpers/bar.ts | 14 +++++------ .../ProgressPlugin/helpers/bus.ts | 17 ++------------ 7 files changed, 56 insertions(+), 27 deletions(-) create mode 100644 .changeset/unlucky-ants-greet.md create mode 100644 packages/builder/builder-shared/src/progress.ts diff --git a/.changeset/unlucky-ants-greet.md b/.changeset/unlucky-ants-greet.md new file mode 100644 index 000000000000..116fab4bde2a --- /dev/null +++ b/.changeset/unlucky-ants-greet.md @@ -0,0 +1,9 @@ +--- +'@modern-js/builder-webpack-provider': patch +'@modern-js/builder-rspack-provider': patch +'@modern-js/builder-shared': patch +--- + +feat(builder): unify progress bar style in webpack / Rspack mode + +feat(builder): 对齐 webpack / Rspack 模式下的进度条样式 diff --git a/packages/builder/builder-rspack-provider/src/core/createCompiler.ts b/packages/builder/builder-rspack-provider/src/core/createCompiler.ts index 42315c916fb1..a10fd0f155a5 100644 --- a/packages/builder/builder-rspack-provider/src/core/createCompiler.ts +++ b/packages/builder/builder-rspack-provider/src/core/createCompiler.ts @@ -1,5 +1,13 @@ -import { logger, debug, formatStats } from '@modern-js/builder-shared'; +import { + debug, + logger, + formatStats, + TARGET_ID_MAP, + getProgressColor, +} from '@modern-js/builder-shared'; import type { Context, RspackConfig } from '../types'; +import prettyTime from '../../compiled/pretty-time'; +import chalk from '@modern-js/utils/chalk'; export async function createCompiler({ context, @@ -27,9 +35,16 @@ export async function createCompiler({ }); if (!stats.hasErrors()) { - obj.children?.forEach(c => { - c.time && - logger.success(`${c.name} compiled successfully in`, c.time, 'ms'); + obj.children?.forEach((c, index) => { + if (c.time) { + const color = chalk[getProgressColor(index)]; + const time = prettyTime([0, c.time * 10 ** 6], 1); + const target = Array.isArray(context.target) + ? context.target[index] + : context.target; + const name = TARGET_ID_MAP[target || 'web']; + logger.log(color(`✔ ${name} succeed in`, time)); + } }); } diff --git a/packages/builder/builder-shared/src/index.ts b/packages/builder/builder-shared/src/index.ts index a8b9afa6cb86..0ef5c224fb3d 100644 --- a/packages/builder/builder-shared/src/index.ts +++ b/packages/builder/builder-shared/src/index.ts @@ -31,3 +31,4 @@ export * from './manifest'; export * from './css'; export * from './minimize'; export * from './core-js'; +export * from './progress'; diff --git a/packages/builder/builder-shared/src/progress.ts b/packages/builder/builder-shared/src/progress.ts new file mode 100644 index 000000000000..80f51b9a94dd --- /dev/null +++ b/packages/builder/builder-shared/src/progress.ts @@ -0,0 +1,17 @@ +import type { ForegroundColor as Color } from '@modern-js/utils/compiled/chalk'; + +const colorList: Array = [ + 'green', + 'cyan', + 'yellow', + 'blue', + 'greenBright', + 'cyanBright', + 'yellowBright', + 'blueBright', + 'redBright', + 'magentaBright', +]; + +export const getProgressColor = (index: number) => + colorList[index % colorList.length]; diff --git a/packages/builder/builder-webpack-provider/src/webpackPlugins/ProgressPlugin/ProgressPlugin.ts b/packages/builder/builder-webpack-provider/src/webpackPlugins/ProgressPlugin/ProgressPlugin.ts index d6b0937598ee..ac0b2d332c2d 100644 --- a/packages/builder/builder-webpack-provider/src/webpackPlugins/ProgressPlugin/ProgressPlugin.ts +++ b/packages/builder/builder-webpack-provider/src/webpackPlugins/ProgressPlugin/ProgressPlugin.ts @@ -108,7 +108,7 @@ export class ProgressPlugin extends webpack.ProgressPlugin { compiler.hooks.done.tap(this.name, stat => { if (startTime) { this.hasCompileErrors = stat.hasErrors(); - this.compileTime = prettyTime(process.hrtime(startTime), 2); + this.compileTime = prettyTime(process.hrtime(startTime), 1); startTime = null; } }); diff --git a/packages/builder/builder-webpack-provider/src/webpackPlugins/ProgressPlugin/helpers/bar.ts b/packages/builder/builder-webpack-provider/src/webpackPlugins/ProgressPlugin/helpers/bar.ts index 5dc69c1bee83..1000801ab016 100644 --- a/packages/builder/builder-webpack-provider/src/webpackPlugins/ProgressPlugin/helpers/bar.ts +++ b/packages/builder/builder-webpack-provider/src/webpackPlugins/ProgressPlugin/helpers/bar.ts @@ -8,13 +8,13 @@ const defaultOption: Props = { current: 0, color: 'green', bgColor: 'gray', - char: '■', + char: '━', width: 25, buildIcon: '◯', finishIcon: '✔', - finishInfo: 'Succeed', + finishInfo: 'succeed', errorIcon: '✖', - errorInfo: 'Compile Failed', + errorInfo: 'compile failed', message: '', done: false, spaceWidth: 1, @@ -85,7 +85,7 @@ export const renderBar = (option: Partial) => { ); if (terminalWidth >= MIDDLE_WIDTH) { - return [id, doneColor(`${icon}${space}${message}`)].join(''); + return [idColor(icon), id, doneColor(`${space}${message}`)].join(''); } return [id, doneColor(`${message}`)].join(''); } @@ -104,8 +104,8 @@ export const renderBar = (option: Partial) => { if (terminalWidth >= FULL_WIDTH) { return [ + idColor(buildIcon), id, - barColor(buildIcon), space, barStr, space, @@ -116,8 +116,8 @@ export const renderBar = (option: Partial) => { } if (terminalWidth >= MIDDLE_WIDTH) { - return [id, barColor(buildIcon), space, barStr, space, percentStr].join(''); + return [idColor(buildIcon), id, space, barStr, space, percentStr].join(''); } - return [id, barColor(buildIcon), space, percentStr].join(''); + return [idColor(buildIcon), id, space, percentStr].join(''); }; diff --git a/packages/builder/builder-webpack-provider/src/webpackPlugins/ProgressPlugin/helpers/bus.ts b/packages/builder/builder-webpack-provider/src/webpackPlugins/ProgressPlugin/helpers/bus.ts index 8d9010cf4def..ae05fef55283 100644 --- a/packages/builder/builder-webpack-provider/src/webpackPlugins/ProgressPlugin/helpers/bus.ts +++ b/packages/builder/builder-webpack-provider/src/webpackPlugins/ProgressPlugin/helpers/bus.ts @@ -6,20 +6,7 @@ import type { Props } from './type'; import { FULL_WIDTH, renderBar } from './bar'; import { create } from './log'; import type { LogUpdate } from './log'; -import type { ForegroundColor as Color } from '@modern-js/utils/compiled/chalk'; - -const colorList: Array = [ - 'green', - 'cyan', - 'yellow', - 'blue', - 'greenBright', - 'cyanBright', - 'yellowBright', - 'blueBright', - 'redBright', - 'magentaBright', -]; +import { getProgressColor } from '@modern-js/builder-shared'; class Bus { states: Partial[] = []; @@ -72,7 +59,7 @@ class Bus { cliTruncate( renderBar({ maxIdLen, - color: i.color ?? colorList[k % colorList.length], + color: i.color ?? getProgressColor(k), ...i, }), columns,