chore: update

Author: webfansplz

packages/devtools/src/app/components/data/ModuleDetailsLoader.vue

@@ -2,9 +2,8 @@
 import type { ModuleInfo, RolldownModuleTransformInfo, SessionContext } from '~~/shared/types'
 import { useRpc } from '#imports'
 import { computedAsync } from '@vueuse/core'
-import { computed, nextTick, ref, watchEffect } from 'vue'
+import { nextTick, ref, watchEffect } from 'vue'
 import { settings } from '~~/app/state/settings'
-import { getContentByteSize } from '~~/app/utils/format'
 
 const props = defineProps<{
   session: SessionContext
@@ -45,41 +44,6 @@ const info = computedAsync(async () => {
   } as ModuleInfo
 })
 
-const durations = computed(() => {
-  const data = info.value
-  const _resolveIds = data?.resolve_ids.reduce((t, node) => {
-    t += node.duration
-    return t
-  }, 0) ?? 0
-  const _loads = data?.loads?.reduce((t, node) => {
-    t += node.duration
-    return t
-  }, 0) ?? 0
-  const _transforms = data?.transforms.reduce((t, node) => {
-    t += node.duration
-    return t
-  }, 0) ?? 0
-  const total = _resolveIds + _loads + _transforms
-  return {
-    resolveIds: _resolveIds,
-    loads: _loads,
-    transforms: _transforms,
-    total,
-  }
-})
-
-const sourceCodeSize = computed(() => {
-  const data = info.value?.transforms
-  const source = data?.[0]?.content_from ?? ''
-  return getContentByteSize(source)
-})
-
-const transformedCodeSize = computed(() => {
-  const data = info.value?.transforms?.filter(t => t.content_to)?.reverse()
-  const source = data?.[0]?.content_to ?? ''
-  return getContentByteSize(source)
-})
-
 function selectFlowNode(v: boolean) {
   flowNodeSelected.value = v
 }
@@ -98,39 +62,7 @@ function selectFlowNode(v: boolean) {
     >
       <DisplayModuleId :id="module" px2 pt1 :session />
       <div text-xs font-mono flex="~ items-center gap-3" ml2>
-        <DisplayDuration
-          :duration="durations.resolveIds" flex="~ gap-1 items-center"
-          :title="`resolveId hooks cost: ${durations.resolveIds}ms`"
-        >
-          <span i-ph-magnifying-glass-duotone inline-block />
-        </DisplayDuration>
-        <DisplayDuration
-          :duration="durations.loads" flex="~ gap-1 items-center"
-          :title="`load hooks cost: ${durations.loads}ms`"
-        >
-          <span i-ph-upload-simple-duotone inline-block />
-        </DisplayDuration>
-        <DisplayDuration
-          :duration="durations.transforms" flex="~ gap-1 items-center"
-          :title="`transform hooks cost: ${durations.transforms}ms`"
-        >
-          <span i-ph-magic-wand-duotone inline-block />
-        </DisplayDuration>
-        <span op40>|</span>
-        <DisplayDuration
-          :duration="durations.total" flex="~ gap-1 items-center"
-          :title="`Total build cost: ${durations.total}ms`"
-        >
-          <span i-ph-clock-duotone inline-block />
-        </DisplayDuration>
-        <template v-if="sourceCodeSize && transformedCodeSize">
-          <span op40>|</span>
-          <div flex="~ gap-1 items-center">
-            <DisplayFileSizeBadge title="Source code size" :bytes="sourceCodeSize" />
-            <span i-carbon-arrow-right op50 />
-            <DisplayFileSizeBadge title="Transformed code size" :bytes="transformedCodeSize" />
-          </div>
-        </template>
+        <ModulesBuildMetrics v-if="info" :metrics="info.build_metrics" />
       </div>
       <div flex="~ gap-2">
         <button

packages/devtools/src/app/components/modules/DetailedList.vue

@@ -1,10 +1,20 @@
 <script setup lang="ts">
 import type { ModuleListItem, SessionContext } from '~~/shared/types'
+import { computed } from 'vue'
 
-defineProps<{
+const props = defineProps<{
   session: SessionContext
   modules: ModuleListItem[]
 }>()
+
+const filteredTransformsMap = computed(() => {
+  const map = new Map<string, Exclude<ModuleListItem['buildMetrics'], undefined>['transforms']>()
+  for (const mod of props.modules) {
+    const t = mod.buildMetrics?.transforms.filter(i => i.source_code_size !== i.transformed_code_size).filter(i => i.transformed_code_size)
+    map.set(mod.id, t!)
+  }
+  return map
+})
 </script>
 
 <template>
@@ -19,8 +29,19 @@ defineProps<{
           :link="true"
         >
           <template #detail>
-            <div flex="~ gap-1" text-xs>
-              {{ mod.buildMetrics?.transforms.filter(i => i.source_code_size !== i.transformed_code_size).filter(i => i.transformed_code_size).map(i => i.plugin_name) }}
+            <div flex="~ gap-1 wrap" text-xs>
+              <ul flex="~ auto text-xs wrap">
+                <template v-for="(p, i) of filteredTransformsMap.get(mod.id)" :key="i">
+                  <li v-if="p.source_code_size !== p.transformed_code_size && p.transformed_code_size" flex="~ items-center">
+                    <DisplayPluginName
+                      :name="p.plugin_name"
+                      class="font-mono ws-nowrap op-50"
+                    />
+                    <span v-if="i !== filteredTransformsMap.get(mod.id)!.length - 1" op20>|</span>
+                  </li>
+                </template>
+              </ul>
+
               <div flex="~ auto gap-1" of-hidden />
               <div flex="~ none gap-1 wrap justify-end">
                 <span>

packages/devtools/src/app/utils/format.ts

@@ -8,12 +8,6 @@ export function bytesToHumanSize(bytes: number, digits = 2) {
   return [(+(bytes / 1024 ** i).toFixed(digits)).toLocaleString(), sizes[i]]
 }
 
-export function getContentByteSize(content: string) {
-  if (!content)
-    return 0
-  return new TextEncoder().encode(content).length
-}
-
 export function toTree(modules: ModuleDest[], name: string) {
   const node: ModuleTreeNode = { name, children: {}, items: [] }