feat(module): allow to config devtools integrations

fix nuxt/devtools#762
nuxt · Dec 20, 2024 · ecba91e · ecba91e
1 parent 314386c
commit ecba91e
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 59 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "type": "module",
-  "packageManager": "pnpm@9.15.0",
+  "packageManager": "pnpm@9.15.1",
   "version": "0.7.3",
   "scripts": {
     "build": "pnpm run -r build",

diff --git a/packages/module/src/modules/config/devtools.ts b/packages/module/src/modules/config/devtools.ts
@@ -3,11 +3,69 @@ import { resolvePath } from 'mlly'
 import type { Nuxt } from '@nuxt/schema'
 import { join, dirname } from 'pathe'
 import { getPort } from 'get-port-please'
+import type { ModuleOptions } from '../../types'
+
+export async function setupDevToolsIntegration(
+  options: ModuleOptions,
+  nuxt: Nuxt,
+) {
+  const {
+    enabled = 'lazy',
+    port,
+  } = (typeof options.config !== 'boolean' ? options.config || {} : {}).devtools || {}
+
+  if (enabled === false)
+    return
 
-export async function setupDevToolsIntegration(nuxt: Nuxt) {
   let viewerProcess: ReturnType<typeof import('@nuxt/devtools-kit')['startSubprocess']> | undefined
   let viewerPort: number | undefined
   let viewerUrl: string | undefined
+  let started = false
+
+  async function start() {
+    if (started)
+      return
+    started = true
+    const { startSubprocess } = await import('@nuxt/devtools-kit')
+    const inspectorBinPath = join(
+      dirname(await resolvePath(
+        '@eslint/config-inspector/package.json',
+        { url: dirname(fileURLToPath(import.meta.url)) },
+      )),
+      'bin.mjs',
+    )
+
+    viewerPort = port || await getPort({
+      portRange: [8123, 10000],
+      random: true,
+    })
+    viewerProcess = startSubprocess(
+      {
+        command: 'node',
+        args: [inspectorBinPath, '--no-open'],
+        cwd: nuxt.options.rootDir,
+        env: {
+          PORT: viewerPort.toString(),
+        },
+      },
+      {
+        id: 'eslint-config-inspector',
+        name: 'ESLint Config Viewer',
+      },
+      nuxt,
+    )
+    nuxt.callHook('devtools:customTabs:refresh')
+
+    // Wait for viewer to be ready
+    const url = `http://localhost:${viewerPort}`
+    for (let i = 0; i < 100; i++) {
+      if (await fetch(url).then(r => r.ok).catch(() => false))
+        break
+      await new Promise(resolve => setTimeout(resolve, 500))
+    }
+    await new Promise(resolve => setTimeout(resolve, 2000))
+    viewerUrl = url
+  }
 
   nuxt.hook('devtools:customTabs', (tabs) => {
     tabs.push({
@@ -26,50 +84,13 @@ export async function setupDevToolsIntegration(nuxt: Nuxt) {
               {
                 label: 'Launch',
                 pending: !!viewerProcess,
-                handle: async () => {
-                  const { startSubprocess } = await import('@nuxt/devtools-kit')
-                  const inspectorBinPath = join(
-                    dirname(await resolvePath(
-                      '@eslint/config-inspector/package.json',
-                      { url: dirname(fileURLToPath(import.meta.url)) },
-                    )),
-                    'bin.mjs',
-                  )
-
-                  viewerPort = await getPort({
-                    portRange: [8123, 10000],
-                    random: true,
-                  })
-                  viewerProcess = startSubprocess(
-                    {
-                      command: 'node',
-                      args: [inspectorBinPath, '--no-open'],
-                      cwd: nuxt.options.rootDir,
-                      env: {
-                        PORT: viewerPort.toString(),
-                      },
-                    },
-                    {
-                      id: 'eslint-config-inspector',
-                      name: 'ESLint Config Viewer',
-                    },
-                    nuxt,
-                  )
-                  nuxt.callHook('devtools:customTabs:refresh')
-
-                  // Wait for viewer to be ready
-                  const url = `http://localhost:${viewerPort}`
-                  for (let i = 0; i < 100; i++) {
-                    if (await fetch(url).then(r => r.ok).catch(() => false))
-                      break
-                    await new Promise(resolve => setTimeout(resolve, 500))
-                  }
-                  await new Promise(resolve => setTimeout(resolve, 2000))
-                  viewerUrl = url
-                },
+                handle: start,
               },
             ],
           },
     })
   })
+
+  if (enabled === true)
+    start()
 }
diff --git a/packages/module/src/modules/config/index.ts b/packages/module/src/modules/config/index.ts
@@ -55,7 +55,7 @@ export async function setupConfigGen(options: ModuleOptions, nuxt: Nuxt) {
     },
   })
 
-  setupDevToolsIntegration(nuxt)
+  setupDevToolsIntegration(options, nuxt)
 
   await writeConfigFile()
   nuxt.hook('builder:generateApp', () => {

diff --git a/packages/module/src/types.ts b/packages/module/src/types.ts
@@ -34,6 +34,22 @@ export interface ConfigGenOptions extends NuxtESLintFeaturesOptions {
    * @default nuxt.options.rootDir
    */
   rootDir?: string
+
+  /**
+   * Options for DevTools integration
+   */
+  devtools?: {
+    /**
+     * Enable ESLint config inspector in DevTools
+     *
+     * @default 'lazy'
+     */
+    enabled?: boolean | 'lazy'
+    /**
+     * Port for the ESLint config inspector
+     */
+    port?: number
+  }
 }
 
 export interface CheckerOptions {

diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -5,15 +5,15 @@ packages:
   - docs
 catalog:
   '@antfu/install-pkg': ^0.5.0
-  '@clack/prompts': ^0.8.2
+  '@clack/prompts': ^0.9.0
   '@eslint/config-inspector': ^0.6.0
   '@eslint/js': ^9.16.0
-  '@iconify-json/catppuccin': ^1.2.7
-  '@iconify-json/ph': ^1.2.1
-  '@iconify-json/simple-icons': ^1.2.15
+  '@iconify-json/catppuccin': ^1.2.8
+  '@iconify-json/ph': ^1.2.2
+  '@iconify-json/simple-icons': ^1.2.16
   '@nuxt/content': ^2.13.4
   '@nuxt/devtools': 1.3.1
-  '@nuxt/devtools-kit': ^1.6.3
+  '@nuxt/devtools-kit': ^1.6.4
   '@nuxt/fonts': ^0.10.3
   '@nuxt/image': ^1.8.1
   '@nuxt/kit': ^3.14.1592
@@ -26,24 +26,24 @@ catalog:
   '@nuxtjs/plausible': ^1.2.0
   '@stylistic/eslint-plugin': ^2.12.1
   '@types/node': ^22.10.2
-  '@typescript-eslint/eslint-plugin': ^8.18.0
-  '@typescript-eslint/parser': ^8.18.0
-  '@typescript-eslint/scope-manager': ^8.18.0
-  '@typescript-eslint/types': ^8.18.0
-  '@typescript-eslint/utils': ^8.18.0
+  '@typescript-eslint/eslint-plugin': ^8.18.1
+  '@typescript-eslint/parser': ^8.18.1
+  '@typescript-eslint/scope-manager': ^8.18.1
+  '@typescript-eslint/types': ^8.18.1
+  '@typescript-eslint/utils': ^8.18.1
   '@vueuse/core': ^12.0.0
   '@vueuse/nuxt': ^12.0.0
-  bumpp: ^9.9.0
-  chokidar: ^4.0.1
-  eslint: ^9.16.0
+  bumpp: ^9.9.1
+  chokidar: ^4.0.3
+  eslint: ^9.17.0
   eslint-config-flat-gitignore: 0.2.0
   eslint-config-standard: ^17.1.0
   eslint-flat-config-utils: ^0.4.0
   eslint-import-resolver-typescript: ^3.7.0
   eslint-merge-processors: ^0.1.0
   eslint-plugin-format: ^0.1.3
   eslint-plugin-import: ^2.31.0
-  eslint-plugin-import-x: ^4.5.0
+  eslint-plugin-import-x: ^4.6.1
   eslint-plugin-jsdoc: ^50.6.1
   eslint-plugin-n: ^17.15.0
   eslint-plugin-promise: ^7.2.1
@@ -56,7 +56,7 @@ catalog:
   fast-glob: ^3.3.2
   find-up: ^7.0.0
   get-port-please: ^3.1.2
-  globals: ^15.13.0
+  globals: ^15.14.0
   local-pkg: ^0.5.1
   mlly: ^1.7.3
   nuxt: ^3.14.1592