feat: server HMR dynamic command loading

Author: zojize

src/runtime/server/plugins/discord.ts

@@ -1,16 +1,16 @@
 import type { ClientOptions } from 'discord.js'
 import type { WatchEvent } from 'nuxt/schema'
 import type { SlashCommand, SlashCommandRuntime } from '~/src/types'
-// ok this is unreliable but its the best I can do for now...
+import { existsSync } from 'node:fs'
 import slashCommands from 'discord/slashCommands'
 import { defineNitroPlugin, useRuntimeConfig } from 'nitropack/runtime'
+import { logger } from '../internal/logger'
 import { DiscordClient } from '../utils/client'
 
 export default defineNitroPlugin(async (nitro) => {
   const runtimeConfig = useRuntimeConfig()
 
   const client = new DiscordClient()
-
   ;(globalThis as any)[Symbol.for('discord-client')] = client
 
   if ('wsUrl' in (runtimeConfig.public.discord ?? {}) && typeof runtimeConfig.public.discord.wsUrl === 'string') {
@@ -21,21 +21,29 @@ export default defineNitroPlugin(async (nitro) => {
     })
 
     socket.addEventListener('message', async (event) => {
-      // this isn't relevant anymore since we rely on the full nitro server
-      // to be rebuilt each time and hmr is not really needed, I can't seem
-      // to figure out how actually make it hot reload without a full rebuild
-      // TODO: come back if I figure out how to make it work
-
       const data = JSON.parse(event.data) as
         | { event: WatchEvent, path: string, command: SlashCommand | null }
         | { event: 'full-update', commands: SlashCommand[] }
       if (data.event === 'full-update') {
         const commands: SlashCommand[] = []
         for (const cmd of data.commands) {
           const runtimeCommand = cmd as SlashCommandRuntime
-          // this won't work when command is updated because auto-imports
-          // in dynamic imports can't be resolved
-          runtimeCommand.load = () => import(cmd.path).then(m => m.default)
+          const buildPath = cmd.path
+            .replace(runtimeConfig.discord.rootDir, runtimeConfig.discord.buildDir)
+            .replace(/\.ts$/, '.mjs')
+          const existingCommand = slashCommands.find(c => c.path === cmd.path)
+          if (existsSync(buildPath)) {
+            logger.log(`Dynamically loading slash command at ${buildPath}`)
+            runtimeCommand.load = () => import(buildPath).then(m => m.default)
+          }
+          else if (existingCommand) {
+            runtimeCommand.execute = existingCommand.execute
+          }
+          else {
+            logger.error(`Unable to dynamically load slash command at ${cmd.path}`)
+            continue
+          }
+
           commands.push(runtimeCommand)
         }
         client.clearSlashCommands()
@@ -48,12 +56,6 @@ export default defineNitroPlugin(async (nitro) => {
       }
     })
 
-    socket.addEventListener('open', () => {
-      // request a full update immediately, since serverTemplate
-      // updates don't seem to be reliable
-      socket.send(JSON.stringify({ event: 'full-update' }))
-    })
-
     nitro.hooks.hook('close', () => socket.close())
   }
 

src/types.ts

@@ -65,6 +65,7 @@ export interface DiscordRuntimeConfig {
   sync: NuxtDiscordOptions['watch']['sync']
   dir: string
   buildDir: string
+  rootDir: string
 }
 
 export const slashCommandOptionTypeIdentifiers = [

src/utils/hmr.ts

@@ -1,14 +1,22 @@
 import type { Listener } from 'listhen'
 import type { Buffer } from 'node:buffer'
 import type { IncomingMessage } from 'node:http'
+import type { InputOptions, OutputOptions, RollupBuild } from 'rollup'
 import type { WebSocket } from 'ws'
 import type { NuxtDiscordContext, SlashCommand } from '../types'
-import { existsSync, globSync, readFileSync, writeFileSync } from 'node:fs'
+import { existsSync, globSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs'
+import path from 'node:path'
 import { addVitePlugin, isIgnored, updateTemplates } from '@nuxt/kit'
+import chokidar from 'chokidar'
 import { listen } from 'listhen'
+import { rollup } from 'rollup'
 import { WebSocketServer } from 'ws'
 import collectSlashCommands, { processCommandFile } from './collect'
 
+type RollupConfig = InputOptions & {
+  output: OutputOptions
+}
+
 export function prepareHMR(ctx: NuxtDiscordContext) {
   const { nuxt, options } = ctx
 
@@ -23,6 +31,8 @@ export function prepareHMR(ctx: NuxtDiscordContext) {
     }
 
     // nitro dev server ignore discord commands directory
+    let rollupConfig: RollupConfig
+
     nuxt.hook('nitro:config', (nitroConfig) => {
       nitroConfig.watchOptions ??= {}
       const existingNitroIgnored = nitroConfig.watchOptions.ignored
@@ -34,7 +44,13 @@ export function prepareHMR(ctx: NuxtDiscordContext) {
           nitroIgnored.push(existingNitroIgnored)
       }
       // TODO: stop ignoring the commands directory, come back if I figure out how to make HMR work on server
-      // nitroConfig.watchOptions.ignored = nitroIgnored
+      nitroConfig.watchOptions.ignored = nitroIgnored
+
+      nitroConfig.hooks ??= {
+        'rollup:before': (_, config) => {
+          rollupConfig = config
+        },
+      }
     })
 
     // vite dev server ignore discord commands directory
@@ -84,19 +100,23 @@ export function prepareHMR(ctx: NuxtDiscordContext) {
       })
     }
 
-    nuxt.hook('builder:watch', async (event, path) => {
-      const fullPath = ctx.resolve.root(path)
-      if (fullPath.startsWith(commandsDir)) {
-        path = ctx.resolve.root(path)
-        const command = processCommandFile(ctx, path) ?? null
-        websocket?.broadcast({ event, path, command })
+    chokidar.watch(ctx.resolve.root(ctx.options.dir, 'commands'), { ignoreInitial: true })
+      .on('all', async (event, path) => {
+        const fullPath = ctx.resolve.root(path)
+        if (fullPath.startsWith(commandsDir)) {
+          path = ctx.resolve.root(path)
+          const command = processCommandFile(ctx, path) ?? null
+          websocket?.broadcast({ event, path, command })
+          if (event === 'add' || event === 'change') {
+            await generateDynamicCommandBuild(path, rollupConfig, ctx)
+          }
 
-        // I don't think this is doing anything at all...
-        await updateTemplates({
-          filter: template => template.filename === 'discord/slashCommands',
-        })
-      }
-    })
+          // I don't think this is doing anything at all...
+          await updateTemplates({
+            filter: template => template.filename === 'discord/slashCommands',
+          })
+        }
+      })
 
     nuxt.hook('close', () => {
       listener?.server.close()
@@ -203,3 +223,21 @@ export function createWebSocket() {
     },
   }
 }
+
+async function generateDynamicCommandBuild(file: string, config: RollupConfig, ctx: NuxtDiscordContext) {
+  let bundle: RollupBuild
+  try {
+    bundle = await rollup({ ...config, input: file })
+    const { output } = await bundle.generate({ ...config.output, sourcemap: false })
+    mkdirSync(path.join(ctx.nuxt.options.buildDir, 'discord', 'commands'), { recursive: true })
+    writeFileSync(file
+      .replace(ctx.resolve.root(ctx.nuxt.options.rootDir), ctx.nuxt.options.buildDir)
+      .replace('.ts', '.mjs'), output[0].code, 'utf-8')
+  }
+  catch (error) {
+    ctx.logger.error(`Error processing command file ${file}:`, error)
+    return
+  }
+
+  await bundle.close()
+}

src/utils/runtimeConfig.ts

@@ -9,5 +9,6 @@ export function prepareRuntimeConfig(ctx: NuxtDiscordContext) {
     config.runtimeConfig.discord.sync = ctx.options.watch.sync ?? false
     config.runtimeConfig.discord.dir = ctx.resolve.root(ctx.options.dir)
     config.runtimeConfig.discord.buildDir = ctx.nuxt.options.buildDir
+    config.runtimeConfig.discord.rootDir = ctx.nuxt.options.rootDir
   })
 }