build: improve local dx

Author: antfu

packages/core/playground/vite.config.ts

@@ -1,6 +1,9 @@
 import process from 'node:process'
 import Vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'
+// eslint-disable-next-line ts/ban-ts-comment
+// @ts-ignore ignore the type error
+import { DevToolsViteUI } from '../../vite/src/node'
 import { DevTools } from '../src'
 import { buildCSS } from '../src/client/webcomponents/scripts/build-css'
 
@@ -22,7 +25,10 @@ export default defineConfig({
     },
 
     // For local playground only. As a user you don't install this plugin directly.
-    DevTools(),
+    DevTools({
+      builtinDevTools: false,
+    }),
+    DevToolsViteUI(),
     {
       name: 'local',
       devtools: {

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

@@ -1,7 +1,4 @@
 import type { Plugin } from 'vite'
-// eslint-disable-next-line ts/ban-ts-comment
-// @ts-ignore ignore the type error
-import { DevToolsViteUI } from '@vitejs/devtools-vite'
 import { DevToolsInjection } from './injection'
 import { DevToolsServer } from './server'
 
@@ -14,7 +11,7 @@ export interface DevToolsOptions {
   builtinDevTools?: boolean
 }
 
-export function DevTools(options: DevToolsOptions = {}): Plugin[] {
+export async function DevTools(options: DevToolsOptions = {}): Promise<Plugin[]> {
   const {
     builtinDevTools = true,
   } = options
@@ -25,7 +22,9 @@ export function DevTools(options: DevToolsOptions = {}): Plugin[] {
   ]
 
   if (builtinDevTools) {
-    plugins.push(DevToolsViteUI())
+    // eslint-disable-next-line ts/ban-ts-comment
+    // @ts-ignore ignore the type error
+    plugins.push(await import('@vitejs/devtools-vite').then(m => m.DevToolsViteUI()))
   }
 
   return plugins
@@ -34,5 +33,4 @@ export function DevTools(options: DevToolsOptions = {}): Plugin[] {
 export {
   DevToolsInjection,
   DevToolsServer,
-  DevToolsViteUI,
 }