feat(core): vite integration plugin & environments config (#300)

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-authored-by: Anthony Fu <github@antfu.me>

Author: 3 people

packages/core/package.json

@@ -27,6 +27,7 @@
     "./client/webcomponents": "./dist/client/webcomponents.js",
     "./config": "./dist/config.js",
     "./dirs": "./dist/dirs.js",
+    "./integration": "./dist/integration.js",
     "./internal": "./dist/internal.js",
     "./package.json": "./package.json"
   },

packages/core/src/integration.ts

@@ -0,0 +1,2 @@
+export { DevToolsIntegration, runDevTools } from './node/plugins/integration'
+export type { DevToolsIntegrationOptions } from './node/plugins/integration'

packages/core/src/node/config.ts

@@ -3,6 +3,10 @@ import { isObject } from 'devframe/node'
 
 export interface DevToolsConfig extends Partial<StartOptions> {
   enabled: boolean
+  /**
+   * Vite environments to enable DevTools for. Defaults to all environments.
+   */
+  environments?: string[]
   /**
    * Disable client authentication.
    *

packages/core/src/node/plugins/integration.ts

@@ -0,0 +1,55 @@
+import type { Plugin, ResolvedConfig, ViteBuilder } from 'vite'
+import type { ResolvedDevToolsConfig } from '../config'
+
+type DevToolsEnvironment = ResolvedConfig['environments'][string]
+
+export interface DevToolsIntegrationOptions {
+  config: ResolvedConfig
+}
+
+function getDevToolsEnvironments(config: ResolvedConfig): DevToolsEnvironment[] {
+  const devToolsConfig = config.devtools as ResolvedDevToolsConfig
+  const environmentNames = devToolsConfig.config.environments ?? Object.keys(config.environments)
+  const environments: DevToolsEnvironment[] = []
+
+  for (const environmentName of environmentNames) {
+    const environment = config.environments[environmentName]
+    if (environment) {
+      environments.push(environment)
+    }
+  }
+
+  return environments
+}
+
+export async function runDevTools(builder: unknown) {
+  const config = (builder as ViteBuilder).config
+  for (const _environment of getDevToolsEnvironments(config)) {
+    try {
+      const { start } = await import('@vitejs/devtools/cli-commands')
+      await start(config.devtools.config)
+    }
+    catch (error: any) {
+      config.logger.error(
+        `Failed to run Vite DevTools: ${error?.message || error?.stack || error}`,
+        { error },
+      )
+    }
+  }
+}
+
+export function DevToolsIntegration(_options: DevToolsIntegrationOptions): Plugin {
+  return {
+    name: 'vite:devtools:integration',
+    apply: 'build',
+    configResolved: {
+      order: 'post',
+      handler(config) {
+        // Enable `rolldownOptions.devtools` if the environment is selected, or for all environments by default.
+        for (const environment of getDevToolsEnvironments(config)) {
+          environment.build.rolldownOptions.devtools ??= {}
+        }
+      },
+    },
+  }
+}

packages/core/tsdown.config.ts

@@ -53,6 +53,7 @@ export default defineConfig({
   tsconfig: '../../tsconfig.base.json',
   entry: {
     'index': 'src/index.ts',
+    'integration': 'src/integration.ts',
     'internal': 'src/internal.ts',
     'dirs': 'src/dirs.ts',
     'cli': 'src/node/cli.ts',

test/__snapshots__/tsnapi/@vitejs/devtools/config.snapshot.d.ts

@@ -4,6 +4,7 @@
 // #region Interfaces
 export interface DevToolsConfig extends Partial<StartOptions> {
   enabled: boolean;
+  environments?: string[];
   clientAuth?: boolean;
   clientAuthTokens?: string[];
 }

test/__snapshots__/tsnapi/@vitejs/devtools/integration.snapshot.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@vitejs/devtools/integration`
+ */
+// #region Interfaces
+export interface DevToolsIntegrationOptions {
+  config: ResolvedConfig;
+}
+// #endregion
+
+// #region Functions
+export declare function DevToolsIntegration(_: DevToolsIntegrationOptions): Plugin;
+export declare function runDevTools(_: unknown): Promise<void>;
+// #endregion

test/__snapshots__/tsnapi/@vitejs/devtools/integration.snapshot.js

@@ -0,0 +1,7 @@
+/**
+ * Generated by tsnapi — public API snapshot of `@vitejs/devtools/integration`
+ */
+// #region Functions
+export function DevToolsIntegration(_) {}
+export async function runDevTools(_) {}
+// #endregion