Merge branch 'main' into feat/static-mode

Author: antfu

docs/guide/index.md

@@ -25,24 +25,26 @@ Vite DevTools is a comprehensive set of developer tools for visualizing and anal
 
 If you want to give an early preview, you can try it out by building this project from source, or install the preview build with the following steps:
 
-Install or upgrade your Vite to the beta version 8:
+Install or upgrade your Vite to the beta version 13+:
 
 <!-- eslint-skip -->
 ```json [package.json]
 {
   "dependencies": {
-    "vite": "^8.0.0-beta.7"
+    "vite": "^8.0.0-beta.13"
   }
 }
 ```
 
-Install the DevTools plugin:
+Install the required DevTools plugin for both client modes:
 
 ```bash
 pnpm add -D @vitejs/devtools
 ```
 
-Enable the DevTools plugin in your Vite config and turn on the devtools mode for Rolldown:
+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'
@@ -59,14 +61,26 @@ export default defineConfig({
   }
 })
 ```
+Or use standalone mode:
 
-Run your Vite build, to generate the Rolldown build metadata:
+```ts [vite.config.ts] twoslash
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  devtools: {
+    enabled: true,
+  },
+})
+```
+
+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

eslint.config.js

@@ -16,4 +16,6 @@ export default antfu({
     'vue/no-template-shadow',
     'pnpm/json-prefer-workspace-settings',
     'markdown/fenced-code-language',
+    'e18e/prefer-static-regex',
+    'e18e/prefer-spread-syntax',
   )

package.json

@@ -2,7 +2,7 @@
   "type": "module",
   "version": "0.0.0-alpha.33",
   "private": true,
-  "packageManager": "pnpm@10.30.3",
+  "packageManager": "pnpm@10.32.0",
   "scripts": {
     "build": "turbo run build",
     "build:debug": "NUXT_DEBUG_BUILD=true pnpm -r run build",

packages/core/package.json

@@ -85,5 +85,23 @@
     "vue": "catalog:frontend",
     "vue-router": "catalog:playground",
     "vue-tsc": "catalog:devtools"
+  },
+  "inlinedDependencies": {
+    "@vue/shared": "3.5.30",
+    "@vue/reactivity": "3.5.30",
+    "@vue/runtime-core": "3.5.30",
+    "csstype": "3.2.3",
+    "@vue/runtime-dom": "3.5.30",
+    "vue": "3.5.30",
+    "dompurify": "3.3.2",
+    "@xterm/addon-fit": "0.11.0",
+    "@xterm/xterm": "6.0.0",
+    "@vueuse/shared": "14.2.1",
+    "@vueuse/core": "14.2.1",
+    "sisteransi": "1.0.5",
+    "@clack/core": "1.1.0",
+    "@clack/prompts": "1.1.0",
+    "ansis": "4.2.0",
+    "get-port-please": "3.2.0"
   }
 }

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

@@ -252,6 +252,7 @@ onMounted(() => {
       'vite-devtools-vertical': context.panel.isVertical,
       'vite-devtools-minimized': isMinimized,
     }"
+    class="color-base"
     @mousemove="bringUp"
   >
     <div

packages/core/src/client/webcomponents/components/Dock.vue

@@ -179,7 +179,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 overflow-hidden"
+    class="bg-glass:75 rounded-lg border border-base color-base shadow overflow-hidden"
     :style="panelStyle"
     @contextmenu="openContextMenu"
   >

packages/core/src/client/webcomponents/components/DockPanel.vue

@@ -129,7 +129,7 @@ const FloatingPopoverComponent = defineComponent({
         {
           ref: 'panel',
           class: [
-            'fixed z-floating-tooltip text-xs transition-all duration-300 w-max bg-glass border border-base rounded px2 p1',
+            'fixed z-floating-tooltip text-xs transition-all duration-300 w-max bg-glass color-base border border-base rounded px2 p1',
             props.item ? 'op100' : 'op0 pointer-events-none',
           ],
           style,

packages/core/src/client/webcomponents/components/FloatingPopover.ts

@@ -87,7 +87,7 @@ function navigateTo(url: string) {
 
   // Ensure URL has protocol
   let normalizedUrl = url.trim()
-  if (normalizedUrl && !normalizedUrl.match(/^https?:\/\//i)) {
+  if (normalizedUrl && !/^https?:\/\//i.test(normalizedUrl)) {
     // If it starts with /, treat as same-origin path
     if (normalizedUrl.startsWith('/')) {
       normalizedUrl = `${window.location.origin}${normalizedUrl}`

packages/core/src/client/webcomponents/components/ViewIframe.vue

@@ -49,5 +49,14 @@
     "my-ua-parser": "catalog:frontend",
     "tsdown": "catalog:build",
     "vite": "catalog:build"
+  },
+  "inlinedDependencies": {
+    "my-ua-parser": "2.0.4",
+    "@vue/shared": "3.5.30",
+    "@vue/reactivity": "3.5.30",
+    "@vue/runtime-core": "3.5.30",
+    "csstype": "3.2.3",
+    "@vue/runtime-dom": "3.5.30",
+    "vue": "3.5.30"
   }
 }