refactor

Author: antfu

packages/core/src/client/standalone/App.vue

@@ -5,7 +5,6 @@ import { markRaw, useTemplateRef } from 'vue'
 import DockEntries from '../webcomponents/components/DockEntries.vue'
 import VitePlus from '../webcomponents/components/icons/VitePlus.vue'
 import ViewEntry from '../webcomponents/components/ViewEntry.vue'
-import { useStateHandlers } from '../webcomponents/state/__todo-refactor'
 import { createDocksContext } from '../webcomponents/state/context'
 import { PresistedDomViewsManager } from '../webcomponents/utils/PresistedDomViewsManager'
 
@@ -24,8 +23,6 @@ const context: DocksContext = await createDocksContext(
 )
 
 context.docks.selectedId ||= context.docks.entries[0]?.id ?? null
-
-const { selectDockEntry } = useStateHandlers(context)
 </script>
 
 <template>
@@ -39,7 +36,7 @@ const { selectDockEntry } = useStateHandlers(context)
         class="transition duration-200 p2"
         :is-vertical="false"
         :selected="context.docks.selected"
-        @select="selectDockEntry"
+        @select="(e) => context.docks.switchEntry(e.id)"
       />
     </div>
     <div>

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

@@ -2,7 +2,6 @@
 import type { DocksContext } from '@vitejs/devtools-kit/client'
 import { useEventListener, useScreenSafeArea } from '@vueuse/core'
 import { computed, onMounted, reactive, ref, useTemplateRef, watchEffect } from 'vue'
-import { useStateHandlers } from '../state/__todo-refactor'
 import DockEntries from './DockEntries.vue'
 import BracketLeft from './icons/BracketLeft.vue'
 import BracketRight from './icons/BracketRight.vue'
@@ -220,8 +219,6 @@ const panelStyle = computed(() => {
   return style
 })
 
-const { selectDockEntry } = useStateHandlers(context)
-
 onMounted(() => {
   bringUp()
   recalculateCounter.value++
@@ -277,7 +274,7 @@ onMounted(() => {
           :class="isMinimized ? 'opacity-0 pointer-events-none' : 'opacity-100'"
           :is-vertical="context.panel.isVertical"
           :selected="context.docks.selected"
-          @select="selectDockEntry"
+          @select="(e) => context.docks.switchEntry(e.id)"
         />
       </div>
     </div>

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

@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
+import type { DevToolsDockEntryWithBuiltin } from '@vitejs/devtools-kit'
 import { toRefs } from 'vue'
 import DockEntry from './DockEntry.vue'
 
 const props = defineProps<{
-  entries: DevToolsDockEntry[]
-  selected: DevToolsDockEntry | null
+  entries: DevToolsDockEntryWithBuiltin[]
+  selected: DevToolsDockEntryWithBuiltin | null
   isVertical: boolean
 }>()
 
 const emit = defineEmits<{
-  (e: 'select', entry: DevToolsDockEntry): void
+  (e: 'select', entry: DevToolsDockEntryWithBuiltin): void
 }>()
 
 const { selected, isVertical, entries } = toRefs(props)
 
-function toggleDockEntry(dock: DevToolsDockEntry) {
+function toggleDockEntry(dock: DevToolsDockEntryWithBuiltin) {
   if (selected.value?.id === dock.id)
     emit('select', undefined!)
   else

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

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
+import type { DevToolsDockEntryBase } from '@vitejs/devtools-kit'
 import { useEventListener } from '@vueuse/core'
 import { useTemplateRef } from 'vue'
 import { setFloatingTooltip } from '../state/floating-tooltip'
 import DockIcon from './DockIcon.vue'
 
 const props = defineProps<{
-  dock: DevToolsDockEntry
+  dock: DevToolsDockEntryBase
   isSelected?: boolean
   isDimmed?: boolean
   isVertical?: boolean

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

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { DocksContext } from '@vitejs/devtools-kit/client'
+import { useTerminals } from '../state/terminals'
+
+const props = defineProps<{
+  context: DocksContext
+}>()
+
+const terminals = useTerminals(props.context)
+</script>
+
+<template>
+  <div>
+    {{ terminals }}
+  </div>
+</template>

packages/core/src/client/webcomponents/state/__todo-refactor.ts

@@ -1,7 +1,8 @@
-import type { ClientRpcReturn, DockEntryState, DockPanelStorage, DocksContext } from '@vitejs/devtools-kit/client'
+import type { ClientRpcReturn, DockClientScriptContext, DockEntryState, DockPanelStorage, DocksContext } from '@vitejs/devtools-kit/client'
 import type { Ref } from 'vue'
-import { computed, markRaw, reactive, ref, watchEffect } from 'vue'
+import { computed, markRaw, reactive, ref, toRefs, watchEffect } from 'vue'
 import { createDockEntryState, DEFAULT_DOCK_PANEL_STORE, useDocksEntries } from './docks'
+import { executeSetupScript } from './setup-script'
 
 let _docksContext: DocksContext | undefined
 export async function createDocksContext(
@@ -55,7 +56,23 @@ export async function createDocksContext(
         if (!entry)
           return false
         selectedId.value = entry.id
-        // TODO: run action
+
+        // If has import script, run it
+        if (
+          (entry.type === 'action')
+          || (entry.type === 'custom-render')
+          || (entry.type === 'iframe' && entry.clientScript)
+        ) {
+          const current = dockEntryStateMap.get(id)!
+          const scriptContext: DockClientScriptContext = reactive({
+            ...toRefs(_docksContext!) as any,
+            current,
+          })
+          await executeSetupScript(entry, scriptContext)
+        }
+
+        selectedId.value = entry.id
+        panelStore.value.open = true
         return true
       },
     },

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

@@ -0,0 +1,36 @@
+import type { DevToolsRpcClientFunctions } from '@vitejs/devtools-kit'
+import type { DocksContext } from '@vitejs/devtools-kit/client'
+import type { Ref, ShallowRef } from 'vue'
+import type { DevToolsTerminalSessionBase } from '../../../../../kit/src'
+import { shallowRef } from 'vue'
+
+export interface TerminalState {
+  info: DevToolsTerminalSessionBase
+  buffer?: string[] | null
+}
+
+let _terminalsRef: ShallowRef<TerminalState[]> | undefined
+export async function useTerminals(context: DocksContext): Promise<Ref<TerminalState[]>> {
+  if (_terminalsRef) {
+    return _terminalsRef
+  }
+  const terminals = _terminalsRef = shallowRef<TerminalState[]>([])
+  async function udpateTerminals() {
+    terminals.value = (await context.rpc.$call('vite:internal:terminals:list'))
+      .map((info) => {
+        return {
+          info: Object.freeze(info),
+          buffer: null,
+        }
+      })
+    // eslint-disable-next-line no-console
+    console.log('[VITE DEVTOOLS] Terminals Updated', [...terminals.value])
+  }
+  context.clientRpc.register({
+    name: 'vite:internal:terminals:updated' satisfies keyof DevToolsRpcClientFunctions,
+    type: 'action',
+    handler: () => udpateTerminals(),
+  })
+  await udpateTerminals()
+  return terminals
+}

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

@@ -3,19 +3,23 @@ import { docksList } from './internal/docks-list'
 import { docksOnLaunch } from './internal/docks-on-launch'
 import { rpcServerList } from './internal/rpc-server-list'
 import { terminalsList } from './internal/terminals-list'
+import { terminalsRead } from './internal/terminals-read'
 import { openInEditor } from './public/open-in-editor'
 import { openInFinder } from './public/open-in-finder'
 
+// @keep-sorted
 export const builtinPublicRpcDecalrations = [
   openInEditor,
   openInFinder,
 ] as const
 
+// @keep-sorted
 export const builtinInternalRpcDecalrations = [
-  rpcServerList,
   docksList,
-  terminalsList,
   docksOnLaunch,
+  rpcServerList,
+  terminalsList,
+  terminalsRead,
 ] as const
 
 export const builtinRpcDecalrations = [
@@ -36,9 +40,10 @@ export type BuiltinServerFunctionsDump = {
 declare module '@vitejs/devtools-kit' {
   export interface DevToolsRpcServerFunctions extends BuiltinServerFunctions {}
 
+  // @keep-sorted
   export interface DevToolsRpcClientFunctions {
     'vite:internal:docks:updated': () => Promise<void>
-    'vite:internal:terminals:updated': () => Promise<void>
     'vite:internal:terminals:stream-chunk': (data: DevToolsTerminalSessionStreamChunkEvent) => Promise<void>
+    'vite:internal:terminals:updated': () => Promise<void>
   }
 }

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

@@ -0,0 +1,20 @@
+import { defineRpcFunction } from '@vitejs/devtools-kit'
+
+export const terminalsRead = defineRpcFunction({
+  name: 'vite:internal:terminals:read',
+  type: 'query',
+  setup: (context) => {
+    return {
+      async handler(id: string) {
+        const seesion = context.terminals.sessions.get(id)
+        if (!seesion) {
+          throw new Error(`Terminal session with id "${id}" not found`)
+        }
+        return {
+          buffer: (seesion.buffer ?? []),
+          ts: Date.now(),
+        }
+      },
+    }
+  },
+})