feat(server-routes): display latest selected route (#309)

nuxt · Jul 5, 2023 · 2977264 · 2977264
1 parent 8098b61
commit 2977264
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 15 deletions.
diff --git a/packages/devtools-kit/src/_types/options.ts b/packages/devtools-kit/src/_types/options.ts
@@ -1,5 +1,6 @@
 import type { VitePluginInspectorOptions } from 'vite-plugin-vue-inspector'
 import type { ModuleCustomTab } from './custom-tabs'
+import type { ServerRouteInfo } from './integrations'
 
 export interface ModuleOptions {
   /**
@@ -116,6 +117,7 @@ export interface NuxtDevToolsOptions {
     pinnedTabs: string[]
   }
   serverRoutes: {
-    // TODO: https://github.com/nuxt/devtools/pull/218
+    selectedRoute: ServerRouteInfo | null
+    // TODO: add global inputs
   }
 }
diff --git a/packages/devtools/client/components/ServerRouteDetails.vue b/packages/devtools/client/components/ServerRouteDetails.vue
@@ -9,12 +9,12 @@ const props = defineProps<{
 const currentRoute = useRoute()
 const config = useServerConfig()
 
-// TODO: use storage options to cache responses
 const response = reactive({
   contentType: 'text/plain',
   data: '' as any,
   statusCode: 200,
   error: undefined as Error | undefined,
+  fetchTime: 0,
 })
 
 const responseLang = computed(() => {
@@ -45,7 +45,6 @@ const responseContent = computed(() => {
   return response.data
 })
 
-const fetchTime = ref(0)
 const fetching = ref(false)
 const started = ref(false)
 
@@ -141,14 +140,9 @@ function parseInputs(inputs: any[]) {
 async function fetchData() {
   started.value = true
   fetching.value = true
-  Object.assign(response, {
-    lang: 'text',
-    contentType: '',
-    data: '',
-    error: undefined,
-  })
 
   const start = Date.now()
+
   try {
     response.data = await $fetch(finalURL.value, {
       method: routeMethod.value.toUpperCase() as any,
@@ -168,8 +162,9 @@ async function fetchData() {
   catch (err: any) {
 
   }
+
   fetching.value = false
-  fetchTime.value = Date.now() - start
+  response.fetchTime = Date.now() - start
 }
 
 const codeSnippets = computed(() => {
@@ -413,7 +408,7 @@ watch(currentParams, (value) => {
           Request finished in
         </div>
         <Badge bg-green-400:10 text-green-400>
-          {{ fetchTime }} ms
+          {{ response.fetchTime }} ms
         </Badge>
       </div>
       <div v-if="responseLang === 'pdf'" flex-auto overflow-auto>

diff --git a/packages/devtools/client/pages/modules/server-routes.vue b/packages/devtools/client/pages/modules/server-routes.vue
@@ -14,6 +14,7 @@ definePageMeta({
 })
 
 const vueRoute = useRoute()
+const vueRouter = useRouter()
 
 const serverRoutes = useServerRoutes()
 
@@ -96,7 +97,15 @@ const fuse = computed(() => new Fuse(serverRoutes.value || [], {
   shouldSort: true,
 }))
 
-const selected = computed(() => serverRoutes.value?.find(i => i.route === vueRoute.query?.path && i.method === vueRoute.query?.method))
+const { selectedRoute } = useDevToolsOptions('serverRoutes')
+const selected = computed(() => {
+  const route = serverRoutes.value?.find(i => i.route === vueRoute.query?.path && i.method === vueRoute.query?.method)
+  if (route)
+    selectedRoute.value = route
+  if (selectedRoute.value)
+    vueRouter.push({ query: { path: selectedRoute.value.route, method: selectedRoute.value.method } })
+  return route
+})
 const search = ref('')
 
 const filtered = computed(() => {
@@ -110,7 +119,7 @@ const filtered = computed(() => {
 </script>
 
 <template>
-  <PanelLeftRight>
+  <PanelLeftRight storage-key="tab-server-routes">
     <template #left>
       <Navbar v-model:search="search" pb2>
         <div flex="~ gap1" text-sm>

diff --git a/packages/devtools/src/constant.ts b/packages/devtools/src/constant.ts
@@ -37,6 +37,6 @@ export const defaultTabOptions: NuxtDevToolsOptions = {
     hiddenTabCategories: [],
   },
   serverRoutes: {
-    // TODO: https://github.com/nuxt/devtools/pull/218
+    selectedRoute: null,
   },
 }
diff --git a/packages/devtools/src/server-rpc/options.ts b/packages/devtools/src/server-rpc/options.ts
@@ -6,7 +6,7 @@ export function setupOptionsRPC({ nuxt }: NuxtDevtoolsServerContext) {
   let options: NuxtDevToolsOptions | undefined
 
   async function getOptions<T extends keyof NuxtDevToolsOptions>(tab: T): Promise<NuxtDevToolsOptions[T]> {
-    if (!options) {
+    if (!options || options[tab]) {
       options = defaultTabOptions
       await read(tab)
     }