vite-uni-dev-tool 0.0.1

package/dev/devConsole/index.ts

@@ -0,0 +1,334 @@
+import { DevEvent } from '../devEvent';
+import type { DevTool } from '../type';
+import {
+  getCurrentDate,
+  getCurrentPagePath,
+  isArray,
+  serializeCircular,
+} from '../utils/index';
+
+/**
+ * DevTool 包装之后的 console 类
+ *
+ * 用于记录 console 日志
+ *
+ * 覆盖 console 将会导致难以预料的事情发生，因此不建议覆盖 console
+ *
+ * @export
+ * @class DevConsole
+ */
+export class DevConsole {
+  event: DevEvent;
+
+  /**
+   * 时间戳记录
+   *
+   * @memberof DevConsole
+   */
+  timeMap = new Map<string, number>();
+
+  /**
+   * 计数器记录
+   *
+   * @memberof DevConsole
+   */
+  countMap = new Map<string, number>();
+
+  constructor(event: DevEvent) {
+    this.event = event;
+  }
+
+  /**
+   * 包装之后的 console 方法
+   *
+   * @param {DevTool.ConsoleType} type
+   * @param {any[]} args
+   * @memberof DevConsole
+   */
+  factory(type: DevTool.ConsoleType, args: any[]) {
+    console[type](...args);
+
+    const isDestroy = this.event.getDevToolDestroy();
+
+    if (isDestroy) return;
+
+    const position = getCurrentPagePath();
+    const time = getCurrentDate();
+    // 获取调用栈（从第4行开始，跳过 console.log 和 wrapper 函数）
+    const stackList = new Error()?.stack?.split('\n');
+
+    const stack = stackList?.slice(3)?.[0];
+
+    let argList = args?.map((item) => serializeCircular(item));
+
+    if (isArray(args) && args.length > 0) {
+      this.event.updateConsoleList([
+        {
+          type,
+          position,
+          time,
+          args: argList,
+          stack,
+        },
+      ]);
+    }
+  }
+
+  /**
+   * DevTool 包装之后的 console.log 方法
+   *
+   * @param {...any[]} args
+   * @memberof DevConsole
+   */
+  log(...args: any[]) {
+    this.factory('log', args);
+  }
+
+  /**
+   * DevTool 包装之后的 console.info 方法
+   *
+   * @param {...any[]} args
+   * @memberof DevConsole
+   */
+  info(...args: any[]) {
+    this.factory('info', args);
+  }
+
+  /**
+   * DevTool 包装之后的 console.warn 方法
+   *
+   * @param {...any[]} args
+   * @memberof DevConsole
+   */
+  warn(...args: any[]) {
+    this.factory('warn', args);
+  }
+
+  /**
+   * DevTool 包装之后的 console.error 方法
+   *
+   * @param {...any[]} args
+   * @memberof DevConsole
+   */
+  error(...args: any[]) {
+    this.factory('error', args);
+  }
+
+  /**
+   * DevTool 包装之后的 console.time 方法
+   *
+   * @param {string} label
+   * @memberof DevConsole
+   */
+  time(label: string) {
+    console.time(label);
+    this.timeMap.set(label, Date.now());
+  }
+
+  /**
+   * DevTool 包装之后的 console.timeEnd 方法
+   *
+   * @param {string} label
+   * @memberof DevConsole
+   */
+  timeEnd(label: string) {
+    this.factory('timeEnd', [label]);
+
+    const isDestroy = this.event.getDevToolDestroy();
+
+    if (isDestroy) return;
+
+    const position = getCurrentPagePath();
+    const time = getCurrentDate();
+    // 获取调用栈（从第4行开始，跳过 console.log 和 wrapper 函数）
+    const stackList = new Error()?.stack?.split('\n');
+
+    const stack = stackList?.slice(3)?.[0];
+
+    const startTime = this.timeMap.get(label);
+
+    if (startTime) {
+      const duration = Date.now() - startTime;
+      this.event.updateConsoleList([
+        {
+          type: 'log',
+          position,
+          time,
+          args: [`${label ?? '[DevTool timeEnd error]'}: ${duration}ms`],
+          stack,
+        },
+      ]);
+    }
+    this.timeMap.delete(label);
+  }
+
+  /**
+   *  DevTool 包装之后的 console.clear 方法
+   *
+   * @memberof DevConsole
+   */
+  clear() {
+    this.factory('clear', []);
+    this.event.updateConsoleList([]);
+  }
+
+  /**
+   * DevTool 包装之后的 console.count 方法
+   *
+   * @param {string} [label='']
+   * @memberof DevConsole
+   */
+  count(label: string = '') {
+    this.factory('count', [label]);
+
+    const isDestroy = this.event.getDevToolDestroy();
+
+    if (isDestroy) return;
+
+    this.countMap.set(label, (this.countMap.get(label) || 0) + 1);
+
+    // 获取调用栈（从第4行开始，跳过 console.log 和 wrapper 函数）
+    const stackList = new Error()?.stack?.split('\n');
+
+    const stack = stackList?.slice(3)?.[0];
+
+    this.event.updateConsoleList([
+      {
+        type: 'log',
+        position: getCurrentPagePath(),
+        time: getCurrentDate(),
+        args: [`${label}: ${this.countMap.get(label)}`],
+        stack,
+      },
+    ]);
+  }
+
+  /**
+   * DevTool 包装之后的 console.countReset 方法
+   *
+   * @param {string} [label='']
+   * @memberof DevConsole
+   */
+  countReset(label: string = '') {
+    this.countMap.delete(label);
+  }
+
+  /**
+   * 原始 console.assert 方法
+   *
+   * @param {...any[]} args
+   * @memberof DevConsole
+   */
+  assert(...args: any[]) {
+    console.assert(...args);
+  }
+
+  /**
+   * 原始 console.debug 方法
+   *
+   * @param {...any[]} args
+   * @memberof DevConsole
+   */
+  debug(...args: any[]) {
+    console.debug(...args);
+  }
+
+  /**
+   * 原始 console.dir 方法
+   *
+   * @param {...any[]} args
+   * @memberof DevConsole
+   */
+  dir(...args: any[]) {
+    console.dir(...args);
+  }
+
+  /**
+   * 原始 console.dirxml 方法
+   *
+   * @param {...any[]} args
+   * @memberof DevConsole
+   */
+  dirxml(...args: any[]) {
+    console.dirxml(...args);
+  }
+
+  /**
+   * 原始 console.group 方法
+   *
+   * @param {...any[]} args
+   * @memberof DevConsole
+   */
+  group(...args: any[]) {
+    console.group(args);
+  }
+
+  /**
+   * 原始 console.groupCollapsed 方法
+   *
+   * @param {...any[]} args
+   * @memberof DevConsole
+   */
+  groupCollapsed(...args: any[]) {
+    console.groupCollapsed(...args);
+  }
+
+  /**
+   * 原始 console.groupEnd 方法
+   *
+   * @memberof DevConsole
+   */
+  groupEnd() {
+    console.groupEnd();
+  }
+
+  /**
+   * 原始 console.table 方法
+   *
+   * @param {...any[]} args
+   * @memberof DevConsole
+   */
+  table(...args: any[]) {
+    console.table(...args);
+  }
+
+  /**
+   * 原始 console.timeStamp 方法
+   *
+   * @param {...any[]} args
+   * @memberof DevConsole
+   */
+  timeStamp(...args: any[]) {
+    console.timeStamp(...args);
+  }
+
+  /**
+   * 原始 console.profile 方法
+   *
+   * @param {...any[]} args
+   * @memberof DevConsole
+   */
+  trace(...args: any[]) {
+    console?.trace?.(...args);
+  }
+
+  /**
+   * 原始 console.profile 方法
+   *
+   * @param {string} label
+   * @memberof DevConsole
+   */
+  // profile(label?: string) {
+  //   console?.profile?.(label);
+  // }
+
+  /**
+   * 原始 console.profileEnd 方法
+   *
+   * @param {string} [label]
+   * @memberof DevConsole
+   */
+  // profileEnd(label?: string) {
+  //   console?.profileEnd?.(label);
+  // }
+}