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'
 importfsfrom'node:fs/promises'
 importosfrom'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()
 
 awaitimport('./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.
-awaitimport('./integrations/data-inspector').then(({ setup })=>setup(ctx))
+if(options.dataInspector!==false)
+awaitimport('./integrations/data-inspector').then(({ setup })=>setup(ctx))
 
 if(options.viteInspect!==false)
 awaitimport('./integrations/vite-inspect').then(({ setup })=>setup(ctx))
 
 if(options.componentInspector!==false)
 awaitimport('./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',
+})
+}
+
 constintegrations=[
-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)),
 }asServerFunctions)
 
 /**