vite-uni-dev-tool 0.0.5 → 0.0.7

package/README.md

@@ -81,7 +81,7 @@ uni.__dev__console.log('hello vite-uni-dev-tool');
 
 ### 安全性声明
 
-插件不收收集任何信息，只开发人员调试使用
+插件不收收集任何信息，只供开发人员调试使用
 
 - 插件中使用到了 `fs`，用于栈信息获取源代码文件
 - 插件使用了 `uni.request` ，用于栈信息获取源代码文件
@@ -148,3 +148,37 @@ uni.__dev__console.log('hello vite-uni-dev-tool');
 - setting 页，支持重启，导出日志（h5,app）
 
 ![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/docs/public/setting.jpg)
+
+## 更新日志
+
+### 0.0.07
+
+- 监听uni.$on
+- 监听uni.%once
+- 监听uni.$emit
+- 监听uni.$of
+
+### 0.0.6
+
+- 修复 app 查看 source 重启
+
+### 0.0.5
+
+- 修复 路由支持跳转 subPackages
+- 增加栈位置查看（实验中功能）
+
+### 0.0.4
+
+- 修复初始启用状态
+
+### 0.0.3
+
+- 文档调整
+
+### 0.0.2
+
+- 文档调整
+
+### 0.0.1
+
+- 初始版本发布

package/dev/components/Connection/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="connection-content">
     <view class="connection-item">
-      <view class="connection-item-title">网络连接</view>
+      <DevToolTitle>网络连接</DevToolTitle>
       <view class="connection-item-content">
         <view class="connection-row">
           <view>IP地址：</view>
@@ -10,8 +10,8 @@
               netWorkStatus?.isConnected === undefined || netWorkStatus?.ip
                 ? 'info'
                 : netWorkStatus?.isConnected && netWorkStatus?.ip
-                ? 'success'
-                : 'error'
+                  ? 'success'
+                  : 'error'
             "
           >
             {{
@@ -28,16 +28,16 @@
               netWorkStatus?.isConnected === undefined
                 ? 'info'
                 : netWorkStatus?.isConnected
-                ? 'success'
-                : 'error'
+                  ? 'success'
+                  : 'error'
             "
           >
             {{
               netWorkStatus?.isConnected === undefined
                 ? '未获取'
                 : netWorkStatus?.isConnected
-                ? '已连接'
-                : '已断开'
+                  ? '已连接'
+                  : '已断开'
             }}
           </Tag>
         </view>
@@ -59,6 +59,7 @@
 </template>
 <script lang="ts" setup>
 import Tag from '../Tag/index.vue';
+import DevToolTitle from '../DevToolTitle/index.vue';
 defineProps<{
   netWorkStatus: {
     isConnected?: boolean;
@@ -73,23 +74,12 @@ defineProps<{
   overflow: auto;
   font-size: var(--dev-tool-base-font-size);
 }
-.connection-content .connection-item {
+.connection-item {
   padding: 16px 16px 0 16px;
   box-sizing: border-box;
 }
-.connection-content .connection-item .connection-item-title {
-  display: flex;
-  align-items: center;
-}
-.connection-content .connection-item .connection-item-title::before {
-  content: '';
-  margin-right: 8px;
-  width: 2px;
-  height: 18px;
-  border-radius: 2px;
-  background-color: var(--dev-tool-main-color);
-}
-.connection-content .connection-item .connection-item-content .connection-row {
+
+.connection-row {
   display: flex;
   align-items: center;
   justify-content: space-between;

package/dev/components/ConsoleList/Code.vue

@@ -21,7 +21,7 @@
         v-for="(code, index) in codes"
         :id="`dev-tool-code-item-${index}`"
         :key="index"
-        :class="`dev-tool-code-item ${index === activeRowCol.row ? 'dev-tool-code-item-active' : ''}`"
+        :class="`dev-tool-code-item ${index === activeRowCol.activeRow ? 'dev-tool-code-item-active' : ''}`"
       >
         <view class="dev-tool-code-item-index"> {{ index + 1 }}</view>
 
@@ -49,11 +49,12 @@ const emit = defineEmits<{ (e: 'close'): void }>();
 const modelValue = ref('');
 const scrollTop = ref(0);
 const fileName = computed(() => {
-  const name = props?.url?.split('/')?.pop() ?? '文件名称未知';
+  const name =
+    props?.url?.split('/')?.pop()?.replace(/\)|\(/, '') ?? '文件名称未知';
   return name;
 });
 
-const activeRowCol = ref({ row: -1, col: -1 });
+const activeRowCol = ref({ row: -1, col: -1, activeRow: -1 });
 
 let backupCodes: string[] = [];
 
@@ -101,10 +102,22 @@ function getCode(url: string, i: number = 0) {
           .toString()
           .split('\n');
 
-        codes.value = backupCodes;
+        const start =
+          activeRowCol.value.row - 20 > 0 ? activeRowCol.value.row - 20 : 0;
+
+        const end =
+          activeRowCol.value.row + 20 > backupCodes.length
+            ? backupCodes.length
+            : activeRowCol.value.row + 20;
+
+        // backupCodes.slice(start, end);
+
+        codes.value = backupCodes.slice(start, end);
+
+        activeRowCol.value.activeRow = activeRowCol.value.row - start;
 
         nextTick(() => {
-          scrollIntoView.value = `dev-tool-code-item-${activeRowCol.value.row}`;
+          scrollIntoView.value = `dev-tool-code-item-${activeRowCol.value.activeRow}`;
         });
       }
     },
@@ -139,10 +152,8 @@ onMounted(() => {
     url = path;
   }
 
-  activeRowCol.value = {
-    col,
-    row,
-  };
+  activeRowCol.value.col = col;
+  activeRowCol.value.row = row;
 
   if (props.mode === 'development') {
     // 开发环境查看源码
@@ -185,6 +196,8 @@ onMounted(() => {
   margin-bottom: 4px;
   border-bottom: 1px solid var(--dev-tool-border-color);
   box-sizing: border-box;
+  white-space: nowrap;
+  overflow: auto;
 }
 
 .dev-tool-code-list {

package/dev/components/DevTool/index.vue

@@ -28,6 +28,7 @@ import { onShow, onHide, onUnload, onLoad } from '@dcloudio/uni-app';
 import { reactive, ref, nextTick } from 'vue';
 import DevToolButton from '../DevToolButton/index.vue';
 import DevToolWindow from '../DevToolWindow/index.vue';
+import { eventBus } from '../../core';
 
 import {
   EVENT_DEV_BUTTON,
@@ -82,7 +83,7 @@ async function onShowDevToolWindow(show: boolean) {
 }
 
 function onSendMessage(param: { type: string; data: Record<string, any> }) {
-  uni.$emit(DEV_WINDOW_MESSAGE, param);
+  eventBus.emit(DEV_WINDOW_MESSAGE, param);
 }
 
 function onDevOptionSend(options: DevTool.DevToolOptions) {
@@ -110,22 +111,22 @@ onLoad(() => {
   isActive = true;
   devToolButtonVisible.value = uni.getStorageSync(EVENT_DEV_BUTTON) || false;
   devToolWindowVisible.value = show;
-  uni.$on(EVENT_DEV_BUTTON, onShowDevToolButton);
-  uni.$on(EVENT_DEV_WINDOW, onShowDevToolWindow);
-  uni.$on(DEV_OPTION_SEND, onDevOptionSend);
+  eventBus.on(EVENT_DEV_BUTTON, onShowDevToolButton);
+  eventBus.on(EVENT_DEV_WINDOW, onShowDevToolWindow);
+  eventBus.on(DEV_OPTION_SEND, onDevOptionSend);
 
   nextTick(() => {
-    uni.$emit(DEV_WINDOW_MESSAGE, { type: DEV_OPTION_GET, data: {} });
+    eventBus.emit(DEV_WINDOW_MESSAGE, { type: DEV_OPTION_GET, data: {} });
   });
 });
 
 onUnload(() => {
-  uni.$emit(DEV_WINDOW_MESSAGE, {
+  eventBus.emit(DEV_WINDOW_MESSAGE, {
     type: DEV_WINDOW_CLOSE,
     data: {},
   });
-  uni.$off(EVENT_DEV_BUTTON, onShowDevToolButton);
-  uni.$off(EVENT_DEV_WINDOW, onShowDevToolWindow);
+  eventBus.off(EVENT_DEV_BUTTON, onShowDevToolButton);
+  eventBus.off(EVENT_DEV_WINDOW, onShowDevToolWindow);
 });
 
 onShow(() => {

package/dev/components/DevToolTitle/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <view class="dev-tool-title" :style="style"> <slot /> </view>
+</template>
+<script lang="ts" setup>
+defineProps<{ style?: any }>();
+</script>
+<style scoped>
+.dev-tool-title {
+  display: flex;
+  align-items: center;
+  height: 32px;
+}
+.dev-tool-title::before {
+  content: '';
+  margin-right: 8px;
+  width: 2px;
+  height: 18px;
+  border-radius: 2px;
+  background-color: var(--dev-tool-main-color);
+}
+</style>

package/dev/components/DevToolWindow/index.vue

@@ -64,6 +64,12 @@
         @search="onSearchRoute"
         @routeRefresh="onRouteRefresh"
       />
+      <UniEvent
+        v-if="activeTab === 'UniEvent'"
+        :eventList="eventList"
+        :eventCount="eventCount"
+        @clear="onUniEventClear"
+      />
       <SettingList
         v-if="activeTab === 'Setting'"
         :devToolVisible="devToolVisible"
@@ -119,6 +125,7 @@ import DeviceInfo from '../DeviceInfo/index.vue';
 import WindowInfo from '../WindowInfo/index.vue';
 import WebSocket from '../WebSocket/index.vue';
 import UploadList from '../UploadList/index.vue';
+import UniEvent from '../UniEvent/index.vue';
 import {
   DEV_BUTTON_SHOW_OR_HIDE,
   DEV_CONSOLE_CLEAR,
@@ -141,9 +148,11 @@ import {
   DEV_WEBSOCKET_CLEAR,
   DEV_WINDOW_INFO,
   DEV_APP_MESSAGE,
+  DEV_UNI_EVENT_CLEAR,
 } from '../../const';
 import { debounce, hightLight } from '../../utils/index';
 import type { DevTool } from '../../type';
+import { eventBus } from '../../core';
 
 const items = [
   {
@@ -171,12 +180,16 @@ const items = [
     label: 'WebSocket',
     value: 'WebSocket',
   },
-
   {
     key: 'Route',
     label: 'Route',
     value: 'Route',
   },
+  {
+    key: 'UniEvent',
+    label: 'UniEvent',
+    value: 'UniEvent',
+  },
   {
     key: 'Storage',
     label: 'Storage',
@@ -222,6 +235,7 @@ const backup: {
   wsList: DevTool.WS[];
   uploadList: DevTool.UploadItem[];
   routeList: DevTool.Page[];
+  eventList: DevTool.EventItem[];
 } = {
   consoleList: [],
   networkList: [],
@@ -229,6 +243,7 @@ const backup: {
   wsList: [],
   uploadList: [],
   routeList: [],
+  eventList: [],
 };
 const consoleList = ref<DevTool.ConsoleItem[]>([]);
 const networkList = ref<DevTool.NetworkItem[]>([]);
@@ -241,6 +256,8 @@ const piniaList = ref<Record<string, any>>({});
 const systemInfo = ref<Record<string, any>>({});
 const deviceInfo = ref<Record<string, any>>({});
 const windowInfo = ref<Record<string, any>>({});
+const eventList = ref<DevTool.EventItem[]>([]);
+const eventCount = ref<DevTool.EventCount>();
 const netWorkStatus = ref<{
   isConnected?: boolean;
   networkType?: string;
@@ -394,6 +411,13 @@ const listenPostMessage = (data: DevTool.WindowData) => {
       });
     backup.routeList = [...data.routeList];
   }
+  if (data.eventList) {
+    eventList.value = [...data.eventList];
+  }
+
+  if (data.eventCount) {
+    eventCount.value = { ...data.eventCount };
+  }
 
   if (data.vuexList) {
     vuexList.value = data.vuexList;
@@ -439,11 +463,11 @@ onMounted(() => {
 
 onLoad(() => {
   isActive = true;
-  uni.$on(DEV_APP_MESSAGE, listenPostMessage);
+  eventBus.on(DEV_APP_MESSAGE, listenPostMessage);
 });
 onUnload(() => {
   isActive = false;
-  uni.$off(DEV_APP_MESSAGE, listenPostMessage);
+  eventBus.off(DEV_APP_MESSAGE, listenPostMessage);
 });
 
 onShow(() => {
@@ -704,6 +728,20 @@ function onSearchStorage(value: string) {
     });
 }
 
+function onUniEventClear() {
+  eventList.value = [];
+  eventCount.value = {
+    on: 0,
+    once: 0,
+    emit: 0,
+    off: 0,
+  };
+  basicSendMessage({
+    type: DEV_UNI_EVENT_CLEAR,
+    data: {},
+  });
+}
+
 function onGoTo(page: DevTool.Page) {
   basicSendMessage({
     type: DEV_PAGE_JUMP,

package/dev/components/SettingList/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="setting-content">
     <view class="setting-item">
-      <view class="setting-item-title">DevTool</view>
+      <DevToolTitle>DevTool</DevToolTitle>
       <view class="setting-item-content">
         <view class="setting-row">
           <view>显示调试按钮：</view>
@@ -25,8 +25,8 @@
         </view>
 
         <view class="setting-tips">
-          点击后将会销毁调试器，销毁后不再接收调试信息，需要通过
-          createDevTool() 重新创建
+          点击后将会销毁调试器，销毁后不再接收调试信息，需要通过 createDevTool()
+          重新创建
         </view>
         <DButton class="setting-button" @click="onDestructionDevTool">
           销毁调试器
@@ -52,7 +52,7 @@
       </view>
     </view>
     <view class="setting-item">
-      <view class="setting-item-title">Log</view>
+      <DevToolTitle>Log</DevToolTitle>
       <view class="setting-item-content">
         <view class="setting-row">
           <view>导出当前日志信息：</view>
@@ -121,6 +121,7 @@
 import { reactive } from 'vue';
 import Checkbox from '../Checkbox/index.vue';
 import DButton from '../Button/index.vue';
+import DevToolTitle from '../DevToolTitle/index.vue';
 const props = defineProps<{
   devToolVisible?: boolean;
   sizeFormat?: string;
@@ -204,30 +205,19 @@ function onClearCache() {
   overflow: auto;
   font-size: var(--dev-tool-base-font-size);
 }
-.setting-content .setting-item {
+.setting-item {
   padding: 16px 16px 0 16px;
   box-sizing: border-box;
 }
-.setting-content .setting-item .setting-item-title {
-  display: flex;
-  align-items: center;
-}
-.setting-content .setting-item .setting-item-title::before {
-  content: '';
-  margin-right: 8px;
-  width: 2px;
-  height: 18px;
-  border-radius: 2px;
-  background-color: var(--dev-tool-main-color);
-}
-.setting-content .setting-item .setting-item-content .setting-row {
+
+.setting-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 8px 0;
   min-height: 18px;
 }
-.setting-content .setting-tips {
+.setting-tips {
   color: #616161;
   font-size: var(--dev-tool-tips-font-size);
   margin-bottom: 8px;

package/dev/components/UniEvent/UniEventItem.vue

@@ -0,0 +1,55 @@
+<template>
+  <view class="uni-event-item">
+    <view class="uni-event-item-row"> {{ eventItem.eventName }} </view>
+    <view class="uni-event-item-row">
+      <Tag mode="info" v-if="eventItem.type == 'on'">
+        {{ eventItem.type }}
+      </Tag>
+      <Tag mode="warn" v-if="eventItem.type == 'once'">
+        {{ eventItem.type }}
+      </Tag>
+      <Tag mode="main" v-if="eventItem.type == 'emit'">
+        {{ eventItem.type }}
+      </Tag>
+      <Tag mode="error" v-if="eventItem.type == 'off'">
+        {{ eventItem.type }}
+      </Tag>
+      <view class="uni-event-item-right"> {{ eventItem.timer }}</view>
+    </view>
+
+    <view class="uni-event-item-right link">
+      {{ eventItem.stock }}
+    </view>
+  </view>
+</template>
+<script lang="ts" setup>
+import Tag from '../Tag/index.vue';
+import type { DevTool } from '../../type';
+
+defineProps<{ eventItem: DevTool.EventItem }>();
+</script>
+
+<style scoped>
+.uni-event-item {
+  padding: 16px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  box-sizing: border-box;
+}
+
+.uni-event-item-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 28px;
+  word-break: break-all;
+}
+
+.uni-event-item-right {
+  text-align: right;
+  word-break: break-all;
+}
+.link {
+  cursor: pointer;
+  text-decoration: underline;
+}
+</style>

package/dev/components/UniEvent/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <view class="uni-event-content">
+    <DevToolTitle style="padding: 0 16px">事件触发统计</DevToolTitle>
+    <view class="uni-event-statistics">
+      <view class="uni-event-statistics-item">
+        <view>on: </view>
+        <Tag mode="log" style="flex: 1; justify-content: center">
+          {{ eventCount?.on ?? 0 }}
+        </Tag>
+      </view>
+      <view class="uni-event-statistics-item">
+        <view>once: </view>
+        <Tag mode="warn" style="flex: 1; justify-content: center">
+          {{ eventCount?.once ?? 0 }}
+        </Tag>
+      </view>
+      <view class="uni-event-statistics-item">
+        <view>emit: </view>
+        <Tag mode="main" style="flex: 1; justify-content: center">
+          {{ eventCount?.emit ?? 0 }}
+        </Tag>
+      </view>
+      <view class="uni-event-statistics-item">
+        <view>off: </view>
+        <Tag mode="error" style="flex: 1; justify-content: center">
+          {{ eventCount?.off ?? 0 }}
+        </Tag>
+      </view>
+    </view>
+    <DevToolTitle style="padding: 0 16px"
+      >事件触发列表
+
+      <Tag mode="clear" style="margin-left: auto" @click="emit('clear')">
+        清空
+      </Tag>
+    </DevToolTitle>
+    <view class="uni-event-list">
+      <UniEventItem v-for="item in eventList" :eventItem="item" />
+    </view>
+  </view>
+</template>
+<script lang="ts" setup>
+import DevToolTitle from '../DevToolTitle/index.vue';
+import UniEventItem from './UniEventItem.vue';
+import Tag from '../Tag/index.vue';
+import type { DevTool } from '@/dev/type';
+
+defineProps<{
+  eventList?: DevTool.EventItem[];
+  eventCount?: DevTool.EventCount;
+}>();
+
+const emit = defineEmits<{
+  (e: 'clear'): void;
+}>();
+</script>
+<style scoped>
+.uni-event-content {
+  height: 100%;
+  overflow: auto;
+  font-size: var(--dev-tool-base-font-size);
+}
+
+.uni-event-statistics {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  padding: 0 16px;
+  height: 32px;
+  box-sizing: border-box;
+  gap: 12px;
+}
+.uni-event-statistics-item {
+  display: flex;
+  align-items: center;
+  width: 25%;
+}
+.uni-event-statistics-item view:first-child {
+  margin-right: 8px;
+}
+.uni-event-list {
+  height: calc(100% - 32px * 3);
+  overflow: auto;
+}
+</style>

package/dev/const.ts

@@ -90,6 +90,8 @@ export const DEV_ROUTE_REFRESH = 'dev-route-refresh';
 /** 获取 dev option */
 export const DEV_OPTION = 'dev-option';
 
-export const  DEV_OPTION_GET = 'dev-option-get';
+export const DEV_OPTION_GET = 'dev-option-get';
 
-export const  DEV_OPTION_SEND = 'dev-option-send';
+export const DEV_OPTION_SEND = 'dev-option-send';
+
+export const DEV_UNI_EVENT_CLEAR = 'dev-uni-event-clear';

package/dev/core.ts

@@ -6,6 +6,7 @@ import { DevConsole } from './devConsole';
 
 import type { DevTool } from './type';
 
+import { EventBus } from './devEventBus';
 /**
  * 备份原生方法
  *
@@ -26,12 +27,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);
 
@@ -106,4 +116,5 @@ export {
   getDevToolOptions,
   interceptVuexStorage,
   interceptPiniaStore,
+  eventBus,
 };