vite-uni-dev-tool 0.0.7 → 0.0.8

package/dev/components/VirtualList/index.vue

@@ -0,0 +1,112 @@
+<template>
+  <scroll-view
+    v-if="autoVirtual"
+    scroll-y
+    class="virtual-list"
+    :style="{
+      height: `${props.height}px`,
+    }"
+    @scroll="onVirtualScroll"
+  >
+    <view
+      class="virtual-list-holder"
+      :style="{
+        height: `${props.data.length * props.itemHeight}px`,
+      }"
+    >
+      <view
+        class="virtual-list-holder-inner"
+        :style="{
+          transform: `translateY(${state.translateY}px)`,
+        }"
+      >
+        <slot :list="state.visibleData"></slot>
+      </view>
+    </view>
+  </scroll-view>
+  <view
+    v-else
+    class="normal-list"
+    :style="{
+      height: `${props.height}px`,
+    }"
+  >
+    <slot :list="state.visibleData"></slot>
+  </view>
+</template>
+<script lang="ts" setup>
+import { computed, onMounted, reactive, watchEffect } from 'vue';
+const props = defineProps<{
+  /** 虚拟列表高度 */
+  height: number;
+  /** 每一项高度 */
+  itemHeight: number;
+  /** 渲染的数据列表 */
+  data: any[];
+  /** 虚拟列表自动开启行数 */
+  autoVirtualRow?: number;
+}>();
+
+const state = reactive<{ translateY: number; visibleData: any[] }>({
+  translateY: 0,
+  visibleData: [],
+});
+
+const autoVirtual = computed(() => {
+  if (typeof props.autoVirtualRow === 'number') {
+    if (props.data.length > props.autoVirtualRow) {
+      return true;
+    }
+    return false;
+  }
+  return true;
+});
+
+function updateVisibleData(scrollTop: number = 0) {
+  const flatDataValue = props.data ?? [];
+  if (autoVirtual.value) {
+    const visibleCount = props.height / props.itemHeight;
+    const scrollCount = Math.floor(scrollTop / props.itemHeight);
+    let start =
+      scrollCount < 0
+        ? 0
+        : scrollCount + visibleCount > flatDataValue.length
+          ? flatDataValue.length - visibleCount
+          : scrollCount;
+    if (start < 0) {
+      start = 0;
+    }
+    const end = start + visibleCount;
+    state.translateY = start * props.itemHeight;
+    state.visibleData = state.visibleData = props.data.slice(start, end);
+  } else {
+    state.visibleData = flatDataValue;
+  }
+}
+
+function onVirtualScroll(e: { detail: { scrollTop: number } }) {
+  updateVisibleData(e?.detail?.scrollTop ?? 0);
+}
+
+watchEffect(() => {
+  if (props.data) {
+    updateVisibleData();
+  }
+});
+
+onMounted(() => {
+  updateVisibleData();
+});
+</script>
+<style scoped>
+.normal-list,
+.virtual-list {
+  position: relative;
+  width: 100%;
+  overflow: auto;
+}
+
+.virtual-list-holder {
+  position: relative;
+}
+</style>

package/dev/components/WebSocket/WebSocketList.vue

@@ -82,7 +82,7 @@ function onClick(item: {
   position: fixed;
   width: 100vw;
   height: 100vh;
-  z-index: 10000;
+  z-index: 1000;
   top: 0;
   left: 0;
   padding: 0 16px;

package/dev/const.ts

@@ -10,88 +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';
 
+/**
+ * 获取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';
+
+/**
+ * 清空运行的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';
@@ -103,7 +102,6 @@ function interceptPiniaStore(context: any) {
 uni.__dev__console = console;
 
 export {
-  // DevToolComponent,
   backup,
   console,
   initDevTool,

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

@@ -29,6 +29,7 @@ import {
   DEV_OPTION_GET,
   DEV_OPTION_SEND,
   DEV_UNI_EVENT_CLEAR,
+  DEV_RUN_JS,
 } from '../const';
 import { DevStore } from '../devStore';
 import type { DevTool } from '../type';
@@ -39,6 +40,10 @@ import {
   saveTxtFileApp,
   saveTextFileH5,
   saveTextFileMicro,
+  getCurrentDate,
+  isNil,
+  transformValueToView,
+  parseValue,
 } from '../utils/index';
 import type { EventBus } from '../devEventBus';
 
@@ -315,6 +320,7 @@ export class DevEvent {
           exportWindow: boolean;
           exportDevice: boolean;
           exportSystem: boolean;
+          code: string;
           [key: string]: any;
         };
       }) => {
@@ -415,9 +421,15 @@ export class DevEvent {
         // 获取dev options 数据
         else if (data.type === DEV_OPTION_GET) {
           this.sendDevToolOption();
-        } else if (data.type === DEV_UNI_EVENT_CLEAR) {
+        }
+        // 清空事件
+        else if (data.type === DEV_UNI_EVENT_CLEAR) {
           this.uniEventClear();
         }
+        // 运行 js
+        else if (data.type === DEV_RUN_JS) {
+          this.devRunJS(data.data.code);
+        }
       },
     );
   }
@@ -692,4 +704,76 @@ export class DevEvent {
     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/devIntercept/index.ts

@@ -1,4 +1,3 @@
-import { DEV_APP_MESSAGE } from '../const';
 import { backup } from '../core';
 import { DevEvent } from '../devEvent';
 import type { DevTool } from '../type';
@@ -6,9 +5,9 @@ import {
   escapeHTML,
   getCurrentDate,
   getCurrentPagePath,
-  serializeCircular,
+  parseValue,
 } from '../utils/index';
-import { isObject } from '../utils/language';
+import { transformValueToView } from '../utils/language';
 
 /**
  * 拦截器
@@ -75,19 +74,11 @@ export class DevIntercept {
           position: path,
           time: getCurrentDate(),
           args: args.map((item: any) => {
-            // 将循环引用的对象转为字符串
-            if (isObject(item)) {
-              return serializeCircular(item);
-            } else if (
-              item === null ||
-              item === undefined ||
-              isNaN(item) ||
-              item === Infinity
-            ) {
-              return item + '';
-            } else {
-              return item;
-            }
+            // 处理 item 循环引用的问题
+            return {
+              type: transformValueToView(item),
+              value: parseValue(item),
+            };
           }),
           stack: line,
         },
@@ -144,7 +135,12 @@ export class DevIntercept {
       this.event.updateConsoleList([
         {
           type: 'error',
-          args: [info],
+          args: [
+            {
+              type: 'string',
+              value: info,
+            },
+          ],
           position: getCurrentPagePath(),
           time: getCurrentDate(),
           stack,
@@ -169,7 +165,12 @@ export class DevIntercept {
     this.event.updateConsoleList([
       {
         type: 'error',
-        args: [error.toString()],
+        args: [
+          {
+            type: 'string',
+            value: error.toString(),
+          },
+        ],
         position: getCurrentPagePath(),
         time: getCurrentDate(),
         stack,
@@ -204,7 +205,12 @@ export class DevIntercept {
     this.event.updateConsoleList([
       {
         type: 'warn',
-        args: [args],
+        args: [
+          {
+            type: 'string',
+            value: args,
+          },
+        ],
         position: path,
         time: getCurrentDate(),
         stack,
@@ -695,14 +701,14 @@ export class DevIntercept {
 
     uni[`$${type}`] = (eventName: string, callback: (result: any) => void) => {
       const stockList = new Error()?.stack?.split('\n');
-      const stock = stockList?.[2];
+      const stack = stockList?.[2];
       backup?.[key]?.(eventName, callback);
 
       this.event.updateUniEventList([
         {
           eventName,
           timer: getCurrentDate(),
-          stock,
+          stack,
           type,
         },
       ]);