vite-uni-dev-tool 0.0.48 → 1.0.0

package/dist/v3/DevToolWindow/hooks/useDevToolHandlers.ts

@@ -0,0 +1,549 @@
+import { debounce } from '../../../utils/index';
+import { setDevToolInfo } from '../../../modules/devToolInfo';
+import type { DevTool } from '../../../type';
+import { CMD_TYPE, MSG_TYPE, DEV_CORE_MESSAGE } from '../../../const';
+import { hightLight } from '../../../utils/index';
+
+export function useDevToolHandlers(props: any, emits: any, state: any) {
+  const {
+    activeTab,
+    currentConsoleType,
+    currentNetworkType,
+    currentWebSocketType,
+    currentTransferType,
+    currentTransferCategory,
+    tabScrollLeft,
+    cacheInterceptConfig,
+    useTransition,
+    baseFontSize,
+    tagFontSize,
+    tipsFontSize,
+    fontFamily,
+    fontWeight,
+    cacheNetworkLog,
+    cacheConsoleLog,
+    interceptNetworkList,
+    consoleList,
+    networkList,
+    transferList,
+    wsList,
+    storageList,
+    elEventList,
+    uniEventList,
+    eventCount,
+    screenList,
+    scanCodeList,
+    nfcList,
+    routeList,
+    backup,
+    searchConsole,
+    theme,
+    currentNetworkSort,
+  } = state;
+
+  /** 发送消息给核心模块 */
+  function basicSendMessage(message: {
+    type: string;
+    data: Record<string, any>;
+  }) {
+    emits('sendMessage', message);
+  }
+
+  function setWindowInfo() {
+    setDevToolInfo({
+      activeTab: activeTab.value,
+      currentConsoleType: currentConsoleType.value,
+      currentNetworkType: currentNetworkType.value,
+      currentWebSocketType: currentWebSocketType.value,
+      theme: theme.value,
+      tabScrollLeft: tabScrollLeft.value,
+      cacheInterceptConfig: cacheInterceptConfig.value,
+      cacheNetworkLog: cacheNetworkLog.value,
+      cacheConsoleLog: cacheConsoleLog.value,
+      useTransition: useTransition.value,
+      baseFontSize: baseFontSize.value,
+      tagFontSize: tagFontSize.value,
+      tipsFontSize: tipsFontSize.value,
+      fontFamily: fontFamily.value,
+      fontWeight: fontWeight.value,
+      interceptNetworkList: interceptNetworkList.value,
+      performanceShowFps: state.performanceShowFps.value,
+      performanceShowCpu: state.performanceShowCpu.value,
+    });
+  }
+
+  const debounceSetWindowInfo = debounce(setWindowInfo, 200);
+
+  function onCloseWindow() {
+    emits('close');
+    setWindowInfo();
+  }
+
+  function onChangeTabs(index: number) {
+    activeTab.value = index;
+    setWindowInfo();
+  }
+
+  function onScrollTabs(e: any) {
+    tabScrollLeft.value = e.detail.scrollLeft;
+    debounceSetWindowInfo();
+  }
+
+  const debounceScrollTabs = debounce(onScrollTabs, 200);
+
+  function onConsoleChoose(type: string) {
+    if (type === 'clear') {
+      consoleList.value = [];
+      backup.consoleList = [];
+      basicSendMessage({ type: CMD_TYPE.CONSOLE_CLEAR, data: {} });
+    } else if (type === 'all') {
+      currentConsoleType.value = type;
+      consoleList.value = backup.consoleList;
+    } else {
+      currentConsoleType.value = type;
+      consoleList.value = backup.consoleList.filter(
+        (item: any) => item.type === type,
+      );
+    }
+    setWindowInfo();
+  }
+
+  function onRunJS(code: string) {
+    basicSendMessage({ type: CMD_TYPE.RUN_JS, data: { code } });
+  }
+
+  function onSearchConsole(value: string) {
+    consoleList.value = backup.consoleList
+      .filter((item: any) => {
+        return (
+          item.args.some(
+            (arg: any) => arg.type === 'string' && arg.value.includes(value),
+          ) ||
+          item.position.includes(value) ||
+          item?.stack?.includes(value)
+        );
+      })
+      ?.map((item: any) => {
+        return {
+          ...item,
+          position: hightLight(item.position, searchConsole.value),
+          stack: hightLight(item.stack, searchConsole.value),
+          args: item.args.map((arg: any) => {
+            if (arg.type === 'string') {
+              return { type: 'string', value: hightLight(arg.value, value) };
+            }
+            return arg;
+          }),
+        };
+      });
+  }
+
+  function onNetworkChoose(type: string) {
+    if (type === 'clear') {
+      networkList.value = [];
+      backup.networkList = [];
+      basicSendMessage({ type: CMD_TYPE.NETWORK_CLEAR, data: {} });
+    } else if (type === 'all') {
+      currentNetworkType.value = type;
+      networkList.value = backup.networkList;
+    } else if (type === 'error') {
+      currentNetworkType.value = type;
+      networkList.value = backup.networkList.filter((item: any) => {
+        return item.status === 'error' || /[4,5]\d{2,}/.test(item.status + '');
+      });
+    } else {
+      currentNetworkType.value = type;
+      networkList.value = backup.networkList.filter(
+        (item: any) => item.method === type,
+      );
+    }
+    setWindowInfo();
+  }
+
+  function onSearchNetwork(value: string) {
+    networkList.value = backup.networkList
+      .filter((item: any) => {
+        if (currentNetworkType.value === 'all') return item;
+        return item.method === currentNetworkType.value;
+      })
+      ?.filter((item: any) => item?.url?.includes(value))
+      ?.map((item: any) => {
+        return { ...item, url: hightLight(item.url, value) };
+      });
+  }
+
+  function onSortNetwork(sort: -1 | 1) {
+    currentNetworkSort.value = sort;
+    const list = networkList.value.sort((a: any, b: any) => {
+      return sort === 1 ? b.startTime - a.startTime : a.startTime - b.startTime;
+    });
+    networkList.value = [...list];
+  }
+
+  function filterTransferList() {
+    transferList.value = backup.transferList.filter((item: any) => {
+      const typeMatch =
+        currentTransferCategory.value === 'all' ||
+        item.type === currentTransferCategory.value;
+      let statusMatch =
+        currentTransferType.value === 'all' ||
+        item.status === currentTransferType.value;
+
+      if (currentTransferType.value === 'pending') {
+        statusMatch = ['pending', 'uploading', 'downloading'].includes(
+          item.status,
+        );
+      }
+
+      return typeMatch && statusMatch;
+    });
+  }
+
+  function onTransferChoose(type: string) {
+    if (type === 'clear') {
+      transferList.value = [];
+      backup.transferList = [];
+      basicSendMessage({ type: CMD_TYPE.TRANSFER_CLEAR, data: {} });
+    } else {
+      currentTransferType.value = type;
+      filterTransferList();
+    }
+  }
+
+  function onTransferCategoryChoose(category: string) {
+    currentTransferCategory.value = category;
+    filterTransferList();
+  }
+
+  function onSearchTransfer(value: string) {
+    filterTransferList(); // Reset list based on filters first
+    transferList.value = transferList.value
+      .filter((item: any) => item.url?.includes(value))
+      ?.map((item: any) => {
+        return { ...item, url: hightLight(item.url, value) };
+      });
+  }
+
+  function onWebSocketChoose(type: string) {
+    if (type === 'clear') {
+      wsList.value = [];
+      backup.wsList = [];
+      basicSendMessage({ type: CMD_TYPE.WS_CLEAR, data: {} });
+    } else if (type === 'all') {
+      currentWebSocketType.value = type;
+      wsList.value = backup.wsList;
+    } else {
+      currentWebSocketType.value = type;
+      wsList.value = backup.wsList.filter(
+        (item: any) => item.readyState === type,
+      );
+    }
+    setWindowInfo();
+  }
+
+  function onSearchWs(value: string) {
+    wsList.value = backup.wsList
+      .filter((item: any) => {
+        if (currentWebSocketType.value === 'all') return item;
+        return item.readyState === currentWebSocketType.value;
+      })
+      .filter((item: any) => item.url.includes(value))
+      ?.map((item: any) => {
+        return { ...item, url: hightLight(item.url, value) };
+      });
+  }
+
+  function onStorageChoose(type: string) {
+    if (type === 'clear') {
+      backup.storageList = [];
+      storageList.value = [];
+      basicSendMessage({ type: CMD_TYPE.STORAGE_CLEAR, data: {} });
+    } else if (type === 'refresh') {
+      basicSendMessage({ type: CMD_TYPE.STORAGE_REFRESH, data: {} });
+    } else if (type === 'add') {
+      const key = '_new_' + Date.now();
+      const newItem = { key, _oldKey: key, value: JSON.stringify('') };
+      backup.storageList.unshift(newItem);
+      storageList.value.unshift(newItem);
+      basicSendMessage({
+        type: CMD_TYPE.STORAGE_ADD,
+        data: { key, value: newItem.value },
+      });
+    }
+  }
+
+  function onStorageRemove(key: string) {
+    backup.storageList = backup.storageList.filter(
+      (item: any) => item.key !== key,
+    );
+    storageList.value = backup.storageList;
+    basicSendMessage({ type: CMD_TYPE.STORAGE_REMOVE, data: { key } });
+  }
+
+  function onChangeStorage(data: DevTool.StorageItem) {
+    basicSendMessage({ type: CMD_TYPE.STORAGE_UPDATE, data });
+  }
+
+  function onSearchStorage(value: string) {
+    storageList.value = backup.storageList
+      .filter((item: any) => item._oldKey.includes(value))
+      ?.map((item: any) => {
+        return { ...item, _oldKey: hightLight(item._oldKey, value) };
+      });
+  }
+
+  function onElEventClear() {
+    elEventList.value = [];
+    basicSendMessage({ type: CMD_TYPE.EL_EVENT_CLEAR, data: {} });
+  }
+
+  function onUniEventClear() {
+    uniEventList.value = [];
+    eventCount.value = { on: 0, once: 0, emit: 0, off: 0 };
+    basicSendMessage({ type: CMD_TYPE.UNI_EVENT_CLEAR, data: {} });
+  }
+
+  function onCaptureScreenClear() {
+    screenList.value = [];
+    basicSendMessage({ type: CMD_TYPE.SCREEN_CLEAR, data: {} });
+  }
+
+  function onScanCodeListClear() {
+    scanCodeList.value = [];
+    basicSendMessage({ type: CMD_TYPE.SCAN_CODE_CLEAR, data: {} });
+  }
+
+  function onNfcClear() {
+    nfcList.value = [];
+    basicSendMessage({ type: CMD_TYPE.NFC_CLEAR, data: {} });
+  }
+
+  function onRouteRefresh() {
+    basicSendMessage({ type: CMD_TYPE.ROUTE_REFRESH, data: {} });
+  }
+
+  function onSearchRoute(value: string) {
+    routeList.value = backup.routeList
+      ?.filter(
+        (item: any) => item.path.includes(value) || item.name?.includes(value),
+      )
+      ?.map((item: any) => {
+        return {
+          ...item,
+          name: hightLight(item.name, value),
+          path: hightLight(item.path, value),
+        };
+      });
+  }
+
+  function onShowDevButton(show: boolean) {
+    basicSendMessage({ type: CMD_TYPE.BUTTON_TOGGLE, data: { show } });
+  }
+
+  function onRestartDevTool() {
+    basicSendMessage({ type: CMD_TYPE.RESTART_DEBUGGER, data: {} });
+  }
+
+  function onRestartApp() {
+    basicSendMessage({ type: CMD_TYPE.RESTART_APP, data: {} });
+  }
+
+  function onExportLog(exports: any) {
+    basicSendMessage({ type: CMD_TYPE.EXPORT_LOG, data: { ...exports } });
+  }
+
+  function onScreenshot() {
+    basicSendMessage({ type: 'dev-tool-hide-screenshot', data: {} });
+  }
+
+  function onClearCache() {
+    basicSendMessage({ type: CMD_TYPE.CACHE_CLEAR, data: {} });
+  }
+
+  function onDestroyDevTool() {
+    basicSendMessage({ type: CMD_TYPE.DESTROY, data: {} });
+  }
+
+  function onChangeTheme(t: string) {
+    theme.value = t;
+    setDevToolInfo({ theme: t });
+    emits('changeTheme', t);
+  }
+
+  function onChangeCacheInterceptConfig(value: boolean) {
+    setDevToolInfo({
+      cacheInterceptConfig: value,
+      interceptNetworkList: value ? interceptNetworkList.value : [],
+    });
+    basicSendMessage({
+      type: CMD_TYPE.SET_CACHE_INTERCEPT,
+      data: { cacheInterceptConfig: value },
+    });
+  }
+
+  function onChangeCacheNetworkLog(value: boolean) {
+    setDevToolInfo({
+      cacheNetworkLog: value,
+    });
+    cacheNetworkLog.value = value;
+    basicSendMessage({
+      type: CMD_TYPE.SET_CACHE_NETWORK_LOG,
+      data: { cacheNetworkLog: value },
+    });
+  }
+
+  function onChangeCacheConsoleLog(value: boolean) {
+    setDevToolInfo({
+      cacheConsoleLog: value,
+    });
+    cacheConsoleLog.value = value;
+    basicSendMessage({
+      type: CMD_TYPE.SET_CACHE_CONSOLE_LOG,
+      data: { cacheConsoleLog: value },
+    });
+  }
+
+  function onChangeUseTransition(value: boolean) {
+    useTransition.value = value;
+    setDevToolInfo({
+      useTransition: value,
+    });
+    basicSendMessage({
+      type: CMD_TYPE.SET_TRANSITION,
+      data: { useTransition: value },
+    });
+  }
+
+  function onChangeFontSize(data: {
+    baseFontSize: number;
+    tagFontSize: number;
+    tipsFontSize: number;
+    fontFamily: string;
+    fontWeight: string;
+  }) {
+    baseFontSize.value = data.baseFontSize;
+    tagFontSize.value = data.tagFontSize;
+    tipsFontSize.value = data.tipsFontSize;
+    fontFamily.value = data.fontFamily;
+    fontWeight.value = data.fontWeight;
+    setDevToolInfo(data);
+    basicSendMessage({
+      type: CMD_TYPE.SET_FONT,
+      data,
+    });
+  }
+
+  function onChangePerformance(show: boolean) {
+    state.performanceVisible.value = show;
+    setDevToolInfo({
+      performanceVisible: show,
+    });
+    uni.$emit(DEV_CORE_MESSAGE, { type: MSG_TYPE.PERF_VISIBLE, data: show });
+  }
+
+  function onChangePerformanceShowFps(show: boolean) {
+    state.performanceShowFps.value = show;
+    setDevToolInfo({
+      performanceShowFps: show,
+    });
+    uni.$emit('DEV_CHANGE_PERFORMANCE_SHOW_FPS', show);
+  }
+
+  function onChangePerformanceShowCpu(show: boolean) {
+    state.performanceShowCpu.value = show;
+    setDevToolInfo({
+      performanceShowCpu: show,
+    });
+    uni.$emit('DEV_CHANGE_PERFORMANCE_SHOW_CPU', show);
+  }
+
+  function onChangeVuex(value: any) {
+    basicSendMessage({ type: CMD_TYPE.VUEX_CHANGE, data: value });
+  }
+
+  function onChangePinia(value: any) {
+    basicSendMessage({ type: CMD_TYPE.PINIA_CHANGE, data: value });
+  }
+
+  function onClearWebSocketMessage(ws: DevTool.WS) {
+    basicSendMessage({ type: CMD_TYPE.WS_CLEAR_MESSAGE, data: ws });
+  }
+
+  function onSendWebSocket(data: { url: string; message: any }) {
+    basicSendMessage({ type: CMD_TYPE.WS_SEND, data });
+  }
+
+  function onConfirmInterceptConfig(ni: DevTool.NetworkItem) {
+    const index = interceptNetworkList.value.findIndex((item: any) => {
+      const key = `${item.method?.toUpperCase()}|${item.url?.split('?')[0]}`;
+      const niKey = `${ni.method?.toUpperCase()}|${ni.url?.split('?')[0]}`;
+      return key === niKey;
+    });
+    const list = [...interceptNetworkList.value];
+    if (index > -1) {
+      list[index] = ni;
+    } else {
+      list.unshift(ni);
+    }
+    setDevToolInfo({
+      cacheInterceptConfig: cacheInterceptConfig.value,
+      interceptNetworkList: cacheInterceptConfig.value ? list : [],
+    });
+    basicSendMessage({ type: CMD_TYPE.INTERCEPT_UPDATE, data: [ni] });
+  }
+
+  function onRemoveInterceptConfig(ni: DevTool.NetworkItem) {
+    basicSendMessage({ type: CMD_TYPE.INTERCEPT_UPDATE, data: ni });
+  }
+
+  return {
+    onCloseWindow,
+    onChangeTabs,
+    debounceScrollTabs,
+    onConsoleChoose,
+    onRunJS,
+    onSearchConsole,
+    onNetworkChoose,
+    onSearchNetwork,
+    onSortNetwork,
+    onTransferChoose,
+    onTransferCategoryChoose,
+    onSearchTransfer,
+    onWebSocketChoose,
+    onSearchWs,
+    onStorageChoose,
+    onStorageRemove,
+    onChangeStorage,
+    onSearchStorage,
+    onElEventClear,
+    onUniEventClear,
+    onCaptureScreenClear,
+    onScanCodeListClear,
+    onNfcClear,
+    onRouteRefresh,
+    onSearchRoute,
+    onShowDevButton,
+    onRestartDevTool,
+    onRestartApp,
+    onExportLog,
+    onScreenshot,
+    onClearCache,
+    onDestroyDevTool,
+    onChangeTheme,
+    onChangeCacheInterceptConfig,
+    onChangeCacheNetworkLog,
+    onChangeCacheConsoleLog,
+    onChangeUseTransition,
+    onChangeFontSize,
+    onChangeVuex,
+    onChangePinia,
+    onClearWebSocketMessage,
+    onSendWebSocket,
+    onConfirmInterceptConfig,
+    onRemoveInterceptConfig,
+    onChangePerformance,
+    onChangePerformanceShowFps,
+    onChangePerformanceShowCpu,
+    basicSendMessage,
+  };
+}