slideshare/src/plugins/themeWatcher.ts

import type { Plugin } from 'vite';

/**
 * Vite plugin to watch theme files in public directory and trigger HMR
 */
export function themeWatcherPlugin(): Plugin {
  return {
    name: 'theme-watcher',
    async configureServer(server) {
      // Dynamic imports for Node.js modules in server context
      const fs = await import('fs');
      const path = await import('path');
      
      const publicThemesPath = path.resolve(process.cwd(), 'public/themes');
      
      // Watch for changes in the themes directory
      const watcher = fs.watch(
        publicThemesPath, 
        { recursive: true },
        (eventType: string, filename: string | null) => {
          if (filename && (filename.endsWith('.css') || filename.endsWith('.html'))) {
            console.log(`Theme file changed: ${filename}`);
            
            // For theme files, we need a full reload since they affect:
            // - Dynamically loaded CSS files
            // - Theme manifest caching
            // - Layout template caching
            // - CSS variables that might be applied globally
            
            // Send full reload command to browser
            server.ws.send({
              type: 'full-reload'
            });
            
            // Also invalidate theme cache for good measure
            const moduleId = '/src/utils/themeLoader.ts';
            const module = server.moduleGraph.getModuleById(moduleId);
            if (module) {
              server.reloadModule(module);
            }
          }
        }
      );

      // Cleanup watcher on server close
      server.httpServer?.on('close', () => {
        if (typeof watcher === 'object' && 'close' in watcher) {
          watcher.close();
        }
      });
    }
  };
}