chore: update

Author: webfansplz

packages/rolldown/src/app/pages/session/[session].vue

@@ -2,9 +2,10 @@
 import type { ModuleListItem, SessionContext } from '~~/shared/types'
 import { useRoute, useRouter } from '#app/composables/router'
 import { useRpc } from '#imports'
+import PanelSideNav from '@vitejs/devtools-ui/components/PanelSideNav.vue'
+import { useSideNav } from '@vitejs/devtools-ui/composables/nav'
 import { onKeyDown } from '@vueuse/core'
 import { computed, onMounted, reactive, ref, shallowRef } from 'vue'
-import { useSideNav } from '~/state/nav'
 import { getFileTypeFromName } from '~/utils/icon'
 
 const params = useRoute().params as {

packages/rolldown/src/app/pages/session/[session]/index.vue

@@ -3,8 +3,8 @@ import type { SessionContext } from '~~/shared/types'
 import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 import DisplayDuration from '@vitejs/devtools-ui/components/DisplayDuration.vue'
 import DisplayNumberBadge from '@vitejs/devtools-ui/components/DisplayNumberBadge.vue'
+import { sideNavItems } from '@vitejs/devtools-ui/composables/nav'
 import { computed } from 'vue'
-import { sideNavItems } from '~~/app/state/nav'
 
 const props = defineProps<{
   session: SessionContext

packages/ui/package.json

@@ -45,6 +45,7 @@
   "module": "./src/index.ts",
   "peerDependencies": {
     "@vueuse/core": "*",
+    "nuxt": "*",
     "unocss": "*",
     "vue": "*",
     "vue-virtual-scroller": ">=2.0.0-beta.0"

…own/src/app/components/panel/SideNav.vue …kages/ui/src/components/PanelSideNav.vuepackages/rolldown/src/app/components/panel/SideNav.vue renamed to packages/ui/src/components/PanelSideNav.vue packages/rolldown/src/app/components/panel/SideNav.vue renamed to packages/ui/src/components/PanelSideNav.vue

@@ -1,18 +1,31 @@
 <script setup lang="ts">
-import type { SideNavItem } from '~/state/nav'
+import type { SideNavItem } from '../composables/nav'
 import { NuxtLink } from '#components'
-import { toggleDark } from '@vitejs/devtools-ui/composables/dark'
 import { computed } from 'vue'
-import { sideNavItems } from '~/state/nav'
+import { toggleDark } from '../composables/dark'
+import { sideNavItems } from '../composables/nav'
 
-const items = computed<SideNavItem[]>(() => [
-  ...sideNavItems.value,
-  {
-    title: 'Toggle dark mode',
-    icon: 'i-ph-sun-duotone dark:i-ph-moon-duotone',
-    action: toggleDark,
-  },
-])
+const props = withDefaults(defineProps<{
+  items?: SideNavItem[]
+  showDarkModeToggle?: boolean
+}>(), {
+  showDarkModeToggle: true,
+})
+
+const items = computed<SideNavItem[]>(() => {
+  const navItems = props.items ?? sideNavItems.value
+  if (!props.showDarkModeToggle) {
+    return navItems
+  }
+  return [
+    ...navItems,
+    {
+      title: 'Toggle dark mode',
+      icon: 'i-ph-sun-duotone dark:i-ph-moon-duotone',
+      action: toggleDark,
+    },
+  ]
+})
 </script>
 
 <template>

packages/rolldown/src/app/state/nav.ts packages/ui/src/composables/nav.tspackages/rolldown/src/app/state/nav.ts renamed to packages/ui/src/composables/nav.ts

@@ -9,29 +9,28 @@ export interface SideNavItem {
   action?: () => void
 }
 
-let __id = 0
+let id = 0
 const sideNavItemsMap = reactive(new Map<number, SideNavItem[]>())
 
 export const sideNavItems = computed(() => Array.from(sideNavItemsMap.values()).flat())
 
 export function useSideNav(items: MaybeRefOrGetter<SideNavItem[]>) {
-  const r = toRef(items)
+  const itemsRef = toRef(items)
 
   let clear = () => {}
-  function add(items: SideNavItem[]) {
+  function add(nextItems: SideNavItem[]) {
     clear()
-    const id = __id++
-    sideNavItemsMap.set(id, items)
+    const currentId = id++
+    sideNavItemsMap.set(currentId, nextItems)
     clear = () => {
-      sideNavItemsMap.delete(id)
+      sideNavItemsMap.delete(currentId)
     }
-    return id
   }
 
   watch(
-    r,
-    (items) => {
-      add(items)
+    itemsRef,
+    (nextItems) => {
+      add(nextItems)
     },
     { immediate: true },
   )

packages/vite/src/app/composables/rpc.ts

@@ -0,0 +1,59 @@
+import type {} from '@vitejs/devtools'
+import type { DevToolsRpcClient } from '@vitejs/devtools-kit/client'
+import type {} from '../../node/rpc'
+import { useRuntimeConfig } from '#app/nuxt'
+import { getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
+import { reactive, shallowRef } from 'vue'
+
+export const rpcConnectionState = reactive<{
+  connected: boolean
+  error: Error | null
+}>({
+  connected: false,
+  error: null,
+})
+
+const rpc = shallowRef<DevToolsRpcClient>(undefined!)
+
+export async function connect() {
+  const runtimeConfig = useRuntimeConfig()
+  try {
+    rpc.value = await getDevToolsRpcClient({
+      baseURL: [
+        '/.devtools/',
+        runtimeConfig.app.baseURL,
+      ],
+      connectionMeta: runtimeConfig.app.connection,
+      wsOptions: {
+        onConnected: () => {
+          rpcConnectionState.connected = true
+        },
+        onError: (e) => {
+          rpcConnectionState.error = e
+        },
+        onDisconnected: () => {
+          rpcConnectionState.connected = false
+        },
+      },
+      rpcOptions: {
+        onGeneralError: (e, name) => {
+          rpcConnectionState.error = e
+          console.error(`[vite-devtools] RPC error on executing "${name}":`)
+        },
+        onFunctionError: (e, name) => {
+          rpcConnectionState.error = e
+          console.error(`[vite-devtools] RPC error on executing "${name}":`)
+        },
+      },
+    })
+
+    rpcConnectionState.connected = true
+  }
+  catch (e) {
+    rpcConnectionState.error = e as Error
+  }
+}
+
+export function useRpc() {
+  return rpc
+}

packages/vite/src/modules/rpc.ts

@@ -0,0 +1,24 @@
+import { addVitePlugin, defineNuxtModule } from '@nuxt/kit'
+import { DevToolsServer } from '../../../core/src/node/plugins/server'
+import { rpcFunctions } from '../node/rpc'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'devtools-rpc',
+    configKey: 'devtoolsRpc',
+  },
+  setup() {
+    addVitePlugin({
+      name: 'vite:devtools:vite',
+      devtools: {
+        setup(ctx) {
+          for (const fn of rpcFunctions) {
+            ctx.rpc.register(fn)
+          }
+        },
+      },
+    })
+
+    addVitePlugin(DevToolsServer())
+  },
+})

packages/vite/src/node/rpc/functions/hi.ts

@@ -0,0 +1,17 @@
+import { defineRpcFunction } from '@vitejs/devtools-kit'
+
+export const viteHi = defineRpcFunction({
+  name: 'vite:hi',
+  type: 'query',
+  setup: (context) => {
+    return {
+      handler: async () => {
+        return {
+          message: 'Hi from server.',
+          cwd: context.cwd,
+          timestamp: Date.now(),
+        }
+      },
+    }
+  },
+})

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

@@ -0,0 +1,13 @@
+import type { RpcDefinitionsToFunctions } from '@vitejs/devtools-kit'
+import { viteHi } from './functions/hi'
+import '@vitejs/devtools-kit'
+
+export const rpcFunctions = [
+  viteHi,
+] as const
+
+export type ServerFunctions = RpcDefinitionsToFunctions<typeof rpcFunctions>
+
+declare module '@vitejs/devtools-kit' {
+  export interface DevToolsRpcServerFunctions extends ServerFunctions {}
+}

packages/vite/src/nuxt.config.ts

@@ -14,6 +14,7 @@ export default defineNuxtConfig({
     '@unocss/nuxt',
     '@nuxt/eslint',
     'nuxt-eslint-auto-explicit-import',
+    './modules/rpc',
   ],
 
   alias,