feat(builder): unify progress bar style in webpack / Rspack mode (#4665)

web-infra-dev · Sep 18, 2023 · fe8caeb · fe8caeb
1 parent 4b8cdd3
commit fe8caeb
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 27 deletions.
diff --git a/.changeset/unlucky-ants-greet.md 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
@@ -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
@@ -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
@@ -0,0 +1,17 @@
+import type { ForegroundColor as Color } from '@modern-js/utils/compiled/chalk';
+
+const colorList: Array<typeof Color> = [
+  'green',
+  'cyan',
+  'yellow',
+  'blue',
+  'greenBright',
+  'cyanBright',
+  'yellowBright',
+  'blueBright',
+  'redBright',
+  'magentaBright',
+];
+
+export const getProgressColor = (index: number) =>
+  colorList[index % colorList.length];
diff --git a/...ages/builder/builder-webpack-provider/src/webpackPlugins/ProgressPlugin/ProgressPlugin.ts b/...ages/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
@@ -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<Props>) => {
     );
 
     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<Props>) => {
 
   if (terminalWidth >= FULL_WIDTH) {
     return [
+      idColor(buildIcon),
       id,
-      barColor(buildIcon),
       space,
       barStr,
       space,
@@ -116,8 +116,8 @@ export const renderBar = (option: Partial<Props>) => {
   }
 
   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
@@ -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<typeof Color> = [
-  'green',
-  'cyan',
-  'yellow',
-  'blue',
-  'greenBright',
-  'cyanBright',
-  'yellowBright',
-  'blueBright',
-  'redBright',
-  'magentaBright',
-];
+import { getProgressColor } from '@modern-js/builder-shared';
 
 class Bus {
   states: Partial<Props>[] = [];
@@ -72,7 +59,7 @@ class Bus {
         cliTruncate(
           renderBar({
             maxIdLen,
-            color: i.color ?? colorList[k % colorList.length],
+            color: i.color ?? getProgressColor(k),
             ...i,
           }),
           columns,