feat: preserve UI state

Author: antfu

packages/devtools/src/app/components/flowmap/Expandable.vue

@@ -1,19 +1,17 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-
 defineProps<{
   expandable?: boolean
   classRootNode?: string
   activeStart?: boolean
   activeEnd?: boolean
 }>()
 
-const isExpanded = ref(true)
+const expanded = defineModel<boolean>('expanded', { required: false, default: true })
 </script>
 
 <template>
   <FlowmapNode
-    :lines="{ top: true, bottom: !expandable || !isExpanded }" pl6 pt4
+    :lines="{ top: true, bottom: !expandable || !expanded }" pl6 pt4
     :class-node-outer="classRootNode"
     :active="activeStart"
   >
@@ -24,13 +22,13 @@ const isExpanded = ref(true)
     <template v-if="expandable" #inline-before>
       <button
         w-6 h-6 mr1 ml--7 mya rounded-full hover="bg-active" flex="~ items-center justify-center"
-        @click="isExpanded = !isExpanded"
+        @click="expanded = !expanded"
       >
-        <div i-ph-caret-right text-sm op50 transition duration-300 :class="{ 'rotate-90': isExpanded }" />
+        <div i-ph-caret-right text-sm op50 transition duration-300 :class="{ 'rotate-90': expanded }" />
       </button>
     </template>
 
-    <template v-if="expandable && isExpanded" #after>
+    <template v-if="expandable && expanded" #after>
       <div>
         <svg
           ml-1em w-27px h-30px

packages/devtools/src/app/components/flowmap/ModuleFlow.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import type { ModuleInfo, RolldownModuleFlowNode, RolldownModuleLoadNoChanges, RolldownModuleTransformInfo, RolldownModuleTransformNoChanges, SessionContext } from '~~/shared/types'
+import type { ModuleInfo, RolldownModuleFlowNode, RolldownModuleNoChanges, RolldownModuleNoChangesHide, RolldownModuleTransformInfo, SessionContext } from '~~/shared/types'
 import { Menu as VMenu } from 'floating-vue'
-import { computed, ref, shallowRef, toRefs, watch } from 'vue'
+import { computed, shallowRef, toRefs, watch } from 'vue'
+import { settingsRefs } from '~/state/settings'
 import PluginName from '../display/PluginName.vue'
 
 const props = defineProps<{
@@ -13,51 +14,85 @@ const emit = defineEmits<{
   (e: 'select', v: boolean): void
 }>()
 const { info } = toRefs(props)
-const expandNoChangesTransform = ref(false)
-const expandNoChangesLoad = ref(false)
+
+const {
+  flowShowAllTransforms,
+  flowShowAllLoads,
+  flowExpandTransforms,
+  flowExpandLoads,
+  flowExpandResolveId,
+} = settingsRefs
+
 const selected = shallowRef<RolldownModuleFlowNode | null>(null)
 
 const resolveIds = computed(() => info?.value?.resolve_ids ?? [])
 
-const transforms = computed((): (RolldownModuleTransformNoChanges | RolldownModuleTransformInfo)[] => {
-  if (expandNoChangesTransform.value)
-    return info?.value?.transforms ?? []
-
+const transforms = computed((): (RolldownModuleNoChanges | RolldownModuleNoChangesHide | RolldownModuleTransformInfo)[] => {
   const unchanged = info?.value?.transforms?.filter(t => t.content_from === t.content_to)
   const changed = info?.value?.transforms?.filter(t => t.content_from !== t.content_to)
 
+  if (flowShowAllTransforms.value && !unchanged?.length)
+    return info?.value?.transforms ?? []
+
+  if (flowShowAllTransforms.value && unchanged?.length) {
+    return [
+      ...(info.value.transforms ?? []),
+      ({
+        type: 'no_changes_hide',
+        id: 'no_changes_hide',
+        count: unchanged?.length ?? 0,
+        duration: unchanged?.reduce((acc, t) => acc + t.duration, 0) ?? 0,
+      } satisfies RolldownModuleNoChangesHide),
+    ]
+  }
+
   if (!unchanged?.length)
     return changed ?? []
+
   return [
     ({
-      type: 'transform_no_changes',
-      id: 'transform_no_changes',
+      type: 'no_changes_collapsed',
+      id: 'no_changes_collapsed',
       count: unchanged?.length ?? 0,
       duration: unchanged?.reduce((acc, t) => acc + t.duration, 0) ?? 0,
-    } satisfies RolldownModuleTransformNoChanges),
+    } satisfies RolldownModuleNoChanges),
     ...(changed ?? []),
   ]
 })
 
 const loads = computed(() => {
-  if (expandNoChangesLoad.value)
-    return info?.value?.loads ?? []
-
   const unchanged = info?.value?.loads?.filter(l => !l.content)
   const changed = info?.value?.loads?.filter(l => l.content)
 
+  if (flowShowAllLoads.value && !unchanged?.length)
+    return info?.value?.loads ?? []
+
+  if (flowShowAllLoads.value && unchanged?.length) {
+    return [
+      ...(info.value.loads ?? []),
+      ({
+        type: 'no_changes_hide',
+        id: 'no_changes_hide',
+        count: unchanged?.length ?? 0,
+        duration: unchanged?.reduce((acc, t) => acc + t.duration, 0) ?? 0,
+      } satisfies RolldownModuleNoChangesHide),
+    ]
+  }
+
   if (!unchanged?.length)
     return changed ?? []
+
   return [
     ({
-      type: 'load_no_changes',
-      id: 'load_no_changes',
+      type: 'no_changes_collapsed',
+      id: 'no_changes_collapsed',
       count: unchanged?.length ?? 0,
       duration: unchanged?.reduce((acc, t) => acc + t.duration, 0) ?? 0,
-    } satisfies RolldownModuleLoadNoChanges),
+    } satisfies RolldownModuleNoChanges),
     ...(changed ?? []),
   ]
 })
+
 const nodes = computed(() => [
   ...resolveIds.value,
   ...loads.value,
@@ -82,13 +117,6 @@ watch(selected, (v) => {
   emit('select', !!v)
 })
 
-function activate(node: RolldownModuleFlowNode) {
-  if (node.type === 'transform_no_changes')
-    expandNoChangesTransform.value = !expandNoChangesTransform.value
-  else if (node.type === 'load_no_changes')
-    expandNoChangesLoad.value = !expandNoChangesLoad.value
-}
-
 const codeDisplay = computed(() => {
   if (!selected.value)
     return null
@@ -189,9 +217,10 @@ const codeDisplay = computed(() => {
         </VMenu>
       </template>
     </div>
-    <div flex="~ gap-10">
+    <div flex="~ gap-10" min-w-300>
       <div select-none w-max>
         <FlowmapExpandable
+          v-model:expanded="flowExpandResolveId"
           :expandable="resolveIds.length > 0"
           :class-root-node="resolveIds.length === 0 ? 'border-dashed' : ''"
           :active-start="isSelectedAncestor(resolveIds[0] || loads[0])"
@@ -211,13 +240,13 @@ const codeDisplay = computed(() => {
                 :active="isSelectedAncestor(item)"
                 :class="index > 0 ? 'pt-2' : ''"
                 @select="select"
-                @activate="activate"
               />
             </div>
           </template>
         </FlowmapExpandable>
 
         <FlowmapExpandable
+          v-model:expanded="flowExpandLoads"
           :expandable="loads.length > 0"
           :class-root-node="loads.length === 0 ? 'border-dashed' : ''"
           :active-start="isSelectedAncestor(loads[0])"
@@ -237,13 +266,14 @@ const codeDisplay = computed(() => {
                 :active="isSelectedAncestor(item)"
                 :class="index > 0 ? 'pt-2' : ''"
                 @select="select"
-                @activate="activate"
+                @toggle-show-all="flowShowAllLoads = !flowShowAllLoads"
               />
             </div>
           </template>
         </FlowmapExpandable>
 
         <FlowmapExpandable
+          v-model:expanded="flowExpandTransforms"
           :expandable="transforms.length > 0"
           :class-root-node="transforms.length === 0 ? 'border-dashed' : ''"
           :active-start="isSelectedAncestor(transforms[0])"
@@ -264,7 +294,7 @@ const codeDisplay = computed(() => {
                 :active="isSelectedAncestor(item)"
                 :class="index > 0 ? 'pt-2' : ''"
                 @select="select"
-                @activate="activate"
+                @toggle-show-all="flowShowAllTransforms = !flowShowAllTransforms"
               />
             </div>
           </template>

packages/devtools/src/app/components/flowmap/NodeModuleInfo.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   (e: 'select', item: RolldownModuleFlowNode): void
-  (e: 'activate', item: RolldownModuleFlowNode): void
+  (e: 'toggleShowAll', item: RolldownModuleFlowNode): void
 }>()
 
 const isDashed = computed(() => {
@@ -44,7 +44,7 @@ const importterModule = computed(() => {
 </script>
 
 <template>
-  <div v-if="item.type === 'transform_no_changes' || item.type === 'load_no_changes'" pl10>
+  <div v-if="item.type === 'no_changes_collapsed'" pl10>
     <div
       flex="~ gap-2 items-center" text-sm border="l" py1
       :class="active ? 'border-flow-line-active' : 'border-flow-line'"
@@ -58,12 +58,32 @@ const importterModule = computed(() => {
       <span op50 flex-shrink-0>in total</span>
       <button
         border="~ base rounded-full" px2 py-px op50 hover="op100"
-        @click="emit('activate', item)"
+        @click="emit('toggleShowAll', item)"
       >
         Expand
       </button>
     </div>
   </div>
+  <div v-else-if="item.type === 'no_changes_hide'" pl10>
+    <div
+      flex="~ gap-2 items-center" text-sm border="l" py1
+      :class="active ? 'border-flow-line-active' : 'border-flow-line'"
+    >
+      <div
+        w-2 h-2 border="4" rounded-full ml--1 translate-x--0.5px
+        :class="active ? 'border-flow-line-active' : 'border-flow-line'"
+      />
+      <span op50>{{ item.count }} plugins did not change the content but cost</span>
+      <DisplayDuration :duration="item.duration" :color="true" :factor="5" text-xs />
+      <span op50 flex-shrink-0>in total</span>
+      <button
+        border="~ base rounded-full" px2 py-px op50 hover="op100"
+        @click="emit('toggleShowAll', item)"
+      >
+        Hide
+      </button>
+    </div>
+  </div>
   <FlowmapNode
     v-else
     :lines="{ top: true }"
@@ -92,7 +112,7 @@ const importterModule = computed(() => {
     <template #inline-after>
       <DisplayDuration :duration="item.duration" :color="true" :factor="5" text-xs />
       <template v-if="item.type === 'transform'">
-        <div v-if="item.content_from === item.content_to" text-xs op50>
+        <div v-if="item.content_from === item.content_to" text-xs op25>
           no changes
         </div>
         <div v-else>

packages/devtools/src/app/pages/session/[session]/graph/index.vue

@@ -4,7 +4,8 @@ import { useRoute, useRouter } from '#app/composables/router'
 import { clearUndefined } from '@antfu/utils'
 import { computedWithControl, debouncedWatch } from '@vueuse/core'
 import Fuse from 'fuse.js'
-import { computed, reactive, ref } from 'vue'
+import { computed, reactive } from 'vue'
+import { settings } from '~/state/settings'
 import { parseReadablePath } from '~/utils/filepath'
 import { getFileTypeFromModuleId, getFileTypeFromName } from '~/utils/icon'
 
@@ -118,13 +119,11 @@ const searched = computed(() => {
     .map(r => r.item)
 })
 
-const display = ref<'list' | 'graph'>('list')
-
 function toggleDisplay() {
   if (route.query.module) {
     router.replace({ query: { ...route.query, module: undefined } })
   }
-  display.value = display.value === 'list' ? 'graph' : 'list'
+  settings.value.flowModuleGraphView = settings.value.flowModuleGraphView === 'list' ? 'graph' : 'list'
 }
 </script>
 
@@ -165,18 +164,18 @@ function toggleDisplay() {
           btn-action
           @click="toggleDisplay"
         >
-          <div v-if="display === 'graph'" i-ph-graph-duotone />
+          <div v-if="settings.flowModuleGraphView === 'graph'" i-ph-graph-duotone />
           <div v-else i-ph-list-duotone />
-          {{ display === 'list' ? 'List' : 'Graph' }}
+          {{ settings.flowModuleGraphView === 'list' ? 'List' : 'Graph' }}
         </button>
       </div>
       <!-- TODO: should we add filters for node_modules? -->
       <!-- {{ allNodeModules }} -->
     </div>
-    <template v-if="display === 'list'">
+    <template v-if="settings.flowModuleGraphView === 'list'">
       <div of-scroll max-h-screen pt-45 relative>
         <ModulesFlatList
-          v-if="display === 'list'"
+          v-if="settings.flowModuleGraphView === 'list'"
           :session="session"
           :modules="searched"
         />

packages/devtools/src/app/pages/session/[session]/index.vue

@@ -60,7 +60,14 @@ const dataTable = computed<DataTableItem[]>(() => {
 
 <template>
   <div flex="~ col gap-2" p6>
-    <div op50>
+    <div flex="~ gap-2">
+      <NuxtLink btn-action :to="{ path: `/` }">
+        <div i-ph-arrow-bend-up-left-duotone />
+        Re-select Session
+      </NuxtLink>
+    </div>
+
+    <div op50 mt-10>
       Meta Info
     </div>
     <div border="~ base rounded" p4 grid="~ cols-[max-content_160px_2fr] gap-2 items-center">
@@ -99,12 +106,5 @@ const dataTable = computed<DataTableItem[]>(() => {
         </NuxtLink>
       </template>
     </div>
-
-    <div flex="~ gap-2" mt-10>
-      <NuxtLink btn-action :to="{ path: `/` }">
-        <div i-ph-arrow-left-duotone />
-        Re-select Session
-      </NuxtLink>
-    </div>
   </div>
 </template>