vite-uni-dev-tool 1.0.0 → 1.1.0

package/dist/v3/{Instance → DevTool/components/Instance}/transformTree.ts

@@ -1,375 +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;
-}
+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;
+}