nuxt · antfu · Sep 21, 2023 · Sep 20, 2023
diff --git a/packages/devtools-wizard/package.json b/packages/devtools-wizard/package.json
@@ -26,7 +26,6 @@
     "global-dirs": "^3.0.1",
     "magicast": "^0.3.0",
     "pathe": "^1.1.1",
-    "picocolors": "^1.0.0",
     "pkg-types": "^1.0.3",
     "prompts": "^2.4.2",
     "rc9": "^2.1.1",

diff --git a/packages/devtools-wizard/src/builtin.ts b/packages/devtools-wizard/src/builtin.ts
@@ -2,7 +2,7 @@ import { existsSync } from 'node:fs'
 import fsp from 'node:fs/promises'
 import { relative } from 'node:path'
 import { consola } from 'consola'
-import c from 'picocolors'
+import { colors } from 'consola/utils'
 import { parseModule } from 'magicast'
 import { diffLines } from 'diff'
 import { join } from 'pathe'
@@ -22,14 +22,14 @@ function findNuxtConfig(cwd: string) {
 }
 
 function printOutManual(value: boolean) {
-  consola.info(c.yellow('To manually enable Nuxt DevTools, add the following to your Nuxt config:'))
-  consola.info(c.cyan(`\n  devtools: { enabled: ${value} }\n`))
+  consola.info(colors.yellow('To manually enable Nuxt DevTools, add the following to your Nuxt config:'))
+  consola.info(colors.cyan(`\n  devtools: { enabled: ${value} }\n`))
 }
 
 async function toggleConfig(cwd: string, value?: boolean) {
   const nuxtConfig = findNuxtConfig(cwd)
   if (!nuxtConfig) {
-    consola.error(c.red('Unable to find Nuxt config file in current directory'))
+    consola.error(colors.red('Unable to find Nuxt config file in current directory'))
     process.exitCode = 1
     printOutManual(true)
     return false
@@ -51,12 +51,12 @@ async function toggleConfig(cwd: string, value?: boolean) {
     const generated = mod.generate().code
 
     if (source.trim() === generated.trim()) {
-      consola.info(c.yellow(`Nuxt DevTools is already ${value ? 'enabled' : 'disabled'}`))
+      consola.info(colors.yellow(`Nuxt DevTools is already ${value ? 'enabled' : 'disabled'}`))
     }
     else {
       consola.log('')
       consola.log('We are going to update the Nuxt config with with the following changes:')
-      consola.log(c.bold(c.green(`./${relative(cwd, nuxtConfig)}`)))
+      consola.log(colors.bold(colors.green(`./${relative(cwd, nuxtConfig)}`)))
       consola.log('')
       printDiffToCLI(source, generated)
       consola.log('')
@@ -75,7 +75,7 @@ async function toggleConfig(cwd: string, value?: boolean) {
     }
   }
   catch (err) {
-    consola.error(c.red('Unable to update Nuxt config file automatically'))
+    consola.error(colors.red('Unable to update Nuxt config file automatically'))
     process.exitCode = 1
     printOutManual(true)
     return false
@@ -88,7 +88,7 @@ export async function enable(cwd: string) {
   if (await toggleConfig(cwd, true)) {
     // disable global devtools
     await import('./global').then(r => r.disableSilently(cwd))
-    consola.success(c.green('Nuxt DevTools is enabled! Restart your Nuxt app to start using it.'))
+    consola.success(colors.green('Nuxt DevTools is enabled! Restart your Nuxt app to start using it.'))
   }
 }
 
@@ -114,11 +114,11 @@ function printDiffToCLI(from: string, to: string) {
       if (!diff.added)
         no += 1
       if (diff.added)
-        output += c.green(`+    | ${line}\n`)
+        output += colors.green(`+    | ${line}\n`)
       else if (diff.removed)
-        output += c.red(`-${no.toString().padStart(3, ' ')} | ${line}\n`)
+        output += colors.red(`-${no.toString().padStart(3, ' ')} | ${line}\n`)
       else
-        output += c.gray(`${c.dim(`${no.toString().padStart(4, ' ')} |`)} ${line}\n`)
+        output += colors.gray(`${colors.dim(`${no.toString().padStart(4, ' ')} |`)} ${line}\n`)
     }
   }
 

diff --git a/packages/devtools-wizard/src/index.ts b/packages/devtools-wizard/src/index.ts
@@ -1,6 +1,6 @@
 import { consola } from 'consola'
 import { readPackageJSON } from 'pkg-types'
-import c from 'picocolors'
+import { colors } from 'consola/utils'
 import semver from 'semver'
 import { name as moduleName, version } from '../package.json'
 
@@ -23,9 +23,9 @@ async function run() {
   const cwd = process.cwd()
 
   consola.log('')
-  consola.log(c.bold(c.green(' Nuxt ')))
-  consola.log(`${c.inverse(c.bold(c.green(' DevTools ')))} ${c.green(`v${version}`)} ${c.yellow('(experimental)')}`)
-  consola.log(`\n${c.gray('Learn more at https://devtools.nuxt.com\n')}`)
+  consola.log(colors.bold(colors.green(' Nuxt ')))
+  consola.log(`${colors.inverse(colors.bold(colors.green(' DevTools ')))} ${colors.green(`v${version}`)} ${colors.yellow('(experimental)')}`)
+  consola.log(`\n${colors.gray('Learn more at https://devtools.nuxt.com\n')}`)
 
   if (moduleName.endsWith('-edge'))
     throw new Error('Edge release of Nuxt DevTools requires to be installed locally. Learn more at https://github.com/nuxt/devtools/#edge-release-channel')
@@ -40,14 +40,14 @@ async function run() {
   const isDevToolsBuiltIn = semver.gte(nuxtVersion, '3.4.0')
 
   if (command === 'enable') {
-    consola.log(c.green('Enabling Nuxt DevTools...'))
+    consola.log(colors.green('Enabling Nuxt DevTools...'))
     if (isDevToolsBuiltIn)
       await import('./builtin').then(r => r.enable(cwd))
     else
       await import('./global').then(r => r.enable(cwd))
   }
   else if (command === 'disable') {
-    consola.log(c.magenta('Disabling Nuxt DevTools...'))
+    consola.log(colors.magenta('Disabling Nuxt DevTools...'))
     if (isDevToolsBuiltIn)
       await import('./builtin').then(r => r.disable(cwd))
     else
@@ -58,7 +58,7 @@ async function run() {
     process.exit(1)
   }
   else {
-    consola.log(c.red(`Unknown command "${command}"`))
+    consola.log(colors.red(`Unknown command "${command}"`))
     process.exit(1)
   }
 }

diff --git a/packages/devtools/package.json b/packages/devtools/package.json
@@ -43,7 +43,6 @@
     "@nuxt/devtools-wizard": "workspace:*",
     "@nuxt/kit": "^3.7.3",
     "birpc": "^0.2.14",
-    "boxen": "^7.1.1",
     "consola": "^3.2.3",
     "error-stack-parser-es": "^0.1.1",
     "execa": "^7.2.0",
@@ -64,7 +63,6 @@
     "pacote": "^17.0.4",
     "pathe": "^1.1.1",
     "perfect-debounce": "^1.0.0",
-    "picocolors": "^1.0.0",
     "pkg-types": "^1.0.3",
     "rc9": "^2.1.1",
     "semver": "^7.5.4",

diff --git a/packages/devtools/src/logger.ts b/packages/devtools/src/logger.ts
@@ -1,3 +1,3 @@
-import c from 'picocolors'
+import { colors } from 'consola/utils'
 
-export const LOG_PREFIX = c.cyan('Nuxt DevTools:')
+export const LOG_PREFIX = colors.cyan('Nuxt DevTools:')
diff --git a/packages/devtools/src/module-main.ts b/packages/devtools/src/module-main.ts
@@ -5,7 +5,7 @@ import { addPlugin, addVitePlugin, logger } from '@nuxt/kit'
 import type { ViteDevServer } from 'vite'
 import { searchForWorkspaceRoot } from 'vite'
 import sirv from 'sirv'
-import c from 'picocolors'
+import { colors } from 'consola/utils'
 import { version } from '../package.json'
 import type { ModuleOptions } from './types'
 import { setupRPC } from './server-rpc'
@@ -149,5 +149,5 @@ window.__NUXT_DEVTOOLS_TIME_METRIC__.appInit = Date.now()
     isGlobalInstall: isGlobalInstall(),
   })
 
-  logger.success(`Nuxt DevTools is enabled ${c.dim(`v${version}`)}${isGlobalInstall() ? c.dim('[global]') : ''} ${c.yellow('(experimental)')}`)
+  logger.success(`Nuxt DevTools is enabled ${colors.dim(`v${version}`)}${isGlobalInstall() ? colors.dim('[global]') : ''} ${colors.yellow('(experimental)')}`)
 }
diff --git a/packages/devtools/src/server-rpc/general.ts b/packages/devtools/src/server-rpc/general.ts
@@ -3,8 +3,7 @@ import type { Component, NuxtApp, NuxtPage } from 'nuxt/schema'
 import type { Import, Unimport } from 'unimport'
 import { resolveBuiltinPresets } from 'unimport'
 import { resolve } from 'pathe'
-import boxen from 'boxen'
-import c from 'picocolors'
+import { colors } from 'consola/utils'
 import { logger } from '@nuxt/kit'
 
 import type { HookInfo, NuxtDevtoolsServerContext, ServerFunctions } from '../types'
@@ -154,23 +153,24 @@ export function setupGeneralRPC({ nuxt, options, refresh, openInEditorHooks }: N
       const token = await getDevAuthToken()
 
       const message = [
-        `A browser is requesting permissions of ${c.bold(c.yellow('writing files and running commands'))} from the DevTools UI.`,
-        c.bold(info),
+        `A browser is requesting permissions of ${colors.bold(colors.yellow('writing files and running commands'))} from the DevTools UI.`,
+        colors.bold(info),
         '',
         'Please open the following URL in the browser:',
-        c.bold(c.green(`${nuxt.options.devServer.https ? 'https' : 'http'}://${nuxt.options.devServer.host === '::' ? 'localhost' : (nuxt.options.devServer.host || 'localhost')}:${nuxt.options.devServer.port}${ROUTE_AUTH}?token=${token}`)),
+        colors.bold(colors.green(`${nuxt.options.devServer.https ? 'https' : 'http'}://${nuxt.options.devServer.host === '::' ? 'localhost' : (nuxt.options.devServer.host || 'localhost')}:${nuxt.options.devServer.port}${ROUTE_AUTH}?token=${token}`)),
         '',
         'Or manually copy and paste the following token:',
-        c.bold(c.cyan(token)),
+        colors.bold(colors.cyan(token)),
       ]
 
-      // eslint-disable-next-line no-console
-      console.log(`\n${boxen(message.join('\n'), {
-        padding: 1,
-        borderColor: 'yellow',
-        borderStyle: 'round',
-        title: 'Permission Request',
-      })}\n`)
+      logger.box({
+        message: message.join('\n'),
+        title: colors.bold(colors.yellow(' Permission Request ')),
+        style: {
+          borderColor: 'yellow',
+          borderStyle: 'rounded',
+        },
+      })
     },
     async verifyAuthToken(token: string) {
       return token === await getDevAuthToken()

diff --git a/packages/devtools/src/server-rpc/wizard.ts b/packages/devtools/src/server-rpc/wizard.ts
@@ -1,4 +1,4 @@
-import c from 'picocolors'
+import { colors } from 'consola/utils'
 import { logger } from '@nuxt/kit'
 import type { NuxtDevtoolsServerContext, ServerFunctions, WizardActions } from '@nuxt/devtools-kit/types'
 import { wizard } from '../wizard'
@@ -8,7 +8,7 @@ export function setupWizardRPC({ nuxt, ensureDevAuthToken }: NuxtDevtoolsServerC
   return {
     async runWizard(token, name: WizardActions, ...args: any[]) {
       await ensureDevAuthToken(token)
-      logger.info(LOG_PREFIX, `Running wizard ${c.green(name)}...`)
+      logger.info(LOG_PREFIX, `Running wizard ${colors.green(name)}...`)
       return (wizard[name] as any)(nuxt, ...args as [])
     },
   } satisfies Partial<ServerFunctions>