feat: folder view mode for module graph (#10)

Author: webfansplz

package.json

@@ -20,6 +20,7 @@
     "@antfu/utils": "catalog:inlined",
     "@iconify-json/carbon": "catalog:icons",
     "@iconify-json/catppuccin": "catalog:icons",
+    "@iconify-json/codicon": "catalog:icons",
     "@iconify-json/logos": "catalog:icons",
     "@iconify-json/ph": "catalog:icons",
     "@iconify-json/ri": "catalog:icons",

packages/devtools/src/app/components/display/TreeNode.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { ModuleDest, ModuleTreeNode } from '~~/shared/types'
+import { useRoute } from '#app/composables/router'
+import { NuxtLink } from '#components'
+
+const props = withDefaults(defineProps<{
+  node: ModuleTreeNode
+  icon?: string
+  link?: string | boolean
+}>(), {
+  icon: 'i-carbon-folder',
+})
+
+const emit = defineEmits<{
+  (e: 'select', node: ModuleDest): void
+}>()
+const route = useRoute()
+const location = window.location
+function select(node: ModuleDest) {
+  if (!props.link) {
+    emit('select', node)
+  }
+}
+</script>
+
+<template>
+  <details open>
+    <summary
+      cursor-default
+      select-none
+      text-sm
+      truncate
+      p="y1"
+    >
+      <div :class="icon" inline-block vertical-text-bottom />
+      {{ node.name }}
+    </summary>
+
+    <DisplayTreeNode v-for="e of Object.entries(node.children)" :key="e[0]" ml4 :node="e[1]" :link="link" />
+    <div
+      v-for="i of node.items"
+      :key="i.full"
+      ml4
+      ws-nowrap
+    >
+      <component
+        :is="link ? NuxtLink : 'div'"
+        :to="link ? (typeof link === 'string' ? link : { path: route.path, query: { ...route.query, module: i.full }, hash: location.hash }) : undefined"
+        block
+        text-sm
+        p="x2 y1"
+        ml1
+        rounded
+        @click="select(i)"
+      >
+        <DisplayFileIcon :filename="i.full" inline-block vertical-text-bottom />
+        <span ml-1>
+          {{ i.path.split('/').pop() }}
+        </span>
+      </component>
+    </div>
+  </details>
+</template>

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

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { ModuleDest, ModuleListItem, SessionContext } from '~~/shared/types'
+import { computed } from 'vue'
+import { toTree } from '../../utils/format'
+
+const props = defineProps<{
+  session: SessionContext
+  modules: ModuleListItem[]
+}>()
+
+const moduleTree = computed(() => {
+  if (!props.session.modulesList.length) {
+    return {
+      workspace: {
+        children: {},
+        items: [],
+      },
+      nodeModules: {
+        children: {},
+        items: [],
+      },
+      virtual: {
+        children: {},
+        items: [],
+      },
+    }
+  }
+  const inWorkspace: ModuleDest[] = []
+  const inNodeModules: ModuleDest[] = []
+  const inVirtual: ModuleDest[] = []
+
+  props.modules.map(i => ({ full: i.id, path: i.path! })).forEach((i) => {
+    if (i.full.startsWith(props.session.meta.cwd)) {
+      if (!i.path.startsWith('../')) {
+        i.path = i.full.slice(props.session.meta.cwd.length + 1)
+      }
+
+      inWorkspace.push(i)
+    }
+    else if (i.full.includes('node_modules')) {
+      inNodeModules.push({
+        full: i.full,
+        path: i.full,
+      })
+    }
+    else if (i.full.startsWith('virtual:')) {
+      inVirtual.push(i)
+    }
+  })
+
+  return {
+    workspace: toTree(inWorkspace, 'Project Root'),
+    nodeModules: toTree(inNodeModules, 'Node Modules'),
+    virtual: toTree(inVirtual, 'Virtual Modules'),
+  }
+})
+</script>
+
+<template>
+  <div of-scroll max-h-screen pt-40 relative>
+    <div flex="~ col gap-2" p4>
+      <DisplayTreeNode
+        v-if="Object.keys(moduleTree.workspace.children).length"
+        :node="moduleTree.workspace"
+        p="l3"
+        icon="i-carbon-portfolio"
+        :link="true"
+      />
+      <DisplayTreeNode
+        v-if="Object.keys(moduleTree.nodeModules.children).length"
+        :node="moduleTree.nodeModules"
+        p="l3"
+        icon="i-carbon-categories"
+        :link="true"
+      />
+      <DisplayTreeNode
+        v-if="Object.keys(moduleTree.virtual.children).length"
+        :node="moduleTree.virtual"
+        p="l3"
+        icon="i-codicon:file-symlink-directory"
+        :link="true"
+      />
+    </div>
+  </div>
+</template>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { SessionContext } from '~~/shared/types'
+import type { ClientSettings } from '~/state/settings'
 import { useRoute, useRouter } from '#app/composables/router'
 import { clearUndefined, toArray } from '@antfu/utils'
 import { computedWithControl, debouncedWatch } from '@vueuse/core'
@@ -27,6 +28,23 @@ const filters = reactive<Filters>({
   file_types: (route.query.file_types ? toArray(route.query.file_types) : null) as string[] | null,
   node_modules: (route.query.node_modules ? toArray(route.query.node_modules) : null) as string[] | null,
 })
+const moduleViewTypes = [
+  {
+    label: 'List',
+    value: 'list',
+    icon: 'i-ph-list-duotone',
+  },
+  {
+    label: 'Graph',
+    value: 'graph',
+    icon: 'i-ph-graph-duotone',
+  },
+  {
+    label: 'Folder',
+    value: 'folder',
+    icon: 'i-ph-folder-duotone',
+  },
+] as const
 
 debouncedWatch(
   filters,
@@ -79,7 +97,7 @@ const filtered = computed(() => {
   if (filters.node_modules) {
     modules = modules.filter(mod => mod.path.moduleName && filters.node_modules!.includes(mod.path.moduleName))
   }
-  return modules.map(mod => mod.mod)
+  return modules.map(mod => ({ ...mod.mod, path: mod.path.path }))
 })
 
 function isFileTypeSelected(type: string) {
@@ -119,11 +137,11 @@ const searched = computed(() => {
     .map(r => r.item)
 })
 
-function toggleDisplay() {
+function toggleDisplay(type: ClientSettings['flowModuleGraphView']) {
   if (route.query.module) {
     router.replace({ query: { ...route.query, module: undefined } })
   }
-  settings.value.flowModuleGraphView = settings.value.flowModuleGraphView === 'list' ? 'graph' : 'list'
+  settings.value.flowModuleGraphView = type
 }
 </script>
 
@@ -161,12 +179,14 @@ function toggleDisplay() {
       <div flex="~ gap-2 items-center" p2 border="t base">
         <span op50 pl2 text-sm>View as</span>
         <button
+          v-for="viewType of moduleViewTypes"
+          :key="viewType.value"
           btn-action
-          @click="toggleDisplay"
+          :class="settings.flowModuleGraphView === viewType.value ? 'bg-active' : 'grayscale op50'"
+          @click="toggleDisplay(viewType.value)"
         >
-          <div v-if="settings.flowModuleGraphView === 'graph'" i-ph-graph-duotone />
-          <div v-else i-ph-list-duotone />
-          {{ settings.flowModuleGraphView === 'list' ? 'List' : 'Graph' }}
+          <div :class="viewType.icon" />
+          {{ viewType.label }}
         </button>
       </div>
       <!-- TODO: should we add filters for node_modules? -->
@@ -184,11 +204,17 @@ function toggleDisplay() {
         </div>
       </div>
     </template>
-    <template v-else>
+    <template v-else-if="settings.flowModuleGraphView === 'graph'">
       <ModulesGraph
         :session="session"
         :modules="searched"
       />
     </template>
+    <template v-else>
+      <ModulesFolder
+        :session="session"
+        :modules="searched"
+      />
+    </template>
   </div>
 </template>

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

@@ -5,7 +5,7 @@ import { computed } from 'vue'
 export interface ClientSettings {
   codeviewerLineWrap: boolean
   codeviewerDiffPanelSize: number
-  flowModuleGraphView: 'list' | 'graph'
+  flowModuleGraphView: 'list' | 'graph' | 'folder'
   flowExpandResolveId: boolean
   flowExpandTransforms: boolean
   flowExpandLoads: boolean

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

@@ -1,7 +1,53 @@
+import type { ModuleDest, ModuleTreeNode } from '~~/shared/types'
+
 export function bytesToHumanSize(bytes: number, digits = 2) {
   const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
   const i = Math.floor(Math.log(bytes) / Math.log(1024))
   if (i === 0)
     return ['<1', 'K']
   return [(+(bytes / 1024 ** i).toFixed(digits)).toLocaleString(), sizes[i]]
 }
+
+export function toTree(modules: ModuleDest[], name: string) {
+  const node: ModuleTreeNode = { name, children: {}, items: [] }
+
+  function add(mod: ModuleDest, parts: string[], current = node) {
+    if (!mod)
+      return
+
+    if (parts.length <= 1) {
+      current.items.push(mod)
+      return
+    }
+
+    const first = parts.shift()!
+    if (!current.children[first])
+      current.children[first] = { name: first, children: {}, items: [] }
+    add(mod, parts, current.children[first])
+  }
+
+  modules.forEach((m) => {
+    const parts = m.path.split(/\//g).filter(Boolean)
+    add(m, parts)
+  })
+
+  function flat(node: ModuleTreeNode) {
+    if (!node)
+      return
+    const children = Object.values(node.children)
+    if (children.length === 1 && !node.items.length) {
+      const child = children[0]
+      node.name = node.name ? `${node.name}/${child.name}` : child.name
+      node.items = child.items
+      node.children = child.children
+      flat(node)
+    }
+    else {
+      children.forEach(flat)
+    }
+  }
+
+  Object.values(node.children).forEach(flat)
+
+  return node
+}

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

@@ -4,6 +4,7 @@ export type { ModuleImport }
 
 export interface ModuleListItem {
   id: string
+  path?: string
   fileType: string
   imports: ModuleImport[]
   importers: string[]
@@ -26,6 +27,16 @@ export interface ModuleInfo {
   assets: RolldownAssetInfo[]
 }
 
+export interface ModuleDest {
+  full: string
+  path: string
+}
+export interface ModuleTreeNode {
+  name?: string
+  children: Record<string, ModuleTreeNode>
+  items: ModuleDest[]
+}
+
 export interface RolldownResolveInfo {
   type: 'resolve'
   id: string

pnpm-lock.yaml

@@ -71,6 +71,7 @@ catalogs:
   icons:
     '@iconify-json/carbon': ^1.2.10
     '@iconify-json/catppuccin': ^1.2.11
+    '@iconify-json/codicon': ^1.2.24
     '@iconify-json/logos': ^1.2.4
     '@iconify-json/ph': ^1.2.2
     '@iconify-json/ri': ^1.2.5