vite-uni-dev-tool 0.0.9 → 0.0.11

package/README.md

@@ -151,6 +151,24 @@ uni.__dev__console.log('hello vite-uni-dev-tool');
 
 ## 更新日志
 
+### 0.0.11
+
+- 新增 console run 简易提示
+- 新增 appInfo
+- 新增 captureScreen(h5端不支持)
+- 新增滑动切换
+- 修复 console 滚动到指定位置
+- 修复调用栈起始行
+- 修复 json pretty 折叠icon
+
+### 0.0.10
+
+- 修复 console 过滤异常
+
+### 0.0.9
+
+- 修复 template 多节点造成的 createIntersectionObserver 异常
+
 ### 0.0.8
 
 - 修复多 template 注入调试工具异常

package/dev/components/AppInfo/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <view class="app-info-content">
+    <JsonPretty v-if="showJson" :data="appInfo" />
+    <Empty v-else />
+  </view>
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue';
+import JsonPretty from '../JsonPretty/index.vue';
+
+import Empty from '../Empty/index.vue';
+const props = defineProps<{
+  appInfo: Record<string, any>;
+}>();
+
+const showJson = computed(() => {
+  try {
+    const str = JSON.stringify(props.appInfo);
+    if (typeof props.appInfo === 'object' && (str === '' || str === '{}')) {
+      return false;
+    }
+    return true;
+  } catch (error) {
+    return false;
+  }
+});
+</script>
+<style scoped>
+.app-info-content {
+  padding: 16px;
+  font-size: var(--dev-tool-base-font-size);
+
+  height: calc(100% - 32px);
+  overflow: auto;
+}
+</style>

package/dev/components/AutoSizer/index.vue

@@ -0,0 +1,193 @@
+<template>
+  <view class="auto-sizer">
+    <!-- 大小和slot 内容宽度一致 -->
+    <view class="listener-slot">
+      <slot></slot>
+    </view>
+
+    <!-- 变大监听固定在 listener-slot 右下角大1px位置 变大时 相交触发监听 -->
+    <view
+      class="anchor-height-add"
+      :style="{
+        top: listenerSlot.height + 1 + 'px',
+      }"
+    >
+    </view>
+
+    <!-- 变小监听固定在 listener-slot 右下角小1px位置 减小时 离开触发监听 -->
+    <view
+      class="anchor-height-sub"
+      :style="{
+        top: listenerSlot.height - 1 + 'px',
+      }"
+    >
+    </view>
+
+    <!-- 变大监听固定在 listener-slot 右下角大1px位置 变大时 相交触发监听 -->
+    <view
+      class="anchor-width-add"
+      :style="{
+        left: listenerSlot.width + 1 + 'px',
+        top: '0px',
+      }"
+    >
+    </view>
+
+    <!-- 变小监听固定在 listener-slot 右下角小1px位置 减小时 离开触发监听 -->
+    <view
+      class="anchor-width-sub"
+      :style="{
+        left: listenerSlot.width - 1 + 'px',
+        top: '0px',
+      }"
+    >
+    </view>
+  </view>
+</template>
+<script lang="ts" setup>
+import {
+  getCurrentInstance,
+  onMounted,
+  inject,
+  reactive,
+  onUnmounted,
+} from 'vue';
+import { debounce } from '../../utils';
+
+type Size = {
+  width: number;
+  height: number;
+  top: number;
+  left: number;
+  right: number;
+  bottom: number;
+};
+
+const props = defineProps<{
+  index: number;
+  immediate?: boolean;
+}>();
+
+const emit = defineEmits<{ (e: 'resize', size: Size): void }>();
+
+let isMounted = false;
+
+const listenerSlot = reactive({
+  width: 0,
+  height: 0,
+});
+
+const size: Size = {
+  width: 0,
+  height: 0,
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+};
+
+const instance = getCurrentInstance();
+
+const query = uni.createSelectorQuery().in(instance);
+
+const onSizeChange =
+  inject<(index: number, height: number) => void>('onSizeChange');
+
+/** 外界记录的高度 */
+const itemsHeight = inject<number[]>('itemsHeight');
+
+const debounceReact = debounce(
+  (rect: UniApp.NodeInfo | UniApp.NodeInfo[]) => {
+    if (Array.isArray(rect)) return;
+
+    // 获取屏幕尺寸
+    const { windowWidth, windowHeight } = uni.getSystemInfoSync();
+
+    // 在尺寸更新时限制最大值
+    listenerSlot.height = Math.min(rect.height ?? 0, windowHeight);
+    listenerSlot.width = Math.min(rect.width ?? 0, windowWidth);
+
+    onSizeChange?.(props.index, rect.height ?? 0);
+
+    size.width = rect.width ?? 0;
+    size.height = rect.height ?? 0;
+    size.top = rect.top ?? 0;
+    size.left = rect.left ?? 0;
+    size.right = rect.right ?? 0;
+    size.bottom = rect.bottom ?? 0;
+
+    if (props.immediate && !isMounted) {
+      emit('resize', size);
+    }
+
+    if (isMounted) {
+      emit('resize', size);
+    }
+
+    isMounted = true;
+  },
+  100,
+  true,
+);
+function getSize() {
+  query.select('.listener-slot').boundingClientRect(debounceReact).exec();
+}
+
+const debounceGetSize = debounce(getSize, 100, true);
+
+let observer: UniNamespace.IntersectionObserver;
+onMounted(() => {
+  // 防止重复获取
+  // TODO
+  // if (itemsHeight && itemsHeight?.[props.index]) return;
+
+  // 初始大小
+  debounceGetSize();
+
+  // TODO 只有可视范围之内才获取大小
+  observer = uni.createIntersectionObserver(instance, { thresholds: [0, 1] });
+  // 变大监听
+  observer
+    .relativeTo('.auto-sizer')
+    .observe('.anchor-height-add', debounceGetSize);
+  // 变小监听
+  observer
+    .relativeTo('.auto-sizer')
+    .observe('.anchor-height-sub', debounceGetSize);
+
+  // 变大监听
+  observer
+    .relativeTo('.auto-sizer')
+    .observe('.anchor-width-add', debounceGetSize);
+  // 变小监听
+  observer
+    .relativeTo('.auto-sizer')
+    .observe('.anchor-width-sub', debounceGetSize);
+});
+
+onUnmounted(() => {
+  // 销毁监听
+  observer.disconnect();
+});
+</script>
+
+<style scoped>
+.auto-sizer {
+  position: relative;
+  overflow: hidden;
+  width: min-content;
+  height: min-content;
+}
+
+.anchor-height-add,
+.anchor-height-sub,
+.anchor-width-add,
+.anchor-width-sub {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+
+  background-color: skyblue;
+  visibility: hidden;
+}
+</style>

package/dev/components/AutoSizer/index1.vue

@@ -0,0 +1,186 @@
+<template>
+  <view
+    class="l-resize l-class"
+    :class="{ 'l-resize-target': hasNoDefaultSlot }"
+    :style="[styles, lStyle]"
+  >
+    <!--插槽需要脱离父容器文档流，防止父容器固宽固高，进而导致插槽大小被被父容器限制-->
+    <view
+      ref="l-resize__container"
+      class="l-resize__container l-container-class"
+      :style="[lStyle]"
+    >
+      <!--被监听的插槽-->
+      <slot></slot>
+      <!--监听插槽变大-->
+      <scroll-view
+        class="l-resize__wrapper"
+        :scroll-y="true"
+        :scroll-x="true"
+        :scroll-top="expandScrollTop"
+        :scroll-left="expandScrollLeft"
+        @scroll="onScrollHandler"
+      >
+        <view
+          class="l-resize__wrapper--placeholder"
+          style="height: 100000px; width: 100000px"
+        ></view>
+      </scroll-view>
+      <!--监听插槽变小-->
+      <scroll-view
+        class="l-resize__wrapper"
+        :scroll-y="true"
+        :scroll-x="true"
+        :scroll-top="shrinkScrollTop"
+        :scroll-left="shrinkScrollLeft"
+        @scroll="onScrollHandler"
+      >
+        <view
+          class="l-resize__wrapper--placeholder"
+          style="height: 250%; width: 250%"
+        ></view>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, getCurrentInstance, computed } from 'vue';
+import { getRect, addUnit } from './utils';
+
+interface ResizeResult {
+  bottom?: number;
+  top?: number;
+  left?: number;
+  right?: number;
+  height?: number;
+  width?: number;
+}
+
+defineProps<{
+  lStyle?: any;
+}>();
+
+const emit = defineEmits(['resize']);
+
+const context = getCurrentInstance();
+const width = ref(0);
+const hasNoDefaultSlot = ref(false);
+const height = ref(0);
+const expandScrollTop = ref(0);
+const expandScrollLeft = ref(0);
+const shrinkScrollTop = ref(0);
+const shrinkScrollLeft = ref(0);
+
+let scrollEventCount = 0;
+let lastHeight = 0;
+let lastWidth = 0;
+const querySelector = '.l-resize__container';
+let onScrollHandlerClone = () => {
+  getRect(querySelector, context).then((res: ResizeResult) => {
+    // 前两次滚动事件被触发，说明 created 的修改已渲染，通知用户代码当前容器大小
+    if (scrollEventCount++ === 0) {
+      resizeEvent(res);
+    }
+    // 滚动条拉到底部会触发两次多余的事件，屏蔽掉。
+    if (scrollEventCount < 3) return;
+    // 手动设置父容器高宽，防止父容器坍塌
+    // 滚动完，重新获取容器新的高度
+    const newHeight = res.height;
+    const newWidth = res.width;
+    // 立即填充父容器高宽
+    height.value = newHeight ?? 0;
+    width.value = newWidth ?? 0;
+    // 宽高都改变时，只需要触发一次 size 事件
+    const emitStack = [];
+    if (newHeight !== lastHeight) {
+      lastHeight = newHeight ?? 0;
+      emitStack.push(1);
+    }
+    if (newWidth !== lastWidth) {
+      lastWidth = newWidth ?? 0;
+      emitStack.push(1);
+    }
+    if (emitStack.length !== 0) {
+      resizeEvent(res);
+    }
+    // 滚动条拉到底部（如果使用 nextTick 效果更佳）
+    scrollToBottom({ width: lastWidth, height: lastHeight });
+  });
+};
+let onScrollHandler = () => {
+  if (onScrollHandlerClone) {
+    onScrollHandlerClone();
+  }
+};
+const scrollToBottom = (res: Record<string, number>) => {
+  expandScrollTop.value = 100000 + res.height;
+  shrinkScrollTop.value = 3 * height.value + res.height;
+  expandScrollLeft.value = 100000 + res.width;
+  shrinkScrollLeft.value = 3 * width.value + res.width;
+};
+const resizeEvent = (res: ResizeResult) => {
+  const result: any = {};
+  ['bottom', 'top', 'left', 'right', 'height', 'width'].forEach((propName) => {
+    result[propName] = res[propName as keyof ResizeResult];
+  });
+  emit('resize', result);
+};
+const styles = computed(() => {
+  if (context && context.slots?.default && (width.value || height.value)) {
+    return {
+      width: addUnit(width.value),
+      height: addUnit(height.value),
+    };
+  }
+  return {};
+});
+onMounted(() => {
+  // const options = { context };
+  hasNoDefaultSlot.value = !context?.slots.default;
+  getRect(querySelector, context).then((res) => {
+    // 闭包记录容器高度
+    lastHeight = res.height ?? 0;
+    lastWidth = res.width ?? 0;
+    // 立即填充父容器高宽
+    width.value = lastWidth;
+    height.value = lastHeight;
+
+    scrollToBottom({ width: lastWidth, height: lastHeight });
+  });
+});
+</script>
+<style lang="scss" scoped>
+.l-resize {
+  &__container {
+    position: absolute;
+    min-width: 1px;
+    min-height: 1px;
+  }
+  &-target,
+  &__wrapper {
+    background-color: aqua;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: -9999;
+    overflow: hidden;
+
+    visibility: hidden;
+  }
+  &-target {
+    .l-resize__container {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  &__wrapper {
+    &--placeholder {
+      transition: 0s;
+
+      animation: none;
+    }
+  }
+}
+</style>

package/dev/components/AutoSizer/utils.ts

@@ -0,0 +1,49 @@
+import type { ComponentInternalInstance, ComponentPublicInstance } from 'vue';
+
+export function getRect(
+  selector: string,
+  context: ComponentInternalInstance | null | any,
+  node: boolean = false,
+) {
+  // 之前是个对象，现在改成实例，防止旧版会报错
+  if (context == null) {
+    return Promise.reject('context is null');
+  }
+  if (context?.context) {
+    context = context.context;
+  }
+
+  return new Promise<UniNamespace.NodeInfo>((resolve, reject) => {
+    const dom = uni.createSelectorQuery().in(context).select(selector);
+    const result: any = (rect: UniNamespace.NodeInfo) => {
+      if (rect) {
+        resolve(rect);
+      } else {
+        reject('no rect');
+      }
+    };
+
+    if (!node) {
+      dom.boundingClientRect(result).exec();
+    } else {
+      dom
+        .fields(
+          {
+            node: true,
+            size: true,
+            rect: true,
+          },
+          result,
+        )
+        .exec();
+    }
+  });
+}
+
+export function addUnit(value?: string | number): string {
+  if (!value) {
+    return '0px';
+  }
+
+  return typeof value === 'number' ? `${value}px` : value;
+}

package/dev/components/CaptureScreen/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <view class="capture-screen-content">
+    <view class="capture-screen-control">
+      <Tag style="margin-left: auto" mode="clear" @click="emit('clear')">
+        清空
+      </Tag>
+    </view>
+
+    <view class="capture-screen-list">
+      <view class="capture-screen-item" v-for="item in captureScreenList">
+        <view class="info-row">时间：{{ item.timer }} </view>
+        <view class="info-row">页面：{{ item.position }}</view>
+      </view>
+
+      <Empty v-if="!captureScreenList || captureScreenList.length === 0" />
+    </view>
+  </view>
+</template>
+<script lang="ts" setup>
+import type { DevTool } from '../../type';
+import Empty from '../Empty/index.vue';
+import Tag from '../Tag/index.vue';
+
+defineProps<{
+  captureScreenList: DevTool.CaptureScreenItem[];
+}>();
+
+const emit = defineEmits<{
+  (e: 'clear'): void;
+}>();
+</script>
+<style scoped>
+.capture-screen-content {
+  height: 100%;
+  font-size: var(--dev-tool-base-font-size);
+}
+
+.capture-screen-list {
+  height: calc(100% - 32px);
+  overflow: auto;
+}
+
+.capture-screen-control {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 16px;
+  height: 32px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+  box-sizing: border-box;
+}
+
+.capture-screen-item {
+  padding: 16px;
+  border-bottom: 1px solid var(--dev-tool-border-color);
+}
+.info-row {
+  height: 28px;
+  line-height: 28px;
+}
+</style>

package/dev/components/Code/index.vue

@@ -23,7 +23,9 @@
         :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-index">
+          {{ start + index + 1 }}
+        </view>
 
         <view class="dev-tool-code-item-content" v-html="code"></view>
       </view>
@@ -62,6 +64,10 @@ const codes = ref<string[]>([]);
 
 const scrollIntoView = ref('');
 
+const start = computed(() => {
+  return activeRowCol.value.row - 20 > 0 ? activeRowCol.value.row - 20 : 0;
+});
+
 function onClose() {
   emit('close');
 }
@@ -172,9 +178,6 @@ onMounted(() => {
   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;