From 6671471f75320c3865548177305fa24b520d82c8 Mon Sep 17 00:00:00 2001
From: Aaron <aaronklinker1@gmail.com>
Date: Wed, 19 Jun 2024 08:05:56 -0500
Subject: [PATCH] feat(dev): Reload extension when public files change (#752)

---
 .../src/entrypoints/ui.content/index.ts       |  2 +-
 packages/wxt-demo/wxt.config.ts               |  3 ++
 .../__tests__/detect-dev-changes.test.ts      | 10 +++--
 .../core/utils/building/detect-dev-changes.ts | 41 ++++++++-----------
 4 files changed, 27 insertions(+), 29 deletions(-)

diff --git a/packages/wxt-demo/src/entrypoints/ui.content/index.ts b/packages/wxt-demo/src/entrypoints/ui.content/index.ts
index f619f1a1..d5a9862e 100644
--- a/packages/wxt-demo/src/entrypoints/ui.content/index.ts
+++ b/packages/wxt-demo/src/entrypoints/ui.content/index.ts
@@ -13,7 +13,7 @@ export default defineContentScript({
       anchor: 'form[role=search]',
       onMount: (container) => {
         const app = document.createElement('div');
-        app.textContent = 'Custom content script UI';
+        app.textContent = browser.i18n.getMessage('prompt_for_name');
         container.append(app);
       },
     });
diff --git a/packages/wxt-demo/wxt.config.ts b/packages/wxt-demo/wxt.config.ts
index 228b034e..ba332da4 100644
--- a/packages/wxt-demo/wxt.config.ts
+++ b/packages/wxt-demo/wxt.config.ts
@@ -21,6 +21,9 @@ export default defineConfig({
   experimental: {
     viteRuntime: true,
   },
+  runner: {
+    startUrls: ['https://duckduckgo.com'],
+  },
   example: {
     a: 'a',
     // @ts-expect-error: c is not defined, this should error out
diff --git a/packages/wxt/src/core/utils/building/__tests__/detect-dev-changes.test.ts b/packages/wxt/src/core/utils/building/__tests__/detect-dev-changes.test.ts
index 82a08537..81247ac5 100644
--- a/packages/wxt/src/core/utils/building/__tests__/detect-dev-changes.test.ts
+++ b/packages/wxt/src/core/utils/building/__tests__/detect-dev-changes.test.ts
@@ -100,6 +100,11 @@ describe('Detect Dev Changes', () => {
   describe('Public Assets', () => {
     it("should return 'extension-reload' without any groups to rebuild when the changed file is a public asset", () => {
       const changes = ['/root/src/public/image.svg'];
+      setFakeWxt({
+        config: {
+          publicDir: '/root/src/public',
+        },
+      });
       const asset1 = fakeOutputAsset({
         fileName: 'image.svg',
       });
@@ -114,10 +119,7 @@ describe('Detect Dev Changes', () => {
       const expected: DevModeChange = {
         type: 'extension-reload',
         rebuildGroups: [],
-        cachedOutput: {
-          ...currentOutput,
-          publicAssets: [asset2],
-        },
+        cachedOutput: currentOutput,
       };
 
       const actual = detectDevChanges(changes, currentOutput);
diff --git a/packages/wxt/src/core/utils/building/detect-dev-changes.ts b/packages/wxt/src/core/utils/building/detect-dev-changes.ts
index a657264a..2f24a01e 100644
--- a/packages/wxt/src/core/utils/building/detect-dev-changes.ts
+++ b/packages/wxt/src/core/utils/building/detect-dev-changes.ts
@@ -2,7 +2,6 @@ import {
   BuildOutput,
   BuildStepOutput,
   EntrypointGroup,
-  OutputAsset,
   OutputFile,
 } from '~/types';
 import { every, some } from '~/core/utils/arrays';
@@ -50,12 +49,25 @@ export function detectDevChanges(
       findEffectedSteps(changedFile, currentOutput),
     ),
   );
-  if (changedSteps.size === 0) return { type: 'no-change' };
+  if (changedSteps.size === 0) {
+    const hasPublicChange = some(changedFiles, (file) =>
+      file.startsWith(wxt.config.publicDir),
+    );
+    if (hasPublicChange) {
+      return {
+        type: 'extension-reload',
+        rebuildGroups: [],
+        cachedOutput: currentOutput,
+      };
+    } else {
+      return { type: 'no-change' };
+    }
+  }
 
   const unchangedOutput: BuildOutput = {
     manifest: currentOutput.manifest,
     steps: [],
-    publicAssets: [],
+    publicAssets: [...currentOutput.publicAssets],
   };
   const changedOutput: BuildOutput = {
     manifest: currentOutput.manifest,
@@ -70,13 +82,6 @@ export function detectDevChanges(
       unchangedOutput.steps.push(step);
     }
   }
-  for (const asset of currentOutput.publicAssets) {
-    if (changedSteps.has(asset)) {
-      changedOutput.publicAssets.push(asset);
-    } else {
-      unchangedOutput.publicAssets.push(asset);
-    }
-  }
 
   const isOnlyHtmlChanges =
     changedFiles.length > 0 &&
@@ -117,8 +122,8 @@ export function detectDevChanges(
 function findEffectedSteps(
   changedFile: string,
   currentOutput: BuildOutput,
-): DetectedChange[] {
-  const changes: DetectedChange[] = [];
+): BuildStepOutput[] {
+  const changes: BuildStepOutput[] = [];
   const changedPath = normalizePath(changedFile);
 
   const isChunkEffected = (chunk: OutputFile): boolean =>
@@ -135,11 +140,6 @@ function findEffectedSteps(
     if (effectedChunk) changes.push(step);
   }
 
-  const effectedAsset = currentOutput.publicAssets.find((chunk) =>
-    isChunkEffected(chunk),
-  );
-  if (effectedAsset) changes.push(effectedAsset);
-
   return changes;
 }
 
@@ -194,10 +194,3 @@ interface ContentScriptReload extends RebuildChange {
   type: 'content-script-reload';
   changedSteps: BuildStepOutput[];
 }
-
-/**
- * When figuring out what needs reloaded, this stores the step that was changed, or the public
- * directory asset that was changed. It doesn't know what type of change is required yet. Just an
- * intermediate type.
- */
-type DetectedChange = BuildStepOutput | OutputAsset;