fix dependent hot reloading

Author: junzyx

.changeset/afraid-grapes-hide.md

@@ -0,0 +1,5 @@
+---
+"htmldocs": patch
+---
+
+fix dependent hot reloading

packages/htmldocs/src/cli/utils/preview/hot-reloading/setup-hot-reloading.ts

@@ -1,16 +1,16 @@
 import type http from 'node:http';
 import path from 'node:path';
-import { Server as SocketServer, type Socket } from 'socket.io';
 import { watch } from 'chokidar';
 import debounce from 'debounce';
+import { type Socket, Server as SocketServer } from 'socket.io';
 import type { HotReloadChange } from '../../../../utils/types/hot-reload-change';
 import { createDependencyGraph } from './create-dependency-graph';
 import logger from '~/lib/logger';
 import chalk from 'chalk';
 
 export const setupHotreloading = async (
   devServer: http.Server,
-  emailDirRelativePath: string,
+  documentsDirRelativePath: string,
 ) => {
   let clients: Socket[] = [];
   const io = new SocketServer(devServer);
@@ -23,33 +23,6 @@ export const setupHotreloading = async (
     });
   });
 
-  const projectRoot = process.cwd();
-  const absolutePathToDocumentsDirectory = path.resolve(
-    projectRoot,
-    emailDirRelativePath,
-  );
-
-  logger.info(`Watching project root at ${projectRoot}`);
-
-  const watcher = watch('**/*', {
-    ignoreInitial: true,
-    cwd: projectRoot,
-    ignored: [
-      '**/node_modules/**',
-      '**/.git/**',
-      '**/dist/**',
-      '**/build/**',
-      '**/.next/**',
-      '**/coverage/**',
-    ],
-  });
-
-  const exit = () => {
-    void watcher.close();
-  };
-  process.on('SIGINT', exit);
-  // process.on('uncaughtException', exit);
-
   // used to keep track of all changes
   // and send them at once to the preview app through the web socket
   let changes = [] as HotReloadChange[];
@@ -64,20 +37,25 @@ export const setupHotreloading = async (
         )
       );
 
-    // Log changes only once, not per client
-    uniqueChanges.forEach(change => {
-      logger.info(`${chalk.yellow('!')} ${chalk.gray(`Changes detected in ${path.basename(change.filename)}, reloading...`)}`);
-    });
-
-    // Send changes to all clients
-    clients.forEach((client) => {
-      logger.debug(`Emitting reload to ${client.id}`);
-      client.emit('reload', uniqueChanges);
-    });
+    if (uniqueChanges.length > 0) {
+      logger.info(`${chalk.yellow('!')} ${chalk.gray(`Changes detected, reloading...`)}`);
+      
+      // Send changes to all clients
+      clients.forEach((client) => {
+        logger.debug(`Emitting reload to ${client.id}`);
+        client.emit('reload', uniqueChanges);
+      });
+    }
 
     changes = [];
+
   }, 150);
 
+  const absolutePathToDocumentsDirectory = path.resolve(
+    process.cwd(),
+    documentsDirRelativePath,
+  );
+
   const [dependencyGraph, updateDependencyGraph] = await createDependencyGraph(
     absolutePathToDocumentsDirectory,
   );
@@ -97,42 +75,80 @@ export const setupHotreloading = async (
     return dependentPaths;
   };
 
+  const getFilesOutsideDocumentsDirectory = () =>
+    Object.keys(dependencyGraph).filter((p) =>
+      path.relative(absolutePathToDocumentsDirectory, p).startsWith('..'),
+    );
+  let filesOutsideDocumentsDirectory = getFilesOutsideDocumentsDirectory();
+
+  const watcher = watch('', {
+    ignoreInitial: true,
+    cwd: absolutePathToDocumentsDirectory,
+    ignored: [
+      '**/node_modules/**',
+      '**/.git/**',
+      '**/dist/**',
+      '**/build/**',
+      '**/.next/**',
+      '**/coverage/**',
+    ],
+  });
+
+  // adds in to be watched separately all of the files that are outside of
+  // the user's documents directory
+  for (const p of filesOutsideDocumentsDirectory) {
+    watcher.add(p);
+  }
+
+  const exit = async () => {
+    await watcher.close();
+  };
+  process.on('SIGINT', exit);
+  process.on('uncaughtException', exit);
+
   watcher.on('all', async (event, relativePathToChangeTarget) => {
     const file = relativePathToChangeTarget.split(path.sep);
     if (file.length === 0) {
       return;
     }
+    const pathToChangeTarget = path.resolve(
+      absolutePathToDocumentsDirectory,
+      relativePathToChangeTarget,
+    );
+
+    await updateDependencyGraph(event, pathToChangeTarget);
+
+    const newFilesOutsideDocumentsDirectory = getFilesOutsideDocumentsDirectory();
+    // updates the files outside of the user's documents directory by unwatching
+    // the inexistant ones and watching the new ones
+    //
+    // this is necessary to avoid missing dependencies that are imported from outside
+    // the documents directory
+    for (const p of filesOutsideDocumentsDirectory) {
+      if (!newFilesOutsideDocumentsDirectory.includes(p)) {
+        watcher.unwatch(p);
+      }
+    }
+    for (const p of newFilesOutsideDocumentsDirectory) {
+      if (!filesOutsideDocumentsDirectory.includes(p)) {
+        watcher.add(p);
+      }
+    }
+    filesOutsideDocumentsDirectory = newFilesOutsideDocumentsDirectory;
 
-    logger.debug(`Detected ${event} in ${relativePathToChangeTarget}`);
-
-    // Convert the path to be relative to the documents directory if it's within it
-    const absolutePathToChangeTarget = path.resolve(projectRoot, relativePathToChangeTarget);
-    const isInDocumentsDirectory = absolutePathToChangeTarget.startsWith(absolutePathToDocumentsDirectory);
-    
-    if (isInDocumentsDirectory) {
-      const pathRelativeToDocuments = path.relative(absolutePathToDocumentsDirectory, absolutePathToChangeTarget);
-      
-      await updateDependencyGraph(event, absolutePathToChangeTarget);
-
-      changes.push({
-        event,
-        filename: pathRelativeToDocuments,
-      });
+    changes.push({
+      event,
+      filename: relativePathToChangeTarget,
+    });
 
-      for (const dependentPath of resolveDependentsOf(absolutePathToChangeTarget)) {
-        changes.push({
-          event: 'change' as const,
-          filename: path.relative(absolutePathToDocumentsDirectory, dependentPath),
-        });
-      }
-    } else {
-      // For files outside documents directory, just notify of the change relative to project root
+    // These dependents are dependents resolved recursively, so even dependents of dependents
+    // will be notified of this change so that we ensure that things are updated in the preview.
+    for (const dependentPath of resolveDependentsOf(pathToChangeTarget)) {
       changes.push({
-        event,
-        filename: relativePathToChangeTarget,
+        event: 'change' as const,
+        filename: path.relative(absolutePathToDocumentsDirectory, dependentPath),
       });
     }
-    
     reload();
   });