vite-uni-dev-tool 0.0.48 → 1.0.0

package/dist/v3/Instance/transformTreeCtx.ts

@@ -0,0 +1,268 @@
+import { isArray, isObject, isString } from '../../utils';
+import { isRef, isReactive } from 'vue';
+import { getRecordedChildren } from './registry';
+
+/**
+ * 分类提取属性 (基于 Instance 属性而非 VNode)
+ */
+function extractInstanceData(instance: 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 functions: any = {};
+  const emits: any = {};
+
+  // 1. 提取元数据
+  other.uid = instance.uid;
+  if (instance.type) {
+    other.type = isString(instance.type)
+      ? instance.type
+      : isObject(instance.type)
+        ? (instance.type as any).name ||
+          (instance.type as any).__name ||
+          'Component'
+        : String(instance.type);
+
+    if (isObject(instance.type) && (instance.type as any).__file) {
+      other.file = (instance.type as any).__file;
+    }
+  }
+
+  // 2. 提取 Props (从 instance.props)
+  if (instance.props) {
+    Object.keys(instance.props).forEach((key) => {
+      // 排除内部属性
+      if (key.startsWith('__v')) return;
+
+      const val = instance.props[key];
+      if (key === 'style' || key === 'id') {
+        styles[key] = val;
+      } else {
+        props[key] = val;
+      }
+    });
+  }
+
+  // 3. 提取 provides
+  if (instance.provides) {
+    Reflect.ownKeys(instance.provides).forEach((key) => {
+      if (typeof key === 'string' && key.startsWith('__v')) return;
+      const value = instance.provides[key];
+      const keyStr = typeof key === 'symbol' ? String(key) : key;
+      provides[keyStr] = value;
+    });
+  }
+
+  // 4. 提取 data 和 setupState
+  const allData: any = {};
+
+  // 处理 setupState (Composition API)
+  if (isObject(instance.setupState)) {
+    Object.assign(allData, instance.setupState);
+  }
+
+  // 处理 Options API data
+  if (isObject(instance.data)) {
+    Object.assign(allData, instance.data);
+  }
+
+  // 处理提取到 allData 中的项
+  Reflect.ownKeys(allData).forEach((key) => {
+    if (
+      typeof key === 'string' &&
+      (key.startsWith('__v') || key.startsWith('$') || key.startsWith('_'))
+    )
+      return;
+
+    const value = allData[key];
+    let keyStr = typeof key === 'symbol' ? String(key) : key;
+
+    // 标记 Ref 和 Reactive
+    const rawSetupState = instance.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 {
+      data[keyStr] = value;
+    }
+  });
+
+  // 5. 提取 emits
+  const emitsOptions = instance.emitsOptions || instance.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 };
+}
+
+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') {
+    // 依次尝试各种可能的命名字段
+    const name =
+      type.name ||
+      type.__name ||
+      type.displayName ||
+      type.__displayName ||
+      (type.__file ? extractNameFromFile(type.__file) : undefined);
+
+    if (name) return name;
+
+    // 如果是小程序环境中的页面
+    if (type.mpType === 'page') {
+      return 'Page';
+    }
+    if (type.mpType === 'component') {
+      return 'Component';
+    }
+  }
+  return 'Anonymous';
+}
+
+const BLACKLIST_COMPONENTS = [
+  'DevTool',
+  'DevToolButton',
+  'DevToolWindow',
+  'DevToolOverlay',
+  'PerformanceWidget',
+  'Instance',
+  'InstanceDetail',
+  'VirtualList',
+  'InstanceTreeNode',
+  'AppTransition',
+  'SourceCode',
+  'NetworkList',
+  'NetworkSend',
+  'NetworkDetail',
+  'NetworkIntercept',
+  'InterceptConfig',
+  'TransferList',
+  'TransferDetail',
+  'WebSocketDetail',
+  'JsonDetail',
+  'NFCTool',
+  'Profiler',
+  'Performance',
+  'Timeline',
+  'MovableContainer',
+  'Tabs',
+  'CustomSwiper',
+  'CustomSwiperItem',
+  'ConsoleList',
+  'RouteList',
+  'UniEvent',
+  'ElEvent',
+  'StorageList',
+  'VuexList',
+  'PiniaList',
+  'SettingList',
+  'CaptureScreen',
+  'ScanCodeList',
+  'NFCList',
+];
+
+let uidCount = 0;
+export function resetUidCount() {
+  uidCount = 0;
+}
+
+function getNextUid() {
+  return `manual-${++uidCount}`;
+}
+
+/**
+ * 基于 Instance 的树构建逻辑 (Ctx mode)
+ * 优先使用 registry.ts 中记录的父子关系，这在小程序环境下更稳定
+ */
+export function simpleTreeCtx(
+  instance?: any,
+  depth = 0,
+): InstanceTree.TreeNode | null {
+  if (!instance || typeof instance !== 'object' || depth > 40) {
+    return null;
+  }
+
+  // 1. 检查组件类型和名字
+  const typeName = getComponentName(instance.type);
+
+  // 2. 排除开发工具自身的组件
+  if (BLACKLIST_COMPONENTS.includes(typeName)) {
+    return null;
+  }
+
+  // 3. 也可以通过特殊标记排除 (如果以后在组件定义中加入 __devTool: true)
+  if (instance.type && (instance.type as any).__devTool) {
+    return null;
+  }
+
+  // 4. 通过 props 或 type 属性排除
+  if (
+    (instance.type && (instance.type as any)['data-dev-tool']) ||
+    (instance.props && instance.props['data-dev-tool'])
+  ) {
+    return null;
+  }
+
+  // 5. 过滤逻辑 (此处预留，当前保持原始结构)
+
+  const children: InstanceTree.TreeNode[] = [];
+
+  // 核心逻辑：使用 registry 记录的子组件
+  // 这种方式在小程序中避开了复杂的 subTree/vnode 结构
+  const recordedChildren = getRecordedChildren(instance.uid);
+  if (recordedChildren && recordedChildren.length > 0) {
+    recordedChildren.forEach((childInst) => {
+      const childTree = simpleTreeCtx(childInst, depth + 1);
+      if (childTree) {
+        children.push(childTree);
+      }
+    });
+  }
+
+  const uid = instance.uid !== undefined ? instance.uid : getNextUid();
+
+  const nodeInfo: InstanceTree.TreeNode = {
+    type: typeName,
+    uid,
+    children,
+    hasChildren: children.length > 0,
+    ...extractInstanceData(instance),
+  };
+
+  return nodeInfo;
+}

package/dist/v3/{InstanceTree → Instance}/typing.d.ts

@@ -1,20 +1,33 @@
 declare namespace InstanceTree {
   interface TreeNode {
     type: string;
-    uid?: number;
+    uid?: string | number;
     children?: TreeNode[];
     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>;
   }
 
   interface FlattenedNodeWithEnd extends TreeNode {
     level: number; // 当前层级
-    parentUid?: number; // 父节点UID
+    parentUid?: string | number; // 父节点UID
     endLevel?: number; // 闭合层级（该节点及其子节点结束的层级）
     childrenCount?: number; // 子节点数量
     isLastChild?: boolean; // 是否为同级最后一个子节点
     isStartNode?: boolean; // 是否为开始节点
     isEndNode?: boolean; // 是否为结束节点
     isContentNode?: boolean; // 是否为内容节点
+    hasChildren?: boolean; // 是否有子节点
+    isCollapsed?: boolean; // 是否已收起
+    isEmptyTag?: boolean; // 是否为空标签（无子节点且无内容）
+    isInline?: boolean; // 是否为内联展示（只有文本子节点）
+    inlineContent?: string; // 内联展示的内容
   }
 
   /**