vite-uni-dev-tool 1.1.0 → 1.2.0

package/dist/v3/DevTool/components/Instance/transformTreeCtx.ts

@@ -1,268 +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;
-}
+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/DevTool/components/Instance/typing.d.ts

@@ -1,43 +1,43 @@
-declare namespace InstanceTree {
-  interface TreeNode {
-    type: string;
-    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?: 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; // 内联展示的内容
-  }
-
-  /**
-   * 简化组件内部实例，只保留 type, subTree, component, children
-   */
-  interface SimplifiedComponentInternalInstance {
-    type: any;
-    subTree: any;
-    component?: SimplifiedComponentInternalInstance;
-    children?: any[];
-    uid?: number;
-  }
-}
+declare namespace InstanceTree {
+  interface TreeNode {
+    type: string;
+    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?: 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; // 内联展示的内容
+  }
+
+  /**
+   * 简化组件内部实例，只保留 type, subTree, component, children
+   */
+  interface SimplifiedComponentInternalInstance {
+    type: any;
+    subTree: any;
+    component?: SimplifiedComponentInternalInstance;
+    children?: any[];
+    uid?: number;
+  }
+}