vite-uni-dev-tool 0.0.4 → 0.0.5

package/README.md

@@ -1,6 +1,6 @@
 # vite-uni-dev-tool
 
-用于 vue3 + ts + uni-app 的开发调试插件
+用于 vue3 + ts + hooks + uni-app 的开发调试插件
 
 ## 安装
 
@@ -28,7 +28,7 @@ import * as path from 'path';
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    // 一定要在 uni() 之前调用 否则微信小程序将无法解组件
+    // 一定要在 uni() 之前调用 否则微信小程序将无法正常编译组件
     uniDevTool({
       pages,
     }),
@@ -46,6 +46,27 @@ export default defineConfig({
 });
 ```
 
+### 为什么不用 subPackages?
+
+- 从当前页跳转到subPackages页面时，会触发 uni-app 页面生命周期，有时是不希望如此的，比如在开发过程中，希望可以直接在当前页面进行调试。
+
+### 如何将 console 日志输出到控制台
+
+- 0.0.5版本之后为了在生产环境中移除插件，开发环境中插件将会自动导入 `console`，无需手动导入
+
+- 0.0.5版本之后不推荐使用 `uni.__dev__console` , 在未来版本中可能会进行移除
+
+```ts
+// 方法 1
+import { console } from 'vite-uni-dev-tool/dev/core';
+
+console.log('hello vite-uni-dev-tool');
+
+// 方法 2
+
+uni.__dev__console.log('hello vite-uni-dev-tool');
+```
+
 ### 注意事项
 
 ### 兼容性说明
@@ -58,6 +79,13 @@ export default defineConfig({
 | ---------- | ---- | ------ |
 | Y          | Y    | 未测试 |
 
+### 安全性声明
+
+插件不收收集任何信息，只开发人员调试使用
+
+- 插件中使用到了 `fs`，用于栈信息获取源代码文件
+- 插件使用了 `uni.request` ，用于栈信息获取源代码文件
+
 ### 预览
 
 ![all.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/docs/public/all.png)

package/dev/components/CloseButton/index.vue

@@ -21,5 +21,6 @@ function onClick() {
   border-radius: 50%;
   border: 1px solid #000;
   box-sizing: border-box;
+  color: #000;
 }
 </style>

package/dev/components/ConsoleList/Code.vue

@@ -0,0 +1,214 @@
+<template>
+  <view class="dev-tool-code">
+    <view class="dev-tool-code-control">
+      <FilterInput
+        v-model="modelValue"
+        style="width: 100%"
+        @search="onSearch"
+      />
+      <CloseButton style="margin-left: auto" @click="onClose" />
+    </view>
+    <view class="dev-tool-code-title">{{ fileName }}</view>
+    <scroll-view
+      scroll-y="true"
+      scroll-x="true"
+      class="dev-tool-code-list"
+      scroll-with-animation="true"
+      :scroll-top="scrollTop"
+      :scroll-into-view="scrollIntoView"
+    >
+      <view
+        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' : ''}`"
+      >
+        <view class="dev-tool-code-item-index"> {{ index + 1 }}</view>
+
+        <view class="dev-tool-code-item-content" v-html="code"></view>
+      </view>
+      <Empty v-if="!codes || codes.length === 0" />
+    </scroll-view>
+  </view>
+</template>
+<script lang="ts" setup>
+import { computed, ref, nextTick, onMounted } from 'vue';
+import FilterInput from '../FilterInput/index.vue';
+import CloseButton from '../CloseButton/index.vue';
+import Empty from '../Empty/index.vue';
+import { escapeHTML, hightLight, isAndroid, parseStock } from '../../utils';
+
+const props = defineProps<{
+  url: string;
+  sourceFileServers?: string[];
+  mode?: string;
+}>();
+
+const emit = defineEmits<{ (e: 'close'): void }>();
+
+const modelValue = ref('');
+const scrollTop = ref(0);
+const fileName = computed(() => {
+  const name = props?.url?.split('/')?.pop() ?? '文件名称未知';
+  return name;
+});
+
+const activeRowCol = ref({ row: -1, col: -1 });
+
+let backupCodes: string[] = [];
+
+const codes = ref<string[]>([]);
+
+const scrollIntoView = ref('');
+
+function onClose() {
+  emit('close');
+}
+
+function onSearch(value: string) {
+  codes.value = backupCodes.map((code) => {
+    return hightLight(code, value);
+  });
+}
+
+let index = 0;
+function getCode(url: string, i: number = 0) {
+  let allUrl = url;
+  // 平台判断
+  if (isAndroid()) {
+    if (!props.sourceFileServers?.[i]) {
+      index = 0;
+      return;
+    }
+
+    allUrl = props.sourceFileServers?.[i] + '/src/' + url;
+  }
+
+  uni.showLoading({ mask: true });
+  uni.request({
+    url: allUrl,
+    success: (res) => {
+      if (typeof res.data === 'string') {
+        // 为什么要注释掉？
+        // 在 Android 识别到标签后会进行重启，导致代码无法显示
+        // TODO: 还有其它原因导致重启
+        const str = res.data
+          ?.replace(/<jscript/, '// [DevTool] 注释 <javascript')
+          ?.replace(/<\/script>/, '// [DevTool] 注释 </javascript>')
+          ?.replace(/<style/, '// [DevTool] 注释 <style')
+          ?.replace(/<\/style>/, '// [DevTool] 注释 </style>');
+        backupCodes = escapeHTML(str ?? '')
+          .toString()
+          .split('\n');
+
+        codes.value = backupCodes;
+
+        nextTick(() => {
+          scrollIntoView.value = `dev-tool-code-item-${activeRowCol.value.row}`;
+        });
+      }
+    },
+    fail: (err) => {
+      index++;
+      getCode(url, index);
+      uni.showToast({ icon: 'none', title: '正在重新尝试中...' });
+    },
+    complete: () => {
+      uni.hideLoading();
+    },
+  });
+}
+
+/** 开发环境获取源代码 */
+function getSourceCodeDev(url: string) {
+  if (!url) {
+    uni.showToast({ icon: 'none', title: '[DevTool] url 处理异常' });
+    uni?.__dev__console?.log('[DevTool] url 处理异常');
+    return;
+  }
+
+  getCode(url, index);
+}
+
+onMounted(() => {
+  let url = props?.url;
+
+  const { path, col, row } = parseStock(props?.url ?? '');
+
+  if (path) {
+    url = path;
+  }
+
+  activeRowCol.value = {
+    col,
+    row,
+  };
+
+  if (props.mode === 'development') {
+    // 开发环境查看源码
+    getSourceCodeDev(url);
+  } else if (props.mode === 'production') {
+    // TODO 生产环境查看源码
+  }
+});
+</script>
+<style scoped>
+.dev-tool-code {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  z-index: 10000;
+  top: 0;
+  left: 0;
+  padding: 0 16px;
+  /* #ifdef H5 */
+  padding: 50px 16px;
+  /* #endif */
+
+  background-color: rgba(255, 255, 255, 0.95);
+  box-sizing: border-box;
+  color: #000;
+}
+
+.dev-tool-code-control {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 32px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  box-sizing: border-box;
+}
+
+.dev-tool-code-title {
+  height: 32px;
+  line-height: 32px;
+  margin-bottom: 4px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  box-sizing: border-box;
+}
+
+.dev-tool-code-list {
+  height: calc(100% - 68px);
+}
+
+.dev-tool-code-item {
+  display: flex;
+  align-items: center;
+  height: 28px;
+}
+.dev-tool-code-item-active {
+  color: #fff;
+  background-color: var(--dev-tool-main-color);
+}
+
+.dev-tool-code-item-index {
+  flex-shrink: 0;
+  width: 20px;
+  margin-right: 8px;
+  text-align: right;
+}
+
+.dev-tool-code-item-content {
+  white-space: pre;
+}
+</style>

package/dev/components/ConsoleList/ConsoleItem.vue

@@ -18,21 +18,85 @@
           <view class="console-time">{{ consoleItem.time }}</view>
           <view class="console-other" v-html="consoleItem.position"></view>
           <view
-            class="console-other"
+            :class="`console-other ${isUseDevSource ? 'console-stack' : ''}`"
             v-if="consoleItem.stack"
             v-html="consoleItem.stack"
+            @click="onStackClick"
           ></view>
         </view>
       </view>
     </view>
     <!-- <view class="console-copy">C</view> -->
+    <Code
+      v-if="openCode && consoleItem.stack"
+      :url="consoleItem.stack"
+      :sourceFileServers="sourceFileServers"
+      :mode="mode"
+      @close="onCloseCode"
+    />
   </view>
 </template>
 
 <script setup lang="ts">
+import { ref, computed } from 'vue';
 import Tag from '../Tag/index.vue';
+import Code from './Code.vue';
 import type { DevTool } from '../../type';
-defineProps<{ consoleItem: DevTool.ConsoleItem }>();
+import { isAndroid, isMockWX } from '../../utils';
+const props = defineProps<{
+  consoleItem: DevTool.ConsoleItem;
+  sourceFileServers?: string[];
+  mode?: string;
+  useDevSource?: boolean;
+}>();
+
+const openCode = ref(false);
+
+const isUseDevSource = computed(() => {
+  return (
+    !isMockWX(props?.consoleItem?.stack ?? '') &&
+    props.mode === 'development' &&
+    props.useDevSource
+  );
+});
+
+const isWXLink = computed(() => {
+  return (
+    isMockWX(props?.consoleItem?.stack ?? '') || props.mode !== 'development'
+  );
+});
+
+function onStackClick() {
+  if (isWXLink.value) {
+    uni.showToast({
+      icon: 'none',
+      title: '[DevTool] 请在小程序真机调试模式下查看源码',
+    });
+    return;
+  }
+
+  if (!isUseDevSource.value) {
+    return;
+  }
+
+  if (isAndroid()) {
+    if (props.sourceFileServers && props.sourceFileServers.length > 0) {
+      openCode.value = true;
+    } else {
+      uni.showToast({
+        icon: 'none',
+        title: '[DevTool] sourceFileServers 配置异常',
+      });
+      uni?.__dev__console?.log('[DevTool] sourceFileServers 配置异常');
+    }
+  } else {
+    openCode.value = true;
+  }
+}
+
+function onCloseCode() {
+  openCode.value = false;
+}
 </script>
 <style scoped>
 .console-item {
@@ -41,19 +105,20 @@ defineProps<{ consoleItem: DevTool.ConsoleItem }>();
   border-bottom: 1px solid var(--dev-tool-border-color);
   font-size: var(--dev-tool-base-font-size);
 }
-.console-item .console-info {
+.console-info {
   flex: 1;
 }
-.console-item .console-info .console-args {
+.console-args {
   display: flex;
   flex-wrap: wrap;
   color: #000;
 }
-.console-item .console-info .console-args .console-arg {
+.console-arg {
   margin-right: 4px;
+  white-space: pre-line;
   word-break: break-all;
 }
-.console-item .console-info .console-position {
+.console-position {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
@@ -61,14 +126,20 @@ defineProps<{ consoleItem: DevTool.ConsoleItem }>();
   color: #616161;
   text-align: right;
 }
-.console-item .console-info .console-position .console-time {
+.console-time {
   margin-right: auto;
   word-break: break-all;
 }
-.console-item .console-info .console-position .console-other {
+.console-other {
   word-break: break-all;
 }
-.console-item .console-copy {
+
+.console-stack {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.console-copy {
   flex-shrink: 0;
   margin-left: 16px;
   display: flex;

package/dev/components/ConsoleList/index.vue

@@ -20,6 +20,9 @@
         v-for="(item, index) in consoleList"
         :consoleItem="item"
         :key="index"
+        :sourceFileServers="sourceFileServers"
+        :mode="mode"
+        :useDevSource="useDevSource"
       />
       <Empty v-if="!consoleList || consoleList.length === 0" />
     </view>
@@ -36,6 +39,9 @@ defineProps<{
   consoleList: DevTool.ConsoleItem[];
   currentConsoleType: string;
   modelValue: string;
+  sourceFileServers?: string[];
+  mode?: string;
+  useDevSource?: boolean;
 }>();
 const emit = defineEmits<{
   (e: 'choose', type: ConsoleType): void;

package/dev/components/DevTool/index.vue

@@ -12,6 +12,9 @@
     <DevToolWindow
       :open="devToolWindowVisible"
       :data="windowData"
+      :sourceFileServers="sourceFileServers"
+      :mode="mode"
+      :useDevSource="useDevSource"
       @close="onShowDevToolWindow(false)"
       @sendMessage="onSendMessage"
     />
@@ -51,6 +54,13 @@ const windowData = ref<DevTool.WindowData>({});
 
 const devToolWindowVisible = ref(false);
 const devToolButtonVisible = ref(false);
+
+const sourceFileServers = ref<string[]>([]);
+
+const mode = ref<string>();
+
+const useDevSource = ref(false);
+
 function onDevToolButtonClick() {
   onShowDevToolWindow(true);
   onSendMessage({
@@ -83,6 +93,12 @@ function onDevOptionSend(options: DevTool.DevToolOptions) {
     buttonProps.buttonFontSize = options.buttonFontSize ?? '16px';
     buttonProps.buttonBackgroundColor =
       options.buttonBackgroundColor ?? 'rgba(255, 255, 255, 0)';
+
+    sourceFileServers.value = options.sourceFileServers ?? [];
+
+    mode.value = options.mode ?? '';
+
+    useDevSource.value = options.useDevSource ?? false;
   }
 }
 

package/dev/components/DevToolWindow/index.vue

@@ -20,6 +20,9 @@
       <ConsoleList
         :currentConsoleType="currentConsoleType"
         :consoleList="consoleList"
+        :sourceFileServers="sourceFileServers"
+        :mode="mode"
+        :useDevSource="useDevSource"
         v-if="activeTab === 'Console'"
         v-model="searchConsole"
         @choose="onConsoleChoose"
@@ -260,7 +263,13 @@ const searchWs = ref('');
 const searchRoute = ref('');
 const searchStorage = ref('');
 
-const props = defineProps<{ open?: boolean; data?: DevTool.WindowData }>();
+const props = defineProps<{
+  open?: boolean;
+  data?: DevTool.WindowData;
+  sourceFileServers?: string[];
+  mode?: string;
+  useDevSource?: boolean;
+}>();
 
 const emits = defineEmits<{
   (e: 'close'): void;
@@ -700,7 +709,7 @@ function onGoTo(page: DevTool.Page) {
     type: DEV_PAGE_JUMP,
     data: {
       path: '/' + page.path,
-      isNav: page.isNav,
+      type: page.type,
     },
   });
 }

package/dev/components/RouteList/index.vue

@@ -14,7 +14,7 @@
       <view class="route-item" v-for="item in routeList" :key="item.path">
         <view class="route-item-name">
           <view v-html="item.name" />
-          <Tag v-if="item.isNav" mode="info">Nav</Tag>
+          <Tag v-if="item.type" mode="info">{{ item.type }}</Tag>
           <Tag mode="warn" v-if="item.index === 4 || item.index === 3">
             当前页
           </Tag>

package/dev/core.ts

@@ -45,7 +45,13 @@ function getDevToolOptions() {
 }
 
 function initDevTool(options?: DevTool.DevToolOptions) {
-  store.setDevToolOptions(options || {});
+  if (!options?.mode) {
+    console.error('[DevTool] 请传入 mode: import.meta.env.MODE');
+  }
+
+  store.setDevToolOptions(options || { mode: '' });
+
+  intercept.interceptVue3(options?.vue3instance);
 }
 
 function showDevToolButton() {

package/dev/devConsole/index.ts

@@ -56,7 +56,6 @@ export class DevConsole {
     const time = getCurrentDate();
     // 获取调用栈（从第4行开始，跳过 console.log 和 wrapper 函数）
     const stackList = new Error()?.stack?.split('\n');
-
     const stack = stackList?.slice(3)?.[0];
 
     let argList = args?.map((item) => serializeCircular(item));

package/dev/devEvent/index.ts

@@ -351,7 +351,7 @@ export class DevEvent {
         }
         // 切换页面
         else if (data.type === DEV_PAGE_JUMP) {
-          data.data?.isNav
+          data.data?.type === 'nav'
             ? this.switchTo(data.data.path ?? '')
             : this.navigateTo(data.data.path ?? '');
         }