vite-uni-dev-tool 0.0.6 → 0.0.8

package/README.md

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

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/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

@@ -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

@@ -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(() => {
@@ -166,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;