perf: Reduce hypersensitive onChange of watcher (#978)

Co-authored-by: Aaron <[email protected]>

Author: 1natsu172

packages/wxt/package.json

@@ -81,8 +81,8 @@
     "prepack": "pnpm build"
   },
   "dependencies": {
-    "@types/chrome": "^0.0.269",
     "@aklinker1/rollup-plugin-visualizer": "5.12.0",
+    "@types/chrome": "^0.0.269",
     "@types/webextension-polyfill": "^0.10.7",
     "@webext-core/fake-browser": "^1.3.1",
     "@webext-core/isolated-element": "^1.1.2",
@@ -95,6 +95,7 @@
     "consola": "^3.2.3",
     "defu": "^6.1.4",
     "dequal": "^2.0.3",
+    "dotenv": "^16.4.5",
     "esbuild": "^0.23.0",
     "execa": "^9.3.1",
     "fast-glob": "^3.3.2",
@@ -116,6 +117,7 @@
     "ohash": "^1.1.3",
     "open": "^10.1.0",
     "ora": "^8.1.0",
+    "perfect-debounce": "^1.0.0",
     "picocolors": "^1.0.1",
     "prompts": "^2.4.2",
     "publish-browser-extension": "^2.1.3",

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

@@ -1,3 +1,4 @@
+import { debounce } from 'perfect-debounce';
 import {
   BuildStepOutput,
   EntrypointGroup,
@@ -144,7 +145,7 @@ function createFileReloader(server: WxtDevServer) {
   const fileChangedMutex = new Mutex();
   const changeQueue: Array<[string, string]> = [];
 
-  return async (event: string, path: string) => {
+  const cb = async (event: string, path: string) => {
     changeQueue.push([event, path]);
 
     await fileChangedMutex.runExclusive(async () => {
@@ -216,6 +217,11 @@ function createFileReloader(server: WxtDevServer) {
       }
     });
   };
+
+  return debounce(cb, wxt.config.dev.server!.watchDebounce, {
+    leading: true,
+    trailing: false,
+  });
 }
 
 /**

packages/wxt/src/core/utils/__tests__/number.test.ts

@@ -0,0 +1,18 @@
+import { describe, it, expect } from 'vitest';
+import { safeStringToNumber } from '../number';
+
+describe('Number Utils', () => {
+  describe('safeStringToNumber', () => {
+    it.each([
+      { arg: '1000', expected: 1000 },
+      { arg: '', expected: 0 },
+      { arg: '12abc', expected: null },
+      { arg: undefined, expected: null },
+    ])(
+      'should be safely converted from string to number: safeStringToNumber($arg) -> $expected',
+      ({ arg, expected }) => {
+        expect(safeStringToNumber(arg)).toBe(expected);
+      },
+    );
+  });
+});

packages/wxt/src/core/utils/building/resolve-config.ts

@@ -25,6 +25,8 @@ import { normalizePath } from '../paths';
 import glob from 'fast-glob';
 import { builtinModules } from '../../../builtin-modules';
 import { getEslintVersion } from '../eslint';
+import { safeStringToNumber } from '../number';
+import { loadEnv } from '../env';
 
 /**
  * Given an inline config, discover the config file if necessary, merge the results, resolve any
@@ -72,6 +74,8 @@ export async function resolveConfig(
   const mode = mergedConfig.mode ?? COMMAND_MODES[command];
   const env: ConfigEnv = { browser, command, manifestVersion, mode };
 
+  loadEnv(mode); // Load any environment variables used below
+
   const root = path.resolve(
     inlineConfig.root ?? userConfig.root ?? process.cwd(),
   );
@@ -124,6 +128,7 @@ export async function resolveConfig(
     devServerConfig = {
       port,
       hostname: mergedConfig.dev?.server?.hostname ?? 'localhost',
+      watchDebounce: safeStringToNumber(process.env.WXT_WATCH_DEBOUNCE) ?? 800,
     };
   }
 

packages/wxt/src/core/utils/env.ts

@@ -0,0 +1,10 @@
+import { config } from 'dotenv';
+
+/**
+ * Load environment files based on the current mode.
+ */
+export function loadEnv(mode: string) {
+  return config({
+    path: [`.env`, `.env.local`, `.env.${mode}`, `.env.${mode}.local`],
+  });
+}

packages/wxt/src/core/utils/number.ts

@@ -0,0 +1,4 @@
+export function safeStringToNumber(str: string | undefined): number | null {
+  const num = Number(str);
+  return isNaN(num) ? null : num;
+}

packages/wxt/src/types.ts

@@ -1277,6 +1277,25 @@ export interface ResolvedConfig {
     server?: {
       port: number;
       hostname: string;
+      /**
+       * The milliseconds to debounce when a file is saved before reloading.
+       * The only way to set this option is to set the `WXT_WATCH_DEBOUNCE`
+       * environment variable, either globally (like in `.bashrc` file) or
+       * per-project (in `.env` file).
+       *
+       * For example:
+       * ```
+       * # ~/.zshrc
+       * export WXT_WATCH_DEBOUNCE=1000
+       * ```
+       * or
+       * ```
+       * # .env
+       * WXT_WATCH_DEBOUNCE=1000
+       * ```
+       * @default 800
+       */
+      watchDebounce: number;
     };
     reloadCommand: string | false;
   };