feat!: rename interface of client script

Author: antfu

packages/core/src/client/webcomponents/state/state.ts

@@ -1,12 +1,12 @@
 import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
-import type { ImportScriptContext } from '@vitejs/devtools-kit/client'
+import type { DockClientScriptContext } from '@vitejs/devtools-kit/client'
 import type { Ref } from 'vue'
 import type { DevToolsDockState } from '../components/DockProps'
 import { computed, reactive } from 'vue'
 
 export function useStateHandlers(state: Ref<DevToolsDockState>) {
-  function importScript(entry: DevToolsDockEntry): Promise<(context: ImportScriptContext) => void | Promise<void>> {
-    const id = entry.id
+  function importScript(entry: DevToolsDockEntry): Promise<(context: DockClientScriptContext) => void | Promise<void>> {
+    const id = `${entry.type}:${entry.id}`
     return import(/* @vite-ignore */ ['/.devtools', 'imports'].join('-'))
       .then((module) => {
         const importsMap = module.importsMap as Record<string, () => Promise<() => void>>
@@ -17,21 +17,21 @@ export function useStateHandlers(state: Ref<DevToolsDockState>) {
         return importFn()
       })
       .catch((error) => {
-      // TODO: maybe popup a error toast here?
-      // TODO: A unified logger API
+        // TODO: maybe popup a error toast here?
+        // TODO: A unified logger API
         console.error('[VITE DEVTOOLS] Error executing import action', error)
         return Promise.reject(error)
       })
   }
 
-  function selectDockEntry(entry?: DevToolsDockEntry) {
+  async function selectDockEntry(entry?: DevToolsDockEntry) {
     if (!entry) {
       state.value.open = false
       state.value.dockEntry = undefined
       return
     }
 
-    const scriptContext: ImportScriptContext = reactive({
+    const scriptContext: DockClientScriptContext = reactive({
       dockEntry: entry,
       // @ts-expect-error cast for unwraping
       dockState: computed<'active' | 'inactive'>({
@@ -52,16 +52,14 @@ export function useStateHandlers(state: Ref<DevToolsDockState>) {
 
     // If it's an action, run and return (early exit)
     if (entry?.type === 'action') {
-      return importScript(entry).then(fn => fn(scriptContext))
+      return await importScript(entry).then(fn => fn(scriptContext))
     }
 
     state.value.dockEntry = entry
     state.value.open = true
 
     // If has import script, run it
-    if (entry.import) {
-      importScript(entry).then(fn => fn(scriptContext))
-    }
+    await importScript(entry).then(fn => fn?.(scriptContext))
   }
 
   return {

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

@@ -1,4 +1,4 @@
-import type { DevToolsNodeContext } from '@vitejs/devtools-kit'
+import type { ClientScriptEntry, DevToolsNodeContext } from '@vitejs/devtools-kit'
 import type { Plugin } from 'vite'
 import { createDevToolsContext } from '../context'
 import { createDevToolsMiddleware } from '../server'
@@ -32,10 +32,23 @@ export function DevToolsServer(): Plugin {
           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)
+        const map = new Map<string, ClientScriptEntry>()
+        for (const dock of docks) {
+          const id = `${dock.type}:${dock.id}`
+          if (dock.type === 'action') {
+            map.set(id, dock.action)
+          }
+          else if (dock.type === 'custom-render') {
+            map.set(id, dock.renderer)
+          }
+          else if (dock.type === 'iframe' && dock.clientScript) {
+            map.set(id, dock.clientScript)
+          }
+        }
         return [
           `export const importsMap = {`,
-          ...imports.map(i => `  ${JSON.stringify(i.id)}: () => import(${JSON.stringify(i.importFrom)}).then(r => r[${JSON.stringify(i.importName)}]),`),
+          ...[...Object.entries(map)]
+            .map(([id, { importFrom, importName }]) => `  ${JSON.stringify(id)}: () => import(${JSON.stringify(importFrom)}).then(r => r[${JSON.stringify(importName)}]),`),
           '}',
         ].join('\n')
       }

packages/kit/src/client/index.ts

@@ -17,7 +17,10 @@ export interface DevToolsRpcClientOptions {
   rpcOptions?: Partial<BirpcOptions<DevToolsRpcServerFunctions>>
 }
 
-export interface ImportScriptContext {
+/**
+ * Context for client scripts running in dock entries
+ */
+export interface DockClientScriptContext {
   /**
    * The dock entry info of the current dock item
    */
@@ -26,6 +29,13 @@ export interface ImportScriptContext {
    * The current state of the dock
    */
   dockState: 'active' | 'inactive'
+  /**
+   * Type of the client environment
+   *
+   * 'embedded' - running inside an embedded floating panel
+   * 'standalone' - running inside a standlone window (no user app)
+   */
+  clientType: 'embedded' | 'standalone'
   /**
    * Function to hide the panel, if applicable
    */

packages/kit/src/types/views.ts

@@ -61,19 +61,19 @@ export interface DevToolsViewIframe extends DevToolsDockEntryBase {
    */
   frameId?: string
   /**
-   * Optional script to import into the iframe
+   * Optional client script to import into the iframe
    */
-  import?: ClientScriptEntry
+  clientScript?: ClientScriptEntry
 }
 
 export interface DevToolsViewAction extends DevToolsDockEntryBase {
   type: 'action'
-  import: ClientScriptEntry
+  action: ClientScriptEntry
 }
 
 export interface DevToolsViewCustomRender extends DevToolsDockEntryBase {
   type: 'custom-render'
-  import: ClientScriptEntry
+  renderer: ClientScriptEntry
 }
 
 export type DevToolsDockEntry = DevToolsViewIframe | DevToolsViewAction | DevToolsViewCustomRender