From e6e741a179f3b463e2b8a6777b1f339f311e9578 Mon Sep 17 00:00:00 2001
From: arashsheyda <sheidaeearash1999@gmail.com>
Date: Thu, 11 May 2023 01:49:09 +0300
Subject: [PATCH 1/5] fix: uninstall modules

---
 packages/devtools-kit/src/_types/rpc.ts       |  1 +
 .../client/components/ModuleInstallList.vue   | 31 +++++++----
 packages/devtools/client/composables/state.ts | 38 ++++++++++++-
 .../devtools/client/pages/modules/modules.vue | 28 +---------
 packages/devtools/src/server-rpc/npm.ts       | 53 ++++++++++++++++++-
 5 files changed, 112 insertions(+), 39 deletions(-)

diff --git a/packages/devtools-kit/src/_types/rpc.ts b/packages/devtools-kit/src/_types/rpc.ts
index 3c9a31103..9b12da3aa 100644
--- a/packages/devtools-kit/src/_types/rpc.ts
+++ b/packages/devtools-kit/src/_types/rpc.ts
@@ -50,6 +50,7 @@ export interface ServerFunctions {
   openInEditor(filepath: string): Promise<boolean>
   restartNuxt(hard?: boolean): Promise<void>
   installNuxtModule(name: string, dry?: boolean): Promise<InstallModuleReturn>
+  unInstallNuxtModule(name: string, dry?: boolean): Promise<InstallModuleReturn>
 }
 
 export interface ClientFunctions {
diff --git a/packages/devtools/client/components/ModuleInstallList.vue b/packages/devtools/client/components/ModuleInstallList.vue
index 58e13df1e..eeb282ae9 100644
--- a/packages/devtools/client/components/ModuleInstallList.vue
+++ b/packages/devtools/client/components/ModuleInstallList.vue
@@ -4,9 +4,16 @@ import { RecycleScroller } from 'vue-virtual-scroller'
 import type { InstallModuleReturn, ModuleStaticInfo } from '@nuxt/devtools-kit/types'
 import Fuse from 'fuse.js'
 
-const Dialog = createTemplatePromise<boolean, [info: ModuleStaticInfo, result: InstallModuleReturn]>()
+const Dialog = createTemplatePromise<boolean, [info: ModuleStaticInfo, result: InstallModuleReturn, type: 'install' | 'uninstall']>()
 const collection = await useModulesInfo()
-const nuxt3only = collection.filter(i => i.compatibility.nuxt.includes('^3'))
+const { packageModules } = useModules()
+const nuxt3only = collection.map((module) => {
+  const installed = packageModules.value.find(m => m.entryPath.includes(module.name))
+  return {
+    ...module,
+    installed,
+  }
+})
 
 const config = useServerConfig()
 const router = useRouter()
@@ -26,17 +33,18 @@ const items = computed(() => {
   return fuse.value.search(search.value).map(r => r.item)
 })
 
-async function install(item: ModuleStaticInfo) {
-  const result = await rpc.installNuxtModule(item.npm, true)
+async function action(item: ModuleStaticInfo, type: 'install' | 'uninstall') {
+  const method = type === 'install' ? rpc.installNuxtModule : rpc.unInstallNuxtModule
+  const result = await method(item.npm, true)
 
   if (!result.commands)
     return
 
-  if (!await Dialog.start(item, result))
+  if (!await Dialog.start(item, result, type))
     return
 
   router.push(`/modules/terminals?id=${encodeURIComponent(result.processId)}`)
-  await rpc.installNuxtModule(item.npm, false)
+  await method(item.npm, false)
 }
 
 const openInEditor = useOpenInEditor()
@@ -71,8 +79,11 @@ const openInEditor = useOpenInEditor()
           role="button"
           :info="item"
           mb2 h-full class="hover:bg-active!"
+          :class="{
+            'text-green border-green': item.installed,
+          }"
           :compact="true"
-          @click="install(item)"
+          @click="action(item, item.installed ? 'uninstall' : 'install')"
         />
       </RecycleScroller>
     </div>
@@ -83,7 +94,7 @@ const openInEditor = useOpenInEditor()
       <ModuleItemBase :mod="{}" :info="args[0]" border="none" w-150 n-panel-grids />
       <div flex="~ col gap-2" w-150 p4 border="t base">
         <h2 text-xl>
-          Installing <span capitalize text-primary>{{ args[0].name }}</span> module?
+          {{ args[2] }} <span capitalize :class="args[2] === 'install' ? 'text-primary' : 'text-red'">{{ args[0].name }}</span> module?
         </h2>
 
         <p op50>
@@ -114,8 +125,8 @@ const openInEditor = useOpenInEditor()
           <NButton @click="resolve(false)">
             Cancel
           </NButton>
-          <NButton n="solid primary" @click="resolve(true)">
-            Install
+          <NButton n="solid primary" capitalize @click="resolve(true)">
+            {{ args[2] }}
           </NButton>
         </div>
       </div>
diff --git a/packages/devtools/client/composables/state.ts b/packages/devtools/client/composables/state.ts
index 1c1ac9ce9..67a43eae4 100644
--- a/packages/devtools/client/composables/state.ts
+++ b/packages/devtools/client/composables/state.ts
@@ -5,14 +5,50 @@ import { objectPick } from '@antfu/utils'
 import type { HookInfo, ModuleBuiltinTab, ModuleCustomTab, ModuleStaticInfo, RouteInfo, TabCategory } from '../../src/types'
 
 let modules: Promise<ModuleStaticInfo[]> | undefined
+const ignores = [
+  'pages',
+  'meta',
+  'components',
+  'imports',
+  'nuxt-config-schema',
+  '@nuxt/devtools',
+  '@nuxt/telemetry',
+]
 
 export async function useModulesInfo() {
   if (modules)
     return modules
-  modules = $fetch('https://cdn.jsdelivr.net/npm/@nuxt/modules@latest/modules.json')
+  modules = $fetch('https://cdn.jsdelivr.net/npm/@nuxt/modules@latest/modules.json').then((res) => {
+    return res.filter((m: any) => !ignores.includes(m.npm))
+  })
   return modules
 }
 
+export function useModules() {
+  const config = useServerConfig()
+  const modules = computed(() => config.value?._installedModules || [])
+  const packageModules = ref<any[]>([])
+  const userModules = ref<any[]>([])
+
+  watchEffect(() => {
+    packageModules.value.length = 0
+    userModules.value.length = 0
+    for (const m of modules.value) {
+      if (ignores.includes(m.meta?.name))
+        continue
+      if (m.entryPath && isNodeModulePath(m.entryPath))
+        packageModules.value.push(m)
+      else
+        userModules.value.push(m)
+    }
+  })
+
+  return {
+    packageModules,
+    userModules,
+  }
+}
+
 export function useComponents() {
   const client = useClient()
   const serverComponents = useAsyncState('getComponents', () => rpc.getComponents())
diff --git a/packages/devtools/client/pages/modules/modules.vue b/packages/devtools/client/pages/modules/modules.vue
index c0be111c0..2bf1ab166 100644
--- a/packages/devtools/client/pages/modules/modules.vue
+++ b/packages/devtools/client/pages/modules/modules.vue
@@ -5,35 +5,9 @@ definePageMeta({
   order: 4,
 })
 
-const ignores = [
-  'pages',
-  'meta',
-  'components',
-  'imports',
-  'nuxt-config-schema',
-  '@nuxt/devtools',
-  '@nuxt/telemetry',
-]
-
-const config = useServerConfig()
-const modules = computed(() => config.value?._installedModules || [])
-const packageModules = ref<any[]>([])
-const userModules = ref<any[]>([])
 const installModuleOpen = ref(false)
 const { showExperimentalFeatures } = useDevToolsSettings()
-
-watchEffect(() => {
-  packageModules.value.length = 0
-  userModules.value.length = 0
-  for (const m of modules.value) {
-    if (ignores.includes(m.meta?.name))
-      continue
-    if (m.entryPath && isNodeModulePath(m.entryPath))
-      packageModules.value.push(m)
-    else
-      userModules.value.push(m)
-  }
-})
+const { packageModules, userModules } = useModules()
 </script>
 
 <template>
diff --git a/packages/devtools/src/server-rpc/npm.ts b/packages/devtools/src/server-rpc/npm.ts
index 743875ed6..5247e9a9d 100644
--- a/packages/devtools/src/server-rpc/npm.ts
+++ b/packages/devtools/src/server-rpc/npm.ts
@@ -3,7 +3,7 @@ import { startSubprocess } from '@nuxt/devtools-kit'
 import isInstalledGlobally from 'is-installed-globally'
 import { detectPackageManager } from 'nypm'
 import { parseModule } from 'magicast'
-import { addNuxtModule } from 'magicast/helpers'
+import { addNuxtModule, getDefaultExportOptions } from 'magicast/helpers'
 import { checkForUpdateOf } from '../npm'
 import type { NpmCommandOptions, NpmCommandType, NuxtDevtoolsServerContext, PackageManagerName, PackageUpdateInfo, ServerFunctions } from '../types'
 
@@ -26,6 +26,9 @@ export function setupNpmRPC({ nuxt }: NuxtDevtoolsServerContext) {
     // TODO: smartly detect dev/global installs as default
     if (command === 'install' || command === 'update')
       return [agent, agent === 'npm' ? 'install' : 'add', `${packageName}@latest`, dev ? '-D' : '', global ? '-g' : '', '--ignore-scripts'].filter(Boolean)
+
+    if (command === 'uninstall')
+      return [agent, agent === 'npm' ? 'uninstall' : 'remove', packageName, global ? '-g' : ''].filter(Boolean)
   }
 
   async function runNpmCommand(command: NpmCommandType, packageName: string, options: NpmCommandOptions = {}) {
@@ -92,6 +95,54 @@ export function setupNpmRPC({ nuxt }: NuxtDevtoolsServerContext) {
         await fs.writeFile(filepath, generated, 'utf-8')
       }
 
+      return {
+        configOriginal: source,
+        configGenerated: generated,
+        commands,
+        processId,
+      }
+    },
+    async unInstallNuxtModule(name: string, dry = true) {
+      const commands = (await getNpmCommand('uninstall', name))!
+
+      const filepath = nuxt.options._nuxtConfigFile
+      const source = await fs.readFile(filepath, 'utf-8')
+      const mod = parseModule(source, { sourceFileName: filepath })
+
+      // TODO: remove module from config
+      // removeNuxtModule(mod, name)
+      const config = getDefaultExportOptions(mod)
+      config.modules ||= []
+      if (config.modules.includes(name)) {
+        Object.values(config.modules).forEach((value, index) => {
+          if (value === name)
+            config.modules.splice(index - 1, 1)
+        })
+      }
+
+      const generated = mod.generate().code
+
+      const processId = `nuxt:remove-module:${name}`
+
+      if (!dry) {
+        const process = startSubprocess({
+          command: commands[0],
+          args: commands.slice(1),
+        }, {
+          id: processId,
+          name: `Uninstall ${name}`,
+          icon: 'carbon:new-tab',
+          restartable: false,
+        })
+
+        await process.getProcess()
+
+        if (process.getProcess().exitCode !== 0)
+          throw new Error('Failed to uninstall module')
+
+        await fs.writeFile(filepath, generated, 'utf-8')
+      }
+
       return {
         configOriginal: source,
         configGenerated: generated,

From deaebfa1ad2e29b264a5c07b65adfed432e5183d Mon Sep 17 00:00:00 2001
From: arashsheyda <sheidaeearash1999@gmail.com>
Date: Thu, 11 May 2023 14:22:38 +0300
Subject: [PATCH 2/5] fix: improve uninstall

---
 packages/devtools-kit/src/_types/rpc.ts       |  2 +-
 .../client/components/ModuleActionDialog.vue  | 51 ++++++++++++
 .../client/components/ModuleInstallList.vue   | 77 +------------------
 .../devtools/client/components/ModuleItem.vue | 23 ++++++
 .../client/components/ModuleItemBase.vue      | 10 ++-
 packages/devtools/client/composables/state.ts | 21 ++++-
 .../devtools/client/pages/modules/modules.vue |  1 +
 packages/devtools/src/server-rpc/npm.ts       |  2 +-
 8 files changed, 107 insertions(+), 80 deletions(-)
 create mode 100644 packages/devtools/client/components/ModuleActionDialog.vue

diff --git a/packages/devtools-kit/src/_types/rpc.ts b/packages/devtools-kit/src/_types/rpc.ts
index 9b12da3aa..784edf49c 100644
--- a/packages/devtools-kit/src/_types/rpc.ts
+++ b/packages/devtools-kit/src/_types/rpc.ts
@@ -50,7 +50,7 @@ export interface ServerFunctions {
   openInEditor(filepath: string): Promise<boolean>
   restartNuxt(hard?: boolean): Promise<void>
   installNuxtModule(name: string, dry?: boolean): Promise<InstallModuleReturn>
-  unInstallNuxtModule(name: string, dry?: boolean): Promise<InstallModuleReturn>
+  uninstallNuxtModule(name: string, dry?: boolean): Promise<InstallModuleReturn>
 }
 
 export interface ClientFunctions {
diff --git a/packages/devtools/client/components/ModuleActionDialog.vue b/packages/devtools/client/components/ModuleActionDialog.vue
new file mode 100644
index 000000000..a15e71529
--- /dev/null
+++ b/packages/devtools/client/components/ModuleActionDialog.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { ModuleDialog } from '../composables/state'
+
+const openInEditor = useOpenInEditor()
+</script>
+
+<template>
+  <ModuleDialog v-slot="{ resolve, args }">
+    <NDialog :model-value="true" @close="resolve(false)">
+      <ModuleItemBase :mod="{}" :info="args[0]" border="none" w-150 n-panel-grids />
+      <div flex="~ col gap-2" w-150 p4 border="t base">
+        <h2 text-xl>
+          {{ args[2] }} <span capitalize :class="args[2] === 'install' ? 'text-primary' : 'text-red'">{{ args[0].name }}</span> module?
+        </h2>
+
+        <p op50>
+          Following command will be executed in your terminal:
+        </p>
+        <NCodeBlock :code="args[1].commands.join(' ')" lang="bash" px4 py2 border="~ base rounded" :lines="false" />
+
+        <p op50>
+          Then your <NLink role="button" n="primary" @click="openInEditor(config?._nuxtConfigFile)" v-text="'Nuxt config'" /> will be updated as:
+        </p>
+
+        <CodeDiff
+          :from="args[1].configOriginal"
+          :to="args[1].configGenerated"
+          max-h-80 of-auto py2 border="~ base rounded"
+          lang="ts"
+        />
+
+        <p>
+          <span op50>After module installed, Nuxt will </span><span text-orange>restart automatically</span>.
+        </p>
+
+        <div flex="~ gap-3" mt2 justify-end>
+          <NTip n="sm purple" flex-auto icon="carbon-chemistry">
+            Experimental. Make sure to backup your project.
+          </NTip>
+
+          <NButton @click="resolve(false)">
+            Cancel
+          </NButton>
+          <NButton n="solid primary" capitalize @click="resolve(true)">
+            {{ args[2] }}
+          </NButton>
+        </div>
+      </div>
+    </NDialog>
+  </ModuleDialog>
+</template>
diff --git a/packages/devtools/client/components/ModuleInstallList.vue b/packages/devtools/client/components/ModuleInstallList.vue
index eeb282ae9..6c19d0bdb 100644
--- a/packages/devtools/client/components/ModuleInstallList.vue
+++ b/packages/devtools/client/components/ModuleInstallList.vue
@@ -1,22 +1,12 @@
 <script setup lang="ts">
 // @ts-expect-error missing types
 import { RecycleScroller } from 'vue-virtual-scroller'
-import type { InstallModuleReturn, ModuleStaticInfo } from '@nuxt/devtools-kit/types'
 import Fuse from 'fuse.js'
 
-const Dialog = createTemplatePromise<boolean, [info: ModuleStaticInfo, result: InstallModuleReturn, type: 'install' | 'uninstall']>()
 const collection = await useModulesInfo()
 const { packageModules } = useModules()
-const nuxt3only = collection.map((module) => {
-  const installed = packageModules.value.find(m => m.entryPath.includes(module.name))
-  return {
-    ...module,
-    installed,
-  }
-})
+const nuxt3only = collection.filter(module => module.compatibility.nuxt.includes('^3') && !packageModules.value.find(i => i.entryPath.includes(module.npm)))
 
-const config = useServerConfig()
-const router = useRouter()
 const search = ref('')
 const fuse = computed(() => new Fuse(nuxt3only, {
   keys: [
@@ -32,22 +22,6 @@ const items = computed(() => {
     return nuxt3only
   return fuse.value.search(search.value).map(r => r.item)
 })
-
-async function action(item: ModuleStaticInfo, type: 'install' | 'uninstall') {
-  const method = type === 'install' ? rpc.installNuxtModule : rpc.unInstallNuxtModule
-  const result = await method(item.npm, true)
-
-  if (!result.commands)
-    return
-
-  if (!await Dialog.start(item, result, type))
-    return
-
-  router.push(`/modules/terminals?id=${encodeURIComponent(result.processId)}`)
-  await method(item.npm, false)
-}
-
-const openInEditor = useOpenInEditor()
 </script>
 
 <template>
@@ -79,57 +53,10 @@ const openInEditor = useOpenInEditor()
           role="button"
           :info="item"
           mb2 h-full class="hover:bg-active!"
-          :class="{
-            'text-green border-green': item.installed,
-          }"
           :compact="true"
-          @click="action(item, item.installed ? 'uninstall' : 'install')"
+          @click="useModuleAction(item, 'install')"
         />
       </RecycleScroller>
     </div>
   </div>
-
-  <Dialog v-slot="{ resolve, args }">
-    <NDialog :model-value="true" @close="resolve(false)">
-      <ModuleItemBase :mod="{}" :info="args[0]" border="none" w-150 n-panel-grids />
-      <div flex="~ col gap-2" w-150 p4 border="t base">
-        <h2 text-xl>
-          {{ args[2] }} <span capitalize :class="args[2] === 'install' ? 'text-primary' : 'text-red'">{{ args[0].name }}</span> module?
-        </h2>
-
-        <p op50>
-          Following command will be executed in your terminal:
-        </p>
-        <NCodeBlock :code="args[1].commands.join(' ')" lang="bash" px4 py2 border="~ base rounded" :lines="false" />
-
-        <p op50>
-          Then your <NLink role="button" n="primary" @click="openInEditor(config?._nuxtConfigFile)" v-text="'Nuxt config'" /> will be updated as:
-        </p>
-
-        <CodeDiff
-          :from="args[1].configOriginal"
-          :to="args[1].configGenerated"
-          max-h-80 of-auto py2 border="~ base rounded"
-          lang="ts"
-        />
-
-        <p>
-          <span op50>After module installed, Nuxt will </span><span text-orange>restart automatically</span>.
-        </p>
-
-        <div flex="~ gap-3" mt2 justify-end>
-          <NTip n="sm purple" flex-auto icon="carbon-chemistry">
-            Experimental. Make sure to backup your project.
-          </NTip>
-
-          <NButton @click="resolve(false)">
-            Cancel
-          </NButton>
-          <NButton n="solid primary" capitalize @click="resolve(true)">
-            {{ args[2] }}
-          </NButton>
-        </div>
-      </div>
-    </NDialog>
-  </Dialog>
 </template>
diff --git a/packages/devtools/client/components/ModuleItem.vue b/packages/devtools/client/components/ModuleItem.vue
index 1d8447cc3..b6ae76794 100644
--- a/packages/devtools/client/components/ModuleItem.vue
+++ b/packages/devtools/client/components/ModuleItem.vue
@@ -26,6 +26,16 @@ const data = computed(() => ({
   ...props.mod?.meta,
   ...staticInfo.value,
 }))
+
+const showDropdown = ref(false)
+
+const uninstallable = computed(() => {
+  if (staticInfo.value && (props.mod.entryPath ? isPackageName(props.mod.entryPath) : false)) {
+    // TODO: detect if module is from layer
+    return true
+  }
+  return false
+})
 </script>
 
 <template>
@@ -77,5 +87,18 @@ const data = computed(() => ({
         </template>
       </NpmVersionCheck>
     </template>
+    <template v-if="uninstallable" #actions>
+      <NDropdown v-model="showDropdown" n="sm green">
+        <template #trigger>
+          <NButton icon="carbon-chevron-down" @click="showDropdown = !showDropdown">
+            Installed
+          </NButton>
+        </template>
+        <NButton icon="carbon-trash-can" n="red" @click="useModuleAction(staticInfo!, 'uninstall')">
+          Uninstall
+        </NButton>
+        <!-- TODO: maybe add disable module ? -->
+      </NDropdown>
+    </template>
   </ModuleItemBase>
 </template>
diff --git a/packages/devtools/client/components/ModuleItemBase.vue b/packages/devtools/client/components/ModuleItemBase.vue
index d11962406..2e11b135b 100644
--- a/packages/devtools/client/components/ModuleItemBase.vue
+++ b/packages/devtools/client/components/ModuleItemBase.vue
@@ -39,7 +39,7 @@ const openInEditor = useOpenInEditor()
   <NCard p4 flex="~ gap2">
     <div flex="~ col gap2" flex-auto of-hidden px1>
       <div
-        of-hidden text-ellipsis ws-nowrap text-lg
+        flex items-center of-hidden text-ellipsis ws-nowrap text-lg
       >
         <NuxtLink
           v-if="isPackageModule"
@@ -97,7 +97,7 @@ const openInEditor = useOpenInEditor()
 
       <slot name="items" />
     </div>
-    <div flex="~ col">
+    <div flex="~ col" items-end>
       <div
         v-if="data.icon || isPackageModule"
 
@@ -117,6 +117,12 @@ const openInEditor = useOpenInEditor()
           <img :src="avatarBase + m.github" h-6 w-6 rounded-full>
         </NuxtLink>
       </div>
+      <template v-if="$slots.actions">
+        <div flex-auto />
+        <div flex justify-end>
+          <slot name="actions" />
+        </div>
+      </template>
     </div>
   </NCard>
 </template>
diff --git a/packages/devtools/client/composables/state.ts b/packages/devtools/client/composables/state.ts
index 67a43eae4..ec4dd970d 100644
--- a/packages/devtools/client/composables/state.ts
+++ b/packages/devtools/client/composables/state.ts
@@ -2,7 +2,7 @@ import type { Component } from 'nuxt/schema'
 import { $fetch } from 'ofetch'
 import type { Ref } from 'vue'
 import { objectPick } from '@antfu/utils'
-import type { HookInfo, ModuleBuiltinTab, ModuleCustomTab, ModuleStaticInfo, RouteInfo, TabCategory } from '../../src/types'
+import type { HookInfo, InstallModuleReturn, ModuleBuiltinTab, ModuleCustomTab, ModuleStaticInfo, RouteInfo, TabCategory } from '../../src/types'
 
 let modules: Promise<ModuleStaticInfo[]> | undefined
 const ignores = [
@@ -49,6 +49,25 @@ export function useModules() {
   }
 }
 
+type ModuleActionType = 'install' | 'uninstall'
+
+export const ModuleDialog = createTemplatePromise<boolean, [info: ModuleStaticInfo, result: InstallModuleReturn, type: ModuleActionType]>()
+
+export async function useModuleAction(item: ModuleStaticInfo, type: ModuleActionType) {
+  const router = useRouter()
+  const method = type === 'install' ? rpc.installNuxtModule : rpc.uninstallNuxtModule
+  const result = await method(item.npm, true)
+
+  if (!result.commands)
+    return
+
+  if (!await ModuleDialog.start(item, result, type))
+    return
+
+  router.push(`/modules/terminals?id=${encodeURIComponent(result.processId)}`)
+  await method(item.npm, false)
+}
+
 export function useComponents() {
   const client = useClient()
   const serverComponents = useAsyncState('getComponents', () => rpc.getComponents())
diff --git a/packages/devtools/client/pages/modules/modules.vue b/packages/devtools/client/pages/modules/modules.vue
index 2bf1ab166..bd994d425 100644
--- a/packages/devtools/client/pages/modules/modules.vue
+++ b/packages/devtools/client/pages/modules/modules.vue
@@ -80,6 +80,7 @@ const { packageModules, userModules } = useModules()
         </div>
       </Transition>
     </template>
+    <ModuleActionDialog />
   </div>
 
   <HelpFab>
diff --git a/packages/devtools/src/server-rpc/npm.ts b/packages/devtools/src/server-rpc/npm.ts
index 5247e9a9d..d68d7ce1c 100644
--- a/packages/devtools/src/server-rpc/npm.ts
+++ b/packages/devtools/src/server-rpc/npm.ts
@@ -102,7 +102,7 @@ export function setupNpmRPC({ nuxt }: NuxtDevtoolsServerContext) {
         processId,
       }
     },
-    async unInstallNuxtModule(name: string, dry = true) {
+    async uninstallNuxtModule(name: string, dry = true) {
       const commands = (await getNpmCommand('uninstall', name))!
 
       const filepath = nuxt.options._nuxtConfigFile

From 241b5d4b2ec77e677f3713ef301b9807f3e0b800 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 11 May 2023 20:38:41 +0200
Subject: [PATCH 3/5] chore: update

---
 .../devtools-kit/src/_types/integrations.ts   | 10 +++
 .../src/components/NDropdown.vue              |  2 +-
 .../client/components/ModuleActionDialog.vue  |  5 +-
 .../client/components/ModuleInstallList.vue   | 17 ++---
 .../devtools/client/components/ModuleItem.vue | 30 +--------
 .../client/components/ModuleItemBase.vue      |  5 +-
 .../client/components/ModuleItemInstall.vue   | 36 ++++++++++
 packages/devtools/client/composables/state.ts | 67 ++++++++++---------
 .../devtools/client/pages/modules/modules.vue |  5 +-
 9 files changed, 99 insertions(+), 78 deletions(-)
 create mode 100644 packages/devtools/client/components/ModuleItemInstall.vue

diff --git a/packages/devtools-kit/src/_types/integrations.ts b/packages/devtools-kit/src/_types/integrations.ts
index 5d131a673..9e0609cb3 100644
--- a/packages/devtools-kit/src/_types/integrations.ts
+++ b/packages/devtools-kit/src/_types/integrations.ts
@@ -81,6 +81,16 @@ export interface BasicModuleInfo {
   }
 }
 
+export interface InstalledModuleInfo {
+  name?: string
+  isPackageModule: boolean
+  info?: ModuleStaticInfo
+  entryPath?: string
+  meta?: {
+    name?: string
+  }
+}
+
 export interface ModuleStaticInfo {
   name: string
   description: string
diff --git a/packages/devtools-ui-kit/src/components/NDropdown.vue b/packages/devtools-ui-kit/src/components/NDropdown.vue
index 80c17c012..4f5eed00f 100644
--- a/packages/devtools-ui-kit/src/components/NDropdown.vue
+++ b/packages/devtools-ui-kit/src/components/NDropdown.vue
@@ -15,7 +15,7 @@ onClickOutside(el, () => {
 
 <template>
   <div ref="el" class="relative">
-    <slot name="trigger" :enabled="enabled" @click="enabled = !enabled">
+    <slot name="trigger" :enabled="enabled" :click="() => enabled = !enabled">
       <NButton @click="enabled = !enabled">
         Dropdown
       </NButton>
diff --git a/packages/devtools/client/components/ModuleActionDialog.vue b/packages/devtools/client/components/ModuleActionDialog.vue
index a15e71529..07b7d57ff 100644
--- a/packages/devtools/client/components/ModuleActionDialog.vue
+++ b/packages/devtools/client/components/ModuleActionDialog.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ModuleDialog } from '../composables/state'
 
+const config = useServerConfig()
 const openInEditor = useOpenInEditor()
 </script>
 
@@ -10,7 +11,7 @@ const openInEditor = useOpenInEditor()
       <ModuleItemBase :mod="{}" :info="args[0]" border="none" w-150 n-panel-grids />
       <div flex="~ col gap-2" w-150 p4 border="t base">
         <h2 text-xl>
-          {{ args[2] }} <span capitalize :class="args[2] === 'install' ? 'text-primary' : 'text-red'">{{ args[0].name }}</span> module?
+          <span capitalize>{{ args[2] }}</span> <span capitalize :class="args[2] === 'install' ? 'text-primary' : 'text-red'">{{ args[0].name }}</span> module?
         </h2>
 
         <p op50>
@@ -30,7 +31,7 @@ const openInEditor = useOpenInEditor()
         />
 
         <p>
-          <span op50>After module installed, Nuxt will </span><span text-orange>restart automatically</span>.
+          <span op50>After that, Nuxt will </span><span text-orange>restart automatically</span>.
         </p>
 
         <div flex="~ gap-3" mt2 justify-end>
diff --git a/packages/devtools/client/components/ModuleInstallList.vue b/packages/devtools/client/components/ModuleInstallList.vue
index 6c19d0bdb..58255c47f 100644
--- a/packages/devtools/client/components/ModuleInstallList.vue
+++ b/packages/devtools/client/components/ModuleInstallList.vue
@@ -3,12 +3,10 @@
 import { RecycleScroller } from 'vue-virtual-scroller'
 import Fuse from 'fuse.js'
 
-const collection = await useModulesInfo()
-const { packageModules } = useModules()
-const nuxt3only = collection.filter(module => module.compatibility.nuxt.includes('^3') && !packageModules.value.find(i => i.entryPath.includes(module.npm)))
+const collection = useModulesList()
 
 const search = ref('')
-const fuse = computed(() => new Fuse(nuxt3only, {
+const fuse = computed(() => new Fuse(collection.value || [], {
   keys: [
     'name',
     'description',
@@ -19,7 +17,7 @@ const fuse = computed(() => new Fuse(nuxt3only, {
 
 const items = computed(() => {
   if (!search.value)
-    return nuxt3only
+    return collection.value
   return fuse.value.search(search.value).map(r => r.item)
 })
 </script>
@@ -48,14 +46,7 @@ const items = computed(() => {
         :item-size="160"
         key-field="name"
       >
-        <ModuleItemBase
-          :mod="{}"
-          role="button"
-          :info="item"
-          mb2 h-full class="hover:bg-active!"
-          :compact="true"
-          @click="useModuleAction(item, 'install')"
-        />
+        <ModuleItemInstall :item="item" />
       </RecycleScroller>
     </div>
   </div>
diff --git a/packages/devtools/client/components/ModuleItem.vue b/packages/devtools/client/components/ModuleItem.vue
index b6ae76794..9daa915c3 100644
--- a/packages/devtools/client/components/ModuleItem.vue
+++ b/packages/devtools/client/components/ModuleItem.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { BasicModuleInfo } from '../../src/types'
+import type { InstalledModuleInfo } from '../../src/types'
 
 const props = defineProps<{
-  mod: BasicModuleInfo
+  mod: InstalledModuleInfo
 }>()
 
 const config = useServerConfig()
@@ -19,23 +19,12 @@ const name = computed(() => {
   }
   return ''
 })
-const collection = await useModulesInfo()
-const staticInfo = computed(() => (collection || []).find?.(i => i.npm === name.value || i.name === name.value))
+const staticInfo = computed(() => props.mod.info)
 const data = computed(() => ({
   name,
   ...props.mod?.meta,
   ...staticInfo.value,
 }))
-
-const showDropdown = ref(false)
-
-const uninstallable = computed(() => {
-  if (staticInfo.value && (props.mod.entryPath ? isPackageName(props.mod.entryPath) : false)) {
-    // TODO: detect if module is from layer
-    return true
-  }
-  return false
-})
 </script>
 
 <template>
@@ -87,18 +76,5 @@ const uninstallable = computed(() => {
         </template>
       </NpmVersionCheck>
     </template>
-    <template v-if="uninstallable" #actions>
-      <NDropdown v-model="showDropdown" n="sm green">
-        <template #trigger>
-          <NButton icon="carbon-chevron-down" @click="showDropdown = !showDropdown">
-            Installed
-          </NButton>
-        </template>
-        <NButton icon="carbon-trash-can" n="red" @click="useModuleAction(staticInfo!, 'uninstall')">
-          Uninstall
-        </NButton>
-        <!-- TODO: maybe add disable module ? -->
-      </NDropdown>
-    </template>
   </ModuleItemBase>
 </template>
diff --git a/packages/devtools/client/components/ModuleItemBase.vue b/packages/devtools/client/components/ModuleItemBase.vue
index 2e11b135b..113540013 100644
--- a/packages/devtools/client/components/ModuleItemBase.vue
+++ b/packages/devtools/client/components/ModuleItemBase.vue
@@ -38,9 +38,7 @@ const openInEditor = useOpenInEditor()
 <template>
   <NCard p4 flex="~ gap2">
     <div flex="~ col gap2" flex-auto of-hidden px1>
-      <div
-        flex items-center of-hidden text-ellipsis ws-nowrap text-lg
-      >
+      <div gap-1t flex items-center text-ellipsis ws-nowrap text-lg>
         <NuxtLink
           v-if="isPackageModule"
           :to="npmBase + (data.npm || data.name)"
@@ -60,6 +58,7 @@ const openInEditor = useOpenInEditor()
         <span v-else>
           {{ data.name }}
         </span>
+        <slot name="badge" />
       </div>
 
       <div
diff --git a/packages/devtools/client/components/ModuleItemInstall.vue b/packages/devtools/client/components/ModuleItemInstall.vue
new file mode 100644
index 000000000..4a21c0099
--- /dev/null
+++ b/packages/devtools/client/components/ModuleItemInstall.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { ModuleStaticInfo } from '../../src/types'
+
+const props = defineProps<{
+  item: ModuleStaticInfo
+}>()
+
+const installedModules = useInstalledModules()
+const isInstalled = computed(() => !!(installedModules.value.find(i => i.isPackageModule && i.name === props.item.npm)))
+</script>
+
+<template>
+  <ModuleItemBase
+    :mod="{}"
+    :role="isInstalled ? '' : 'button'"
+    :info="item"
+    mb2 h-full
+    :class="isInstalled ? 'op50' : 'hover:bg-active!'"
+    :compact="true"
+    @click="isInstalled ? null : useModuleAction(item, 'install')"
+  >
+    <template v-if="isInstalled" #badge>
+      <Badge bg-green-400:10 text-green-400>
+        Installed
+      </Badge>
+      <NDropdown n="sm green">
+        <template #trigger="{ click }">
+          <NIconButton icon="carbon-overflow-menu-vertical" @click="click()" />
+        </template>
+        <NButton icon="carbon-trash-can" n="red" @click="useModuleAction(item, 'uninstall')">
+          Uninstall
+        </NButton>
+      </NDropdown>
+    </template>
+  </ModuleItemBase>
+</template>
diff --git a/packages/devtools/client/composables/state.ts b/packages/devtools/client/composables/state.ts
index b4479fd3c..8e9d1d806 100644
--- a/packages/devtools/client/composables/state.ts
+++ b/packages/devtools/client/composables/state.ts
@@ -2,10 +2,9 @@ import type { Component } from 'nuxt/schema'
 import { $fetch } from 'ofetch'
 import type { Ref } from 'vue'
 import { objectPick } from '@antfu/utils'
-import type { HookInfo, InstallModuleReturn, ModuleBuiltinTab, ModuleCustomTab, ModuleStaticInfo, RouteInfo, TabCategory } from '../../src/types'
+import type { HookInfo, InstallModuleReturn, InstalledModuleInfo, ModuleBuiltinTab, ModuleCustomTab, ModuleStaticInfo, RouteInfo, TabCategory } from '../../src/types'
 
-let modules: Promise<ModuleStaticInfo[]> | undefined
-const ignores = [
+const ignoredModules = [
   'pages',
   'meta',
   'components',
@@ -15,38 +14,44 @@ const ignores = [
   '@nuxt/telemetry',
 ]
 
-export async function useModulesInfo() {
-  if (modules)
+export function useModulesList() {
+  return useAsyncData('modules-list', async () => {
+    const modules = await $fetch<ModuleStaticInfo[]>('https://cdn.jsdelivr.net/npm/@nuxt/modules@latest/modules.json')
     return modules
-  modules = $fetch('https://cdn.jsdelivr.net/npm/@nuxt/modules@latest/modules.json').then((res) => {
-    return res.filter((m: any) => !ignores.includes(m.npm))
-  })
-  return modules
+      .filter((m: ModuleStaticInfo) => !ignoredModules.includes(m.npm) && m.compatibility.nuxt.includes('^3'))
+  }).data
 }
 
-export function useModules() {
-  const config = useServerConfig()
-  const modules = computed(() => config.value?._installedModules || [])
-  const packageModules = ref<any[]>([])
-  const userModules = ref<any[]>([])
-
-  watchEffect(() => {
-    packageModules.value.length = 0
-    userModules.value.length = 0
-    for (const m of modules.value) {
-      if (ignores.includes(m.meta?.name))
-        continue
-      if (m.entryPath && isNodeModulePath(m.entryPath))
-        packageModules.value.push(m)
-      else
-        userModules.value.push(m)
-    }
-  })
+export function useInstalledModules() {
+  return useState('installed-modules', () => {
+    const config = useServerConfig()
+    const modules = useModulesList()
+
+    return computed(() => (config.value?._installedModules || [])
+      .map((mod): InstalledModuleInfo => {
+        const isPackageModule = mod.entryPath && isNodeModulePath(mod.entryPath)
+        const name = mod.meta?.name
+          ? mod.meta?.name
+          : mod.entryPath
+            ? isPackageModule
+              ? getModuleNameFromPath(mod.entryPath)
+              : config.value?.rootDir
+                ? parseReadablePath(mod.entryPath, config.value?.rootDir).path
+                : undefined
+            : undefined
+
+        const info = modules.value?.find(m => m.npm === name)
 
-  return {
-    packageModules,
-    userModules,
-  }
+        return {
+          name,
+          isPackageModule,
+          info,
+          ...mod,
+        }
+      })
+      .filter(i => !i.name || !ignoredModules.includes(i.name)),
+    )
+  })
 }
 
 type ModuleActionType = 'install' | 'uninstall'
diff --git a/packages/devtools/client/pages/modules/modules.vue b/packages/devtools/client/pages/modules/modules.vue
index 3ba2917ca..6bb5bf1f4 100644
--- a/packages/devtools/client/pages/modules/modules.vue
+++ b/packages/devtools/client/pages/modules/modules.vue
@@ -7,7 +7,10 @@ definePageMeta({
 
 const installModuleOpen = ref(false)
 const { showExperimentalFeatures } = useDevToolsOptions()
-const { packageModules, userModules } = useModules()
+const installedModules = useInstalledModules()
+
+const packageModules = computed(() => installedModules.value.filter(i => i.isPackageModule))
+const userModules = computed(() => installedModules.value.filter(i => !i.isPackageModule))
 </script>
 
 <template>

From d881c59f015fa91249cb6ea24e55bc23d079b8f3 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 15 May 2023 12:11:11 +0200
Subject: [PATCH 4/5] chore: update

---
 packages/devtools-kit/src/_types/integrations.ts          | 1 +
 .../devtools/client/components/ModuleActionDialog.vue     | 6 +++---
 packages/devtools/client/components/ModuleItemInstall.vue | 8 +++++---
 packages/devtools/client/composables/state.ts             | 2 ++
 packages/devtools/client/pages/modules/modules.vue        | 2 +-
 5 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/devtools-kit/src/_types/integrations.ts b/packages/devtools-kit/src/_types/integrations.ts
index 9e0609cb3..d88510aab 100644
--- a/packages/devtools-kit/src/_types/integrations.ts
+++ b/packages/devtools-kit/src/_types/integrations.ts
@@ -84,6 +84,7 @@ export interface BasicModuleInfo {
 export interface InstalledModuleInfo {
   name?: string
   isPackageModule: boolean
+  isUninstallable: boolean
   info?: ModuleStaticInfo
   entryPath?: string
   meta?: {
diff --git a/packages/devtools/client/components/ModuleActionDialog.vue b/packages/devtools/client/components/ModuleActionDialog.vue
index 07b7d57ff..880df6e22 100644
--- a/packages/devtools/client/components/ModuleActionDialog.vue
+++ b/packages/devtools/client/components/ModuleActionDialog.vue
@@ -11,7 +11,7 @@ const openInEditor = useOpenInEditor()
       <ModuleItemBase :mod="{}" :info="args[0]" border="none" w-150 n-panel-grids />
       <div flex="~ col gap-2" w-150 p4 border="t base">
         <h2 text-xl>
-          <span capitalize>{{ args[2] }}</span> <span capitalize :class="args[2] === 'install' ? 'text-primary' : 'text-red'">{{ args[0].name }}</span> module?
+          <span capitalize :class="args[2] === 'install' ? 'text-primary' : 'text-red'">{{ args[2] }}</span> <code>{{ args[0].name }}</code>?
         </h2>
 
         <p op50>
@@ -36,13 +36,13 @@ const openInEditor = useOpenInEditor()
 
         <div flex="~ gap-3" mt2 justify-end>
           <NTip n="sm purple" flex-auto icon="carbon-chemistry">
-            Experimental. Make sure to backup your project.
+            Experimental. Backup your project first.
           </NTip>
 
           <NButton @click="resolve(false)">
             Cancel
           </NButton>
-          <NButton n="solid primary" capitalize @click="resolve(true)">
+          <NButton n="solid" capitalize :class="args[2] === 'install' ? 'n-primary' : 'n-red'" @click="resolve(true)">
             {{ args[2] }}
           </NButton>
         </div>
diff --git a/packages/devtools/client/components/ModuleItemInstall.vue b/packages/devtools/client/components/ModuleItemInstall.vue
index 4a21c0099..01b2cd190 100644
--- a/packages/devtools/client/components/ModuleItemInstall.vue
+++ b/packages/devtools/client/components/ModuleItemInstall.vue
@@ -6,7 +6,9 @@ const props = defineProps<{
 }>()
 
 const installedModules = useInstalledModules()
-const isInstalled = computed(() => !!(installedModules.value.find(i => i.isPackageModule && i.name === props.item.npm)))
+const installedInfo = computed(() => installedModules.value.find(i => i.name === props.item.npm))
+const isInstalled = computed(() => installedInfo.value && installedInfo.value.isPackageModule)
+const isUninstallable = computed(() => installedInfo.value && installedInfo.value.isPackageModule && installedInfo.value.isUninstallable)
 </script>
 
 <template>
@@ -15,7 +17,7 @@ const isInstalled = computed(() => !!(installedModules.value.find(i => i.isPacka
     :role="isInstalled ? '' : 'button'"
     :info="item"
     mb2 h-full
-    :class="isInstalled ? 'op50' : 'hover:bg-active!'"
+    :class="isInstalled ? 'border-dashed op75' : 'hover:bg-active!'"
     :compact="true"
     @click="isInstalled ? null : useModuleAction(item, 'install')"
   >
@@ -23,7 +25,7 @@ const isInstalled = computed(() => !!(installedModules.value.find(i => i.isPacka
       <Badge bg-green-400:10 text-green-400>
         Installed
       </Badge>
-      <NDropdown n="sm green">
+      <NDropdown v-if="isUninstallable" n="sm green">
         <template #trigger="{ click }">
           <NIconButton icon="carbon-overflow-menu-vertical" @click="click()" />
         </template>
diff --git a/packages/devtools/client/composables/state.ts b/packages/devtools/client/composables/state.ts
index 8e9d1d806..68145bda4 100644
--- a/packages/devtools/client/composables/state.ts
+++ b/packages/devtools/client/composables/state.ts
@@ -40,11 +40,13 @@ export function useInstalledModules() {
                 : undefined
             : undefined
 
+        const isUninstallable = config.value?.modules?.includes(name)
         const info = modules.value?.find(m => m.npm === name)
 
         return {
           name,
           isPackageModule,
+          isUninstallable,
           info,
           ...mod,
         }
diff --git a/packages/devtools/client/pages/modules/modules.vue b/packages/devtools/client/pages/modules/modules.vue
index 6bb5bf1f4..a7e0848e9 100644
--- a/packages/devtools/client/pages/modules/modules.vue
+++ b/packages/devtools/client/pages/modules/modules.vue
@@ -82,8 +82,8 @@ const userModules = computed(() => installedModules.value.filter(i => !i.isPacka
           <ModuleInstallList />
         </div>
       </Transition>
+      <ModuleActionDialog />
     </template>
-    <ModuleActionDialog />
   </div>
 
   <HelpFab>

From 87790f854e4aa04afd812b60cee1df4893bb249e Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 15 May 2023 12:14:28 +0200
Subject: [PATCH 5/5] chore: type

---
 packages/devtools/client/components/ModuleActionDialog.vue | 4 ++--
 packages/devtools/client/components/ModuleInstallList.vue  | 2 +-
 packages/devtools/client/pages/modules/modules.vue         | 2 +-
 packages/devtools/src/server-rpc/npm.ts                    | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/devtools/client/components/ModuleActionDialog.vue b/packages/devtools/client/components/ModuleActionDialog.vue
index 880df6e22..547ea5acc 100644
--- a/packages/devtools/client/components/ModuleActionDialog.vue
+++ b/packages/devtools/client/components/ModuleActionDialog.vue
@@ -10,8 +10,8 @@ const openInEditor = useOpenInEditor()
     <NDialog :model-value="true" @close="resolve(false)">
       <ModuleItemBase :mod="{}" :info="args[0]" border="none" w-150 n-panel-grids />
       <div flex="~ col gap-2" w-150 p4 border="t base">
-        <h2 text-xl>
-          <span capitalize :class="args[2] === 'install' ? 'text-primary' : 'text-red'">{{ args[2] }}</span> <code>{{ args[0].name }}</code>?
+        <h2 text-xl :class="args[2] === 'install' ? 'text-primary' : 'text-red'">
+          <span capitalize>{{ args[2] }}</span> <code>{{ args[0].name }}</code>?
         </h2>
 
         <p op50>
diff --git a/packages/devtools/client/components/ModuleInstallList.vue b/packages/devtools/client/components/ModuleInstallList.vue
index 58255c47f..fbe11fd04 100644
--- a/packages/devtools/client/components/ModuleInstallList.vue
+++ b/packages/devtools/client/components/ModuleInstallList.vue
@@ -27,7 +27,7 @@ const items = computed(() => {
     <NIconTitle
       mx6 mt6
       text-xl op75
-      icon="i-carbon-3d-mpr-toggle"
+      icon="i-carbon-intent-request-create"
       text="Install Module"
     />
 
diff --git a/packages/devtools/client/pages/modules/modules.vue b/packages/devtools/client/pages/modules/modules.vue
index a7e0848e9..0135e249e 100644
--- a/packages/devtools/client/pages/modules/modules.vue
+++ b/packages/devtools/client/pages/modules/modules.vue
@@ -37,7 +37,7 @@ const userModules = computed(() => installedModules.value.filter(i => !i.isPacka
         class="group"
         @click="installModuleOpen = true"
       >
-        <div i-carbon-new-tab text-4xl op40 group-hover="op75 text-primary" transition />
+        <div i-carbon-intent-request-create text-4xl op40 group-hover="op75 text-primary" transition />
         <div text-lg op40 group-hover="op75 text-primary" transition>
           Install New Module
         </div>
diff --git a/packages/devtools/src/server-rpc/npm.ts b/packages/devtools/src/server-rpc/npm.ts
index d68d7ce1c..4f780bad1 100644
--- a/packages/devtools/src/server-rpc/npm.ts
+++ b/packages/devtools/src/server-rpc/npm.ts
@@ -83,7 +83,7 @@ export function setupNpmRPC({ nuxt }: NuxtDevtoolsServerContext) {
         }, {
           id: processId,
           name: `Install ${name}`,
-          icon: 'carbon:new-tab',
+          icon: 'carbon:intent-request-create',
           restartable: false,
         })
 
@@ -131,7 +131,7 @@ export function setupNpmRPC({ nuxt }: NuxtDevtoolsServerContext) {
         }, {
           id: processId,
           name: `Uninstall ${name}`,
-          icon: 'carbon:new-tab',
+          icon: 'carbon:intent-request-uninstall',
           restartable: false,
         })