fix: file change detection and reloading logic

- Introduced `getRelevantDevChangedFiles` to filter out unrelated file changes.
- Updated `detectDevChanges` to utilize the new filtering function for improved accuracy.
- Modified `createFileReloader` to work with relevant file changes, ensuring only necessary reloads occur.
- Enhanced tests to validate the new behavior and ensure proper handling of HTML-only reloads.

Author: ZerGo0

packages/wxt/src/core/__tests__/create-server.test.ts

@@ -1,18 +1,25 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { createFileReloader } from '../create-server';
-import { detectDevChanges, findEntrypoints, rebuild } from '../utils/building';
+import { findEntrypoints, rebuild } from '../utils/building';
 import {
+  fakeBackgroundEntrypoint,
   fakeBuildOutput,
   fakeDevServer,
+  fakeOutputChunk,
   setFakeWxt,
 } from '../utils/testing/fake-objects';
 
-vi.mock('../utils/building', () => ({
-  detectDevChanges: vi.fn(),
-  findEntrypoints: vi.fn(),
-  internalBuild: vi.fn(),
-  rebuild: vi.fn(),
-}));
+vi.mock('../utils/building', async () => {
+  const actual =
+    await vi.importActual<typeof import('../utils/building')>(
+      '../utils/building',
+    );
+  return {
+    ...actual,
+    findEntrypoints: vi.fn(),
+    rebuild: vi.fn(),
+  };
+});
 
 describe('createFileReloader', () => {
   beforeEach(() => {
@@ -39,25 +46,23 @@ describe('createFileReloader', () => {
     const relevantFile = '/root/src/entrypoints/background.ts';
     const noisyProfileFile =
       '/root/private/.dev-profile/Default/Cache/Cache_Data/d573fa6484e43cf9_0';
+    const backgroundEntrypoint = fakeBackgroundEntrypoint({
+      inputPath: relevantFile,
+    });
     const currentOutput = fakeBuildOutput({
-      steps: [],
+      steps: [
+        {
+          entrypoints: backgroundEntrypoint,
+          chunks: [fakeOutputChunk({ moduleIds: [relevantFile] })],
+        },
+      ],
       publicAssets: [],
     });
     const server = fakeDevServer({
       currentOutput,
       reloadExtension: vi.fn(),
     });
 
-    vi.mocked(detectDevChanges).mockImplementation((fileChanges, output) => {
-      if (fileChanges.includes(relevantFile)) {
-        return {
-          type: 'extension-reload',
-          rebuildGroups: [],
-          cachedOutput: output,
-        };
-      }
-      return { type: 'no-change' };
-    });
     vi.mocked(rebuild).mockResolvedValue({
       output: currentOutput,
       manifest: currentOutput.manifest,
@@ -72,11 +77,12 @@ describe('createFileReloader', () => {
     await vi.advanceTimersByTimeAsync(500);
     await Promise.all([fixedFirst, fixedSecond]);
 
-    const seenFiles = vi
-      .mocked(detectDevChanges)
-      .mock.calls.flatMap(([fileChanges]) => fileChanges);
-
-    expect(seenFiles).toContain(relevantFile);
+    expect(rebuild).toBeCalledTimes(1);
+    expect(rebuild).toBeCalledWith(
+      [],
+      [expect.objectContaining({ inputPath: relevantFile })],
+      expect.anything(),
+    );
     expect(server.reloadExtension).toBeCalledTimes(1);
   });
 });

packages/wxt/src/core/create-server.ts

@@ -14,6 +14,7 @@ import {
 import {
   internalBuild,
   detectDevChanges,
+  getRelevantDevChangedFiles,
   rebuild,
   findEntrypoints,
 } from './utils/building';
@@ -214,9 +215,18 @@ export function createFileReloader(server: WxtDevServer) {
       if (fileChanges.length === 0) return;
       if (server.currentOutput == null) return;
 
+      const relevantFileChanges = getRelevantDevChangedFiles(
+        fileChanges,
+        server.currentOutput,
+      );
+      if (relevantFileChanges.length === 0) return;
+
       await wxt.reloadConfig();
 
-      const changes = detectDevChanges(fileChanges, server.currentOutput);
+      const changes = detectDevChanges(
+        relevantFileChanges,
+        server.currentOutput,
+      );
       if (changes.type === 'no-change') return;
 
       if (changes.type === 'full-restart') {
@@ -233,7 +243,7 @@ export function createFileReloader(server: WxtDevServer) {
 
       // Log the entrypoints that were effected
       wxt.logger.info(
-        `Changed: ${Array.from(new Set(fileChanges))
+        `Changed: ${relevantFileChanges
           .map((file) => pc.dim(relative(wxt.config.root, file)))
           .join(', ')}`,
       );

packages/wxt/src/core/utils/building/__tests__/detect-dev-changes.test.ts

@@ -252,6 +252,60 @@ describe('Detect Dev Changes', () => {
       expect(actual).toEqual(expected);
     });
 
+    it('should ignore unrelated changed files when checking html-only reloads', async () => {
+      const changedPath = '/root/page1.html';
+      const unrelatedPath =
+        '/root/private/.dev-profile/Default/Cache/Cache_Data/1004_0';
+      const htmlPage1 = fakePopupEntrypoint({
+        inputPath: changedPath,
+      });
+      const htmlPage2 = fakeOptionsEntrypoint({
+        inputPath: '/root/page2.html',
+      });
+      const htmlPage3 = fakeGenericEntrypoint({
+        type: 'sandbox',
+        inputPath: '/root/page3.html',
+      });
+
+      const step1: BuildStepOutput = {
+        entrypoints: [htmlPage1, htmlPage2],
+        chunks: [
+          fakeOutputAsset({
+            fileName: 'page1.html',
+          }),
+        ],
+      };
+      const step2: BuildStepOutput = {
+        entrypoints: [htmlPage3],
+        chunks: [
+          fakeOutputAsset({
+            fileName: 'page2.html',
+          }),
+        ],
+      };
+
+      const currentOutput: BuildOutput = {
+        manifest: fakeManifest(),
+        publicAssets: [],
+        steps: [step1, step2],
+      };
+      const expected: DevModeChange = {
+        type: 'html-reload',
+        cachedOutput: {
+          ...currentOutput,
+          steps: [step2],
+        },
+        rebuildGroups: [[htmlPage1, htmlPage2]],
+      };
+
+      const actual = detectDevChanges(
+        [unrelatedPath, changedPath],
+        currentOutput,
+      );
+
+      expect(actual).toEqual(expected);
+    });
+
     it('should detect changes to entrypoints/<name>/index.html files', async () => {
       const changedPath = '/root/page1/index.html';
       const htmlPage1 = fakePopupEntrypoint({

packages/wxt/src/core/utils/building/detect-dev-changes.ts

@@ -36,30 +36,35 @@ export function detectDevChanges(
   changedFiles: string[],
   currentOutput: BuildOutput,
 ): DevModeChange {
-  const isConfigChange = some(
+  const relevantChangedFiles = getRelevantDevChangedFiles(
     changedFiles,
+    currentOutput,
+  );
+
+  const isConfigChange = some(
+    relevantChangedFiles,
     (file) => file === wxt.config.userConfigMetadata.configFile,
   );
   if (isConfigChange) return { type: 'full-restart' };
 
-  const isWxtModuleChange = some(changedFiles, (file) =>
+  const isWxtModuleChange = some(relevantChangedFiles, (file) =>
     file.startsWith(wxt.config.modulesDir),
   );
   if (isWxtModuleChange) return { type: 'full-restart' };
 
   const isRunnerChange = some(
-    changedFiles,
+    relevantChangedFiles,
     (file) => file === wxt.config.runnerConfig.configFile,
   );
   if (isRunnerChange) return { type: 'browser-restart' };
 
   const changedSteps = new Set(
-    changedFiles.flatMap((changedFile) =>
+    relevantChangedFiles.flatMap((changedFile) =>
       findEffectedSteps(changedFile, currentOutput),
     ),
   );
   if (changedSteps.size === 0) {
-    const hasPublicChange = some(changedFiles, (file) =>
+    const hasPublicChange = some(relevantChangedFiles, (file) =>
       file.startsWith(wxt.config.publicDir),
     );
     if (hasPublicChange) {
@@ -93,8 +98,8 @@ export function detectDevChanges(
   }
 
   const isOnlyHtmlChanges =
-    changedFiles.length > 0 &&
-    every(changedFiles, (file) => file.endsWith('.html'));
+    relevantChangedFiles.length > 0 &&
+    every(relevantChangedFiles, (file) => file.endsWith('.html'));
   if (isOnlyHtmlChanges) {
     return {
       type: 'html-reload',
@@ -125,6 +130,19 @@ export function detectDevChanges(
   };
 }
 
+export function getRelevantDevChangedFiles(
+  changedFiles: string[],
+  currentOutput: BuildOutput,
+): string[] {
+  return Array.from(new Set(changedFiles)).filter((changedFile) => {
+    if (changedFile === wxt.config.userConfigMetadata.configFile) return true;
+    if (changedFile.startsWith(wxt.config.modulesDir)) return true;
+    if (changedFile === wxt.config.runnerConfig.configFile) return true;
+    if (changedFile.startsWith(wxt.config.publicDir)) return true;
+    return findEffectedSteps(changedFile, currentOutput).length > 0;
+  });
+}
+
 /**
  * For a single change, return all the step of the build output that were effected by it.
  */