feat(app-tools): make logs easier to read (#4671)

web-infra-dev · Sep 19, 2023 · ea3fe18 · ea3fe18
1 parent eff3fb1
commit ea3fe18
Show file tree

Hide file tree

Showing 33 changed files with 158 additions and 249 deletions.
diff --git a/.changeset/early-parents-switch.md b/.changeset/early-parents-switch.md
@@ -0,0 +1,13 @@
+---
+'@modern-js/builder-webpack-provider': patch
+'@modern-js/builder-rspack-provider': patch
+'@modern-js/builder-doc': patch
+'@modern-js/app-tools': patch
+'@modern-js/plugin-proxy': patch
+'@modern-js/builder': patch
+'@modern-js/utils': patch
+---
+
+feat(app-tools): make logs easier to read
+
+feat(app-tools): 让日志更容易阅读
diff --git a/packages/builder/builder-rspack-provider/package.json b/packages/builder/builder-rspack-provider/package.json
@@ -56,9 +56,9 @@
     "@modern-js/types": "workspace:*",
     "@modern-js/utils": "workspace:*",
     "@babel/preset-typescript": "^7.22.15",
-    "@rspack/core": "0.3.4",
-    "@rspack/dev-client": "0.3.4",
-    "@rspack/plugin-html": "0.3.4",
+    "@rspack/core": "0.3.4-canary-9d910ae-20230918010610",
+    "@rspack/dev-client": "0.3.4-canary-9d910ae-20230918010610",
+    "@rspack/plugin-html": "0.3.4-canary-9d910ae-20230918010610",
     "@swc/helpers": "0.5.1",
     "rspack-manifest-plugin": "5.0.0-alpha0",
     "caniuse-lite": "^1.0.30001520",

diff --git a/packages/builder/builder-rspack-provider/src/core/createCompiler.ts b/packages/builder/builder-rspack-provider/src/core/createCompiler.ts
@@ -3,10 +3,8 @@ import {
   logger,
   formatStats,
   TARGET_ID_MAP,
-  getProgressColor,
 } from '@modern-js/builder-shared';
 import type { Context, RspackConfig } from '../types';
-import chalk from '@modern-js/utils/chalk';
 import prettyTime from '@modern-js/builder-shared/pretty-time';
 
 export async function createCompiler({
@@ -37,13 +35,12 @@ export async function createCompiler({
     if (!stats.hasErrors()) {
       obj.children?.forEach((c, index) => {
         if (c.time) {
-          const color = chalk[getProgressColor(index)];
-          const time = prettyTime([0, c.time * 10 ** 6], 1);
+          const time = prettyTime([0, c.time * 10 ** 6], 0);
           const target = Array.isArray(context.target)
             ? context.target[index]
             : context.target;
           const name = TARGET_ID_MAP[target || 'web'];
-          logger.log(color(`✔ ${name}  compiled in`, time));
+          logger.ready(`${name} compiled in ${time}`);
         }
       });
     }

diff --git a/packages/builder/builder-webpack-provider/src/plugins/progress.ts b/packages/builder/builder-webpack-provider/src/plugins/progress.ts
@@ -11,19 +11,13 @@ export const builderPluginProgress = (): BuilderPlugin => ({
         return;
       }
 
-      const isFirstTarget =
-        !Array.isArray(api.context.target) || target === api.context.target[0];
-
       const { ProgressPlugin } = await import(
         '../webpackPlugins/ProgressPlugin/ProgressPlugin'
       );
       chain.plugin(CHAIN_ID.PLUGIN.PROGRESS).use(ProgressPlugin, [
         {
           id: TARGET_ID_MAP[target],
           ...(options === true ? {} : options),
-          // If there is multiple target, show recompile log only once
-          showRecompileLog: isFirstTarget,
-          disableTsChecker: config.output.disableTsChecker,
         },
       ]);
     });

diff --git a/...ages/builder/builder-webpack-provider/src/webpackPlugins/ProgressPlugin/ProgressPlugin.ts b/...ages/builder/builder-webpack-provider/src/webpackPlugins/ProgressPlugin/ProgressPlugin.ts
@@ -1,7 +1,6 @@
 import webpack from 'webpack';
 import { logger } from '@modern-js/utils/logger';
 import prettyTime from '@modern-js/builder-shared/pretty-time';
-import ForkTsCheckerWebpackPlugin from '@modern-js/builder-shared/fork-ts-checker-webpack-plugin';
 import { bus, createFriendlyPercentage } from './helpers';
 import { createNonTTYLogger } from './helpers/nonTty';
 import type { Props } from './helpers/type';
@@ -10,30 +9,22 @@ export interface ProgressOptions
   extends Omit<Partial<Props>, 'message' | 'total' | 'current' | 'done'> {
   id?: string;
   clearOnDone?: boolean;
-  showRecompileLog?: boolean;
   disableTsChecker?: boolean;
 }
 
 export class ProgressPlugin extends webpack.ProgressPlugin {
   readonly name: string = 'ProgressPlugin';
 
-  hasTypeErrors: boolean = false;
+  id: string;
 
   hasCompileErrors: boolean = false;
 
   compileTime: string | null = null;
 
-  showRecompileLog: boolean;
-
   disableTsChecker?: boolean;
 
   constructor(options: ProgressOptions) {
-    const {
-      id = 'Modern',
-      clearOnDone = false,
-      showRecompileLog = false,
-      disableTsChecker,
-    } = options;
+    const { id = 'Modern', clearOnDone = false, disableTsChecker } = options;
 
     const nonTTYLogger = createNonTTYLogger();
     const friendlyPercentage = createFriendlyPercentage();
@@ -59,7 +50,6 @@ export class ProgressPlugin extends webpack.ProgressPlugin {
             message,
             done,
             hasErrors: this.hasCompileErrors,
-            compileTime: this.compileTime,
           });
           bus.render();
 
@@ -78,53 +68,30 @@ export class ProgressPlugin extends webpack.ProgressPlugin {
       },
     });
 
-    this.showRecompileLog = showRecompileLog;
+    this.id = id;
     this.disableTsChecker = disableTsChecker;
   }
 
   apply(compiler: webpack.Compiler): void {
     super.apply(compiler);
 
     let startTime: [number, number] | null = null;
-    let isReCompile = false;
 
     compiler.hooks.compile.tap(this.name, () => {
-      // If it is a recompile and there are compilation errors,
-      // print a recompile log so that users can know that the recompile
-      // is triggered and the above error log is outdated.
-      if (
-        isReCompile &&
-        this.showRecompileLog &&
-        (this.hasCompileErrors || this.hasTypeErrors)
-      ) {
-        logger.info(`Start recompile...\n`);
-      }
-
       this.compileTime = null;
       startTime = process.hrtime();
-      isReCompile = true;
     });
 
     compiler.hooks.done.tap(this.name, stat => {
       if (startTime) {
         this.hasCompileErrors = stat.hasErrors();
-        this.compileTime = prettyTime(process.hrtime(startTime), 1);
+        this.compileTime = prettyTime(process.hrtime(startTime), 0);
         startTime = null;
+
+        if (!this.hasCompileErrors) {
+          logger.ready(`${this.id} compiled in ${this.compileTime}`);
+        }
       }
     });
-
-    if (!this.disableTsChecker) {
-      const hooks = ForkTsCheckerWebpackPlugin.getCompilerHooks(compiler);
-
-      hooks.start.tap(this.name, change => {
-        this.hasTypeErrors = false;
-        return change;
-      });
-
-      hooks.issues.tap(this.name, issues => {
-        this.hasTypeErrors = Boolean(issues.length);
-        return issues;
-      });
-    }
   }
 }
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
@@ -11,10 +11,6 @@ const defaultOption: Props = {
   char: '━',
   width: 25,
   buildIcon: '◯',
-  finishIcon: '✔',
-  finishInfo: 'compiled',
-  errorIcon: '✖',
-  errorInfo: 'compile failed',
   message: '',
   done: false,
   spaceWidth: 1,
@@ -23,7 +19,6 @@ const defaultOption: Props = {
   id: '',
   maxIdLen: 16,
   hasErrors: false,
-  compileTime: null,
 };
 
 const padding = (id: string, maxLen: number) => {
@@ -45,10 +40,6 @@ export const renderBar = (option: Partial<Props>) => {
     total,
     done,
     buildIcon,
-    errorIcon,
-    errorInfo,
-    finishIcon,
-    finishInfo,
     width,
     current,
     color,
@@ -60,7 +51,6 @@ export const renderBar = (option: Partial<Props>) => {
     messageColor,
     maxIdLen,
     hasErrors,
-    compileTime,
   } = mergedOptions;
 
   const space = ' '.repeat(spaceWidth);
@@ -78,16 +68,7 @@ export const renderBar = (option: Partial<Props>) => {
   const { columns: terminalWidth = FULL_WIDTH } = process.stdout;
 
   if (done) {
-    const info = hasErrors ? errorInfo : finishInfo;
-    const icon = hasErrors ? errorIcon : finishIcon;
-    const message = doneColor(
-      compileTime && !hasErrors ? `${info} in ${compileTime}` : info,
-    );
-
-    if (terminalWidth >= MIDDLE_WIDTH) {
-      return [idColor(icon), id, doneColor(`${space}${message}`)].join('');
-    }
-    return [id, doneColor(`${message}`)].join('');
+    return '';
   }
 
   const msgStr = Reflect.get(

diff --git a/packages/builder/builder-webpack-provider/src/webpackPlugins/ProgressPlugin/helpers/type.ts b/packages/builder/builder-webpack-provider/src/webpackPlugins/ProgressPlugin/helpers/type.ts
@@ -8,18 +8,13 @@ export type Props = {
   char: string;
   width: number;
   buildIcon: string;
-  errorIcon: string;
-  errorInfo: string;
-  finishIcon: string;
-  finishInfo: string;
   message: string;
   done: boolean;
   messageWidth: number;
   spaceWidth: number;
   messageColor: typeof Color;
   id: string;
   maxIdLen: number;
-  compileTime: string | null;
   hasErrors: boolean;
 };
 

diff --git a/packages/builder/builder-webpack-provider/tests/plugins/__snapshots__/default.test.ts.snap b/packages/builder/builder-webpack-provider/tests/plugins/__snapshots__/default.test.ts.snap
@@ -871,10 +871,10 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = `
     ProgressPlugin {
       "compileTime": null,
       "dependenciesCount": 10000,
-      "disableTsChecker": false,
+      "disableTsChecker": undefined,
       "handler": [Function],
       "hasCompileErrors": false,
-      "hasTypeErrors": false,
+      "id": "Client",
       "modulesCount": 5000,
       "name": "ProgressPlugin",
       "percentBy": null,
@@ -883,7 +883,6 @@ exports[`applyDefaultPlugins > should apply default plugins correctly 1`] = `
       "showDependencies": true,
       "showEntries": true,
       "showModules": true,
-      "showRecompileLog": true,
     },
     ReactRefreshPlugin {
       "options": {
@@ -1864,10 +1863,10 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when produ
     ProgressPlugin {
       "compileTime": null,
       "dependenciesCount": 10000,
-      "disableTsChecker": false,
+      "disableTsChecker": undefined,
       "handler": [Function],
       "hasCompileErrors": false,
-      "hasTypeErrors": false,
+      "id": "Client",
       "modulesCount": 5000,
       "name": "ProgressPlugin",
       "percentBy": null,
@@ -1876,7 +1875,6 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when produ
       "showDependencies": true,
       "showEntries": true,
       "showModules": true,
-      "showRecompileLog": true,
     },
   ],
   "resolve": {
@@ -2676,10 +2674,10 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe
     ProgressPlugin {
       "compileTime": null,
       "dependenciesCount": 10000,
-      "disableTsChecker": false,
+      "disableTsChecker": undefined,
       "handler": [Function],
       "hasCompileErrors": false,
-      "hasTypeErrors": false,
+      "id": "Server",
       "modulesCount": 5000,
       "name": "ProgressPlugin",
       "percentBy": null,
@@ -2688,7 +2686,6 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe
       "showDependencies": true,
       "showEntries": true,
       "showModules": true,
-      "showRecompileLog": true,
     },
   ],
   "resolve": {
@@ -3478,10 +3475,10 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe
     ProgressPlugin {
       "compileTime": null,
       "dependenciesCount": 10000,
-      "disableTsChecker": false,
+      "disableTsChecker": undefined,
       "handler": [Function],
       "hasCompileErrors": false,
-      "hasTypeErrors": false,
+      "id": "Web Worker",
       "modulesCount": 5000,
       "name": "ProgressPlugin",
       "percentBy": null,
@@ -3490,7 +3487,6 @@ exports[`applyDefaultPlugins > should apply default plugins correctly when targe
       "showDependencies": true,
       "showEntries": true,
       "showModules": true,
-      "showRecompileLog": true,
     },
   ],
   "resolve": {

diff --git a/packages/builder/builder/src/plugins/fileSize.ts b/packages/builder/builder/src/plugins/fileSize.ts
@@ -59,8 +59,10 @@ async function printFileSizes(stats: Stats | MultiStats, distPath: string) {
       folder: path.join(path.basename(distPath), path.dirname(asset.name)),
       name: path.basename(asset.name),
       gzippedSize,
-      sizeLabel: filesize(size),
-      gzipSizeLabel: getAssetColor(gzippedSize)(filesize(gzippedSize)),
+      sizeLabel: filesize(size, { round: 1 }),
+      gzipSizeLabel: getAssetColor(gzippedSize)(
+        filesize(gzippedSize, { round: 1 }),
+      ),
     };
   };
 
@@ -99,7 +101,7 @@ async function printFileSizes(stats: Stats | MultiStats, distPath: string) {
     ...assets.map(a => stripAnsi(a.folder + path.sep + a.name).length),
   );
 
-  logger.info(`File sizes after production build:\n`);
+  logger.info(`Production file sizes:\n`);
 
   printHeader(longestFileLength, longestLabelLength);
 

diff --git a/packages/cli/plugin-proxy/src/utils/whistleProxy.ts b/packages/cli/plugin-proxy/src/utils/whistleProxy.ts
@@ -50,13 +50,13 @@ export default class WhistleProxy {
   }
 
   async start() {
-    logger.info(`Starting the proxy server.....`);
+    logger.info(`Starting proxy server.....`);
     execSync(`${this.bin} start --certDir=${this.certDir} --port=${this.port}`);
     execSync(`${this.bin} use ${this.rule} --force`);
     await this.installRootCA();
 
     enableGlobalProxy('localhost', this.port);
-    logger.info(`Proxy Server start on localhost:${this.port}\n`);
+    logger.info(`Proxy server start on localhost:${this.port}\n`);
   }
 
   close() {