vite-uni-dev-tool 0.0.6 → 0.0.8

package/dev/const.ts

@@ -10,86 +10,159 @@ export const EVENT_DEV_BUTTON = 'event-dev-button';
  */
 export const EVENT_DEV_WINDOW = 'event-dev-window';
 
-/** app 发出的信息 */
+/**
+ * app 发出的信息
+ */
 export const DEV_APP_MESSAGE = 'dev-app-message';
 
-/** 调试弹窗发出的消息 */
+/**
+ * 调试弹窗发出的消息
+ */
 export const DEV_WINDOW_MESSAGE = 'dev-window-message';
 
-/** 缓存调试按钮信息 */
+/**
+ * 缓存调试按钮信息
+ */
 export const DEV_BUTTON_INFO = 'dev-button-info';
 
-/** 缓存调试弹窗信息 */
+/**
+ * 缓存调试弹窗信息
+ */
 export const DEV_WINDOW_INFO = ' dev-window-info';
 
 export const DEV_IS_DESTROY = 'dev-is-destroy';
 
-/** 清空console */
+/**
+ * 清空console
+ */
 export const DEV_CONSOLE_CLEAR = 'dev-console-clear';
 
-/** 清空network */
+/**
+ * 清空network
+ */
 export const DEV_NETWORK_CLEAR = 'dev-network-clear';
 
-/** 清空websocket */
+/**
+ * 清空websocket
+ */
 export const DEV_WEBSOCKET_CLEAR = 'dev-websocket-clear';
 
-/** 清空upload */
+/**
+ * 清空upload
+ */
 export const DEV_UPLOAD_CLEAR = 'dev-upload-clear';
 
-/** 清空storage */
+/**
+ * 清空storage
+ */
 export const DEV_STORAGE_CLEAR = 'dev-storage-clear';
 
-/** 刷新storage */
+/**
+ * 刷新storage
+ */
 export const DEV_STORAGE_REFRESH = 'dev-storage-refresh';
 
-/** 移除storage */
+/**
+ * 移除storage
+ */
 export const DEV_STORAGE_REMOVE = 'dev-storage-remove';
 
-/** 新增storage */
+/**
+ * 新增storage
+ */
 export const DEV_STORAGE_ADD = 'dev-storage-add';
 
-/** 更新storage */
+/**
+ * 更新storage
+ */
 export const DEV_STORAGE_UPDATE = 'dev-storage-update';
 
-/** 页面跳转 */
+/**
+ * 页面跳转
+ */
 export const DEV_PAGE_JUMP = 'dev-page-jump';
 
-/** 隐藏调试按钮 */
+/**
+ * 隐藏调试按钮
+ */
 export const DEV_BUTTON_SHOW_OR_HIDE = 'dev-button-show-or-hide';
 
-/** 重启调试器 */
+/**
+ * 重启调试器
+ */
 export const DEV_RESTART_DEBUGGER = 'dev-restart-debugger';
 
-/** 重启app */
+/**
+ * 重启app
+ */
 export const DEV_RESTART_APP = 'dev-restart-app';
 
-/** 导出日志 */
+/**
+ * 导出日志
+ */
 export const DEV_EXPORT_LOG = 'dev-export-log';
 
-/** 改变vuex数据 */
+/**
+ * 改变vuex数据
+ */
 export const DEV_VUEX_CHANGE = 'dev-vuex-change';
 
-/** 改变pinia  */
+/**
+ * 改变pinia
+ */
 export const DEV_PINIA_CHANGE = 'dev-pinia-change';
 
-/** 清除日志缓存 */
+/**
+ * 清除日志缓存
+ */
 export const DEV_LOG_CACHE_CLEAR = 'dev-log-cache-clear';
 
-/** 销毁调试工具 */
+/**
+ * 销毁调试工具
+ */
 export const DEV_DESTROY = 'dev-destroy';
 
-/** 显示调试弹窗 */
+/**
+ * 显示调试弹窗
+ */
 export const DEV_WINDOW_OPEN = 'dev-window-open';
 
-/** 显示调试弹窗 */
+/**
+ * 显示调试弹窗
+ */
 export const DEV_WINDOW_CLOSE = 'dev-window-close';
 
-/** 刷新路由列表 */
+/**
+ * 刷新路由列表
+ */
 export const DEV_ROUTE_REFRESH = 'dev-route-refresh';
 
-/** 获取 dev option */
+/**
+ * 获取 dev option
+ */
 export const DEV_OPTION = 'dev-option';
 
-export const  DEV_OPTION_GET = 'dev-option-get';
+/**
+ * 获取options
+ */
+export const DEV_OPTION_GET = 'dev-option-get';
+
+/**
+ * 发送 options
+ */
+export const DEV_OPTION_SEND = 'dev-option-send';
+
+/**
+ * 清空事件
+ */
+export const DEV_UNI_EVENT_CLEAR = 'dev-uni-event-clear';
+
+/**
+ * 运行js
+ */
+export const DEV_RUN_JS = 'dev-uni-run-js';
 
-export const  DEV_OPTION_SEND = 'dev-option-send';
+/**
+ * 清空运行的js
+ */
+export const DEV_RUN_JS_CLEAR = 'dev-uni-run-js-clear';

package/dev/core.ts

@@ -1,4 +1,3 @@
-// import DevToolComponent from './components/DevTool/index.vue';
 import { DevStore } from './devStore';
 import { DevEvent } from './devEvent';
 import { DevIntercept } from './devIntercept';
@@ -6,6 +5,7 @@ import { DevConsole } from './devConsole';
 
 import type { DevTool } from './type';
 
+import { EventBus } from './devEventBus';
 /**
  * 备份原生方法
  *
@@ -26,12 +26,21 @@ const backup = {
   reject: Promise.reject,
   connectSocket: uni?.connectSocket,
   uploadFile: uni?.uploadFile,
+  $on: uni.$on,
+  $once: uni.$once,
+  $emit: uni.$emit,
+  $off: uni.$off,
   __log__: (uni as any).__log__,
 };
 
+const eventBus = new EventBus();
+
 const store = new DevStore();
 
-const event = new DevEvent(store);
+const event = new DevEvent({
+  store,
+  eventBus,
+});
 
 const console = new DevConsole(event);
 
@@ -93,7 +102,6 @@ function interceptPiniaStore(context: any) {
 uni.__dev__console = console;
 
 export {
-  // DevToolComponent,
   backup,
   console,
   initDevTool,
@@ -106,4 +114,5 @@ export {
   getDevToolOptions,
   interceptVuexStorage,
   interceptPiniaStore,
+  eventBus,
 };

package/dev/devConsole/index.ts

@@ -3,8 +3,9 @@ import type { DevTool } from '../type';
 import {
   getCurrentDate,
   getCurrentPagePath,
+  transformValueToView,
   isArray,
-  serializeCircular,
+  parseValue,
 } from '../utils/index';
 
 /**
@@ -58,7 +59,13 @@ export class DevConsole {
     const stackList = new Error()?.stack?.split('\n');
     const stack = stackList?.slice(3)?.[0];
 
-    let argList = args?.map((item) => serializeCircular(item));
+    let argList = args?.map((item) => {
+      return {
+        type: transformValueToView(item),
+        // 处理 item 循环引用问题
+        value: parseValue(item),
+      };
+    });
 
     if (isArray(args) && args.length > 0) {
       this.event.updateConsoleList([
@@ -153,7 +160,12 @@ export class DevConsole {
           type: 'log',
           position,
           time,
-          args: [`${label ?? '[DevTool timeEnd error]'}: ${duration}ms`],
+          args: [
+            {
+              type: 'string',
+              value: `${label ?? '[DevTool timeEnd error]'}: ${duration}ms`,
+            },
+          ],
           stack,
         },
       ]);
@@ -196,7 +208,12 @@ export class DevConsole {
         type: 'log',
         position: getCurrentPagePath(),
         time: getCurrentDate(),
-        args: [`${label}: ${this.countMap.get(label)}`],
+        args: [
+          {
+            type: 'string',
+            value: `${label}: ${this.countMap.get(label)}`,
+          },
+        ],
         stack,
       },
     ]);

package/dev/devEvent/index.ts

@@ -28,6 +28,8 @@ import {
   DEV_WINDOW_CLOSE,
   DEV_OPTION_GET,
   DEV_OPTION_SEND,
+  DEV_UNI_EVENT_CLEAR,
+  DEV_RUN_JS,
 } from '../const';
 import { DevStore } from '../devStore';
 import type { DevTool } from '../type';
@@ -38,7 +40,12 @@ import {
   saveTxtFileApp,
   saveTextFileH5,
   saveTextFileMicro,
+  getCurrentDate,
+  isNil,
+  transformValueToView,
+  parseValue,
 } from '../utils/index';
+import type { EventBus } from '../devEventBus';
 
 /**
  * 事件中心
@@ -49,8 +56,11 @@ import {
 export class DevEvent {
   private store: DevStore;
 
-  constructor(store: DevStore) {
+  private eventBus: EventBus;
+
+  constructor({ store, eventBus }: { store: DevStore; eventBus: EventBus }) {
     this.store = store;
+    this.eventBus = eventBus;
     this.acceptMessage();
   }
 
@@ -67,7 +77,7 @@ export class DevEvent {
     data.size = size;
     data.sizeFormat = sizeFormat;
 
-    uni.$emit(DEV_APP_MESSAGE, data);
+    this.eventBus.emit(DEV_APP_MESSAGE, data);
 
     if (size > this.store.cacheMaxSize) {
       this.store?.clearDevCache();
@@ -136,8 +146,12 @@ export class DevEvent {
 
     this.resetInterceptSwitchTab();
 
+    this.resetUniEvent();
+
     this.store.setDevToolDestroy(true);
 
+    this.eventBus.clear();
+
     console.warn('[DevTool] 调试器已销毁');
   }
 
@@ -163,7 +177,7 @@ export class DevEvent {
     setTimeout(async () => {
       this.postMessage();
     }, 100);
-    uni.$emit(EVENT_DEV_WINDOW, true);
+    this.eventBus.emit(EVENT_DEV_WINDOW, true);
   }
 
   /**
@@ -172,7 +186,7 @@ export class DevEvent {
    * @memberof DevEvent
    */
   closeDevToolWindow() {
-    uni.$emit(EVENT_DEV_WINDOW, false);
+    this.eventBus.emit(EVENT_DEV_WINDOW, false);
   }
 
   /**
@@ -183,7 +197,7 @@ export class DevEvent {
   showDevToolButton() {
     const isDestroy = uni.getStorageSync(DEV_IS_DESTROY) ?? false;
     if (isDestroy) return;
-    uni.$emit(EVENT_DEV_BUTTON, true);
+    this.eventBus.emit(EVENT_DEV_BUTTON, true);
     uni.setStorageSync(EVENT_DEV_BUTTON, true);
     this.store.setDevToolVisible(true);
   }
@@ -196,7 +210,7 @@ export class DevEvent {
   hideDevToolButton() {
     const isDestroy = uni.getStorageSync(DEV_IS_DESTROY) ?? false;
     if (isDestroy) return;
-    uni.$emit(EVENT_DEV_BUTTON, false);
+    this.eventBus.emit(EVENT_DEV_BUTTON, false);
     uni.setStorageSync(EVENT_DEV_BUTTON, false);
     this.store.setDevToolVisible(false);
   }
@@ -281,7 +295,7 @@ export class DevEvent {
   sendDevToolOption() {
     const options = this.store.getDevToolOptions();
 
-    uni.$emit(DEV_OPTION_SEND, options);
+    this.eventBus.emit(DEV_OPTION_SEND, options);
   }
 
   /**
@@ -290,7 +304,7 @@ export class DevEvent {
    * @memberof DevEvent
    */
   acceptMessage() {
-    uni.$on(
+    this.eventBus.on(
       DEV_WINDOW_MESSAGE,
       (data: {
         type: string;
@@ -306,6 +320,7 @@ export class DevEvent {
           exportWindow: boolean;
           exportDevice: boolean;
           exportSystem: boolean;
+          code: string;
           [key: string]: any;
         };
       }) => {
@@ -407,6 +422,14 @@ export class DevEvent {
         else if (data.type === DEV_OPTION_GET) {
           this.sendDevToolOption();
         }
+        // 清空事件
+        else if (data.type === DEV_UNI_EVENT_CLEAR) {
+          this.uniEventClear();
+        }
+        // 运行 js
+        else if (data.type === DEV_RUN_JS) {
+          this.devRunJS(data.data.code);
+        }
       },
     );
   }
@@ -662,4 +685,95 @@ export class DevEvent {
   getDevToolDestroy() {
     return this.store.getDevToolDestroy();
   }
+
+  updateUniEventCount(type: DevTool.EventCountKey) {
+    this.store.updateUniEventCount(type);
+    this.postMessage();
+  }
+  updateUniEventList(eventList: DevTool.EventItem[]) {
+    this.store.updateUniEventList(eventList);
+    this.postMessage();
+  }
+  uniEventClear() {
+    this.store.uniEventClear();
+  }
+
+  resetUniEvent() {
+    uni.$on = backup.$on;
+    uni.$once = backup.$once;
+    uni.$emit = backup.$emit;
+    uni.$off = backup.$off;
+  }
+
+  execute(code: any): Promise<any> {
+    const evalFunction = '_e_v_a_l_'.replace(
+      /_/g,
+      '',
+    ) as keyof typeof globalThis;
+
+    if (!globalThis?.[evalFunction]) {
+      return Promise.reject(
+        new Error('[DevTool] DevRunJS 当前环境不支持执行js'),
+      );
+    }
+
+    return Promise.resolve(globalThis?.[evalFunction](code));
+  }
+
+  /**
+   * 运行js
+   *
+   * @param {string} code
+   * @memberof DevEvent
+   */
+  devRunJS(code: string) {
+    const start = Date.now();
+    const consoleItem: DevTool.ConsoleItem = {
+      type: 'log',
+      args: [
+        {
+          type: 'string',
+          value: code,
+        },
+      ],
+      position: 'dev/devEvent/index.ts',
+      time: getCurrentDate(),
+      stack: 'http://usr/devRunJS',
+      mode: 'input',
+    };
+    console.log(code);
+    this.store.updateConsoleList([{ ...consoleItem }]);
+
+    this.postMessageFn();
+
+    this.execute(code)
+      .then((res) => {
+        consoleItem.args = [
+          {
+            type: transformValueToView(res),
+            value: parseValue(res),
+          },
+        ];
+        consoleItem.position = `dev/devEvent/index.ts ${Date.now() - start}ms`;
+        consoleItem.time = getCurrentDate();
+        consoleItem.mode = 'output';
+      })
+      .catch((err: Error) => {
+        console.error(err);
+        consoleItem.args = [
+          {
+            type: 'string',
+            value: err.message,
+          },
+        ];
+        consoleItem.position = `dev/devEvent/index.ts ${Date.now() - start}ms`;
+        consoleItem.time = getCurrentDate();
+        consoleItem.type = 'error';
+        consoleItem.mode = 'output';
+      })
+      .finally(() => {
+        this.store.updateConsoleList([{ ...consoleItem }]);
+        this.postMessageFn();
+      });
+  }
 }

package/dev/devEventBus/index.ts

@@ -0,0 +1,94 @@
+type EventHandler<T = any> = (payload: T) => void;
+
+export class EventBus {
+  // 使用 Map 存储事件及其对应的回调函数数组
+  private events: Map<string, EventHandler[]> = new Map();
+
+  /**
+   * 订阅事件
+   * @param eventName 事件名称
+   * @param handler 事件处理函数
+   * @returns 返回一个取消订阅的函数
+   */
+  on<T = any>(eventName: string, handler: EventHandler<T>): () => void {
+    if (!this.events.has(eventName)) {
+      this.events.set(eventName, []);
+    }
+    const handlers = this.events.get(eventName)!;
+    handlers.push(handler as EventHandler);
+
+    // 返回取消订阅的函数
+    return () => {
+      this.off(eventName, handler);
+    };
+  }
+
+  /**
+   * 发布事件
+   * @param eventName 事件名称
+   * @param payload 事件携带的数据
+   */
+  emit<T = any>(eventName: string, payload: T): void {
+    if (this.events.has(eventName)) {
+      const handlers = [...this.events.get(eventName)!];
+      handlers.forEach((handler) => handler(payload));
+    }
+  }
+
+  /**
+   * 取消订阅事件
+   * @param eventName 事件名称
+   * @param handler 要取消的事件处理函数
+   */
+  off<T = any>(eventName: string, handler: EventHandler<T>): void {
+    if (this.events.has(eventName)) {
+      const handlers = this.events.get(eventName)!;
+      this.events.set(
+        eventName,
+        handlers.filter((h) => h !== handler),
+      );
+    }
+  }
+
+  /**
+   * 只订阅一次事件，触发后自动取消订阅
+   * @param eventName 事件名称
+   * @param handler 事件处理函数
+   */
+  once<T = any>(eventName: string, handler: EventHandler<T>): void {
+    const wrapper = (payload: T) => {
+      handler(payload);
+      this.off(eventName, wrapper);
+    };
+    this.on(eventName, wrapper);
+  }
+
+  /**
+   * 清除指定事件的所有订阅者，如果未提供事件名称，则清除所有事件
+   * @param eventName 可选的事件名称
+   */
+  clear(eventName?: string): void {
+    if (eventName) {
+      this.events.delete(eventName);
+    } else {
+      this.events.clear();
+    }
+  }
+
+  /**
+   * 获取指定事件的订阅者数量，如果未提供事件名称，则返回所有事件的订阅者总数
+   * @param eventName 可选的事件名称
+   * @returns 订阅者数量
+   */
+  count(eventName?: string): number {
+    if (eventName) {
+      return this.events.has(eventName)
+        ? this.events.get(eventName)!.length
+        : 0;
+    }
+    return Array.from(this.events.values()).reduce(
+      (sum, handlers) => sum + handlers.length,
+      0,
+    );
+  }
+}