feat(devtools): add dataInspector option + lazy-load integrations (#1061)

Author: antfu

packages/devtools-kit/src/_types/options.ts

@@ -49,6 +49,14 @@ export interface ModuleOptions {
    */
   viteInspect?: boolean
 
+  /**
+   * Enable the Data Inspector integration, which registers the live
+   * `Nuxt Application` data source and mounts the Data Inspector panel.
+   *
+   * @default true
+   */
+  dataInspector?: boolean
+
   /**
    * Disable the DevTools client authorization prompt, allowing any browser to
    * connect without approving it first.

packages/devtools/src/constant.ts

@@ -7,6 +7,7 @@ export const defaultOptions: ModuleOptions = {
   enabled: undefined, // determine multiple conditions
   componentInspector: true,
   viteInspect: true,
+  dataInspector: true,
   codeServer: {
     enabled: true,
   },

packages/devtools/src/module-main.ts

@@ -7,7 +7,7 @@ import type { AnyNitroConfig } from './utils/nitro-compat'
 import { existsSync } from 'node:fs'
 import fs from 'node:fs/promises'
 import os from 'node:os'
-import { NUXT_DEVTOOLS_GROUP_ID } from '@nuxt/devtools-kit'
+import { deprecate, NUXT_DEVTOOLS_GROUP_ID } from '@nuxt/devtools-kit'
 import { addImports, addPlugin, addTemplate, addVitePlugin, extendViteConfig, logger } from '@nuxt/kit'
 import { colors } from 'consola/utils'
 import { join } from 'pathe'
@@ -277,19 +277,26 @@ window.__NUXT_DEVTOOLS_TIME_METRIC__.appInit = Date.now()
 
   await import('./integrations/plugin-metrics').then(({ setup }) => setup(ctx))
 
-  // Data Inspector is always mounted when DevTools is enabled (no module
-  // option): it registers the live `Nuxt Application` source and mounts the
-  // bundled SPA into the Nuxt dock group.
-  await import('./integrations/data-inspector').then(({ setup }) => setup(ctx))
+  if (options.dataInspector !== false)
+    await import('./integrations/data-inspector').then(({ setup }) => setup(ctx))
 
   if (options.viteInspect !== false)
     await import('./integrations/vite-inspect').then(({ setup }) => setup(ctx))
 
   if (options.componentInspector !== false)
     await import('./integrations/vue-tracer').then(({ setup }) => setup(ctx))
 
+  if (options.codeServer?.enabled === false && options.vscode !== undefined) {
+    deprecate(nuxt, 'NDT_DEP_0008', {
+      api: 'devtools.vscode',
+      replacement: 'devtools.codeServer',
+    })
+  }
+
   const integrations = [
-    import('./integrations/code-server').then(({ setup }) => setup(ctx)),
+    options.codeServer?.enabled !== false
+      ? import('./integrations/code-server').then(({ setup }) => setup(ctx))
+      : null,
     (options.experimental?.timeline || options.timeline?.enabled)
       ? import('./integrations/timeline').then(({ setup }) => setup(ctx))
       : null,

packages/devtools/src/server-rpc/index.ts

@@ -5,7 +5,6 @@ import type { ModuleOptions, NuxtDevtoolsServerContext, ServerFunctions } from '
 import { deprecate, registerHostDiagnostics } from '@nuxt/devtools-kit'
 import { logger } from '@nuxt/kit'
 import { colors } from 'consola/utils'
-import { getServerData } from '../integrations/data-inspector'
 import { RPC_NAMESPACE } from '../rpc-namespace'
 import { setupAnalyzeBuildRPC } from './analyze-build'
 import { setupAssetsRPC } from './assets'
@@ -165,7 +164,7 @@ export function setupRPC(nuxt: Nuxt, options: ModuleOptions) {
     // Deprecated compat shim (NDT_DEP_0009). The capture + live source now live
     // in the Data Inspector integration; `getServerConfig` is served by the
     // canonical `setupGeneralRPC` above.
-    getServerData: async () => getServerData(nuxt),
+    getServerData: async () => import('../integrations/data-inspector').then(({ getServerData }) => getServerData(nuxt)),
   } as ServerFunctions)
 
   /**