chore: update

Author: webfansplz

.gitignore

@@ -14,6 +14,7 @@ packages/vite/runtime
 packages/rolldown/src/public/fonts
 packages/rolldown/src/app/public/fonts
 packages/rolldown/runtime
+packages/kit/skills
 .rolldown
 *.tsbuildinfo
 docs/.vitepress/cache

docs/guide/index.md

@@ -36,13 +36,32 @@ Install or upgrade your Vite to the beta version 13+:
 }
 ```
 
-Install the DevTools plugin:
+Install the required DevTools plugin for both client modes:
 
 ```bash
 pnpm add -D @vitejs/devtools
 ```
 
-Enable the DevTools in your Vite config:
+Vite DevTools supports two client modes: embedded and standalone. You can choose the mode in your Vite config.
+
+Use embedded mode:
+
+```ts [vite.config.ts] twoslash
+import { DevTools } from '@vitejs/devtools'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    DevTools(),
+  ],
+  build: {
+    rolldownOptions: {
+      devtools: {}, // enable devtools mode
+    },
+  }
+})
+```
+Or use standalone mode:
 
 ```ts [vite.config.ts] twoslash
 import { defineConfig } from 'vite'
@@ -54,13 +73,14 @@ export default defineConfig({
 })
 ```
 
-Run your Vite build, to generate the Rolldown build metadata:
+Run a Vite build to generate Rolldown build metadata. In standalone mode, DevTools also starts a local server to host the client after the build completes.
 
 ```bash
 pnpm build
 ```
 
-Open the DevTools panel in your browser to play with the DevTools:
+
+If you're using embedded mode, start your app and open the DevTools panel in the browser:
 
 ```bash
 pnpm dev

docs/kit/index.md

@@ -110,3 +110,4 @@ The docs might not cover all the details—please help us improve them by submit
 - **[vite-plugin-vue-tracer](https://github.com/antfu/vite-plugin-vue-tracer)** - An action button that triggers a DOM inspector
   - [Plugin hook](https://github.com/antfu/vite-plugin-vue-tracer/blob/9f86fe723543405eea5d30588fe783796193bfd8/src/plugin.ts#L139-L157)
   - [Client script](https://github.com/antfu/vite-plugin-vue-tracer/blob/main/src/client/vite-devtools.ts)
+- **[Oxc Inspector](https://github.com/yuyinws/oxc-inspector/blob/main/src/vite.ts)** - An iframe-based dock entry with custom RPC functions

eslint.config.js

@@ -15,4 +15,5 @@ export default antfu({
   .removeRules(
     'vue/no-template-shadow',
     'pnpm/json-prefer-workspace-settings',
+    'markdown/fenced-code-language',
   )

package.json

@@ -1,13 +1,14 @@
 {
   "type": "module",
-  "version": "0.0.0-alpha.28",
+  "version": "0.0.0-alpha.32",
   "private": true,
-  "packageManager": "pnpm@10.28.2",
+  "packageManager": "pnpm@10.30.3",
   "scripts": {
     "build": "turbo run build",
     "build:debug": "NUXT_DEBUG_BUILD=true pnpm -r run build",
     "watch": "pnpm -r run watch",
     "dev": "pnpm -C packages/rolldown run dev",
+    "dev:vite": "pnpm -C packages/vite run dev",
     "docs": "pnpm -C docs run docs",
     "docs:build": "pnpm -C docs run docs:build",
     "docs:serve": "pnpm -C docs run docs:serve",

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vitejs/devtools",
   "type": "module",
-  "version": "0.0.0-alpha.28",
+  "version": "0.0.0-alpha.32",
   "description": "Vite DevTools",
   "author": "VoidZero Inc.",
   "license": "MIT",
@@ -25,6 +25,7 @@
     "./cli-commands": "./dist/cli-commands.js",
     "./client/inject": "./dist/client/inject.js",
     "./client/webcomponents": "./dist/client/webcomponents.js",
+    "./config": "./dist/config.js",
     "./dirs": "./dist/dirs.js",
     "./package.json": "./package.json"
   },

packages/core/playground/package.json

@@ -1,7 +1,7 @@
 {
   "name": "playground",
   "type": "module",
-  "version": "0.0.0-alpha.28",
+  "version": "0.0.0-alpha.32",
   "private": true,
   "scripts": {
     "dev": "DEBUG='vite:devtools:*' VITE_DEVTOOLS_LOCAL_DEV=true vite",

packages/core/src/client/standalone/App.vue

@@ -35,6 +35,12 @@ watch(
   },
   { immediate: true },
 )
+
+function switchEntry(id: string | undefined) {
+  if (id) {
+    context.docks.switchEntry(id)
+  }
+}
 </script>
 
 <template>
@@ -52,7 +58,7 @@ watch(
           :groups="context.docks.groupedEntries"
           :is-vertical="false"
           :selected="context.docks.selected"
-          @select="(e) => context.docks.switchEntry(e?.id)"
+          @select="(e) => switchEntry(e?.id)"
         >
           <template #separator>
             <div class="border-base border-b w-full my-2" />

packages/core/src/client/webcomponents/.generated/css.ts

@@ -163,7 +163,7 @@ onMounted(() => {
   <div
     v-show="context.docks.selected && context.docks.selected.type !== 'action'"
     ref="dockPanel"
-    class="bg-glass:75 rounded-lg border border-base shadow"
+    class="bg-glass:75 rounded-lg border border-base shadow overflow-hidden"
     :style="panelStyle"
   >
     <DockPanelResizer :panel="context.panel" />