wxt 0.19.16 → 0.19.18

package/dist/client/content-scripts/content-script-context.d.ts

@@ -99,11 +99,13 @@ export declare class ContentScriptContext implements AbortController {
      * ctx.addEventListener(document, "visibilitychange", () => {
      *   // ...
      * });
-     * ctx.addEventListener(document, "wxt:locationchange", () => {
+     * ctx.addEventListener(window, "wxt:locationchange", () => {
      *   // ...
      * });
      */
-    addEventListener<TTarget extends EventTarget, TType extends keyof WxtContentScriptEventMap>(target: TTarget, type: TType, handler: (event: WxtContentScriptEventMap[TType]) => void, options?: AddEventListenerOptions): void;
+    addEventListener<TType extends keyof WxtWindowEventMap>(target: Window, type: TType, handler: (event: WxtWindowEventMap[TType]) => void, options?: AddEventListenerOptions): void;
+    addEventListener<TType extends keyof DocumentEventMap>(target: Document, type: keyof DocumentEventMap, handler: (event: DocumentEventMap[TType]) => void, options?: AddEventListenerOptions): void;
+    addEventListener<TTarget extends EventTarget>(target: TTarget, ...params: Parameters<TTarget['addEventListener']>): void;
     /**
      * @internal
      * Abort the abort controller and execute all `onInvalidated` listeners.
@@ -114,7 +116,6 @@ export declare class ContentScriptContext implements AbortController {
         ignoreFirstEvent?: boolean;
     }): void;
 }
-interface WxtContentScriptEventMap extends WindowEventMap {
+export interface WxtWindowEventMap extends WindowEventMap {
     'wxt:locationchange': WxtLocationChangeEvent;
 }
-export {};

package/dist/client/content-scripts/content-script-context.mjs

@@ -109,30 +109,12 @@ export class ContentScriptContext {
     this.onInvalidated(() => cancelIdleCallback(id));
     return id;
   }
-  /**
-   * Call `target.addEventListener` and remove the event listener when the context is invalidated.
-   *
-   * Includes additional events useful for content scripts:
-   *
-   * - `"wxt:locationchange"` - Triggered when HTML5 history mode is used to change URL. Content
-   *   scripts are not reloaded when navigating this way, so this can be used to reset the content
-   *   script state on URL change, or run custom code.
-   *
-   * @example
-   * ctx.addEventListener(document, "visibilitychange", () => {
-   *   // ...
-   * });
-   * ctx.addEventListener(document, "wxt:locationchange", () => {
-   *   // ...
-   * });
-   */
   addEventListener(target, type, handler, options) {
     if (type === "wxt:locationchange") {
       if (this.isValid) this.locationWatcher.run();
     }
     target.addEventListener?.(
       type.startsWith("wxt:") ? getUniqueEventName(type) : type,
-      // @ts-expect-error: Event don't match, but that's OK, EventTarget doesn't allow custom types in the callback
       handler,
       {
         ...options,

package/dist/client/content-scripts/ui/index.mjs

@@ -13,6 +13,7 @@ export function createIntegratedUi(ctx, options) {
   };
   const remove = () => {
     options.onRemove?.(mounted);
+    wrapper.replaceChildren();
     wrapper.remove();
     mounted = void 0;
   };

package/dist/core/builders/vite/index.d.ts

@@ -1,3 +1,3 @@
 import { ResolvedConfig, WxtBuilder, WxtDevServer, WxtHooks } from '../../../types';
 import { Hookable } from 'hookable';
-export declare function createViteBuilder(wxtConfig: ResolvedConfig, hooks: Hookable<WxtHooks>, server?: WxtDevServer): Promise<WxtBuilder>;
+export declare function createViteBuilder(wxtConfig: ResolvedConfig, hooks: Hookable<WxtHooks>, getWxtDevServer?: () => WxtDevServer | undefined): Promise<WxtBuilder>;

package/dist/core/builders/vite/index.mjs

@@ -9,7 +9,7 @@ import { importEntrypointFile } from "../../utils/building/index.mjs";
 import { ViteNodeServer } from "vite-node/server";
 import { ViteNodeRunner } from "vite-node/client";
 import { installSourcemapsSupport } from "vite-node/source-map";
-export async function createViteBuilder(wxtConfig, hooks, server) {
+export async function createViteBuilder(wxtConfig, hooks, getWxtDevServer) {
   const vite = await import("vite");
   const getBaseConfig = async (baseConfigOptions) => {
     const config = await wxtConfig.vite(wxtConfig.env);
@@ -33,6 +33,7 @@ export async function createViteBuilder(wxtConfig, hooks, server) {
     config.server.watch = {
       ignored: [`${wxtConfig.outBaseDir}/**`, `${wxtConfig.wxtDir}/**`]
     };
+    const server = getWxtDevServer?.();
     config.plugins ??= [];
     config.plugins.push(
       wxtPlugins.download(wxtConfig),
@@ -180,18 +181,18 @@ export async function createViteBuilder(wxtConfig, hooks, server) {
             plugins: [wxtPlugins.removeEntrypointMainFunction(wxtConfig, path)]
           };
           const config = vite.mergeConfig(baseConfig, envConfig);
-          const server2 = await vite.createServer(config);
-          await server2.pluginContainer.buildStart({});
+          const server = await vite.createServer(config);
+          await server.pluginContainer.buildStart({});
           const node = new ViteNodeServer(
             // @ts-ignore: Some weird type error...
-            server2
+            server
           );
           installSourcemapsSupport({
             getSourceMap: (source) => node.getSourceMap(source)
           });
           const runner = new ViteNodeRunner({
-            root: server2.config.root,
-            base: server2.config.base,
+            root: server.config.root,
+            base: server.config.base,
             // when having the server and runner in a different context,
             // you will need to handle the communication between them
             // and pass to this function
@@ -203,7 +204,7 @@ export async function createViteBuilder(wxtConfig, hooks, server) {
             }
           });
           const res = await runner.executeFile(path);
-          await server2.close();
+          await server.close();
           return res.default;
         }
       }
@@ -239,7 +240,7 @@ export async function createViteBuilder(wxtConfig, hooks, server) {
       const finalConfig = vite.mergeConfig(baseConfig, serverConfig);
       await hooks.callHook("vite:devServer:extendConfig", finalConfig);
       const viteServer = await vite.createServer(finalConfig);
-      const server2 = {
+      const server = {
         async listen() {
           await viteServer.listen(info.port);
         },
@@ -259,7 +260,7 @@ export async function createViteBuilder(wxtConfig, hooks, server) {
         },
         watcher: viteServer.watcher
       };
-      return server2;
+      return server;
     }
   };
 }

package/dist/core/create-server.mjs

@@ -14,66 +14,98 @@ import { createExtensionRunner } from "./runners/index.mjs";
 import { Mutex } from "async-mutex";
 import pc from "picocolors";
 import { relative } from "node:path";
-import { registerWxt, wxt } from "./wxt.mjs";
+import { deinitWxtModules, initWxtModules, registerWxt, wxt } from "./wxt.mjs";
 import { unnormalizePath } from "./utils/paths.mjs";
 import {
   getContentScriptJs,
   mapWxtOptionsToRegisteredContentScript
 } from "./utils/content-scripts.mjs";
 export async function createServer(inlineConfig) {
-  await registerWxt("serve", inlineConfig, async (config) => {
-    const { port, hostname } = config.dev.server;
-    const serverInfo = {
+  await registerWxt("serve", inlineConfig);
+  wxt.server = await createServerInternal();
+  await wxt.hooks.callHook("server:created", wxt, wxt.server);
+  return wxt.server;
+}
+async function createServerInternal() {
+  const getServerInfo = () => {
+    const { port, hostname } = wxt.config.dev.server;
+    return {
       port,
       hostname,
       origin: `http://${hostname}:${port}`
     };
-    const server2 = {
-      ...serverInfo,
-      get watcher() {
-        return builderServer.watcher;
-      },
-      get ws() {
-        return builderServer.ws;
-      },
-      currentOutput: void 0,
-      async start() {
-        await builderServer.listen();
-        wxt.logger.success(`Started dev server @ ${serverInfo.origin}`);
-        await buildAndOpenBrowser();
-      },
-      async stop() {
-        await runner.closeBrowser();
-        await builderServer.close();
-      },
-      async restart() {
-        await closeAndRecreateRunner();
-        await buildAndOpenBrowser();
-      },
-      transformHtml(url, html, originalUrl) {
-        return builderServer.transformHtml(url, html, originalUrl);
-      },
-      reloadContentScript(payload) {
-        server2.ws.send("wxt:reload-content-script", payload);
-      },
-      reloadPage(path) {
-        server2.ws.send("wxt:reload-page", path);
-      },
-      reloadExtension() {
-        server2.ws.send("wxt:reload-extension");
-      },
-      async restartBrowser() {
-        await closeAndRecreateRunner();
-        await runner.openBrowser();
-      }
-    };
-    return server2;
-  });
-  const server = wxt.server;
+  };
   let [runner, builderServer] = await Promise.all([
     createExtensionRunner(),
-    wxt.builder.createServer(server)
+    wxt.builder.createServer(getServerInfo())
   ]);
+  let wasStopped = false;
+  const server = {
+    get hostname() {
+      return getServerInfo().hostname;
+    },
+    get port() {
+      return getServerInfo().port;
+    },
+    get origin() {
+      return getServerInfo().origin;
+    },
+    get watcher() {
+      return builderServer.watcher;
+    },
+    get ws() {
+      return builderServer.ws;
+    },
+    currentOutput: void 0,
+    async start() {
+      if (wasStopped) {
+        await wxt.reloadConfig();
+        runner = await createExtensionRunner();
+        builderServer = await wxt.builder.createServer(getServerInfo());
+        await initWxtModules();
+      }
+      await builderServer.listen();
+      wxt.logger.success(`Started dev server @ ${server.origin}`);
+      await wxt.hooks.callHook("server:started", wxt, server);
+      await buildAndOpenBrowser();
+      server.ws.on("wxt:background-initialized", () => {
+        if (server.currentOutput == null) return;
+        reloadContentScripts(server.currentOutput.steps, server);
+      });
+      const reloadOnChange = createFileReloader(server);
+      server.watcher.on("all", reloadOnChange);
+    },
+    async stop() {
+      wasStopped = true;
+      await runner.closeBrowser();
+      await builderServer.close();
+      await wxt.hooks.callHook("server:closed", wxt, server);
+      deinitWxtModules();
+      server.currentOutput = void 0;
+    },
+    async restart() {
+      await server.stop();
+      await server.start();
+    },
+    transformHtml(url, html, originalUrl) {
+      return builderServer.transformHtml(url, html, originalUrl);
+    },
+    reloadContentScript(payload) {
+      server.ws.send("wxt:reload-content-script", payload);
+    },
+    reloadPage(path) {
+      server.ws.send("wxt:reload-page", path);
+    },
+    reloadExtension() {
+      server.ws.send("wxt:reload-extension");
+    },
+    async restartBrowser() {
+      await runner.closeBrowser();
+      await wxt.reloadConfig();
+      runner = await createExtensionRunner();
+      await runner.openBrowser();
+    }
+  };
   const buildAndOpenBrowser = async () => {
     server.currentOutput = await internalBuild();
     try {
@@ -83,17 +115,6 @@ export async function createServer(inlineConfig) {
     }
     await runner.openBrowser();
   };
-  const closeAndRecreateRunner = async () => {
-    await runner.closeBrowser();
-    await wxt.reloadConfig();
-    runner = await createExtensionRunner();
-  };
-  server.ws.on("wxt:background-initialized", () => {
-    if (server.currentOutput == null) return;
-    reloadContentScripts(server.currentOutput.steps, server);
-  });
-  const reloadOnChange = createFileReloader(server);
-  server.watcher.on("all", reloadOnChange);
   return server;
 }
 function createFileReloader(server) {

package/dist/core/resolve-config.mjs

@@ -10,6 +10,7 @@ import { builtinModules } from "../builtin-modules/index.mjs";
 import { getEslintVersion } from "./utils/eslint.mjs";
 import { safeStringToNumber } from "./utils/number.mjs";
 import { loadEnv } from "./utils/env.mjs";
+import { getPort } from "get-port-please";
 export async function resolveConfig(inlineConfig, command) {
   let userConfig = {};
   let userConfigMetadata;
@@ -82,14 +83,19 @@ export async function resolveConfig(inlineConfig, command) {
   );
   let devServerConfig;
   if (command === "serve") {
+    const hostname = mergedConfig.dev?.server?.hostname ?? "localhost";
     let port = mergedConfig.dev?.server?.port;
     if (port == null || !isFinite(port)) {
-      const { default: getPort, portNumbers } = await import("get-port");
-      port = await getPort({ port: portNumbers(3e3, 3010) });
+      port = await getPort({
+        port: 3e3,
+        portRange: [3001, 3010],
+        // Passing host required for Mac, unsure of Windows/Linux
+        host: hostname
+      });
     }
     devServerConfig = {
       port,
-      hostname: mergedConfig.dev?.server?.hostname ?? "localhost",
+      hostname,
       watchDebounce: safeStringToNumber(process.env.WXT_WATCH_DEBOUNCE) ?? 800
     };
   }
@@ -274,9 +280,10 @@ async function getUnimportEslintOptions(wxtDir, options) {
     case "auto":
       const version = await getEslintVersion();
       let major = parseInt(version[0]);
+      if (isNaN(major)) eslintEnabled = false;
       if (major <= 8) eslintEnabled = 8;
       else if (major >= 9) eslintEnabled = 9;
-      else eslintEnabled = 8;
+      else eslintEnabled = false;
       break;
     case true:
       eslintEnabled = 8;

package/dist/core/utils/building/detect-dev-changes.d.ts

@@ -17,7 +17,11 @@ import { BuildOutput, BuildStepOutput, EntrypointGroup } from '../../../types';
  *   - Background script is changed
  *   - Manifest is different
  * - Restart browser
- *   - Config file changed (wxt.config.ts, .env, web-ext.config.ts, etc)
+ *   - web-ext.config.ts (runner config changes)
+ * - Full dev server restart
+ *   - wxt.config.ts (main config file)
+ *   - modules/* (any file related to WXT modules)
+ *   - .env (environment variable changed could effect build)
  */
 export declare function detectDevChanges(changedFiles: string[], currentOutput: BuildOutput): DevModeChange;
 /**

package/dist/core/utils/building/detect-dev-changes.mjs

@@ -7,6 +7,11 @@ export function detectDevChanges(changedFiles, currentOutput) {
     (file) => file === wxt.config.userConfigMetadata.configFile
   );
   if (isConfigChange) return { type: "full-restart" };
+  const isWxtModuleChange = some(
+    changedFiles,
+    (file) => file.startsWith(wxt.config.modulesDir)
+  );
+  if (isWxtModuleChange) return { type: "full-restart" };
   const isRunnerChange = some(
     changedFiles,
     (file) => file === wxt.config.runnerConfig.configFile

package/dist/core/utils/building/find-entrypoints.mjs

@@ -39,12 +39,7 @@ export async function findEntrypoints() {
     );
     if (matchingGlob) {
       const type = PATH_GLOB_TO_TYPE_MAP[matchingGlob];
-      results.push({
-        name,
-        inputPath,
-        type,
-        skipped: wxt.config.filterEntrypoints != null && !wxt.config.filterEntrypoints.has(name)
-      });
+      results.push({ name, inputPath, type });
     }
     return results;
   }, []);
@@ -52,7 +47,7 @@ export async function findEntrypoints() {
   preventDuplicateEntrypointNames(entrypointInfos);
   let hasBackground = false;
   const env = createExtensionEnvironment();
-  const entrypoints = await env.run(
+  const entrypointsWithoutSkipped = await env.run(
     () => Promise.all(
       entrypointInfos.map(async (info) => {
         const { type } = info;
@@ -97,45 +92,32 @@ export async function findEntrypoints() {
     )
   );
   if (wxt.config.command === "serve" && !hasBackground) {
-    entrypoints.push(
+    entrypointsWithoutSkipped.push(
       await getBackgroundEntrypoint({
         inputPath: VIRTUAL_NOOP_BACKGROUND_MODULE_ID,
         name: "background",
-        type: "background",
-        skipped: false
+        type: "background"
       })
     );
   }
+  const entrypoints = entrypointsWithoutSkipped.map((entry) => ({
+    ...entry,
+    skipped: isEntrypointSkipped(entry)
+  }));
   wxt.logger.debug("All entrypoints:", entrypoints);
-  const skippedEntrypointNames = entrypointInfos.filter((item) => item.skipped).map((item) => item.name);
+  const skippedEntrypointNames = entrypoints.filter((item) => item.skipped).map((item) => item.name);
   if (skippedEntrypointNames.length) {
     wxt.logger.warn(
-      `Filter excluded the following entrypoints:
-${skippedEntrypointNames.map((item) => `${pc.dim("-")} ${pc.cyan(item)}`).join("\n")}`
+      [
+        "The following entrypoints have been skipped:",
+        ...skippedEntrypointNames.map(
+          (item) => `${pc.dim("-")} ${pc.cyan(item)}`
+        )
+      ].join("\n")
     );
   }
-  const targetEntrypoints = entrypoints.filter((entry) => {
-    const { include, exclude } = entry.options;
-    if (include?.length && exclude?.length) {
-      wxt.logger.warn(
-        `The ${entry.name} entrypoint lists both include and exclude, but only one can be used per entrypoint. Entrypoint ignored.`
-      );
-      return false;
-    }
-    if (exclude?.length && !include?.length) {
-      return !exclude.includes(wxt.config.browser);
-    }
-    if (include?.length && !exclude?.length) {
-      return include.includes(wxt.config.browser);
-    }
-    if (skippedEntrypointNames.includes(entry.name)) {
-      return false;
-    }
-    return true;
-  });
-  wxt.logger.debug(`${wxt.config.browser} entrypoints:`, targetEntrypoints);
-  await wxt.hooks.callHook("entrypoints:resolved", wxt, targetEntrypoints);
-  return targetEntrypoints;
+  await wxt.hooks.callHook("entrypoints:resolved", wxt, entrypoints);
+  return entrypoints;
 }
 function preventDuplicateEntrypointNames(files) {
   const namesToPaths = files.reduce(
@@ -196,8 +178,7 @@ async function getPopupEntrypoint(info) {
     name: "popup",
     options: resolvePerBrowserOptions(options, wxt.config.browser),
     inputPath: info.inputPath,
-    outputDir: wxt.config.outDir,
-    skipped: info.skipped
+    outputDir: wxt.config.outDir
   };
 }
 async function getOptionsEntrypoint(info) {
@@ -216,8 +197,7 @@ async function getOptionsEntrypoint(info) {
     name: "options",
     options: resolvePerBrowserOptions(options, wxt.config.browser),
     inputPath: info.inputPath,
-    outputDir: wxt.config.outDir,
-    skipped: info.skipped
+    outputDir: wxt.config.outDir
   };
 }
 async function getUnlistedPageEntrypoint(info) {
@@ -230,14 +210,12 @@ async function getUnlistedPageEntrypoint(info) {
     name: info.name,
     inputPath: info.inputPath,
     outputDir: wxt.config.outDir,
-    options,
-    skipped: info.skipped
+    options
   };
 }
 async function getUnlistedScriptEntrypoint({
   inputPath,
-  name,
-  skipped
+  name
 }) {
   const defaultExport = await wxt.builder.importEntrypoint(inputPath);
   if (defaultExport == null) {
@@ -251,14 +229,12 @@ async function getUnlistedScriptEntrypoint({
     name,
     inputPath,
     outputDir: wxt.config.outDir,
-    options: resolvePerBrowserOptions(options, wxt.config.browser),
-    skipped
+    options: resolvePerBrowserOptions(options, wxt.config.browser)
   };
 }
 async function getBackgroundEntrypoint({
   inputPath,
-  name,
-  skipped
+  name
 }) {
   let options = {};
   if (inputPath !== VIRTUAL_NOOP_BACKGROUND_MODULE_ID) {
@@ -279,14 +255,12 @@ async function getBackgroundEntrypoint({
     name,
     inputPath,
     outputDir: wxt.config.outDir,
-    options: resolvePerBrowserOptions(options, wxt.config.browser),
-    skipped
+    options: resolvePerBrowserOptions(options, wxt.config.browser)
   };
 }
 async function getContentScriptEntrypoint({
   inputPath,
-  name,
-  skipped
+  name
 }) {
   const defaultExport = await wxt.builder.importEntrypoint(inputPath);
   if (defaultExport == null) {
@@ -305,8 +279,7 @@ async function getContentScriptEntrypoint({
     name,
     inputPath,
     outputDir: resolve(wxt.config.outDir, CONTENT_SCRIPT_OUT_DIR),
-    options: resolvePerBrowserOptions(options, wxt.config.browser),
-    skipped
+    options: resolvePerBrowserOptions(options, wxt.config.browser)
   };
 }
 async function getSidepanelEntrypoint(info) {
@@ -332,8 +305,7 @@ async function getSidepanelEntrypoint(info) {
     name: info.name,
     options: resolvePerBrowserOptions(options, wxt.config.browser),
     inputPath: info.inputPath,
-    outputDir: wxt.config.outDir,
-    skipped: info.skipped
+    outputDir: wxt.config.outDir
   };
 }
 async function getHtmlEntrypointOptions(info, keyMap, queries, parsers) {
@@ -357,6 +329,25 @@ async function getHtmlEntrypointOptions(info, keyMap, queries, parsers) {
   });
   return options;
 }
+function isEntrypointSkipped(entry) {
+  if (wxt.config.filterEntrypoints != null) {
+    return !wxt.config.filterEntrypoints.has(entry.name);
+  }
+  const { include, exclude } = entry.options;
+  if (include?.length && exclude?.length) {
+    wxt.logger.warn(
+      `The ${entry.name} entrypoint lists both include and exclude, but only one can be used per entrypoint. Entrypoint skipped.`
+    );
+    return true;
+  }
+  if (exclude?.length && !include?.length) {
+    return exclude.includes(wxt.config.browser);
+  }
+  if (include?.length && !exclude?.length) {
+    return !include.includes(wxt.config.browser);
+  }
+  return false;
+}
 const PATH_GLOB_TO_TYPE_MAP = {
   "sandbox.html": "sandbox",
   "sandbox/index.html": "sandbox",

package/dist/core/utils/building/group-entrypoints.d.ts

@@ -1,7 +1,7 @@
 import { Entrypoint, EntrypointGroup } from '../../../types';
 /**
- * Entrypoints can be build in groups. HTML pages can all be built together in a single step, while
- * content scripts must be build individually.
+ * Entrypoints are built in groups. HTML pages can all be built together in a single step,
+ * content scripts must be build individually, etc.
  *
  * This function returns the entrypoints put into these types of groups.
  */

package/dist/core/utils/building/group-entrypoints.mjs

@@ -2,6 +2,7 @@ export function groupEntrypoints(entrypoints) {
   const groupIndexMap = {};
   const groups = [];
   for (const entry of entrypoints) {
+    if (entry.skipped) continue;
     let group = ENTRY_TYPE_TO_GROUP_MAP[entry.type];
     if (entry.type === "background" && entry.options.type === "module") {
       group = "esm";

package/dist/core/utils/content-scripts.mjs

@@ -28,7 +28,7 @@ export function hashContentScriptOptions(options) {
 }
 export function mapWxtOptionsToContentScript(options, js, css) {
   return {
-    matches: options.matches,
+    matches: options.matches ?? [],
     all_frames: options.allFrames,
     match_about_blank: options.matchAboutBlank,
     exclude_globs: options.excludeGlobs,

package/dist/core/utils/manifest.d.ts

@@ -35,10 +35,10 @@ export declare function stripPathFromMatchPattern(pattern: string): string;
 /**
  * Converts all MV3 web accessible resources to their MV2 forms. MV3 web accessible resources are
  * generated in this file, and may be defined by the user in their manifest. In both cases, when
- * targetting MV2, automatically convert their definitions down to the basic MV2 array.
+ * targeting MV2, automatically convert their definitions down to the basic MV2 array.
  */
 export declare function convertWebAccessibleResourcesToMv2(manifest: Manifest.WebExtensionManifest): void;
 /**
  * Make sure all resources are in MV3 format. If not, add a wanring
  */
-export declare function validateMv3WebAccessbileResources(manifest: Manifest.WebExtensionManifest): void;
+export declare function validateMv3WebAccessibleResources(manifest: Manifest.WebExtensionManifest): void;