fix(ComponentGraph): show global components in different color (#278)

nuxt · Jun 23, 2023 · 41a881d · 41a881d
1 parent 6899cbb
commit 41a881d
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git a/packages/devtools-kit/src/_types/options.ts b/packages/devtools-kit/src/_types/options.ts
@@ -102,6 +102,7 @@ export interface VSCodeTunnelOptions {
 export interface NuxtDevToolsUIOptions {
   componentsView: 'list' | 'graph'
   componentsGraphShowNodeModules: boolean
+  componentsGraphShowGlobalComponents: boolean
   componentsGraphShowPages: boolean
   componentsGraphShowLayouts: boolean
   componentsGraphShowWorkspace: boolean

diff --git a/packages/devtools/client/components/ComponentsGraph.vue b/packages/devtools/client/components/ComponentsGraph.vue
@@ -27,6 +27,7 @@ const relationships = useComponentsRelationships()
 
 const {
   componentsGraphShowNodeModules: showNodeModules,
+  componentsGraphShowGlobalComponents: showGlobalComponents,
   componentsGraphShowPages: showPages,
   componentsGraphShowLayouts: showLayouts,
   componentsGraphShowWorkspace: showWorkspace,
@@ -63,7 +64,9 @@ const data = computed<Data>(() => {
     const group = rel.id.includes('/node_modules/')
       ? 'lib'
       : component
-        ? 'user'
+        ? component.global
+          ? 'global'
+          : 'user'
         : layout
           ? 'layout'
           : page
@@ -78,6 +81,8 @@ const data = computed<Data>(() => {
       return null
     if (!showWorkspace.value && group === 'user' && config.value && !rel.id.startsWith(config.value.rootDir))
       return null
+    if (!showGlobalComponents.value && group === 'global')
+      return null
 
     const shape = group === 'layout'
       ? 'hexagon'
@@ -196,6 +201,9 @@ function setFilter() {
       <NCheckbox v-model="showNodeModules" n="primary sm">
         <span op75>Show node_modules</span>
       </NCheckbox>
+      <NCheckbox v-model="showGlobalComponents" n="primary sm">
+        <span op75>Show global components</span>
+      </NCheckbox>
       <button v-if="selectedFilter" flex="~ gap-1" items-center rounded-full bg-gray:20 py1 pl3 pr2 text-xs op50 hover:op100 @click="selectedFilter = undefined">
         Clear filter <div i-carbon-close />
       </button>
@@ -212,6 +220,10 @@ function setFilter() {
         <div op50>
           Component
         </div>
+        <div h-3 w-3 rounded-full bg-hex-97c2fc />
+        <div op50>
+          Global Component
+        </div>
         <div h-3 w-3 bg-hex-42b2b8 />
         <div op50>
           Page

diff --git a/packages/devtools/src/server-rpc/ui-options.ts b/packages/devtools/src/server-rpc/ui-options.ts
@@ -8,6 +8,7 @@ import type { NuxtDevToolsUIOptions, NuxtDevtoolsServerContext, ServerFunctions
 const defaults: NuxtDevToolsUIOptions = {
   componentsView: 'list',
   componentsGraphShowNodeModules: false,
+  componentsGraphShowGlobalComponents: true,
   componentsGraphShowPages: false,
   componentsGraphShowLayouts: false,
   componentsGraphShowWorkspace: true,