feat(components): show dependencies and dependents in component details

related #358
nuxt · Aug 10, 2023 · 7dbc3d1 · 7dbc3d1
1 parent 143b7fb
commit 7dbc3d1
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 15 deletions.
diff --git a/packages/devtools/client/components/ComponentDetails.vue b/packages/devtools/client/components/ComponentDetails.vue
@@ -4,6 +4,8 @@ import { pascalCase } from 'scule'
 
 const props = defineProps<{
   component: Component
+  dependencies?: string[]
+  dependents?: string[]
 }>()
 
 // @ts-expect-error types
@@ -15,7 +17,7 @@ const copy = useCopy()
 
 <template>
   <div flex="~ col gap1" items-start of-hidden>
-    <div flex="~ gap2">
+    <div flex="~ gap2" px3>
       <ComponentName :component="component" />
       <NIconButton title="Copy name" flex-none icon="carbon-copy" @click="copy(`<${name}></${name}>`)" />
       <Badge
@@ -25,13 +27,38 @@ const copy = useCopy()
         v-text="'runtime'"
       />
     </div>
-    <div>
+    <div px3 pb2>
       <FilepathItem
         v-if="filePath"
         :filepath="filePath"
-        w-full text-sm op25 group-hover:op75
+        w-full text-sm op40 group-hover:op75
       />
     </div>
+
+    <div v-if="dependents" border="t base" max-h-60 w-full of-auto px3 py3>
+      <div text-sm>
+        <strong text-primary>{{ dependents.length }}</strong><span op50> references</span>
+      </div>
+      <div v-if="dependents.length" flex="~ col gap-2" items-start pt3 text-sm op75>
+        <FilepathItem
+          v-for="id of dependents" :key="id"
+          :filepath="id"
+        />
+      </div>
+    </div>
+
+    <div v-if="dependencies" border="t base" max-h-60 w-full of-auto px3 py3>
+      <div text-sm>
+        <strong text-primary>{{ dependencies.length }}</strong><span op50> dependencies</span>
+      </div>
+      <div v-if="dependencies.length" flex="~ col gap-2" items-start pt3 text-sm op75>
+        <FilepathItem
+          v-for="id of dependencies" :key="id"
+          :filepath="id"
+        />
+      </div>
+    </div>
+
     <slot />
   </div>
 </template>
diff --git a/packages/devtools/client/components/ComponentItem.vue b/packages/devtools/client/components/ComponentItem.vue
@@ -1,17 +1,28 @@
 <script setup lang="ts">
 import type { Component } from 'nuxt/schema'
+import type { ComponentRelationship } from '../../types'
 
 const props = defineProps<{
   component: Component
+  relationships?: ComponentRelationship[] | null
 }>()
 
+const dependencies = computed(() => {
+  const deps = props.relationships?.find(i => i.id === props.component.filePath)?.deps
+  return deps?.map(i => props.relationships?.find(j => j.id === i)?.id).filter(Boolean) as string[]
+})
+
+const dependents = computed(() => {
+  const deps = props.relationships?.filter(i => i.deps.includes(props.component.filePath))
+  return deps?.map(i => props.relationships?.find(j => j.id === i.id)?.id).filter(Boolean) as string[]
+})
+
 // @ts-expect-error types
 const filePath = computed(() => props.component.filePath || props.component.file || props.component.__file || '')
 </script>
 
 <template>
   <div
-
     hover="bg-active"
     class="group"
     flex="~ gap2"
@@ -22,9 +33,17 @@ const filePath = computed(() => props.component.filePath || props.component.file
         <ComponentName :component="component" />
       </button>
       <template #popper>
-        <ComponentDetails :component="component" p4 />
+        <ComponentDetails
+          :component="component"
+          :dependencies="dependencies"
+          :dependents="dependents"
+          w-100 pt4
+        />
       </template>
     </VDropdown>
+    <sup v-if="dependents?.length" ml--1 op50>
+      {{ dependents?.length }}
+    </sup>
     <Badge
       v-if="component.global"
       bg-green-400:10 text-green-400

diff --git a/packages/devtools/client/components/ComponentsGraph.vue b/packages/devtools/client/components/ComponentsGraph.vue
@@ -6,6 +6,7 @@ import type { ComponentRelationship } from '~/../src/types'
 
 const props = defineProps<{
   components: Component[]
+  relationships?: ComponentRelationship[] | null
 }>()
 
 const container = ref<HTMLElement>()
@@ -23,7 +24,6 @@ const selected = ref<{
 const pages = useServerPages()
 const config = useServerConfig()
 const layouts = useLayouts()
-const relationships = useComponentsRelationships()
 
 const {
   componentsGraphShowNodeModules: showNodeModules,
@@ -36,10 +36,9 @@ const {
 const selectedFilter = ref<ComponentRelationship>()
 
 const entries = computed(() => {
-  const relations = (relationships.value || [])
+  const relations = (props.relationships || [])
   if (selectedFilter.value) {
     const set = new Set<ComponentRelationship>()
-    relations.find(i => i.id === selected.value?.id)
     function addToSet(rel?: ComponentRelationship) {
       if (!rel || set.has(rel))
         return
@@ -128,6 +127,20 @@ const data = computed<Data>(() => {
   }
 })
 
+const selectedDependencies = computed(() => {
+  if (!selected.value?.component)
+    return []
+  const deps = props.relationships?.find(i => i.id === selected.value?.component?.filePath)?.deps
+  return deps?.map(i => props.relationships?.find(j => j.id === i)?.id).filter(Boolean) as string[]
+})
+
+const selectedDependents = computed(() => {
+  if (!selected.value?.component)
+    return []
+  const deps = props.relationships?.filter(i => i.deps.includes(selected.value!.component!.filePath!))
+  return deps?.map(i => props.relationships?.find(j => j.id === i.id)?.id).filter(Boolean) as string[]
+})
+
 onMounted(() => {
   const options: Options = {
     nodes: {
@@ -252,9 +265,13 @@ function setFilter() {
       w-80
       @close="selected = undefined"
     >
-      <div v-if="selected && selected.component" p4 pr10 pt4 flex="~ col gap4">
-        <ComponentDetails :component="selected.component" />
-        <div>
+      <div v-if="selected && selected.component" py4 pt4 flex="~ col">
+        <ComponentDetails
+          :component="selected.component"
+          :dependencies="selectedDependencies"
+          :dependents="selectedDependents"
+        />
+        <div border="t base" p4>
           <NButton n="primary solid" @click="setFilter()">
             Filter to this component
           </NButton>

diff --git a/packages/devtools/client/components/ComponentsList.vue b/packages/devtools/client/components/ComponentsList.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import type { Component } from 'nuxt/schema'
 import Fuse from 'fuse.js'
+import type { ComponentRelationship } from '../../types'
 
 const props = defineProps<{
   components: Component[]
+  relationships?: ComponentRelationship[] | null
 }>()
 
 const search = ref('')
@@ -84,7 +86,12 @@ const filtered = computed(() => {
     :open="filtered.user.length <= DETAILS_MAX_ITEMS"
     :description="`Total components: ${filtered.count.user}`"
   >
-    <ComponentItem v-for="c of filtered.user" :key="c.filePath" :component="c" />
+    <ComponentItem
+      v-for="c of filtered.user"
+      :key="c.filePath"
+      :component="c"
+      :relationships="relationships"
+    />
   </NSectionBlock>
   <NSectionBlock
     v-if="filtered.runtime.length"
@@ -93,15 +100,24 @@ const filtered = computed(() => {
     text="Runtime components"
     :description="`Total components: ${filtered.count.runtime}`"
   >
-    <ComponentItem v-for="c of filtered.runtime" :key="c.filePath" :component="c" />
+    <ComponentItem
+      v-for="c of filtered.runtime" :key="c.filePath"
+      :component="c"
+      :relationships="relationships"
+    />
   </NSectionBlock>
   <NSectionBlock
     v-if="filtered.builtin.length"
     icon="simple-icons-nuxtdotjs"
     text="Built-in components"
     :description="`Total components: ${filtered.count.builtin}`"
   >
-    <ComponentItem v-for="c of filtered.builtin" :key="c.filePath" :component="c" />
+    <ComponentItem
+      v-for="c of filtered.builtin"
+      :key="c.filePath"
+      :component="c"
+      :relationships="relationships"
+    />
   </NSectionBlock>
   <NSectionBlock
     v-if="filtered.lib.size"
@@ -113,7 +129,12 @@ const filtered = computed(() => {
     <div v-for="[key, value] of filtered.lib.entries()" :key="key" ml-2>
       <NIconTitle :text="`${key} (${value.length})`" py1 op50 />
       <div pl4>
-        <ComponentItem v-for="c of value" :key="c.filePath" :component="c" />
+        <ComponentItem
+          v-for="c of value"
+          :key="c.filePath"
+          :component="c"
+          :relationships="relationships"
+        />
       </div>
     </div>
   </NSectionBlock>

diff --git a/packages/devtools/client/pages/modules/components.vue b/packages/devtools/client/pages/modules/components.vue
@@ -10,6 +10,7 @@ definePageMeta({
 
 const client = useClient()
 const components = useComponents()
+const relationships = useComponentsRelationships()
 
 const { componentsView: view } = useDevToolsUIOptions()
 
@@ -29,6 +30,7 @@ function toggleView() {
     <component
       :is="view === 'list' ? ComponentsList : ComponentsGraph"
       :components="components"
+      :relationships="relationships"
     >
       <div flex-none flex="~ gap3">
         <NIconButton