fix: use RPC to get tasks (#625)

packages/devtools-kit/src/_types/integrations.ts

@@ -71,11 +71,24 @@ export interface Payload {
 
 export interface ServerTaskInfo {
   name: string
+  handler: string
   description: string
   type: 'collection' | 'task'
   tasks?: ServerTaskInfo[]
 }
 
+export interface ScannedNitroTasks {
+  tasks: {
+    [name: string]: {
+      handler: string
+      description: string
+    }
+  }
+  scheduledTasks: {
+    [cron: string]: string[]
+  }
+}
+
 export interface PluginInfoWithMetic {
   src: string
   mode?: 'client' | 'server' | 'all'

packages/devtools-kit/src/_types/rpc.ts

@@ -3,7 +3,7 @@ import type { StorageMounts } from 'nitropack'
 import type { StorageValue } from 'unstorage'
 import type { ModuleOptions, NuxtDevToolsOptions } from './options'
 import type { ModuleCustomTab } from './custom-tabs'
-import type { AssetEntry, AssetInfo, AutoImportsWithMetadata, ComponentRelationship, HookInfo, ImageMeta, NpmCommandOptions, NpmCommandType, PackageUpdateInfo, ServerRouteInfo } from './integrations'
+import type { AssetEntry, AssetInfo, AutoImportsWithMetadata, ComponentRelationship, HookInfo, ImageMeta, NpmCommandOptions, NpmCommandType, PackageUpdateInfo, ScannedNitroTasks, ServerRouteInfo } from './integrations'
 import type { TerminalAction, TerminalInfo } from './terminals'
 import type { GetWizardArgs, WizardActions } from './wizard'
 import type { AnalyzeBuildsInfo } from './analyze-build'
@@ -23,6 +23,7 @@ export interface ServerFunctions {
   getServerLayouts: () => NuxtLayout[]
   getStaticAssets: () => Promise<AssetInfo[]>
   getServerRoutes: () => ServerRouteInfo[]
+  getServerTasks: () => ScannedNitroTasks | null
   getServerApp: () => NuxtApp | undefined
 
   // Options

packages/devtools/client/components/ServerTaskDetails.vue

@@ -38,6 +38,9 @@ const responseLang = computed(() => {
 
 const fetching = ref(false)
 const started = ref(false)
+
+const openInEditor = useOpenInEditor()
+
 const activeTab = ref()
 
 const tabInputs = ['json']
@@ -231,17 +234,16 @@ const copy = useCopy()
               n="xs blue"
               icon="carbon:copy"
               :border="false"
-              @click="copy(finalURL, 'server-route-url')"
+              @click="copy(finalURL, 'server-task-url')"
             />
-            <!-- @todo: Get file path when retrieving tasks -->
-            <!-- <NButton
+            <NButton
               v-tooltip="'Open in Editor'"
               title="Open in Editor"
               icon="carbon-launch"
               n="xs blue"
               :border="false"
-              @click="openInEditor(task.filepath)"
-            /> -->
+              @click="openInEditor(task.handler)"
+            />
           </div>
         </div>
         <NButton h-full n="primary solid" @click="fetchData">

packages/devtools/client/components/ServerTaskListItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ServerTaskInfo } from '../../src/types/tasks'
+import type { ServerTaskInfo } from '~/../../src/types'
 
 withDefaults(defineProps<{
   item: ServerTaskInfo

packages/devtools/client/composables/state.ts

@@ -1,7 +1,6 @@
 import type { Ref } from 'vue'
 import { objectPick } from '@antfu/utils'
 import type { HookInfo, RouteInfo } from '../../src/types'
-import type { ScannedNitroTasks } from '../../src/types/tasks'
 
 export function useServerPages() {
   return useAsyncState('getServerPages', () => rpc.getServerPages())
@@ -12,7 +11,7 @@ export function useServerRoutes() {
 }
 
 export function useServerTasks() {
-  return useAsyncState('getServerTasks', () => $fetch<ScannedNitroTasks>('/_nitro/tasks'))
+  return useAsyncState('getServerTasks', () => rpc.getServerTasks())
 }
 
 export function useServerHooks() {

packages/devtools/client/pages/modules/server-tasks.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Fuse from 'fuse.js'
-import type { ServerTaskInfo } from '../../../src/types/tasks'
+import type { ServerTaskInfo } from '~/../../src/types'
 import ServerTaskListItem from '~/components/ServerTaskListItem.vue'
 
 definePageMeta({
@@ -16,7 +16,6 @@ definePageMeta({
         return false
 
       return Object.keys(serverTasks.value?.tasks ?? {}).length
-        || serverTasks.value?.scheduledTasks !== false
     }
   },
 })
@@ -31,7 +30,9 @@ const tasks = computed<ServerTaskInfo[]>(() => Object.keys(serverTasks.value?.ta
 })))
 
 const scheduledTasks = computed(() => {
-  return serverTasks.value?.scheduledTasks || []
+  return Object
+    .entries(serverTasks.value?.scheduledTasks ?? {})
+    .map(([cron, tasks]) => ({ cron, tasks }))
 })
 
 const currentServerTask = useCurrentServerTask()
@@ -89,6 +90,7 @@ const filterByCollection = computed(() => {
 
     const newCollection: ServerTaskInfo = {
       name: taskName,
+      handler: taskName,
       description: '',
       type: 'collection',
       tasks: [],

packages/devtools/src/server-rpc/index.ts

@@ -18,6 +18,7 @@ import { setupGeneralRPC } from './general'
 import { setupWizardRPC } from './wizard'
 import { setupTerminalRPC } from './terminals'
 import { setupServerRoutesRPC } from './server-routes'
+import { setupServerTasksRPC } from './server-tasks'
 import { setupAnalyzeBuildRPC } from './analyze-build'
 import { setupOptionsRPC } from './options'
 import { setupTimelineRPC } from './timeline'
@@ -95,6 +96,7 @@ export function setupRPC(nuxt: Nuxt, options: ModuleOptions) {
     ...setupWizardRPC(ctx),
     ...setupTerminalRPC(ctx),
     ...setupServerRoutesRPC(ctx),
+    ...setupServerTasksRPC(ctx),
     ...setupAnalyzeBuildRPC(ctx),
     ...setupOptionsRPC(ctx),
     ...setupTimelineRPC(ctx),

packages/devtools/src/server-rpc/server-tasks.ts

@@ -0,0 +1,57 @@
+import type { Nitro } from 'nitropack'
+import { debounce } from 'perfect-debounce'
+import type { NuxtDevtoolsServerContext, ScannedNitroTasks, ServerFunctions } from '../types'
+
+export function setupServerTasksRPC({ nuxt, refresh }: NuxtDevtoolsServerContext) {
+  let nitro: Nitro
+
+  let cache: ScannedNitroTasks | null = null
+
+  const refreshDebounced = debounce(() => {
+    cache = null
+    refresh('getServerTasks')
+  }, 500)
+
+  nuxt.hook('nitro:init', (_) => {
+    nitro = _
+    cache = null
+    refresh('getServerTasks')
+  })
+
+  nuxt.hook('ready', () => {
+    nitro?.storage.watch((event, key) => {
+      if (key.startsWith('src:tasks:'))
+        refreshDebounced()
+    })
+  })
+
+  function scan() {
+    if (cache)
+      return cache
+
+    cache = (() => {
+      if (!nitro) {
+        return {
+          tasks: {},
+          scheduledTasks: {},
+        }
+      }
+      return {
+        tasks: nitro.options.tasks,
+        scheduledTasks: Object.entries(nitro.options.scheduledTasks)
+          .reduce<Record<string, string[]>>((acc, [cron, tasks]) => {
+            acc[cron] = Array.isArray(tasks) ? tasks : [tasks]
+            return acc
+          }, {}),
+      }
+    })()
+
+    return cache
+  }
+
+  return {
+    getServerTasks() {
+      return scan()
+    },
+  } satisfies Partial<ServerFunctions>
+}

packages/devtools/src/types/tasks.ts

@@ -1,20 +1,4 @@
-export interface ScannedNitroTasks {
-  tasks: {
-    [name: string]: {
-      description: string
-    }
-  }
-  scheduledTasks: false | CronCollection[]
-}
-
 export interface CronCollection {
   cron: string
   tasks: string[]
 }
-
-export interface ServerTaskInfo {
-  name: string
-  description: string
-  type: 'collection' | 'task'
-  tasks?: ServerTaskInfo[]
-}