vite-uni-dev-tool 0.0.48 → 1.0.0

package/dist/v3/Instance/index.vue

@@ -0,0 +1,94 @@
+<template>
+  <VirtualList
+    :data="flatData"
+    :pageSize="pageSize"
+    :height="height"
+    :itemHeight="itemHeight"
+    scroll-with-animation
+    showBackTop
+    :dataChangeScrollToTop="false"
+    scrollX>
+    <template v-slot="{ list, start }">
+      <InstanceTreeNode
+        v-for="(item, index) in list"
+        :key="start + index"
+        :style="{ height: '20px' }"
+        :showLine="showLine"
+        :node="item"
+        :isActive="selectedUid === item.uid"
+        @toggle="onToggle"
+        @select="handleSelect" />
+    </template>
+  </VirtualList>
+</template>
+<script lang="ts" setup>
+import VirtualList from '../VirtualList/index.vue';
+import InstanceTreeNode from './components/InstanceTreeNode.vue';
+import { computed, ref, markRaw, shallowRef, watch } from 'vue';
+import { simpleTreeCtx, resetUidCount } from './transformTreeCtx';
+import { flattenTreeWithEndMarkers } from './flatten';
+
+const props = withDefaults(
+  defineProps<{
+    data: any;
+    pageSize?: number;
+    height?: number | string;
+    showLine?: boolean;
+    itemHeight?: number;
+  }>(),
+  {
+    pageSize: 30,
+    height: 400,
+    showLine: false,
+    itemHeight: 20,
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'select', node: any): void;
+}>();
+
+const expandedIds = ref<Set<string | number>>(new Set());
+const selectedUid = ref<string | number | undefined>(undefined);
+
+const handleSelect = (node: any) => {
+  selectedUid.value = node.uid;
+  emit('select', node);
+};
+
+const onToggle = (uid: string | number) => {
+  if (expandedIds.value.has(uid)) {
+    expandedIds.value.delete(uid);
+  } else {
+    expandedIds.value.add(uid);
+  }
+  expandedIds.value = new Set(expandedIds.value); // 触发响应式更新
+};
+
+const treeData = shallowRef<InstanceTree.TreeNode | null>(null);
+
+watch(
+  () => props.data,
+  (val) => {
+    resetUidCount();
+    const tree = simpleTreeCtx(val) as any;
+
+    // 默认展开第一层
+    if (tree && tree.uid && expandedIds.value.size === 0) {
+      expandedIds.value.add(tree.uid);
+      expandedIds.value = new Set(expandedIds.value);
+    }
+
+    treeData.value = tree ? markRaw(tree) : null;
+  },
+  { immediate: true },
+);
+
+const flatData = computed(() => {
+  if (!treeData.value) return [];
+  const result: InstanceTree.FlattenedNodeWithEnd[] = [];
+  flattenTreeWithEndMarkers(treeData.value, expandedIds.value, result);
+  return markRaw(result);
+});
+</script>
+<style scoped></style>

package/dist/v3/Instance/registry.ts

@@ -0,0 +1,49 @@
+import type { ComponentInternalInstance } from 'vue';
+
+// 存储所有已注册的实例
+const instanceMap = new Map<number, ComponentInternalInstance>();
+// 存储父子关系 pUid -> [cUids]
+const childrenMap = new Map<number, Set<number>>();
+
+/**
+ * 记录组件实例及其父子关系
+ */
+export function recordInstance(instance: ComponentInternalInstance) {
+  if (!instance) return;
+
+  const uid = instance.uid;
+  instanceMap.set(uid, instance);
+
+  if (instance.parent) {
+    const pUid = instance.parent.uid;
+    if (!childrenMap.has(pUid)) {
+      childrenMap.set(pUid, new Set());
+    }
+    childrenMap.get(pUid)!.add(uid);
+  }
+}
+
+/**
+ * 获取某个实例记录的子组件实例
+ */
+export function getRecordedChildren(uid: number): ComponentInternalInstance[] {
+  const cUids = childrenMap.get(uid);
+  if (!cUids) return [];
+
+  const result: ComponentInternalInstance[] = [];
+  Array.from(cUids).forEach((id) => {
+    const inst = instanceMap.get(id);
+    if (inst) {
+      result.push(inst);
+    }
+  });
+  return result;
+}
+
+/**
+ * 清除记录（热更新或切换页面时可能需要）
+ */
+export function clearRegistry() {
+  instanceMap.clear();
+  childrenMap.clear();
+}

package/dist/v3/Instance/transformTree.ts

@@ -0,0 +1,375 @@
+import { isArray, isObject, isString } from '../../utils';
+import {
+  type ComponentInternalInstance,
+  type VNode,
+  isRef,
+  isReactive,
+} from 'vue';
+import { getRecordedChildren } from './registry';
+
+// 类型守卫函数，检查是否为VNode类型
+function isVNode(child: any): child is VNode {
+  return child != null && typeof child === 'object' && 'type' in child;
+}
+
+// 类型守卫函数，检查是否为包含component属性的对象
+function hasComponentProperty(
+  child: any,
+): child is VNode & { component?: ComponentInternalInstance } {
+  return isVNode(child) && 'component' in child;
+}
+
+// 类型守卫函数，检查是否为Symbol类型且具有description属性
+function isSymbolWithDescription(
+  value: any,
+): value is symbol & { description?: string } {
+  return typeof value === 'symbol';
+}
+
+interface SimpleTreeNode {
+  type: string;
+  uid: string | number;
+  children?: SimpleTreeNode[];
+  content?: string;
+  hasChildren?: boolean;
+  // 分类存储属性
+  props?: Record<string, any>;
+  styles?: Record<string, any>;
+  other?: Record<string, any>;
+  provides?: Record<string, any>;
+  data?: Record<string, any>;
+  functions?: Record<string, any>;
+  emits?: Record<string, any>;
+}
+
+/**
+ * 分类提取属性
+ */
+function extractCategorizedData(vnode: any): {
+  props: Record<string, any>;
+  styles: Record<string, any>;
+  other: Record<string, any>;
+  provides: Record<string, any>;
+  data: Record<string, any>;
+  functions: Record<string, any>;
+  emits: Record<string, any>;
+} {
+  const styles: any = {};
+  const props: any = {};
+  const other: any = {};
+  const provides: any = {};
+  const data: any = {};
+  const emits: any = {};
+
+  const vnodeProps = vnode.props || {};
+
+  // 1. 提取样式相关 (id, style)
+  const styleKeys = ['id', 'style'];
+
+  // 处理样式属性
+  styleKeys.forEach((key) => {
+    let val = vnodeProps[key];
+    if (val !== undefined && val !== null && val !== '') {
+      if (key === 'style' && isObject(val)) {
+        val = Object.entries(val)
+          .filter(([_, v]) => v !== undefined && v !== null && v !== '')
+          .map(([k, v]) => `${k}: ${v}`)
+          .join('; ');
+      }
+      if (val !== '') {
+        styles[key] = val;
+      }
+    }
+  });
+
+  // 处理 Props 属性 (包括 class, data- 以及其他)
+  Object.keys(vnodeProps).forEach((key) => {
+    // 排除已处理的样式属性
+    if (!styleKeys.includes(key)) {
+      // 统一处理 className -> class
+      const finalKey = key === 'className' ? 'class' : key;
+      props[finalKey] = vnodeProps[key];
+    }
+  });
+
+  // 3. 提取其他元数据
+  other.uid = vnode.uid;
+  if (vnode.type) {
+    other.type = isString(vnode.type)
+      ? vnode.type
+      : isObject(vnode.type)
+        ? (vnode.type as any).name || (vnode.type as any).__name || 'Component'
+        : String(vnode.type);
+
+    if (isObject(vnode.type) && (vnode.type as any).__file) {
+      other.file = (vnode.type as any).__file;
+    }
+  }
+
+  // 如果有 slots
+  if (vnode.children && !isArray(vnode.children) && isObject(vnode.children)) {
+    other.slots = Object.keys(vnode.children);
+  }
+
+  // 4. 提取 provides
+  const currentProvides = vnode.provides;
+
+  if (currentProvides) {
+    Reflect.ownKeys(currentProvides).forEach((key) => {
+      // 排除 Vue 内部属性
+      if (typeof key === 'string' && key.startsWith('__v')) return;
+
+      const value = currentProvides[key];
+      const keyStr = typeof key === 'symbol' ? String(key) : key;
+      provides[keyStr] = value;
+    });
+  }
+
+  // 5. 提取 data (仅当 vnode.component 存在时)
+  const functions: any = {};
+  if (vnode.setupState || vnode.data) {
+    // 优先取 setupState (Script Setup / Composition API), 其次取 data (Options API)
+    // 注意：setupState 包含了响应式引用的解包值
+    const allData: any = {};
+
+    // 处理 setupState
+    if (isObject(vnode.setupState)) {
+      Object.assign(allData, vnode.setupState);
+    }
+
+    // 处理 Options API data
+    if (isObject(vnode.data)) {
+      Object.assign(allData, vnode.data);
+    }
+
+    if (isObject(allData)) {
+      Reflect.ownKeys(allData).forEach((key) => {
+        // 排除 Vue 内部属性
+        if (
+          typeof key === 'string' &&
+          (key.startsWith('__v') || key.startsWith('$') || key.startsWith('_'))
+        )
+          return;
+
+        const value = (allData as any)[key];
+        let keyStr = typeof key === 'symbol' ? String(key) : key;
+
+        // 标记 Ref 和 Reactive
+        // 优先检查 devtoolsRawSetupState 获取原始 Ref
+        const rawSetupState = (vnode as any).devtoolsRawSetupState || {};
+        const rawValue = rawSetupState[key];
+
+        if (rawValue && isRef(rawValue)) {
+          keyStr += ' (Ref)';
+        } else if (isReactive(value)) {
+          keyStr += ' (Reactive)';
+        }
+
+        if (typeof value === 'function') {
+          functions[keyStr] = value;
+        } else {
+          // 尝试区分类型（Ref, Reactive, Computed 等在 setupState 中通常已被解包，难以直接判断原始类型，
+          // 除非使用 devtools 专用钩子。这里暂只做基础值存储）
+          data[keyStr] = value;
+        }
+      });
+    }
+  }
+
+  // 6. 提取 emits
+  // 优先从组件实例获取归一化的 emitsOptions, 其次从类型定义获取
+  const emitsOptions = vnode?.emitsOptions || vnode.type?.emits;
+  if (emitsOptions) {
+    if (isArray(emitsOptions)) {
+      emitsOptions.forEach((emit: string) => {
+        emits[emit] = 'function(...args) {...}'; // 简单标记存在
+      });
+    } else if (isObject(emitsOptions)) {
+      Reflect.ownKeys(emitsOptions).forEach((key) => {
+        if (typeof key === 'string') {
+          emits[key] = 'function(...args) {...}';
+        }
+      });
+    }
+  }
+
+  return { props, styles, other, provides, data, functions, emits };
+}
+
+let uidCount = 0;
+// 导出重置函数，供外部调用
+export function resetUidCount() {
+  uidCount = 0;
+}
+
+function getNextUid() {
+  return `manual-${++uidCount}`;
+}
+
+function extractNameFromFile(file: string): string | undefined {
+  if (!file) return undefined;
+  const match = file.match(/([^/|\\]+)\.[^.]+$/);
+  return match ? match[1] : undefined;
+}
+
+function getComponentName(type: any): string {
+  if (!type) return 'Anonymous';
+  if (typeof type === 'string') return type;
+  if (typeof type === 'object') {
+    return (
+      type.name ||
+      type.__name ||
+      (type.__file ? extractNameFromFile(type.__file) : undefined) ||
+      'Anonymous'
+    );
+  }
+  if (typeof type === 'function') {
+    return type.name || type.__name || 'Anonymous';
+  }
+  return 'Anonymous';
+}
+
+// ... existing code ...
+
+// ... types ...
+
+export function simpleTree(vNode?: any, depth = 0): SimpleTreeNode | null {
+  // ... check valid ...
+  if (vNode === null || typeof vNode !== 'object' || depth > 40) {
+    return null;
+  }
+  // ... rest of simpleTree func ...
+
+  // 确保只使用必需的属性
+  const simplifiedInstance: InstanceTree.SimplifiedComponentInternalInstance = {
+    type: vNode.type,
+    subTree: vNode.subTree,
+    uid: vNode.uid,
+    ...(vNode.component && { component: vNode.component }),
+    ...(vNode.children && { children: vNode.children }),
+  };
+
+  const children: SimpleTreeNode[] = [];
+
+  // 获取子节点
+  if (simplifiedInstance.subTree) {
+    if ('data-dev-tool' in (simplifiedInstance.subTree.props ?? {})) {
+      return null;
+    } else {
+      children.push(
+        ...getSimpleChildrenFromVNode(simplifiedInstance.subTree, depth),
+      );
+    }
+  }
+
+  // 插槽 fallback
+  if (children.length === 0 && simplifiedInstance.children) {
+    if (isArray(simplifiedInstance.children)) {
+      const slotChildren = getSimpleChildrenFromVNode(
+        {
+          children: simplifiedInstance.children,
+        },
+        depth,
+      );
+      children.push(...slotChildren);
+    }
+  }
+
+  // GLOBAL fallback
+  if (children.length === 0 && vNode.uid !== undefined) {
+    const recordedChildren = getRecordedChildren(vNode.uid);
+    recordedChildren.forEach((childInst) => {
+      const childTree = simpleTree(childInst, depth + 1);
+      if (childTree) {
+        children.push(childTree);
+      }
+    });
+  }
+
+  const hasChildrenFlag = children.length > 0;
+  const uid = vNode.uid !== undefined ? vNode.uid : getNextUid();
+  const typeName = getComponentName(simplifiedInstance.type);
+
+  const nodeInfo: SimpleTreeNode = {
+    type: typeName,
+    uid,
+    children,
+    hasChildren: hasChildrenFlag,
+    ...extractCategorizedData(vNode),
+  };
+
+  return nodeInfo;
+}
+
+/**
+ * 从 VNode 获取简化的子节点 (仅保留组件节点)
+ */
+function getSimpleChildrenFromVNode(
+  vnode: any,
+  depth: number = 0,
+): SimpleTreeNode[] {
+  const children: SimpleTreeNode[] = [];
+  if (vnode.children) {
+    // 统一转为数组处理，兼容单节点和多节点
+    const rawChildren = isArray(vnode.children)
+      ? vnode.children
+      : isObject(vnode.children)
+        ? [vnode.children]
+        : isString(vnode.children)
+          ? [vnode.children]
+          : [];
+
+    for (const child of rawChildren) {
+      if (
+        child &&
+        typeof child === 'object' &&
+        'props' in child &&
+        child.props &&
+        'data-dev-tool' in child.props
+      ) {
+        continue;
+      }
+
+      // 1. 如果是组件实例，直接处理
+      if (hasComponentProperty(child) && child?.component) {
+        const childTree = simpleTree(child.component, depth + 1);
+        if (childTree) {
+          children.push(childTree);
+        }
+      }
+      // 2. 如果是函数式组件
+      else if (isVNode(child) && typeof child.type === 'function') {
+        const uid =
+          (child as any).uid !== undefined ? (child as any).uid : getNextUid();
+        const typeName = getComponentName(child.type);
+        children.push({
+          type: typeName,
+          uid,
+          children: [],
+          hasChildren: false,
+          ...extractCategorizedData(child),
+        });
+      }
+      // 3. 如果是 VNode 且是 Fragmentation/Block (带 children 的非组件节点)，需要深入查找内部的组件
+      else if (isVNode(child)) {
+        // 如果是 Fragment，递归查找子节点
+        if (child.type && isSymbolWithDescription(child.type)) {
+          const desc = child.type.description;
+          const isFragment = desc === 'v-fgt' || desc === 'Fragment';
+          if (isFragment) {
+            const fragmentChildren = getSimpleChildrenFromVNode(child, depth);
+            children.push(...fragmentChildren);
+          }
+        }
+        // 如果是普通 HTML 元素或其他容器，也需要递归查找其 children 中的组件
+        // 例如 <view><MyComponent /></view>，我们需要找到 MyComponent
+        else if (isString(child.type) || isObject(child.type)) {
+          // 递归查找子节点中的组件，但不把当前节点加入树中（因为我们只关心组件）
+          const subChildren = getSimpleChildrenFromVNode(child, depth);
+          children.push(...subChildren);
+        }
+      }
+    }
+  }
+  return children;
+}