feat(core): support devtools injection in builds

[webfansplz]

Background

Users may want to include devtools in production builds, as Eduardo does with Pinia Colada DevTools in his playground. This PR adds build.injection: true option to support this use case.

/cc @posva — this should cover the Pinia Colada use case we discussed.

[pkg-pr-new]

Open in StackBlitz

@vitejs/devtools

npm i https://pkg.pr.new/@vitejs/devtools@580

@vitejs/devtools-kit

npm i https://pkg.pr.new/@vitejs/devtools-kit@580

@vitejs/devtools-oxc

npm i https://pkg.pr.new/@vitejs/devtools-oxc@580

@vitejs/devtools-rolldown

npm i https://pkg.pr.new/@vitejs/devtools-rolldown@580

@vitejs/devtools-vite

npm i https://pkg.pr.new/@vitejs/devtools-vite@580

@vitejs/devtools-vitest

npm i https://pkg.pr.new/@vitejs/devtools-vitest@580

commit: 72f97ba

[Copilot]

🟡 Changes recommended

Configuration validation and custom output-path issues must be addressed before approval.

Get a fresh assessment by requesting another Copilot review.

Pull request overview

Adds opt-in DevTools injection for production builds, with base-aware URLs, configuration diagnostics, and documentation.

Changes:

• Adds build.injection and build-time HTML injection.
• Adds DTK0035 validation and error documentation.
• Documents configuration and usage.

File summaries

File	Reviewed changes and findings
packages/core/src/node/plugins/injection.ts	Implements build injection. Moderate (1 vote): invalid injection without withApp may be silently ignored. Moderate (1 vote): custom outDir can produce a guaranteed 404. Nit (3 votes): add build-mode, base-path, and validation coverage.
packages/core/src/node/plugins/index.ts	Wires injection into the integration. Moderate (1 vote): validation is gated behind withApp, allowing invalid configuration to be ignored.
packages/core/src/node/plugin-options.ts	Defines build.injection. Moderate (1 vote): the option is silently ignored when withApp is false.
packages/core/src/node/diagnostics.ts	Adds the DTK0035 diagnostic.
docs/guide/index.md	Documents build injection. Nit (1 vote): the TypeScript example lacks the twoslash marker and defineConfig import.
docs/errors/index.md	Registers DTK0035.
docs/errors/DTK0035.md	Documents the DTK0035 configuration error.

Review details

Suppressed comments (5)

docs/guide/index.md:156

• This new TypeScript config example is the only example in this section without the repository's twoslash marker and it omits the defineConfig import, so the docs build cannot type-check the new injection API. Keep it standalone and type-checked like the preceding vite.config.ts example.

```ts
export default defineConfig({
  devtools: {
    build: {
      withApp: true,
      injection: true,
    },
  },
})

packages/core/src/node/plugin-options.ts:69

• This option is silently ignored in the automatic Vite integration when withApp is false: DevToolsIntegration only calls createDevToolsPlugins() inside the build.withApp branch, so the new DTK0035 check is never reached and injection: true has no effect. Validate the incompatible options in that path as well (or include a validation plugin) so this advertised option cannot be a silent no-op.

     * Inject the dock into the built app. Requires `withApp: true`.
     * Ensure the DevTools assets are served under Vite's `base` when deployed.
     * @default false
     */
    injection?: boolean

packages/core/src/node/plugins/index.ts:63

• With the automatic devtools: { build: { injection: true } } configuration, DevToolsIntegration only calls createDevToolsPlugins when build.withApp is already true. If withApp is omitted, this new plugin is never instantiated, so DTK0035 is never emitted and the documented requirement is silently ignored. Validate injection before that gate (or add a validation-only path) so both registration paths reject this invalid configuration.

    DevToolsInjection(build),

packages/core/src/node/plugins/injection.ts:37

• With the automatic devtools integration, this check is never reached when build.injection is true without build.withApp: DevToolsIntegration only adds createDevToolsPlugins—and therefore this plugin—inside its if (build?.withApp) branch. The invalid configuration is consequently ignored instead of emitting DTK0035; validate it before that gate or include the validation when injection is set.

        if (!build?.withApp)
          throw diagnostics.DTK0035({})

packages/core/src/node/plugins/injection.ts:38

• When build.outDir is different from Vite's build.outDir, DevToolsBuild writes embedded.js under the custom directory, but this URL still points to <base>/__devtools/embedded.js in the app deployment root. For example, outDir: 'devtools-dist' produces devtools-dist/__devtools/embedded.js while the injected app requests the missing file from the app output. Please reject or explicitly handle this combination so enabling injection does not create a guaranteed 404.

        src = `${config.base.replace(/\/+$/, '')}${DEVTOOLS_MOUNT_PATH}embedded.js`

• Files reviewed: 7/7 changed files
• Comments generated: 1
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.