wxt 0.18.15 → 0.19.0

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

@@ -0,0 +1,285 @@
+import * as wxtPlugins from "./plugins/index.mjs";
+import {
+  getEntrypointBundlePath,
+  isHtmlEntrypoint
+} from "../../utils/entrypoints.mjs";
+import { toArray } from "../../utils/arrays.mjs";
+import { safeVarName } from "../../utils/strings.mjs";
+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) {
+  const vite = await import("vite");
+  const getBaseConfig = async (baseConfigOptions) => {
+    const config = await wxtConfig.vite(wxtConfig.env);
+    config.root = wxtConfig.root;
+    config.configFile = false;
+    config.logLevel = "warn";
+    config.mode = wxtConfig.mode;
+    config.build ??= {};
+    config.publicDir = wxtConfig.publicDir;
+    config.build.copyPublicDir = false;
+    config.build.outDir = wxtConfig.outDir;
+    config.build.emptyOutDir = false;
+    if (config.build.minify == null && wxtConfig.command === "serve") {
+      config.build.minify = false;
+    }
+    if (config.build.sourcemap == null && wxtConfig.command === "serve") {
+      config.build.sourcemap = "inline";
+    }
+    config.plugins ??= [];
+    config.plugins.push(
+      wxtPlugins.download(wxtConfig),
+      wxtPlugins.devHtmlPrerender(wxtConfig, server),
+      wxtPlugins.resolveVirtualModules(wxtConfig),
+      wxtPlugins.devServerGlobals(wxtConfig, server),
+      wxtPlugins.tsconfigPaths(wxtConfig),
+      wxtPlugins.noopBackground(),
+      wxtPlugins.globals(wxtConfig),
+      wxtPlugins.resolveExtensionApi(wxtConfig),
+      wxtPlugins.defineImportMeta(),
+      wxtPlugins.wxtPluginLoader(wxtConfig),
+      wxtPlugins.resolveAppConfig(wxtConfig)
+    );
+    if (wxtConfig.analysis.enabled && // If included, vite-node entrypoint loader will increment the
+    // bundleAnalysis's internal build index tracker, which we don't want
+    !baseConfigOptions?.excludeAnalysisPlugin) {
+      config.plugins.push(wxtPlugins.bundleAnalysis(wxtConfig));
+    }
+    return config;
+  };
+  const getLibModeConfig = (entrypoint) => {
+    const entry = getRollupEntry(entrypoint);
+    const plugins = [
+      wxtPlugins.entrypointGroupGlobals(entrypoint)
+    ];
+    if (entrypoint.type === "content-script-style" || entrypoint.type === "unlisted-style") {
+      plugins.push(wxtPlugins.cssEntrypoints(entrypoint, wxtConfig));
+    }
+    const iifeReturnValueName = safeVarName(entrypoint.name);
+    const libMode = {
+      mode: wxtConfig.mode,
+      plugins,
+      esbuild: {
+        // Add a footer with the returned value so it can return values to `scripting.executeScript`
+        // Footer is added apart of esbuild to make sure it's not minified. It
+        // get's removed if added to `build.rollupOptions.output.footer`
+        // See https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/scripting/executeScript#return_value
+        footer: iifeReturnValueName + ";"
+      },
+      build: {
+        lib: {
+          entry,
+          formats: ["iife"],
+          name: iifeReturnValueName,
+          fileName: entrypoint.name
+        },
+        rollupOptions: {
+          output: {
+            // There's only a single output for this build, so we use the desired bundle path for the
+            // entry output (like "content-scripts/overlay.js")
+            entryFileNames: getEntrypointBundlePath(
+              entrypoint,
+              wxtConfig.outDir,
+              ".js"
+            ),
+            // Output content script CSS to `content-scripts/`, but all other scripts are written to
+            // `assets/`.
+            assetFileNames: ({ name }) => {
+              if (entrypoint.type === "content-script" && name?.endsWith("css")) {
+                return `content-scripts/${entrypoint.name}.[ext]`;
+              } else {
+                return `assets/${entrypoint.name}.[ext]`;
+              }
+            }
+          }
+        }
+      },
+      define: {
+        // See https://github.com/aklinker1/vite-plugin-web-extension/issues/96
+        "process.env.NODE_ENV": JSON.stringify(wxtConfig.mode)
+      }
+    };
+    return libMode;
+  };
+  const getMultiPageConfig = (entrypoints) => {
+    const htmlEntrypoints = new Set(
+      entrypoints.filter(isHtmlEntrypoint).map((e) => e.name)
+    );
+    return {
+      mode: wxtConfig.mode,
+      plugins: [
+        wxtPlugins.multipageMove(entrypoints, wxtConfig),
+        wxtPlugins.entrypointGroupGlobals(entrypoints)
+      ],
+      build: {
+        rollupOptions: {
+          input: entrypoints.reduce((input, entry) => {
+            input[entry.name] = getRollupEntry(entry);
+            return input;
+          }, {}),
+          output: {
+            // Include a hash to prevent conflicts
+            chunkFileNames: "chunks/[name]-[hash].js",
+            entryFileNames: ({ name }) => {
+              if (htmlEntrypoints.has(name)) return "chunks/[name]-[hash].js";
+              return "[name].js";
+            },
+            // We can't control the "name", so we need a hash to prevent conflicts
+            assetFileNames: "assets/[name]-[hash].[ext]"
+          }
+        }
+      }
+    };
+  };
+  const getCssConfig = (entrypoint) => {
+    return {
+      mode: wxtConfig.mode,
+      plugins: [wxtPlugins.entrypointGroupGlobals(entrypoint)],
+      build: {
+        rollupOptions: {
+          input: {
+            [entrypoint.name]: entrypoint.inputPath
+          },
+          output: {
+            assetFileNames: () => {
+              if (entrypoint.type === "content-script-style") {
+                return `content-scripts/${entrypoint.name}.[ext]`;
+              } else {
+                return `assets/${entrypoint.name}.[ext]`;
+              }
+            }
+          }
+        }
+      }
+    };
+  };
+  return {
+    name: "Vite",
+    version: vite.version,
+    async importEntrypoint(path) {
+      switch (wxtConfig.entrypointLoader) {
+        default:
+        case "jiti": {
+          return await importEntrypointFile(path);
+        }
+        case "vite-node": {
+          const baseConfig = await getBaseConfig({
+            excludeAnalysisPlugin: true
+          });
+          baseConfig.optimizeDeps ??= {};
+          baseConfig.optimizeDeps.noDiscovery = true;
+          baseConfig.optimizeDeps.include = [];
+          const envConfig = {
+            plugins: [
+              wxtPlugins.extensionApiMock(wxtConfig),
+              wxtPlugins.removeEntrypointMainFunction(wxtConfig, path)
+            ]
+          };
+          const config = vite.mergeConfig(baseConfig, envConfig);
+          const server2 = await vite.createServer(config);
+          await server2.pluginContainer.buildStart({});
+          const node = new ViteNodeServer(
+            // @ts-ignore: Some weird type error...
+            server2
+          );
+          installSourcemapsSupport({
+            getSourceMap: (source) => node.getSourceMap(source)
+          });
+          const runner = new ViteNodeRunner({
+            root: server2.config.root,
+            base: server2.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
+            fetchModule(id) {
+              return node.fetchModule(id);
+            },
+            resolveId(id, importer) {
+              return node.resolveId(id, importer);
+            }
+          });
+          const res = await runner.executeFile(path);
+          await server2.close();
+          return res.default;
+        }
+      }
+    },
+    async build(group) {
+      let entryConfig;
+      if (Array.isArray(group)) entryConfig = getMultiPageConfig(group);
+      else if (group.inputPath.endsWith(".css"))
+        entryConfig = getCssConfig(group);
+      else entryConfig = getLibModeConfig(group);
+      const buildConfig = vite.mergeConfig(await getBaseConfig(), entryConfig);
+      await hooks.callHook(
+        "vite:build:extendConfig",
+        toArray(group),
+        buildConfig
+      );
+      const result = await vite.build(buildConfig);
+      return {
+        entrypoints: group,
+        chunks: getBuildOutputChunks(result)
+      };
+    },
+    async createServer(info) {
+      const serverConfig = {
+        server: {
+          port: info.port,
+          strictPort: true,
+          host: info.hostname,
+          origin: info.origin
+        }
+      };
+      const baseConfig = await getBaseConfig();
+      const finalConfig = vite.mergeConfig(baseConfig, serverConfig);
+      await hooks.callHook("vite:devServer:extendConfig", finalConfig);
+      const viteServer = await vite.createServer(finalConfig);
+      const server2 = {
+        async listen() {
+          await viteServer.listen(info.port);
+        },
+        async close() {
+          await viteServer.close();
+        },
+        transformHtml(...args) {
+          return viteServer.transformIndexHtml(...args);
+        },
+        ws: {
+          send(message, payload) {
+            return viteServer.ws.send(message, payload);
+          },
+          on(message, cb) {
+            viteServer.ws.on(message, cb);
+          }
+        },
+        watcher: viteServer.watcher
+      };
+      return server2;
+    }
+  };
+}
+function getBuildOutputChunks(result) {
+  if ("on" in result) throw Error("wxt does not support vite watch mode.");
+  if (Array.isArray(result)) return result.flatMap(({ output }) => output);
+  return result.output;
+}
+function getRollupEntry(entrypoint) {
+  let virtualEntrypointType;
+  switch (entrypoint.type) {
+    case "background":
+    case "unlisted-script":
+      virtualEntrypointType = entrypoint.type;
+      break;
+    case "content-script":
+      virtualEntrypointType = entrypoint.options.world === "MAIN" ? "content-script-main-world" : "content-script-isolated-world";
+      break;
+  }
+  if (virtualEntrypointType) {
+    const moduleId = `virtual:wxt-${virtualEntrypointType}-entrypoint`;
+    return `${moduleId}?${entrypoint.inputPath}`;
+  }
+  return entrypoint.inputPath;
+}

package/dist/core/builders/vite/plugins/bundleAnalysis.d.ts

@@ -0,0 +1,7 @@
+import type * as vite from 'vite';
+import { ResolvedConfig } from '../../../../types';
+export declare function bundleAnalysis(config: ResolvedConfig): vite.Plugin;
+/**
+ * @deprecated FOR TESTING ONLY.
+ */
+export declare function resetBundleIncrement(): void;

package/dist/core/builders/vite/plugins/bundleAnalysis.mjs

@@ -0,0 +1,15 @@
+import { visualizer } from "@aklinker1/rollup-plugin-visualizer";
+import path from "node:path";
+let increment = 0;
+export function bundleAnalysis(config) {
+  return visualizer({
+    template: "raw-data",
+    filename: path.resolve(
+      config.analysis.outputDir,
+      `${config.analysis.outputName}-${increment++}.json`
+    )
+  });
+}
+export function resetBundleIncrement() {
+  increment = 0;
+}

package/dist/core/builders/vite/plugins/cssEntrypoints.d.ts

@@ -0,0 +1,13 @@
+import type * as vite from 'vite';
+import { Entrypoint, ResolvedConfig } from '../../../../types';
+/**
+ * Rename CSS entrypoint outputs to ensure a JS file is not generated, and that the CSS file is
+ * placed in the correct place.
+ *
+ * It:
+ * 1. Renames CSS files to their final paths
+ * 2. Removes the JS file that get's output by lib mode
+ *
+ * THIS PLUGIN SHOULD ONLY BE APPLIED TO CSS LIB MODE BUILDS. It should not be added to every build.
+ */
+export declare function cssEntrypoints(entrypoint: Entrypoint, config: ResolvedConfig): vite.Plugin;

package/dist/core/builders/vite/plugins/cssEntrypoints.mjs

@@ -0,0 +1,22 @@
+import { getEntrypointBundlePath } from "../../../utils/entrypoints.mjs";
+export function cssEntrypoints(entrypoint, config) {
+  return {
+    name: "wxt:css-entrypoint",
+    config() {
+      return {
+        build: {
+          rollupOptions: {
+            output: {
+              assetFileNames: () => getEntrypointBundlePath(entrypoint, config.outDir, ".css")
+            }
+          }
+        }
+      };
+    },
+    generateBundle(_, bundle) {
+      Object.keys(bundle).forEach((file) => {
+        if (file.endsWith(".js")) delete bundle[file];
+      });
+    }
+  };
+}

package/dist/core/builders/vite/plugins/defineImportMeta.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Overrides definitions for `import.meta.*`
+ *
+ * - `import.meta.url`: Without this, background service workers crash trying to access
+ *   `document.location`, see https://github.com/wxt-dev/wxt/issues/392
+ */
+export declare function defineImportMeta(): {
+    name: string;
+    config(): {
+        define: {
+            'import.meta.url': string;
+        };
+    };
+};

package/dist/core/builders/vite/plugins/defineImportMeta.mjs

@@ -0,0 +1,13 @@
+export function defineImportMeta() {
+  return {
+    name: "wxt:define",
+    config() {
+      return {
+        define: {
+          // This works for all extension contexts, including background service worker
+          "import.meta.url": "self.location.href"
+        }
+      };
+    }
+  };
+}

package/dist/core/builders/vite/plugins/devHtmlPrerender.d.ts

@@ -0,0 +1,7 @@
+import type * as vite from 'vite';
+import { ResolvedConfig, WxtDevServer } from '../../../../types';
+/**
+ * Pre-renders the HTML entrypoints when building the extension to connect to the dev server.
+ */
+export declare function devHtmlPrerender(config: ResolvedConfig, server: WxtDevServer | undefined): vite.PluginOption;
+export declare function pointToDevServer(config: ResolvedConfig, server: WxtDevServer, id: string, document: Document, querySelector: string, attr: string): void;

package/dist/core/builders/vite/plugins/devHtmlPrerender.mjs

@@ -0,0 +1,140 @@
+import { getEntrypointName } from "../../../utils/entrypoints.mjs";
+import { parseHTML } from "linkedom";
+import { dirname, relative, resolve } from "node:path";
+import { normalizePath } from "../../../utils/paths.mjs";
+import { murmurHash } from "ohash";
+const inlineScriptContents = {};
+export function devHtmlPrerender(config, server) {
+  const htmlReloadId = "@wxt/reload-html";
+  const resolvedHtmlReloadId = resolve(
+    config.wxtModuleDir,
+    "dist/virtual/reload-html.mjs"
+  );
+  const virtualInlineScript = "virtual:wxt-inline-script";
+  const resolvedVirtualInlineScript = "\0" + virtualInlineScript;
+  return [
+    {
+      apply: "build",
+      name: "wxt:dev-html-prerender",
+      config() {
+        return {
+          resolve: {
+            alias: {
+              [htmlReloadId]: resolvedHtmlReloadId
+            }
+          }
+        };
+      },
+      // Convert scripts like src="./main.tsx" -> src="http://localhost:3000/entrypoints/popup/main.tsx"
+      // before the paths are replaced with their bundled path
+      transform(code, id) {
+        if (config.command !== "serve" || server == null || !id.endsWith(".html"))
+          return;
+        const { document } = parseHTML(code);
+        const _pointToDevServer = (querySelector, attr) => pointToDevServer(config, server, id, document, querySelector, attr);
+        _pointToDevServer("script[type=module]", "src");
+        _pointToDevServer("link[rel=stylesheet]", "href");
+        const reloader = document.createElement("script");
+        reloader.src = htmlReloadId;
+        reloader.type = "module";
+        document.head.appendChild(reloader);
+        const newHtml = document.toString();
+        config.logger.debug("transform " + id);
+        config.logger.debug("Old HTML:\n" + code);
+        config.logger.debug("New HTML:\n" + newHtml);
+        return newHtml;
+      },
+      // Pass the HTML through the dev server to add dev-mode specific code
+      async transformIndexHtml(html, ctx) {
+        if (config.command !== "serve" || server == null) return;
+        const originalUrl = `${server.origin}${ctx.path}`;
+        const name = getEntrypointName(config.entrypointsDir, ctx.filename);
+        const url = `${server.origin}/${name}.html`;
+        const serverHtml = await server.transformHtml(url, html, originalUrl);
+        const { document } = parseHTML(serverHtml);
+        const inlineScripts = document.querySelectorAll("script:not([src])");
+        inlineScripts.forEach((script) => {
+          const textContent = script.textContent ?? "";
+          const hash = murmurHash(textContent);
+          inlineScriptContents[hash] = textContent;
+          const virtualScript = document.createElement("script");
+          virtualScript.type = "module";
+          virtualScript.src = `${server.origin}/@id/${virtualInlineScript}?${hash}`;
+          script.replaceWith(virtualScript);
+        });
+        const viteClientScript = document.querySelector(
+          "script[src='/@vite/client']"
+        );
+        if (viteClientScript) {
+          viteClientScript.src = `${server.origin}${viteClientScript.src}`;
+        }
+        const newHtml = document.toString();
+        config.logger.debug("transformIndexHtml " + ctx.filename);
+        config.logger.debug("Old HTML:\n" + html);
+        config.logger.debug("New HTML:\n" + newHtml);
+        return newHtml;
+      }
+    },
+    {
+      name: "wxt:virtualize-react-refresh",
+      apply: "serve",
+      resolveId(id) {
+        if (id.startsWith(virtualInlineScript)) {
+          return "\0" + id;
+        }
+        if (id.startsWith("/chunks/")) {
+          return "\0noop";
+        }
+      },
+      load(id) {
+        if (id.startsWith(resolvedVirtualInlineScript)) {
+          const hash = Number(id.substring(id.indexOf("?") + 1));
+          return inlineScriptContents[hash];
+        }
+        if (id === "\0noop") {
+          return "";
+        }
+      }
+    }
+  ];
+}
+export function pointToDevServer(config, server, id, document, querySelector, attr) {
+  document.querySelectorAll(querySelector).forEach((element) => {
+    const src = element.getAttribute(attr);
+    if (!src || isUrl(src)) return;
+    let resolvedAbsolutePath;
+    const matchingAlias = Object.entries(config.alias).find(
+      ([key]) => src.startsWith(key)
+    );
+    if (matchingAlias) {
+      const [alias, replacement] = matchingAlias;
+      resolvedAbsolutePath = resolve(
+        config.root,
+        src.replace(alias, replacement)
+      );
+    } else {
+      resolvedAbsolutePath = resolve(dirname(id), src);
+    }
+    if (resolvedAbsolutePath) {
+      const relativePath = normalizePath(
+        relative(config.root, resolvedAbsolutePath)
+      );
+      if (relativePath.startsWith(".")) {
+        let path = normalizePath(resolvedAbsolutePath);
+        if (!path.startsWith("/")) path = "/" + path;
+        element.setAttribute(attr, `${server.origin}/@fs${path}`);
+      } else {
+        const url = new URL(relativePath, server.origin);
+        element.setAttribute(attr, url.href);
+      }
+    }
+  });
+}
+function isUrl(str) {
+  try {
+    new URL(str);
+    return true;
+  } catch {
+    return false;
+  }
+}

package/dist/core/builders/vite/plugins/devServerGlobals.d.ts

@@ -0,0 +1,6 @@
+import { Plugin } from 'vite';
+import { ResolvedConfig, WxtDevServer } from '../../../../types';
+/**
+ * Defines global constants about the dev server. Helps scripts connect to the server's web socket.
+ */
+export declare function devServerGlobals(config: ResolvedConfig, server: WxtDevServer | undefined): Plugin;

package/dist/core/builders/vite/plugins/devServerGlobals.mjs

@@ -0,0 +1,15 @@
+export function devServerGlobals(config, server) {
+  return {
+    name: "wxt:dev-server-globals",
+    config() {
+      if (server == null || config.command == "build") return;
+      return {
+        define: {
+          __DEV_SERVER_PROTOCOL__: JSON.stringify("ws:"),
+          __DEV_SERVER_HOSTNAME__: JSON.stringify(server.hostname),
+          __DEV_SERVER_PORT__: JSON.stringify(server.port)
+        }
+      };
+    }
+  };
+}

package/dist/core/builders/vite/plugins/download.d.ts

@@ -0,0 +1,10 @@
+import { Plugin } from 'vite';
+import { ResolvedConfig } from '../../../../types';
+/**
+ * Downloads any URL imports, like Google Analytics, into virtual modules so they are bundled with
+ * the extension instead of depending on remote code at runtime.
+ *
+ * @example
+ * import "url:https://google-tagmanager.com/gtag?id=XYZ";
+ */
+export declare function download(config: ResolvedConfig): Plugin;

package/dist/core/builders/vite/plugins/download.mjs

@@ -0,0 +1,14 @@
+import { fetchCached } from "../../../utils/network.mjs";
+export function download(config) {
+  return {
+    name: "wxt:download",
+    resolveId(id) {
+      if (id.startsWith("url:")) return "\0" + id;
+    },
+    async load(id) {
+      if (!id.startsWith("\0url:")) return;
+      const url = id.replace("\0url:", "");
+      return await fetchCached(url, config);
+    }
+  };
+}

package/dist/core/builders/vite/plugins/entrypointGroupGlobals.d.ts

@@ -0,0 +1,6 @@
+import type * as vite from 'vite';
+import { EntrypointGroup } from '../../../../types';
+/**
+ * Define a set of global variables specific to an entrypoint.
+ */
+export declare function entrypointGroupGlobals(entrypointGroup: EntrypointGroup): vite.PluginOption;

package/dist/core/builders/vite/plugins/entrypointGroupGlobals.mjs

@@ -0,0 +1,16 @@
+import { getEntrypointGlobals } from "../../../utils/globals.mjs";
+export function entrypointGroupGlobals(entrypointGroup) {
+  return {
+    name: "wxt:entrypoint-group-globals",
+    config() {
+      const define = {};
+      let name = Array.isArray(entrypointGroup) ? "html" : entrypointGroup.name;
+      for (const global of getEntrypointGlobals(name)) {
+        define[`import.meta.env.${global.name}`] = JSON.stringify(global.value);
+      }
+      return {
+        define
+      };
+    }
+  };
+}

package/dist/core/builders/vite/plugins/extensionApiMock.d.ts

@@ -0,0 +1,11 @@
+import type * as vite from 'vite';
+import { ResolvedConfig } from '../../../../types';
+/**
+ * Mock `webextension-polyfill`, `wxt/browser`, and `wxt/browser/*` by inlining
+ * all dependencies that import them and adding a custom alias so that Vite
+ * resolves to a mocked version of the module.
+ *
+ * TODO: Detect non-wxt dependencies (like `@webext-core/*`) that import `webextension-polyfill` via
+ * `npm list` and inline them automatically.
+ */
+export declare function extensionApiMock(config: ResolvedConfig): vite.PluginOption;

package/dist/core/builders/vite/plugins/extensionApiMock.mjs

@@ -0,0 +1,26 @@
+import path from "node:path";
+export function extensionApiMock(config) {
+  return {
+    name: "wxt:extension-api-mock",
+    config() {
+      const replacement = path.resolve(
+        config.wxtModuleDir,
+        "dist/virtual/mock-browser"
+      );
+      return {
+        resolve: {
+          alias: [
+            { find: "webextension-polyfill", replacement },
+            // wxt/browser, wxt/browser/...
+            { find: /^wxt\/browser.*/, replacement }
+          ]
+        },
+        ssr: {
+          // Inline all WXT modules so vite processes them so the aliases can
+          // be resolved
+          noExternal: ["wxt"]
+        }
+      };
+    }
+  };
+}

package/dist/core/builders/vite/plugins/globals.d.ts

@@ -0,0 +1,3 @@
+import type * as vite from 'vite';
+import { ResolvedConfig } from '../../../../types';
+export declare function globals(config: ResolvedConfig): vite.PluginOption;

package/dist/core/builders/vite/plugins/globals.mjs

@@ -0,0 +1,15 @@
+import { getGlobals } from "../../../utils/globals.mjs";
+export function globals(config) {
+  return {
+    name: "wxt:globals",
+    config() {
+      const define = {};
+      for (const global of getGlobals(config)) {
+        define[`import.meta.env.${global.name}`] = JSON.stringify(global.value);
+      }
+      return {
+        define
+      };
+    }
+  };
+}