feat(core): add simple support for action type

Author: antfu

packages/core/package.json

@@ -57,6 +57,7 @@
     "cac": "catalog:deps",
     "debug": "catalog:deps",
     "launch-editor": "catalog:deps",
+    "mlly": "catalog:deps",
     "open": "catalog:deps",
     "pathe": "catalog:deps",
     "sirv": "catalog:deps",

packages/core/playground/vite.config.ts

@@ -39,6 +39,18 @@ export default defineConfig({
             id: 'local',
             type: 'iframe',
             url: 'https://antfu.me',
+
+          })
+
+          ctx.docks.register({
+            type: 'action',
+            import: ctx.utils.clientEntryFromSimpleFunction(() => {
+              // eslint-disable-next-line no-alert
+              alert('Hello, world!')
+            }),
+            id: 'local2',
+            title: 'Local2',
+            icon: 'https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg',
           })
         },
       },

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { ClientScriptEntry, DevToolsDockEntry } from '@vitejs/devtools-kit'
 import type { DockProps } from './DockProps'
 import { useEventListener, useScreenSafeArea } from '@vueuse/core'
 import { computed, onMounted, reactive, ref, toRefs, useTemplateRef, watchEffect } from 'vue'
@@ -213,6 +214,32 @@ const panelStyle = computed(() => {
   return style
 })
 
+// TODO: use a visual module to host all the imports
+function importScript(entry: ClientScriptEntry) {
+  return import(/* @vite-ignore */ entry.importFrom)
+    .then((module) => {
+      return module[entry.importName || 'default']
+    })
+    .catch((error) => {
+      // TODO: maybe popup a error toast here?
+      console.error('[VITE DEVTOOLS] Error importing 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
+
+  // TODO: handle for each type of entry
+  if ('import' in entry && entry.import) {
+    importScript(entry.import)
+  }
+}
+
 onMounted(() => {
   bringUp()
   recalculateCounter.value++
@@ -250,7 +277,7 @@ onMounted(() => {
           :class="isMinimized ? 'opacity-0' : 'opacity-100'"
           :is-vertical="isVertical"
           :selected="state.dockEntry"
-          @select="s => state.dockEntry = s"
+          @select="onSelected"
         />
       </div>
     </div>

packages/core/src/node/context-utils.ts

@@ -0,0 +1,12 @@
+import type { DevToolsNodeUtils } from '@vitejs/devtools-kit'
+import { toDataURL } from 'mlly'
+
+export const ContextUtils: DevToolsNodeUtils = {
+  clientEntryFromSimpleFunction: (fn: () => void) => {
+    const code = `const fn = ${fn.toString()}; export default fn`
+    return {
+      importFrom: toDataURL(code),
+      importName: 'default',
+    }
+  },
+}

packages/core/src/node/context.ts

@@ -1,6 +1,7 @@
 import type { DevToolsNodeContext } from '@vitejs/devtools-kit'
 import type { ResolvedConfig, ViteDevServer } from 'vite'
 import Debug from 'debug'
+import { ContextUtils } from './context-utils'
 import { DevToolsDockHost } from './host-docks'
 import { RpcFunctionsHost } from './host-functions'
 import { DevToolsViewHost } from './host-views'
@@ -22,6 +23,7 @@ export async function createDevToolsContext(
     rpc: undefined!,
     docks: undefined!,
     views: undefined!,
+    utils: ContextUtils,
   }
   const rpcHost = new RpcFunctionsHost(context)
   const docksHost = new DevToolsDockHost(context)

packages/kit/src/types/views.ts

@@ -24,6 +24,19 @@ export interface DevToolsDockEntryBase {
   icon: string
 }
 
+export interface ClientScriptEntry {
+  /**
+   * The filepath or module name to import from
+   */
+  importFrom: string
+  /**
+   * The name to import the module as
+   *
+   * @default 'default'
+   */
+  importName?: string
+}
+
 export interface DevToolsViewIframe extends DevToolsDockEntryBase {
   type: 'iframe'
   url: string
@@ -33,21 +46,25 @@ export interface DevToolsViewIframe extends DevToolsDockEntryBase {
    * When not provided, it would be treated as a unique frame.
    */
   frameId?: string
+  /**
+   * Optional script to import into the iframe
+   */
+  import?: ClientScriptEntry
 }
 
 export interface DevToolsViewWebComponent extends DevToolsDockEntryBase {
   type: 'webcomponent'
-  from: string
-  import: string
+  import: ClientScriptEntry
 }
 
 export interface DevToolsViewAction extends DevToolsDockEntryBase {
   type: 'action'
-  importFrom: string
-  /**
-   * @default 'default'
-   */
-  importName?: string
+  import: ClientScriptEntry
+}
+
+export interface DevToolsViewCustomRender extends DevToolsDockEntryBase {
+  type: 'custom-render'
+  import: ClientScriptEntry
 }
 
-export type DevToolsDockEntry = DevToolsViewIframe | DevToolsViewWebComponent | DevToolsViewAction
+export type DevToolsDockEntry = DevToolsViewIframe | DevToolsViewWebComponent | DevToolsViewAction | DevToolsViewCustomRender

packages/kit/src/types/vite-plugin.ts

@@ -1,6 +1,6 @@
 import type { ResolvedConfig, ViteDevServer } from 'vite'
 import type { RpcFunctionsHost } from './rpc'
-import type { DevToolsDockHost, DevToolsViewHost } from './views'
+import type { ClientScriptEntry, DevToolsDockHost, DevToolsViewHost } from './views'
 
 export interface DevToolsCapabilities {
   rpc?: boolean
@@ -23,6 +23,11 @@ export interface DevToolsNodeContext {
   rpc: RpcFunctionsHost
   docks: DevToolsDockHost
   views: DevToolsViewHost
+  utils: DevToolsNodeUtils
+}
+
+export interface DevToolsNodeUtils {
+  clientEntryFromSimpleFunction: (fn: () => void) => ClientScriptEntry
 }
 
 export interface ConnectionMeta {