Hot Module Reload (HMR)

commandkit dev

enum HMREventType {
  ReloadCommands = 'reload-commands',
  ReloadEvents = 'reload-events',
  Unknown = 'unknown',
}

r

rc

re

import { watch } from 'chokidar';

const watcher = watch([join(cwd, 'src'), ...configPaths], {
  ignoreInitial: true,
});

watcher.on('change', hmrHandler);
watcher.on('add', hmrHandler);
watcher.on('unlink', hmrHandler);

const isCommandSource = (p: string) =>
  p.replaceAll('\\', '/').includes('src/app/commands');

const isEventSource = (p: string) =>
  p.replaceAll('\\', '/').includes('src/app/events');

const performHMR = debounce(async (path?: string): Promise<boolean> => {
  if (!path || !ps) return false;

  let eventType: HMREventType | null = null;
  let eventDescription = '';

  if (isCommandSource(path)) {
    eventType = HMREventType.ReloadCommands;
    eventDescription = 'command(s)';
  } else if (isEventSource(path)) {
    eventType = HMREventType.ReloadEvents;
    eventDescription = 'event(s)';
  } else {
    eventType = HMREventType.Unknown;
    eventDescription = 'unknown source';
  }

  if (eventType) {
    console.log(`Attempting to reload ${eventDescription} at ${path}`);

    await buildAndStart(cwd, true);
    const hmrHandled = await sendHmrEvent(eventType, path);

    if (hmrHandled) {
      console.log(`Successfully hot reloaded ${eventDescription}`);
      return true;
    }
  }

  return false;
}, 700);

interface IpcMessageCommand {
  event: HMREventType;
  path: string;
  id?: string;
}

const sendHmrEvent = async (
  event: HMREventType,
  path?: string,
): Promise<boolean> => {
  if (!ps || !ps.send) return false;

  const messageId = randomUUID();
  const messagePromise = waitForAcknowledgment(messageId);

  ps.send({ event, path, id: messageId });

  // Wait for acknowledgment or timeout after 3 seconds
  const res = await Promise.race([
    messagePromise,
    sleep(3000).then(() => {
      console.warn(`HMR acknowledgment timed out for event ${event}`);
      return false;
    }),
  ]);

  return res;
};

export function registerDevHooks(commandkit: CommandKit) {
  if (!COMMANDKIT_IS_DEV) return;

  process.on('message', async (message) => {
    if (typeof message !== 'object' || message === null) return;

    const { event, path, id } = message as IpcMessageCommand;
    if (!event) return;

    let accepted = false;
    let prevented = false;
    let handled = false;

    const hmrEvent: CommandKitHMREvent = {
      accept() { accepted = true; },
      preventDefault() { prevented = true; },
      path,
      event,
    };

    try {
      // Allow plugins to handle HMR
      await commandkit.plugins.execute(async (ctx, plugin) => {
        if (accepted) return;
        await plugin.performHMR?.(ctx, hmrEvent);
      });

      if (prevented) return;

      switch (event) {
        case HMREventType.ReloadCommands:
          commandkit.commandHandler.reloadCommands();
          handled = true;
          break;
        case HMREventType.ReloadEvents:
          commandkit.eventHandler.reloadEvents();
          handled = true;
          break;
      }
    } finally {
      // Send acknowledgment
      if (id && process.send) {
        process.send({
          type: 'commandkit-hmr-ack',
          id,
          handled: handled || accepted,
        });
      }
    }
  });
}

interface CommandKitHMREvent {
  event: HMREventType;
  path: string;
  
  // Indicates this event was handled by the plugin
  accept: () => void;
  
  // Prevents default CommandKit handling
  preventDefault: () => void;
}

import { CommandKitPlugin } from 'commandkit';

export const customPlugin: CommandKitPlugin = {
  name: 'custom-hmr-plugin',
  
  async performHMR(ctx, event) {
    if (event.path.includes('custom-module')) {
      console.log('Reloading custom module...');
      
      // Custom reload logic
      await reloadCustomModule();
      
      // Prevent default handling
      event.accept();
    }
  },
};

async reloadCommands() {
  // Clear command cache
  this.commands.clear();
  
  // Rescan command directory
  await this.commandsRouter.scan();
  
  // Load commands again
  await this.loadCommands();
  
  console.log('Commands reloaded');
}

async reloadEvents() {
  // Remove existing event listeners
  this.events.forEach((event) => {
    this.client.removeListener(event.name, event.handler);
  });
  
  // Clear event cache
  this.events.clear();
  
  // Rescan event directory
  await this.eventsRouter.scan();
  
  // Register events again
  await this.loadEvents();
  
  console.log('Events reloaded');
}

COMMANDKIT_DEBUG_HMR=true commandkit dev

Received HMR event: reload-commands for src/app/commands/ping.ts
Attempting to reload command(s) at src/app/commands/ping.ts
Successfully hot reloaded command(s) at src/app/commands/ping.ts

const hmrHandler = async (path: string) => {
  if (isConfigUpdate(path)) return;
  
  const hmr = await performHMR(path);
  if (hmr) return; // HMR succeeded
  
  console.log('⚡️ Performing full restart due to changes in', path);
  
  ps?.kill();
  ps = await buildAndStart(cwd);
};

const performHMR = debounce(async (path?: string) => {
  // Reload logic
}, 700);

await Promise.race([
  messagePromise,
  sleep(3000).then(() => {
    console.warn('HMR acknowledgment timed out');
    return false;
  }),
]);

import { ChatInputCommand } from 'commandkit';

// ❌ Bad: Module-level state won't reset on HMR
let commandCount = 0;

export const chatInput: ChatInputCommand = async (ctx) => {
  commandCount++;
  await ctx.interaction.reply(`Called ${commandCount} times`);
};

import { ChatInputCommand } from 'commandkit';

// ✅ Good: Use context store for state
export const chatInput: ChatInputCommand = async (ctx) => {
  const store = ctx.commandkit.store;
  const count = (store.get('commandCount') || 0) + 1;
  store.set('commandCount', count);
  
  await ctx.interaction.reply(`Called ${count} times`);
};

if (!COMMANDKIT_IS_DEV) return;