feat(kit): use virtual module to host import scripts

Author: antfu

packages/core/playground/vite.config.ts

@@ -39,7 +39,6 @@ export default defineConfig({
             id: 'local',
             type: 'iframe',
             url: 'https://antfu.me',
-
           })
 
           ctx.docks.register({

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import type { ClientScriptEntry, DevToolsDockEntry } from '@vitejs/devtools-kit'
+import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
+import type { ImportScriptContext } from '@vitejs/devtools-kit/client'
 import type { DockProps } from './DockProps'
 import { useEventListener, useScreenSafeArea } from '@vueuse/core'
 import { computed, onMounted, reactive, ref, toRefs, useTemplateRef, watchEffect } from 'vue'
@@ -215,28 +216,46 @@ const panelStyle = computed(() => {
 })
 
 // TODO: use a visual module to host all the imports
-function importScript(entry: ClientScriptEntry) {
-  return import(/* @vite-ignore */ entry.importFrom)
+function importScript(entry: DevToolsDockEntry): Promise<(context: ImportScriptContext) => void | Promise<void>> {
+  const id = entry.id
+  return import(/* vite-ignore */ ['/.devtools', 'imports'].join('-'))
     .then((module) => {
-      return module[entry.importName || 'default']
+      const importsMap = module.importsMap as Record<string, () => Promise<() => void>>
+      const importFn = importsMap[id]
+      if (!importFn) {
+        return Promise.reject(new Error(`[VITE DEVTOOLS] No import found for id: ${id}`))
+      }
+      return importFn()
     })
     .catch((error) => {
       // TODO: maybe popup a error toast here?
-      console.error('[VITE DEVTOOLS] Error importing action', error)
+      console.error('[VITE DEVTOOLS] Error executing import action', error)
       return Promise.reject(error)
     })
 }
 
 function onSelected(entry: DevToolsDockEntry) {
-  if (entry?.type === 'action') {
-    return importScript(entry.import).then(fn => fn())
-  }
-
-  state.value.dockEntry = entry
+  const context: ImportScriptContext = reactive({
+    dockEntry: entry,
+    // @ts-expect-error cast for unwraping
+    dockState: computed<'active' | 'inactive'>({
+      get() {
+        return state.value.dockEntry?.id === entry.id ? 'active' : 'inactive'
+      },
+      set(val) {
+        if (val === 'active')
+          state.value.dockEntry = entry
+        else if (state.value.dockEntry?.id === entry.id)
+          state.value.dockEntry = undefined
+      },
+    }),
+    hidePanel() {
+      state.value.open = false
+    },
+  })
 
-  // TODO: handle for each type of entry
-  if ('import' in entry && entry.import) {
-    importScript(entry.import)
+  if (entry?.type === 'action') {
+    return importScript(entry).then(fn => fn(context))
   }
 }
 

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

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-defineProps<{
+import { computed } from 'vue'
+
+const props = defineProps<{
   icon: string
   title?: string
 }>()
@@ -14,12 +16,23 @@ function getIconUrl(str: string, color: 'dark' | 'light') {
   }
   return str
 }
+
+const icon = computed(() => {
+  return {
+    dark: getIconUrl(props.icon, 'dark'),
+    light: getIconUrl(props.icon, 'light'),
+  }
+})
 </script>
 
 <template>
-  <img
-    :src="getIconUrl(icon, 'dark')"
-    :alt="title"
-    draggable="false"
-  >
+  <picture>
+    <source :srcset="icon.dark" media="(prefers-color-scheme: dark)">
+    <source :srcset="icon.light" media="(prefers-color-scheme: light)">
+    <img
+      :src="icon.light"
+      :alt="title"
+      draggable="false"
+    >
+  </picture>
 </template>

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

@@ -1,3 +1,4 @@
+import type { DevToolsNodeContext } from '@vitejs/devtools-kit'
 import type { Plugin } from 'vite'
 import { createDevToolsContext } from '../context'
 import { createDevToolsMiddleware } from '../server'
@@ -7,17 +8,37 @@ import '../rpc'
  * Core plugin for enabling Vite DevTools
  */
 export function DevToolsServer(): Plugin {
+  let context: DevToolsNodeContext
   return {
     name: 'vite:devtools:server',
     enforce: 'post',
     apply: 'serve',
     async configureServer(viteDevServer) {
-      const context = await createDevToolsContext(viteDevServer.config, viteDevServer)
+      context = await createDevToolsContext(viteDevServer.config, viteDevServer)
       const { middleware } = await createDevToolsMiddleware({
         cwd: viteDevServer.config.root,
         context,
       })
       viteDevServer.middlewares.use('/.devtools/', middleware)
     },
+    resolveId(id) {
+      if (id === '/.devtools-imports') {
+        return id
+      }
+    },
+    load(id) {
+      if (id === '/.devtools-imports') {
+        if (!context) {
+          throw new Error('DevTools context is not initialized')
+        }
+        const docks = Array.from(context.docks.values())
+        const imports = docks.map(i => i.import ? { id: i.id, ...i.import } : undefined).filter(x => !!x)
+        return [
+          `export const importsMap = {`,
+          ...imports.map(i => `  ${JSON.stringify(i.id)}: () => import(${JSON.stringify(i.importFrom)}).then(r => r[${JSON.stringify(i.importName)}]),`),
+          '}',
+        ].join('\n')
+      }
+    },
   }
 }

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

@@ -1,6 +1,6 @@
 import type { WebSocketRpcClientOptions } from '@vitejs/devtools-rpc/presets/ws/client'
 import type { BirpcOptions, BirpcReturn } from 'birpc'
-import type { ConnectionMeta, DevToolsRpcClientFunctions, DevToolsRpcServerFunctions } from '../types'
+import type { ConnectionMeta, DevToolsDockEntry, DevToolsRpcClientFunctions, DevToolsRpcServerFunctions } from '../types'
 import { createRpcClient } from '@vitejs/devtools-rpc'
 import { createWsRpcPreset } from '@vitejs/devtools-rpc/presets/ws/client'
 
@@ -17,6 +17,25 @@ export interface DevToolsRpcClientOptions {
   rpcOptions?: Partial<BirpcOptions<DevToolsRpcServerFunctions>>
 }
 
+export interface ImportScriptContext {
+  /**
+   * The dock entry info of the current dock item
+   */
+  dockEntry: DevToolsDockEntry
+  /**
+   * The current state of the dock
+   */
+  dockState: 'active' | 'inactive'
+  /**
+   * Function to hide the panel, if applicable
+   */
+  hidePanel: () => void
+  /**
+   * The panel element to mount into, if applicable
+   */
+  elPanel?: HTMLElement | null
+}
+
 export async function getDevToolsRpcClient(
   options: DevToolsRpcClientOptions = {},
 ): Promise<{