chore: use picocolors instead of chalk and fix docs links (#1060)

Co-authored-by: yifancong <[email protected]>

Author: wChenonly

examples/webpack-minimal/package.json

@@ -17,7 +17,7 @@
   "license": "MIT",
   "dependencies": {
     "@babel/highlight": "7.18.6",
-    "chalk": "4.1.2",
+    "chalk": "^5.4.1",
     "css-loader": "^6.9.0",
     "htmlparser2": "7.2.0",
     "mini-svg-data-uri": "^1.4.4"

examples/webpack-minimal/src/index.ts

@@ -1,10 +1,10 @@
-import { Instance } from 'chalk';
+import { Chalk } from 'chalk';
 import { highlight } from './utils';
 import { getHtmlText } from './html';
 import { key6 } from './utils2';
-import "./style.css";
+import './style.css';
 
-const print = new Instance();
+const print = new Chalk();
 
 print(key6);
 print(getHtmlText('<div>Test Text</div>'));

packages/document/docs/zh/config/options/options.mdx

@@ -263,7 +263,7 @@ Rsdoctor 报告输出目录，默认是构建产物输出目录。
 
 <Badge text="Deprecated" type="warning" />
 
-请看 [output.reportDir](#reportDir)
+请看 [output.reportDir](#reportdir)
 
 ### supports
 

packages/utils/package.json

@@ -79,7 +79,7 @@
     "acorn": "^8.10.0",
     "acorn-import-attributes": "^1.9.5",
     "acorn-walk": "8.3.4",
-    "chalk": "^4.1.2",
+    "picocolors": "^1.1.1",
     "connect": "3.7.0",
     "deep-eql": "4.1.4",
     "envinfo": "7.14.0",

packages/utils/src/error/error.ts

@@ -1,6 +1,6 @@
 import { codeFrameColumns } from '@babel/code-frame';
 import { Err, Rule } from '@rsdoctor/types';
-import { Chalk, Instance } from 'chalk';
+import { createColors } from 'picocolors';
 import deepEql from 'deep-eql';
 import stripAnsi from 'strip-ansi';
 import { transform } from './transform';
@@ -87,7 +87,7 @@ export class DevToolError extends Error implements Err.DevToolErrorInstance {
     return this._codeFrame;
   }
 
-  private printCodeFrame(print: Chalk) {
+  private printCodeFrame(print: ReturnType<typeof createColors>) {
     const msgs: string[] = [];
     const { _codeFrame: codeFrameOpt, _controller: controller } = this;
 
@@ -179,17 +179,19 @@ export class DevToolError extends Error implements Err.DevToolErrorInstance {
       referenceUrl,
       _controller: controller,
     } = this;
-    const print = controller.noColor
-      ? new Instance({ level: 0 })
-      : new Instance({ level: 3 });
+
+    const print = createColors(!controller.noColor);
+
     const mainColorPrint =
       this._level === Err.ErrorLevel.Error ? print.red : print.yellow;
-    const codeText = code ? `${mainColorPrint.blue(code)}:` : '';
+
+    const codeText = code ? `${mainColorPrint(print.blue(code))}:` : '';
 
     msgs.push(
-      mainColorPrint.bold(
-        `[${codeText}${this.level}:${title.toUpperCase()}] `,
-      ) + message,
+      mainColorPrint(
+        print.bold(`[${codeText}${this.level}:${title.toUpperCase()}] `) +
+          message,
+      ),
     );
     msgs.push(...this.printCodeFrame(print));
 
@@ -202,11 +204,11 @@ export class DevToolError extends Error implements Err.DevToolErrorInstance {
     }
 
     if (referenceUrl) {
-      msgs.push(print.magenta.bold(` See: ${referenceUrl}`));
+      msgs.push(print.magenta(print.bold(` See: ${referenceUrl}`)));
     }
 
     if (!controller.noStack && this.stack) {
-      msgs.push(print.red.bold(` Error Stack:\n${this.stack}\n`));
+      msgs.push(print.red(print.bold(` Error Stack:\n${this.stack}\n`)));
     }
 
     return msgs.join('\n');

packages/utils/src/logger.ts

@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import c from 'picocolors';
 import { logger } from 'rslog';
 import { Constants } from '@rsdoctor/types';
 
@@ -14,7 +14,7 @@ export function debug(getMsg: () => string, prefix = '') {
   logger.debug(`${prefix} ${getMsg()}`);
 }
 
-export { chalk, logger };
+export { c as chalk, logger };
 
 logger.override({
   log: (message) => {