chore: update

Author: webfansplz

packages/devtools-vite/src/app/components/chart/PluginFlamegraph.vue

@@ -2,73 +2,53 @@
 import type { TreeNodeInput } from 'nanovis'
 import type { PluginBuildInfo, RolldownPluginBuildMetrics, SessionContext } from '~~/shared/types'
 import { Flamegraph, normalizeTreeNode } from 'nanovis'
+import { relative } from 'pathe'
 import { computed, onMounted, onUnmounted, ref, shallowRef, useTemplateRef, watch } from 'vue'
-import { parseReadablePath } from '~/utils/filepath'
 import { normalizeTimestamp } from '~/utils/format'
-import { getFileTypeFromModuleId, ModuleTypeRules } from '~/utils/icon'
 
 const props = defineProps<{
   session: SessionContext
   buildMetrics: RolldownPluginBuildMetrics
 }>()
 
-const parsedPaths = computed(() => props.session.modulesList.map((mod) => {
-  const path = parseReadablePath(mod.id, props.session.meta.cwd)
-  const type = getFileTypeFromModuleId(mod.id)
-  return {
-    mod,
-    path,
-    type,
-  }
-}))
-
-// filter current module list existed module type
-const existedModuleTypes = computed(() => ModuleTypeRules.filter(rule => parsedPaths.value.some(mod => rule.match.test(mod.mod.id))))
-
 const n = (node: TreeNodeInput<PluginBuildInfo>) => normalizeTreeNode(node, undefined, false)
 
+function normalizeModulePath(path: string) {
+  const normalized = path.replace(/%2F/g, '/')
+  const cwd = props.session!.meta.cwd
+  let relate = cwd ? relative(cwd, normalized) : normalized
+  if (!relate.startsWith('.'))
+    relate = `./${relate}`
+  if (relate.startsWith('./'))
+    return relate
+  if (relate.match(/^(?:\.\.\/){1,3}[^.]/))
+    return relate
+  return normalized
+}
+
 const tree = computed(() => {
-  // build children: module group by module type
-  const resolveIds = existedModuleTypes.value.map((type, idx) => n({
-    id: `resolveId-${type.name}-${idx}`,
-    text: type.name,
-    children: props.buildMetrics.resolveIdMetrics.filter((item) => {
-      return getFileTypeFromModuleId(item.module).name === type.name
-    }).map((id, idx) => n({
-      id: `resolveId-${idx}`,
-      text: id.module,
-      size: id.duration,
-      meta: id,
-    })),
+  const resolveIds = props.buildMetrics.resolveIdMetrics.map((id, idx) => n({
+    id: `resolveId-${idx}`,
+    text: normalizeModulePath(id.module),
+    size: id.duration,
+    meta: id,
   }))
 
-  const loads = existedModuleTypes.value.map((type, idx) => n({
-    id: `loads-${type.name}-${idx}`,
-    text: type.name,
-    children: props.buildMetrics.loadMetrics.filter((item) => {
-      return getFileTypeFromModuleId(item.module).name === type.name
-    }).map((id, idx) => n({
-      id: `resolveId-${idx}`,
-      text: id.module,
-      size: id.duration,
-      meta: id,
-    })),
+  const loads = props.buildMetrics.loadMetrics.map((id, idx) => n({
+    id: `loads-${idx}`,
+    text: normalizeModulePath(id.module),
+    size: id.duration,
+    meta: id,
   }))
 
-  const transforms = existedModuleTypes.value.map((type, idx) => n({
-    id: `transforms-${type.name}-${idx}`,
-    text: type.name,
-    children: props.buildMetrics.transformMetrics.filter((item) => {
-      return getFileTypeFromModuleId(item.module).name === type.name
-    }).map((id, idx) => n({
-      id: `resolveId-${idx}`,
-      text: id.module,
-      size: id.duration,
-      meta: id,
-    })),
+  const transforms = props.buildMetrics.transformMetrics.map((id, idx) => n({
+    id: `transforms-${idx}`,
+    text: normalizeModulePath(id.module),
+    size: id.duration,
+    meta: id,
   }))
 
-  // resolve/load/transform -> module type -> module
+  // resolve/load/transform -> module
   const children = [
     n({
       id: '~resolves',

packages/devtools-vite/src/app/pages/session/[session]/plugins.vue

@@ -90,10 +90,3 @@ debouncedWatch(
     </div>
   </div>
 </template>
-
-<!--
-TODO: plugins framegraph
-  Two different views direction:
-    - plugins -> hooks -> modules
-    - modules -> hooks -> plugins
--->