vite-uni-dev-tool 0.0.7 → 0.0.8

package/README.md

@@ -151,7 +151,15 @@ uni.__dev__console.log('hello vite-uni-dev-tool');
 
 ## 更新日志
 
-### 0.0.07
+### 0.0.8
+
+- 修复多 template 注入调试工具异常
+- 修复 json pretty 逗号位置
+- 修复 json pretty symbol 类型转换异常
+- json pretty 自动判断虚拟列表
+- 虚拟列表抽离到独立文件
+
+### 0.0.7
 
 - 监听uni.$on
 - 监听uni.%once

package/dev/components/Code/index.vue

@@ -0,0 +1,227 @@
+<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.activeRow ? '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()?.replace(/\)|\(/, '') ?? '文件名称未知';
+  return name;
+});
+
+const activeRowCol = ref({ row: -1, col: -1, activeRow: -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');
+
+        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.activeRow}`;
+        });
+      }
+    },
+    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 = col;
+  activeRowCol.value.row = 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: 1000;
+  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;
+  white-space: nowrap;
+  overflow: auto;
+}
+
+.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/Code.vue

@@ -168,7 +168,7 @@ onMounted(() => {
   position: fixed;
   width: 100vw;
   height: 100vh;
-  z-index: 10000;
+  z-index: 1000;
   top: 0;
   left: 0;
   padding: 0 16px;

package/dev/components/ConsoleList/ConsoleItem.vue

@@ -1,19 +1,38 @@
 <template>
-  <view :class="`console-item console-item-${consoleItem.type}`">
+  <view :id="id" :class="`console-item console-item-${consoleItem.type}`">
     <view class="console-info">
       <view class="console-args">
-        <view
-          class="console-arg"
-          v-for="(item, index) in consoleItem.args"
-          :key="index"
-          v-html="item"
-        >
-        </view>
+        <template v-for="(item, index) in consoleItem.args">
+          <view
+            v-if="item.type !== 'array' && item.type !== 'object'"
+            class="console-arg"
+            :key="index"
+            v-html="item.value"
+          >
+          </view>
+          <JsonPretty
+            v-else
+            :data="item.value"
+            collapsed
+            showLength
+            :autoVirtualRow="100"
+          />
+        </template>
       </view>
       <view class="console-position">
-        <Tag :mode="consoleItem.type" style="margin: 0 4px">
-          {{ consoleItem.type }}
-        </Tag>
+        <view class="console-tags">
+          <Tag
+            v-if="consoleItem.mode"
+            mode="log"
+            style="margin-right: 6px; justify-content: center"
+          >
+            {{ consoleItem.mode }}
+          </Tag>
+          <Tag :mode="consoleItem.type">
+            {{ consoleItem.type }}
+          </Tag>
+        </view>
+
         <view>
           <view class="console-time">{{ consoleItem.time }}</view>
           <view class="console-other" v-html="consoleItem.position"></view>
@@ -40,14 +59,16 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 import Tag from '../Tag/index.vue';
-import Code from './Code.vue';
+import Code from '../Code/index.vue';
 import type { DevTool } from '../../type';
 import { isAndroid, isMockWX } from '../../utils';
+import JsonPretty from '../JsonPretty/index.vue';
 const props = defineProps<{
   consoleItem: DevTool.ConsoleItem;
   sourceFileServers?: string[];
   mode?: string;
   useDevSource?: boolean;
+  id: string;
 }>();
 
 const openCode = ref(false);
@@ -126,6 +147,11 @@ function onCloseCode() {
   color: #616161;
   text-align: right;
 }
+
+.console-tags {
+  display: flex;
+  align-items: center;
+}
 .console-time {
   margin-right: auto;
   word-break: break-all;

package/dev/components/ConsoleList/RunJSInput.vue

@@ -0,0 +1,59 @@
+<template>
+  <view class="run-js-input-wrapper">
+    <view class="run-js-input-icon"></view>
+    <input
+      v-model="code"
+      class="run-js-input"
+      placeholder="run..."
+      @confirm="onConfirm"
+    />
+  </view>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const emit = defineEmits<{
+  (e: 'run', value: string): void;
+}>();
+
+const code = ref('');
+
+function onConfirm() {
+  const value = code.value;
+  if (!value) return;
+  code.value = '';
+  setTimeout(() => {
+    emit('run', value);
+  }, 100);
+}
+</script>
+<style scoped>
+.run-js-input-wrapper {
+  position: relative;
+  display: flex;
+  padding: 0 16px;
+  min-height: 28px;
+  border-top: 1px solid var(--dev-tool-border-color);
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  overflow: hidden;
+}
+
+.run-js-input-icon {
+  margin: 10px 0 10px -4px;
+  width: 8px;
+  height: 8px;
+  border: 1px solid #000;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  overflow: hidden;
+  transform: rotate(45deg);
+}
+
+.run-js-input {
+  margin: 1px 0 1px 16px;
+  min-height: 26px;
+  width: 100%;
+  border: 1px solid transparent;
+  font-size: var(--dev-tool-base-font-size);
+}
+</style>

package/dev/components/ConsoleList/index.vue

@@ -11,11 +11,16 @@
         :mode="item.value"
         :key="item.value"
         :active="currentConsoleType === item.value"
-        @click="onChoose(item.value)"
+        @click="emit('choose', item.value)"
         >{{ item.label }}</Tag
       >
     </view>
-    <view class="console-list">
+    <scroll-view
+      class="console-list"
+      scroll-y
+      scroll-with-animation="true"
+      :scroll-into-view="scrollIntoView"
+    >
       <ConsoleItem
         v-for="(item, index) in consoleList"
         :consoleItem="item"
@@ -23,9 +28,11 @@
         :sourceFileServers="sourceFileServers"
         :mode="mode"
         :useDevSource="useDevSource"
+        :id="`dev-console-${index}`"
       />
       <Empty v-if="!consoleList || consoleList.length === 0" />
-    </view>
+    </scroll-view>
+    <RunJSInput @run="emit('run', $event)" />
   </view>
 </template>
 <script setup lang="ts">
@@ -33,9 +40,12 @@ import ConsoleItem from './ConsoleItem.vue';
 import Tag from '../Tag/index.vue';
 import Empty from '../Empty/index.vue';
 import FilterInput from '../FilterInput/index.vue';
+import RunJSInput from './RunJSInput.vue';
 import type { DevTool } from '../../type';
+import { ref, watch } from 'vue';
+import { debounce } from '../../utils';
 type ConsoleType = 'all' | 'log' | 'info' | 'warn' | 'error' | 'clear';
-defineProps<{
+const props = defineProps<{
   consoleList: DevTool.ConsoleItem[];
   currentConsoleType: string;
   modelValue: string;
@@ -47,6 +57,7 @@ const emit = defineEmits<{
   (e: 'choose', type: ConsoleType): void;
   (e: 'search', value: string): void;
   (e: 'update:modelValue', value: string): void;
+  (e: 'run', value: string): void;
 }>();
 const consoleFilterItems: {
   label: string;
@@ -78,9 +89,14 @@ const consoleFilterItems: {
   },
 ];
 
-function onChoose(type: ConsoleType) {
-  emit('choose', type);
-}
+const scrollIntoView = ref('');
+
+const debounceWatch = debounce(() => {
+  scrollIntoView.value = `dev-console-${props.consoleList.length - 1}`;
+  console.log('props.consoleList: ', props.consoleList);
+}, 200);
+
+watch(() => props.consoleList, debounceWatch);
 </script>
 <style scoped>
 .console-content {
@@ -88,7 +104,7 @@ function onChoose(type: ConsoleType) {
   font-size: var(--dev-tool-base-font-size);
 }
 .console-list {
-  height: calc(100% - 32px);
+  height: calc(100% - 32px - 32px);
   overflow: auto;
 }
 .console-control {

package/dev/components/DevTool/index.vue

@@ -167,7 +167,7 @@ onHide(() => {
 
 .dev-tool-canvas {
   position: fixed;
-  z-index: -99999;
+  z-index: -1000;
   top: 0;
   left: 0;
   width: 100vw;

package/dev/components/DevToolButton/index.vue

@@ -9,7 +9,7 @@
       width: props.buttonSize + 'px',
       height: props.buttonSize + 'px',
       cursor: isDragging ? 'move' : 'pointer',
-      ...buttonPosition
+      ...buttonPosition,
     }"
     @touchstart="onTouchStart"
     @touchmove="onTouchMove"
@@ -33,7 +33,7 @@ const props = withDefaults(
     buttonFontSize?: string;
     buttonBackgroundColor?: string;
   }>(),
-  { buttonSize: 50 }
+  { buttonSize: 50 },
 );
 const sizeHalf = props.buttonSize / 2;
 
@@ -45,7 +45,7 @@ const { windowWidth, windowHeight } = uni.getSystemInfoSync();
 const buttonPosition = reactive({
   left: windowWidth - props.buttonSize + 'px',
   top: '80vh',
-  transition: 'none'
+  transition: 'none',
 });
 
 const isTouchDevice = computed(() => {
@@ -71,7 +71,7 @@ function onTouchMove(touch: TouchEvent) {
   updatePosition(
     touch.touches[0].pageX,
     touch.touches[0].pageY,
-    isTouchDevice.value
+    isTouchDevice.value,
   );
 }
 
@@ -102,7 +102,7 @@ function onMouseDown(event: MouseEvent) {
   buttonPosition.transition = 'none';
 }
 
-let timer: NodeJS.Timeout | null = null;
+let timer: number | null = null;
 function onResize() {
   const { windowWidth } = uni.getSystemInfoSync();
 
@@ -116,7 +116,7 @@ function onResize() {
 
     uni.setStorageSync(DEV_BUTTON_INFO, {
       left: buttonPosition.left,
-      top: buttonPosition.top
+      top: buttonPosition.top,
     });
   }, 350);
 }
@@ -124,7 +124,7 @@ function onResize() {
 onMounted(() => {
   const { left, top } = uni.getStorageSync(DEV_BUTTON_INFO) || {
     left: windowWidth - props.buttonSize + 'px',
-    top: '80vh'
+    top: '80vh',
   };
   buttonPosition.left = left;
   buttonPosition.top = top;
@@ -133,7 +133,7 @@ onMounted(() => {
 onShow(() => {
   const { left, top } = uni.getStorageSync(DEV_BUTTON_INFO) || {
     left: windowWidth - props.buttonSize + 'px',
-    top: '80vh'
+    top: '80vh',
   };
   buttonPosition.left = left;
   buttonPosition.top = top;
@@ -164,7 +164,7 @@ function onMouseMove(event: MouseEvent) {
   updatePosition(mouseX, mouseY);
 }
 
-let mouseUpTimer: NodeJS.Timeout | null = null;
+let mouseUpTimer: number | null = null;
 function onMouseUp() {
   isDragging.value = false; // 鼠标释放时取消拖拽状态
   if (Date.now() - startTime < 150) {
@@ -195,7 +195,7 @@ function updatePosition(x: number, y: number, isTouch = false) {
 <style scoped>
 .dev-tool-button {
   position: fixed;
-  z-index: 9999;
+  z-index: 1000;
   top: 80vh;
   right: 0;
   display: flex;

package/dev/components/DevToolWindow/index.vue

@@ -27,6 +27,7 @@
         v-model="searchConsole"
         @choose="onConsoleChoose"
         @search="onSearchConsole"
+        @run="onRunJS"
       />
       <NetworkList
         :currentNetworkType="currentNetworkType"
@@ -68,6 +69,9 @@
         v-if="activeTab === 'UniEvent'"
         :eventList="eventList"
         :eventCount="eventCount"
+        :mode="mode"
+        :useDevSource="useDevSource"
+        :sourceFileServers="sourceFileServers"
         @clear="onUniEventClear"
       />
       <SettingList
@@ -126,6 +130,7 @@ 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 RunJS from '../RunJS/index.vue';
 import {
   DEV_BUTTON_SHOW_OR_HIDE,
   DEV_CONSOLE_CLEAR,
@@ -149,6 +154,8 @@ import {
   DEV_WINDOW_INFO,
   DEV_APP_MESSAGE,
   DEV_UNI_EVENT_CLEAR,
+  DEV_RUN_JS_CLEAR,
+  DEV_RUN_JS,
 } from '../../const';
 import { debounce, hightLight } from '../../utils/index';
 import type { DevTool } from '../../type';
@@ -236,6 +243,7 @@ const backup: {
   uploadList: DevTool.UploadItem[];
   routeList: DevTool.Page[];
   eventList: DevTool.EventItem[];
+  runJSList: DevTool.RunJSItem[];
 } = {
   consoleList: [],
   networkList: [],
@@ -244,6 +252,7 @@ const backup: {
   uploadList: [],
   routeList: [],
   eventList: [],
+  runJSList: [],
 };
 const consoleList = ref<DevTool.ConsoleItem[]>([]);
 const networkList = ref<DevTool.NetworkItem[]>([]);
@@ -258,6 +267,7 @@ 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;
@@ -309,7 +319,7 @@ const listenPostMessage = (data: DevTool.WindowData) => {
       })
       .filter((item) => {
         return (
-          item.args.some((arg) => arg.includes(searchConsole.value)) ||
+          item.args?.some((arg) => arg?.includes?.(searchConsole.value)) ||
           item.position.includes(searchConsole.value) ||
           item?.stack?.includes(searchConsole.value)
         );
@@ -533,6 +543,15 @@ function onConsoleChoose(
   setWindowInfo();
 }
 
+function onRunJS(code: string) {
+  basicSendMessage({
+    type: DEV_RUN_JS,
+    data: {
+      code,
+    },
+  });
+}
+
 function onSearchConsole(value: string) {
   consoleList.value = backup.consoleList
     .filter((item) => {
@@ -848,7 +867,7 @@ function onChangePinia(value: Record<string, any>) {
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 10000;
+  z-index: 1000;
   /* #ifdef H5 */
   padding: 50px 0;
   /* #endif */

package/dev/components/FilterInput/index.vue

@@ -4,7 +4,7 @@
       :class="`filter-input`"
       :value="modelValue"
       :placeholder="placeholder || '请输入'"
-      @input="debounceInput"
+      @confirm="debounceInput"
     />
     <view class="filter-input-clear" @click="onClear"> × </view>
   </view>