feat(kit)!: introduce events to client scripts, now client scripts would only be executed once

Author: antfu

packages/core/package.json

@@ -56,11 +56,13 @@
     "@vitejs/devtools-kit": "workspace:*",
     "@vitejs/devtools-rpc": "workspace:*",
     "@vitejs/devtools-vite": "workspace:*",
+    "birpc": "catalog:deps",
     "birpc-x": "catalog:deps",
     "cac": "catalog:deps",
     "debug": "catalog:deps",
     "launch-editor": "catalog:deps",
     "mlly": "catalog:deps",
+    "nanoevents": "catalog:deps",
     "open": "catalog:deps",
     "pathe": "catalog:deps",
     "sirv": "catalog:deps",

packages/core/playground/vite.config.ts

@@ -49,9 +49,13 @@ export default defineConfig({
 
           ctx.docks.register({
             type: 'action',
-            action: ctx.utils.createSimpleClientScript(() => {
+            action: ctx.utils.createSimpleClientScript((ctx) => {
               // eslint-disable-next-line no-alert
-              alert('Hello, world!')
+              alert('Hello, world! For the first time!')
+              ctx.current.events.on('entry:activated', () => {
+                // eslint-disable-next-line no-alert
+                alert('Hello, world!')
+              })
             }),
             id: 'local2',
             title: 'Local2',
@@ -61,22 +65,20 @@ export default defineConfig({
           ctx.docks.register({
             type: 'custom-render',
             renderer: ctx.utils.createSimpleClientScript((ctx) => {
-              if (!ctx.current.domElements.panel) {
-                // eslint-disable-next-line no-alert
-                alert('No panel element found!')
-              }
-              const el = document.createElement('div')
-              el.style.padding = '16px'
-              el.textContent = 'Hello from custom render dock!'
+              ctx.current.events.on('dom:panel:mounted', (panel) => {
+                const el = document.createElement('div')
+                el.style.padding = '16px'
+                el.textContent = 'Hello from custom render dock!'
 
-              const btn = document.createElement('button')
-              btn.textContent = 'Click me'
-              btn.onclick = () => {
+                const btn = document.createElement('button')
+                btn.textContent = 'Click me'
+                btn.onclick = () => {
                 // eslint-disable-next-line no-alert
-                alert('Button clicked in custom render dock!')
-              }
-              el.appendChild(btn)
-              ctx.current.domElements.panel?.appendChild(el)
+                  alert('Button clicked in custom render dock!')
+                }
+                el.appendChild(btn)
+                panel.appendChild(el)
+              })
             }),
             id: 'custom-render',
             title: 'Custom',

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

@@ -1,7 +1,8 @@
 import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
-import type { DevToolsRpcClient, DockEntryState, DockPanelStorage, DocksContext } from '@vitejs/devtools-kit/client'
+import type { DevToolsRpcClient, DockEntryState, DockEntryStateEvents, DockPanelStorage, DocksContext } from '@vitejs/devtools-kit/client'
 import type { Ref } from 'vue'
-import { computed, reactive, ref, shallowRef } from 'vue'
+import { createNanoEvents } from 'nanoevents'
+import { computed, markRaw, reactive, ref, shallowRef, watch } from 'vue'
 
 export function DEFAULT_DOCK_PANEL_STORE(): DockPanelStorage {
   return {
@@ -15,6 +16,42 @@ export function DEFAULT_DOCK_PANEL_STORE(): DockPanelStorage {
   }
 }
 
+function createDockEntryState(
+  entry: DevToolsDockEntry,
+  selected: Ref<DevToolsDockEntry | null>,
+): DockEntryState {
+  const events = createNanoEvents<DockEntryStateEvents>()
+  const state: DockEntryState = reactive({
+    entryMeta: entry,
+    get isActive() {
+      return selected.value?.id === entry.id
+    },
+    domElements: {},
+    events: markRaw(events),
+  })
+
+  watch(() => selected.value?.id, (newSelectedId) => {
+    if (newSelectedId === entry.id) {
+      events.emit('entry:activated')
+    }
+    else {
+      events.emit('entry:deactivated')
+    }
+  })
+
+  watch(() => state.domElements.iframe, (newIframe) => {
+    if (newIframe)
+      events.emit('dom:iframe:mounted', newIframe)
+  })
+
+  watch(() => state.domElements.panel, (newPanel) => {
+    if (newPanel)
+      events.emit('dom:panel:mounted', newPanel)
+  })
+
+  return state
+}
+
 export async function createDocksContext(
   clientType: 'embedded' | 'standalone',
   rpc: DevToolsRpcClient,
@@ -25,17 +62,12 @@ export async function createDocksContext(
   // eslint-disable-next-line no-console
   console.log('[VITE DEVTOOLS] Docks Entries', [...dockEntries.value])
   // TODO: get board case from rpc when entries updates
-  const dockEntryStateMap = reactive(new Map<string, DockEntryState>())
+  const dockEntryStateMap: Map<string, DockEntryState> = reactive(new Map())
   for (const entry of dockEntries.value) {
+    // TODO: handle update
     dockEntryStateMap.set(
       entry.id,
-      reactive({
-        entryMeta: entry,
-        get isActive() {
-          return selected.value?.id === entry.id
-        },
-        domElements: {},
-      }),
+      createDockEntryState(entry, selected),
     )
   }
 
@@ -51,7 +83,7 @@ export async function createDocksContext(
     docks: {
       selected,
       entries: dockEntries.value,
-      entryToStateMap: dockEntryStateMap,
+      entryToStateMap: markRaw(dockEntryStateMap),
       getStateById: (id: string) => dockEntryStateMap.get(id),
       switchEntry: async (id: string | null) => {
         if (id === null) {

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

@@ -5,16 +5,19 @@ import { reactive, toRefs } from 'vue'
 export function useStateHandlers(
   context: DocksContext,
 ) {
-  function importScript(entry: DevToolsDockEntry): Promise<(context: DockClientScriptContext) => void | Promise<void>> {
+  function _setupScript(
+    entry: DevToolsDockEntry,
+    context: DockClientScriptContext,
+  ): 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>>
+        const importsMap = module.importsMap as Record<string, () => Promise<(context: DockClientScriptContext) => void>>
         const importFn = importsMap[id]
         if (!importFn) {
           return Promise.reject(new Error(`[VITE DEVTOOLS] No import found for id: ${id}`))
         }
-        return importFn()
+        return importFn().then(fn => fn(context))
       })
       .catch((error) => {
         // TODO: maybe popup a error toast here?
@@ -24,6 +27,15 @@ export function useStateHandlers(
       })
   }
 
+  const setupPromises = new Map<string, Promise<void>>()
+  function setupScript(entry: DevToolsDockEntry, context: DockClientScriptContext): Promise<void> {
+    if (setupPromises.has(entry.id))
+      return setupPromises.get(entry.id)!
+    const promise = _setupScript(entry, context)
+    setupPromises.set(entry.id, promise)
+    return promise
+  }
+
   async function selectDockEntry(entry?: DevToolsDockEntry) {
     if (!entry) {
       context.panel.store.open = false
@@ -37,25 +49,21 @@ export function useStateHandlers(
     const current = context.docks.getStateById(entry.id)!
 
     const scriptContext: DockClientScriptContext = reactive({
-      ...toRefs(context),
+      ...toRefs(context) as any,
       current,
     })
 
-    // If it's an action, run and return (early exit)
-    if (entry?.type === 'action') {
-      return await importScript(entry).then(fn => fn(scriptContext))
-    }
-
-    context.docks.selected = entry
-    context.panel.store.open = true
-
     // If has import script, run it
     if (
-      (entry.type === 'custom-render')
+      (entry.type === 'action')
+      || (entry.type === 'custom-render')
       || (entry.type === 'iframe' && entry.clientScript)
     ) {
-      await importScript(entry).then(fn => fn(scriptContext))
+      await setupScript(entry, scriptContext)
     }
+
+    context.docks.selected = entry
+    context.panel.store.open = true
   }
 
   return {

packages/kit/package.json

@@ -40,7 +40,8 @@
   "dependencies": {
     "@vitejs/devtools-rpc": "workspace:*",
     "birpc": "catalog:deps",
-    "birpc-x": "catalog:deps"
+    "birpc-x": "catalog:deps",
+    "nanoevents": "catalog:deps"
   },
   "devDependencies": {
     "tsdown": "catalog:build",

packages/kit/src/client/client-script.ts

@@ -1,39 +1,11 @@
-import type { DevToolsDockEntry } from '../types'
 import type { DockEntryState, DocksContext } from './docks'
 
 /**
  * Context for client scripts running in dock entries
  */
 export interface DockClientScriptContext extends DocksContext {
   /**
-   * The state if the current dock entry
+   * The state of the current dock entry
    */
   current: DockEntryState
 }
-
-export interface DockClientScriptCurrent {
-  /**
-   * The dock entry info of the current dock item
-   */
-  entryMeta: DevToolsDockEntry
-
-  /**
-   * The current state of the dock
-   */
-  state: 'active' | 'inactive'
-
-  /**
-   * The panel element to mount into, when the entry type is `custom-render`
-   */
-  elPanel?: HTMLDivElement | null
-
-  /**
-   * The iframe element to mount into, when the entry type is `iframe`
-   */
-  elIframe?: HTMLIFrameElement | null
-
-  /**
-   * The dock icon element
-   */
-  elDockIcon?: HTMLDivElement | null
-}

packages/kit/src/client/docks.ts

@@ -1,3 +1,5 @@
+import type { Emitter as EventsEmitter } from 'nanoevents'
+import type { Raw } from 'vue'
 import type { DevToolsDockEntry } from '../types'
 import type { DevToolsRpcClient } from './rpc'
 
@@ -65,4 +67,13 @@ export interface DockEntryState {
     iframe?: HTMLIFrameElement | null
     panel?: HTMLDivElement | null
   }
+  events: Raw<EventsEmitter<DockEntryStateEvents>>
+}
+
+export interface DockEntryStateEvents {
+  'entry:activated': () => void
+  'entry:deactivated': () => void
+  'entry:updated': (newMeta: DevToolsDockEntry) => void
+  'dom:panel:mounted': (panel: HTMLDivElement) => void
+  'dom:iframe:mounted': (iframe: HTMLIFrameElement) => void
 }