feat: add unchanged info and toggle button for plugin details (#90)

Author: webfansplz

packages/devtools-vite/src/app/components/data/PluginDetailsTable.vue

@@ -46,12 +46,20 @@ const filtered = computed(() => {
         return b.duration - a.duration
       })
     : props.buildMetrics.calls
-  return sorted.filter((i) => {
-    if (!i.module)
-      return false
-    const matched = getFileTypeFromModuleId(i.module)
-    return filterModuleTypes.value.includes(matched.name)
-  }).filter(settings.value.pluginDetailSelectedHook ? i => i.type === settings.value.pluginDetailSelectedHook : Boolean)
+  return sorted
+    .filter((i) => {
+      if (!i.module)
+        return false
+      const matched = getFileTypeFromModuleId(i.module)
+      return filterModuleTypes.value.includes(matched.name)
+    })
+    .filter(settings.value.pluginDetailSelectedHook ? i => i.type === settings.value.pluginDetailSelectedHook : Boolean)
+    .filter((i) => {
+      if (settings.value.pluginDetailsShowType === 'all' || !['load', 'transform'].includes(settings.value.pluginDetailSelectedHook))
+        return true
+
+      return settings.value.pluginDetailsShowType === 'changed' ? !i.unchanged : i.unchanged
+    })
 })
 
 function toggleModuleType(rule: FilterMatchRule) {

packages/devtools-vite/src/app/components/flowmap/PluginFlow.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
+import type { ClientSettings } from '~~/app/state/settings'
 import type { RolldownPluginBuildMetrics, SessionContext } from '~~/shared/types/data'
-import { useToggle } from '@vueuse/core'
+import { useCycleList, useToggle } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 import { settings } from '~~/app/state/settings'
 
-defineProps<{
+const props = defineProps<{
   session: SessionContext
   buildMetrics: RolldownPluginBuildMetrics
 }>()
@@ -46,11 +47,43 @@ const searchValue = ref<{ selected: string[] | null, search: false }>({
   selected: settings.value.pluginDetailsTableFields,
   search: false,
 })
+
 const selectedFields = computed(() => settings.value.pluginDetailsTableFields ? settings.value.pluginDetailsTableFields : tableFieldFilterRules.map(rule => rule.name))
+const { state: showTypeState, next: _toggleShowType } = useCycleList<ClientSettings['pluginDetailsShowType']>(['changed', 'unchanged', 'all'], {
+  initialValue: settings.value.pluginDetailsShowType,
+})
+const showTypeText = computed(() => {
+  if (showTypeState.value === 'all')
+    return 'Show Changed'
+  if (showTypeState.value === 'changed')
+    return 'Show Unchanged'
+  return 'Show All'
+})
+const showUnchangedInfo = computed(() => {
+  if (!['load', 'transform'].includes(settings.value.pluginDetailSelectedHook))
+    return false
+
+  if (!props.buildMetrics.calls?.filter(i => i.type === settings.value.pluginDetailSelectedHook).filter(i => i.unchanged).length)
+    return false
+  return true
+})
+const unchangedInfo = computed(() => {
+  const unchanged = props.buildMetrics.calls?.filter(i => i.type === settings.value.pluginDetailSelectedHook).filter(i => i.unchanged)
+  const unchangedDuration = unchanged.reduce((acc, i) => acc + i.duration, 0)
+  return {
+    count: unchanged.length,
+    duration: unchangedDuration,
+  }
+})
 
 watch(() => searchValue.value.selected, (value) => {
   settings.value.pluginDetailsTableFields = value
 })
+
+function toggleShowType() {
+  _toggleShowType()
+  settings.value.pluginDetailsShowType = showTypeState.value
+}
 </script>
 
 <template>
@@ -71,17 +104,28 @@ watch(() => searchValue.value.selected, (value) => {
         </FlowmapPluginFlowTimeline>
       </div>
       <div flex-1 of-y-auto h-full flex="~ col">
-        <div px2 h10 border="b base" bg-base rounded-t-2 of-x-auto ws-nowrap flex="~ items-center">
-          <button v-if="!expanded" w8 h8 rounded-full cursor-pointer mr1 hover="bg-active" flex="~ items-center justify-center" @click="toggleExpanded(true)">
-            <i i-fluent:panel-left-expand-20-regular inline-flex op50 />
-          </button>
-          <DataSearchPanel
-            v-model="searchValue"
-            h8
-            border-none selected-container-class="p0! border-none bg-none flex-nowrap!"
-            :rules="tableFieldFilterRules"
-            class="[&_[icon-catppuccin]]:(filter-none!)"
-          />
+        <div flex="~ items-center justify-between" border="b base" px2 h10 bg-base rounded-t-2 of-x-auto ws-nowrap>
+          <div flex="~ items-center" h-full>
+            <button v-if="!expanded" w8 h8 rounded-full cursor-pointer mr1 hover="bg-active" flex="~ items-center justify-center" @click="toggleExpanded(true)">
+              <i i-fluent:panel-left-expand-20-regular inline-flex op50 />
+            </button>
+            <DataSearchPanel
+              v-model="searchValue"
+              h-full border-none selected-container-class="px0! py1 border-none bg-none flex-nowrap! h-full"
+              :rules="tableFieldFilterRules"
+              class="[&_[icon-catppuccin]]:(filter-none!)"
+            />
+          </div>
+          <div v-if="showUnchangedInfo" flex="~ items-center justify-center gap1" h-full text-xs py1>
+            <p class="op50" flex="~ items-center gap-1">
+              <DisplayNumberBadge :number="unchangedInfo.count" /> module unchanged, but cost <DisplayDuration :duration="unchangedInfo.duration" />
+            </p>
+            <button rounded-md px2 py1 select-none h-full border="~ base rounded-lg" hover="bg-active" :title="showTypeText" @click="toggleShowType">
+              <div class="text-xs op50">
+                {{ showTypeText }}
+              </div>
+            </button>
+          </div>
         </div>
         <div flex-1 of-y-auto overscroll-contain>
           <DataPluginDetailsTable

packages/devtools-vite/src/app/state/settings.ts

@@ -21,6 +21,7 @@ export interface ClientSettings {
   pluginDetailsModuleTypes: string[] | null
   pluginDetailsDurationSortType: string
   pluginDetailSelectedHook: string
+  pluginDetailsShowType: 'changed' | 'unchanged' | 'all'
 }
 
 export const settings = useLocalStorage<ClientSettings>(
@@ -44,6 +45,7 @@ export const settings = useLocalStorage<ClientSettings>(
     pluginDetailsModuleTypes: null,
     pluginDetailsDurationSortType: '',
     pluginDetailSelectedHook: '',
+    pluginDetailsShowType: 'all',
   },
   {
     mergeDefaults: true,

packages/devtools-vite/src/node/rolldown/events-manager.ts

@@ -86,6 +86,7 @@ export class RolldownEventsManager {
             ...info,
             type: 'load',
             module: event.module_id,
+            unchanged: !event.content,
           })
         }
         else if (event.action === 'HookTransformCallEnd') {
@@ -108,6 +109,7 @@ export class RolldownEventsManager {
             ...info,
             type: 'transform',
             module: event.module_id,
+            unchanged: _start.content === _end.content,
           })
         }
         this.plugin_build_metrics.set(pluginId, plugin_build_metrics)

packages/devtools-vite/src/shared/types/data.ts

@@ -32,7 +32,7 @@ export interface PluginBuildInfo {
 export interface PluginBuildMetrics {
   plugin_name: string
   plugin_id: number
-  calls: PluginBuildInfo[]
+  calls: (PluginBuildInfo & { unchanged?: boolean })[]
 }
 
 export type { PluginItem }