vite-uni-dev-tool 0.0.1

package/dev/devEvent/index.ts

@@ -0,0 +1,665 @@
+import { backup } from '../core';
+import {
+  DEV_BUTTON_SHOW_OR_HIDE,
+  DEV_CONSOLE_CLEAR,
+  DEV_DESTROY,
+  DEV_EXPORT_LOG,
+  DEV_IS_DESTROY,
+  DEV_LOG_CACHE_CLEAR,
+  DEV_NETWORK_CLEAR,
+  DEV_PAGE_JUMP,
+  DEV_PINIA_CHANGE,
+  DEV_RESTART_APP,
+  DEV_RESTART_DEBUGGER,
+  DEV_ROUTE_REFRESH,
+  DEV_STORAGE_ADD,
+  DEV_STORAGE_CLEAR,
+  DEV_STORAGE_REFRESH,
+  DEV_STORAGE_REMOVE,
+  DEV_STORAGE_UPDATE,
+  DEV_UPLOAD_CLEAR,
+  DEV_VUEX_CHANGE,
+  DEV_WEBSOCKET_CLEAR,
+  DEV_WINDOW_OPEN,
+  DEV_APP_MESSAGE,
+  EVENT_DEV_BUTTON,
+  EVENT_DEV_WINDOW,
+  DEV_WINDOW_MESSAGE,
+  DEV_WINDOW_CLOSE,
+  DEV_OPTION_GET,
+  DEV_OPTION_SEND,
+} from '../const';
+import { DevStore } from '../devStore';
+import type { DevTool } from '../type';
+import {
+  formatStorageSize,
+  calculateObjectSize,
+  throttle,
+  saveTxtFileApp,
+  saveTextFileH5,
+  saveTextFileMicro,
+} from '../utils/index';
+
+/**
+ * 事件中心
+ *
+ * @export
+ * @class DevEvent
+ */
+export class DevEvent {
+  private store: DevStore;
+
+  constructor(store: DevStore) {
+    this.store = store;
+    this.acceptMessage();
+  }
+
+  /**
+   * 发送数据
+   *
+   * @param {DevTool.WindowData} data
+   * @memberof DevEvent
+   */
+  async postMessageFn() {
+    const data = await this.store.getDevData();
+    const size = calculateObjectSize(data);
+    const sizeFormat = formatStorageSize(size);
+    data.size = size;
+    data.sizeFormat = sizeFormat;
+
+    uni.$emit(DEV_APP_MESSAGE, data);
+
+    if (size > this.store.cacheMaxSize) {
+      this.store?.clearDevCache();
+    }
+  }
+
+  /**
+   * 发送数据 节流
+   *
+   * @memberof DevEvent
+   */
+  postMessage = throttle(this.postMessageFn, 1000);
+
+  /**
+   * 创建调试器
+   *
+   * @return {*}
+   * @memberof DevEvent
+   */
+  createDevTool() {
+    if (!this.store.getDevToolDestroy()) {
+      console.warn('[DevTool] 调试器已存在，不在重新创建');
+      return;
+    }
+    this.store.setDevToolDestroy(false);
+
+    console.log('[DevTool] 调试器创建成功');
+  }
+
+  /**
+   * 销毁调试器
+   *
+   * @return {*}
+   * @memberof DevEvent
+   */
+  destroyDevTool() {
+    if (this.store.getDevToolDestroy()) {
+      console.warn('[DevTool] 调试器已存在，不在重新创建');
+      return;
+    }
+    this.store.setRequestIndex(-1);
+
+    this.store.setUploadIndex(-1);
+
+    this.store.clearAll();
+
+    this.hideDevToolButton();
+
+    this.closeDevToolWindow();
+
+    this.resetInterceptAppConsole();
+
+    this.resetInterceptPromiseReject();
+
+    this.resetInterceptErrorApp();
+
+    this.resetInterceptWarnApp();
+
+    this.resetInterceptStorage();
+
+    this.resetInterceptUpload();
+
+    this.resetInterceptRequest();
+
+    this.resetInterceptNavigateTo();
+
+    this.resetInterceptSwitchTab();
+
+    this.store.setDevToolDestroy(true);
+
+    console.warn('[DevTool] 调试器已销毁');
+  }
+
+  /**
+   * 重启调试器
+   *
+   * @memberof DevEvent
+   */
+  restartDevTool() {
+    this.destroyDevTool();
+
+    this.createDevTool();
+
+    this.openDevToolWindow();
+  }
+
+  /**
+   * 打开调试器窗口
+   *
+   * @memberof DevEvent
+   */
+  openDevToolWindow() {
+    setTimeout(async () => {
+      this.postMessage();
+    }, 100);
+    uni.$emit(EVENT_DEV_WINDOW, true);
+  }
+
+  /**
+   * 关闭调试器窗口
+   *
+   * @memberof DevEvent
+   */
+  closeDevToolWindow() {
+    uni.$emit(EVENT_DEV_WINDOW, false);
+  }
+
+  /**
+   * 显示调试按钮
+   *
+   * @export
+   */
+  showDevToolButton() {
+    const isDestroy = uni.getStorageSync(DEV_IS_DESTROY) ?? false;
+    if (isDestroy) return;
+    uni.$emit(EVENT_DEV_BUTTON, true);
+    uni.setStorageSync(EVENT_DEV_BUTTON, true);
+    this.store.setDevToolVisible(true);
+  }
+
+  /**
+   * 隐藏调试按钮
+   *
+   * @return {*}
+   */
+  hideDevToolButton() {
+    const isDestroy = uni.getStorageSync(DEV_IS_DESTROY) ?? false;
+    if (isDestroy) return;
+    uni.$emit(EVENT_DEV_BUTTON, false);
+    uni.setStorageSync(EVENT_DEV_BUTTON, false);
+    this.store.setDevToolVisible(false);
+  }
+
+  exportLog(data: {
+    exportLog: boolean;
+    exportNetwork: boolean;
+    exportStorage: boolean;
+    exportWebSocket: boolean;
+    exportUpload: boolean;
+    exportWindow: boolean;
+    exportDevice: boolean;
+    exportSystem: boolean;
+  }) {
+    const exportData = this.store.getExportData(data);
+
+    // #ifdef APP-PLUS
+    saveTxtFileApp(JSON.stringify(exportData, null, 2), 'dev-tool-log');
+    // #endif
+
+    // #ifdef H5
+    saveTextFileH5(JSON.stringify(exportData, null, 2), 'dev-tool-log');
+    // #endif
+
+    // #ifdef MP-WEIXIN
+    saveTextFileMicro(JSON.stringify(exportData, null, 2), 'dev-tool-log');
+    // #endif
+  }
+
+  /**
+   * 切换页面
+   *
+   * @param {string} path
+   * @memberof DevEvent
+   */
+  switchTo(path: string) {
+    this.showDevToolButton();
+    uni.switchTab({
+      url: path,
+    });
+  }
+
+  /**
+   * 跳转页面
+   *
+   * @param {string} path
+   * @memberof DevEvent
+   */
+  navigateTo(path: string) {
+    this.showDevToolButton();
+    uni.navigateTo({
+      url: path,
+    });
+  }
+
+  /**
+   * 重启app
+   *
+   * @memberof DevEvent
+   */
+  restartApp() {
+    // #ifdef APP-PLUS
+    plus.runtime.restart();
+    // #endif
+
+    // #ifdef H5
+    window.location.reload();
+    // #endif
+
+    // #ifdef MP-WEIXIN
+    uni.reLaunch({
+      url: '/' + this.store.getCurrentPagePath(),
+    });
+    // #endif
+  }
+
+  refreshRouteList() {
+    this.store.getRouteList();
+    this.postMessage();
+  }
+
+  sendDevToolOption() {
+    const options = this.store.getDevToolOptions();
+
+    uni.$emit(DEV_OPTION_SEND, options);
+  }
+
+  /**
+   * 接受消息
+   *
+   * @memberof DevEvent
+   */
+  acceptMessage() {
+    uni.$on(
+      DEV_WINDOW_MESSAGE,
+      (data: {
+        type: string;
+        data: {
+          key: string;
+          _oldKey: string;
+          value: any;
+          exportLog: boolean;
+          exportNetwork: boolean;
+          exportStorage: boolean;
+          exportWebSocket: boolean;
+          exportUpload: boolean;
+          exportWindow: boolean;
+          exportDevice: boolean;
+          exportSystem: boolean;
+          [key: string]: any;
+        };
+      }) => {
+        // 清空console数据
+        if (data.type === DEV_CONSOLE_CLEAR) {
+          this.store.clearConsoleList();
+        }
+        // 清空network数据
+        else if (data.type === DEV_NETWORK_CLEAR) {
+          this.store.clearNetworkList();
+        }
+        // 清空websocket数据
+        else if (data.type === DEV_WEBSOCKET_CLEAR) {
+          this.store.clearWsList();
+        }
+        // 清空上传信息
+        else if (data.type === DEV_UPLOAD_CLEAR) {
+          this.store.clearUploadList();
+        }
+        // 清空storage数据
+        else if (data.type === DEV_STORAGE_CLEAR) {
+          this.store.clearStorageList();
+        }
+        // 刷新storage数据
+        else if (data.type === DEV_STORAGE_REFRESH) {
+          this.store.refreshStore();
+          this.postMessage();
+        }
+        // 移除storage数据
+        else if (data.type === DEV_STORAGE_REMOVE) {
+          this.store.removeStorage(data.data.key + '');
+          this.postMessage();
+        }
+        // 新增storage数据
+        else if (data.type === DEV_STORAGE_ADD) {
+          this.store.addStorage(data.data);
+          this.postMessage();
+        }
+        // 改变storage数据
+        else if (data.type === DEV_STORAGE_UPDATE) {
+          this.store.updateStore(data.data);
+          this.postMessage();
+        }
+        // 切换页面
+        else if (data.type === DEV_PAGE_JUMP) {
+          data.data?.isNav
+            ? this.switchTo(data.data.path ?? '')
+            : this.navigateTo(data.data.path ?? '');
+        }
+        // 隐藏调试按钮
+        else if (data.type === DEV_BUTTON_SHOW_OR_HIDE) {
+          data.data.show ? this.showDevToolButton() : this.hideDevToolButton();
+          this.postMessage();
+        }
+
+        // 重启调试器
+        else if (data.type === DEV_RESTART_DEBUGGER) {
+          this.restartDevTool();
+        }
+        // 重启app
+        else if (data.type === DEV_RESTART_APP) {
+          this.restartApp();
+        }
+        // 导出日志
+        else if (data.type === DEV_EXPORT_LOG) {
+          this.exportLog(data.data);
+        }
+        // 改变vuex数据
+        else if (data.type === DEV_VUEX_CHANGE) {
+          this.store.updateVuexStore(data.data);
+          this.postMessage();
+        }
+        // 改变pinia数据
+        else if (data.type === DEV_PINIA_CHANGE) {
+          this.store.updatePiniaStore(data.data);
+          this.postMessage();
+        }
+        // 清除缓存
+        else if (data.type === DEV_LOG_CACHE_CLEAR) {
+          this.store.clearDevCache();
+        }
+        // 销毁工具
+        else if (data.type === DEV_DESTROY) {
+          this.destroyDevTool();
+        }
+        // 显示工具
+        else if (data.type === DEV_WINDOW_OPEN) {
+          this.openDevToolWindow();
+        }
+        // 隐藏工具
+        else if (data.type === DEV_WINDOW_CLOSE) {
+          this.closeDevToolWindow();
+        }
+        // 刷新路由列表
+        else if (data.type === DEV_ROUTE_REFRESH) {
+          this.refreshRouteList();
+        }
+        // 获取dev options 数据
+        else if (data.type === DEV_OPTION_GET) {
+          this.sendDevToolOption();
+        }
+      },
+    );
+  }
+
+  /**
+   * 重置拦截 promise reject
+   *
+   * @memberof DevEvent
+   */
+  resetInterceptPromiseReject() {
+    Object.defineProperty(Promise, 'reject', {
+      value: function (reason: any) {
+        return backup.reject.call(Promise, reason);
+      },
+    });
+  }
+  /**
+   * 重置劫持 app 错误
+   *
+   * @memberof DevEvent
+   */
+  resetInterceptErrorApp() {}
+
+  /**
+   * 重置劫持 app 警告
+   *
+   * @memberof DevEvent
+   */
+  resetInterceptWarnApp() {}
+
+  /**
+   * 更新路由信息
+   *
+   * @param {string} path
+   * @memberof DevEvent
+   */
+  updateCurrentPagePath(path: string) {
+    this.store.updateCurrentPagePath(path);
+
+    this.postMessage();
+  }
+
+  /**
+   * 重置 nav 跳转
+   *
+   * @memberof DevEvent
+   */
+  resetInterceptSwitchTab() {
+    uni.removeInterceptor('switchTab');
+  }
+
+  /**
+   * 重置页面跳转
+   *
+   * @memberof DevEvent
+   */
+  resetInterceptNavigateTo() {
+    uni.removeInterceptor('navigateTo');
+  }
+
+  /**
+   * 清除console日志
+   *
+   * @memberof DevEvent
+   */
+  clearConsoleList() {
+    this.store.clearConsoleList();
+    this.postMessage();
+  }
+
+  /**
+   * 更新控制台日志
+   *
+   * @param {DevTool.ConsoleItem[]} addItems
+   * @param {number} [index]
+   * @memberof DevEvent
+   */
+  updateConsoleList(addItems: DevTool.ConsoleItem[], index?: number) {
+    this.store.updateConsoleList(addItems, index);
+
+    this.postMessage();
+  }
+
+  /**
+   * 重置console
+   *
+   * @memberof DevEvent
+   */
+  resetInterceptAppConsole() {
+    if ((uni as any).__log__) {
+      (uni as any).__log__ = backup.__log__;
+    }
+  }
+
+  /**
+   * 更新网络日志
+   *
+   * @param {DevTool.NetworkItem[]} addItems
+   * @param {number} [index]
+   * @memberof DevEvent
+   */
+  updateNetworkList(addItems: DevTool.NetworkItem[], index?: number) {
+    this.store.updateNetworkList(addItems, index);
+    this.postMessage();
+  }
+
+  /**
+   * 重置网络监听
+   *
+   * @memberof DevEvent
+   */
+  resetInterceptRequest() {
+    uni.removeInterceptor('request');
+  }
+
+  /**
+   * 更新websocket日志
+   *
+   * @param {DevTool.WS} item
+   * @memberof DevEvent
+   */
+  updateWsList(item: DevTool.WS) {
+    this.store.updateWsList(item);
+    this.postMessage();
+  }
+
+  /**
+   * 重置websocket
+   *
+   * @memberof DevEvent
+   */
+  resetWebSocket() {
+    uni.connectSocket = backup.connectSocket;
+  }
+
+  /**
+   * 更新状态存储
+   *
+   * @param {DevTool.StorageItem[]} addItems
+   * @memberof DevEvent
+   */
+  updateStoreList(addItems: DevTool.StorageItem[]) {
+    this.store.updateStoreList(addItems);
+    this.postMessage();
+  }
+
+  /**
+   * 移除状态
+   *
+   * @param {string} key
+   * @memberof DevEvent
+   */
+  removeStorage(key: string) {
+    this.store.removeStorage(key);
+    this.postMessage();
+  }
+
+  /**
+   * 清除缓存
+   *
+   * @memberof DevEvent
+   */
+  clearStorage() {
+    this.store.clearStorageList();
+  }
+
+  /**
+   * 重置 storage 函数
+   *
+   * @memberof DevEvent
+   */
+  resetInterceptStorage() {
+    uni.setStorage = backup.setStorage;
+    uni.setStorageSync = backup.setStorageSync;
+
+    uni.clearStorage = backup.clearStorage;
+    uni.clearStorageSync = backup.clearStorageSync;
+
+    uni.removeStorage = backup.removeStorage;
+    uni.removeStorageSync = backup.removeStorageSync;
+  }
+
+  /**
+   * 更新上传日志
+   *
+   * @param {DevTool.UploadItem[]} addItems
+   * @param {number} [index]
+   * @memberof DevEvent
+   */
+  updateUploadList(addItems: DevTool.UploadItem[], index?: number) {
+    this.store.updateUploadList(addItems, index);
+    this.postMessage();
+  }
+
+  /**
+   * 移除上传任务
+   *
+   * @param {(number | string)} index
+   * @memberof DevEvent
+   */
+  removeUploadTask(index: number | string) {
+    this.store.removeUploadTask(index);
+  }
+
+  /**
+   * 新增上传任务
+   *
+   * @param {(number | string)} index
+   * @param {UniApp.UploadTask} task
+   * @memberof DevEvent
+   */
+  addUploadTask(index: number | string, task: UniApp.UploadTask) {
+    this.store.addUploadTask(index, task);
+  }
+
+  /**
+   * 重置 uni.uploadFile
+   *
+   * @memberof DevEvent
+   */
+  resetInterceptUpload() {
+    uni.uploadFile = backup.uploadFile;
+  }
+
+  setRequestIndex(index: number) {
+    return this.store.setRequestIndex(index);
+  }
+
+  getRequestIndex() {
+    return this.store.getRequestIndex();
+  }
+
+  setUploadIndex(index: number) {
+    return this.store.setUploadIndex(index);
+  }
+
+  getUploadIndex() {
+    return this.store.getUploadIndex();
+  }
+
+  setVuexList(list: Record<string, any>) {
+    this.store.setVuexList(list);
+  }
+
+  setPiniaList(list: Record<string, any>) {
+    this.store.setPiniaList(list);
+  }
+
+  setPiniaStore(piniaStore: any) {
+    this.store.setPiniaStore(piniaStore);
+  }
+
+  getDevToolDestroy() {
+    return this.store.getDevToolDestroy();
+  }
+}