wxt 0.6.0 → 0.6.2

package/dist/index.d.cts

@@ -2,6 +2,7 @@ import * as vite from 'vite';
 import { Manifest, Scripting } from 'webextension-polyfill';
 import { UnimportOptions } from 'unimport';
 import { LogLevel } from 'consola';
+import { PluginVisualizerOptions } from 'rollup-plugin-visualizer';
 
 /**
  * Extends [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController).
@@ -205,6 +206,36 @@ interface InlineConfig {
          */
         ignoredSources?: string[];
     };
+    /**
+     * Transform the final manifest before it's written to the file system. Edit the `manifest`
+     * parameter directly, do not return a new object. Return values are ignored.
+     *
+     * @example
+     * defineConfig({
+     *   // Add a CSS-only content script.
+     *   transformManifest(manifest) {
+     *     manifest.content_scripts.push({
+     *       matches: ["*://google.com/*"],
+     *       css: ["content-scripts/some-example.css"],
+     *     });
+     *   }
+     * })
+     */
+    transformManifest?: (manifest: Manifest.WebExtensionManifest) => void;
+    analysis?: {
+        /**
+         * Explicitly include bundle analysis when running `wxt build`. This can be overridden by the
+         * command line `--analysis` option.
+         */
+        enabled?: boolean;
+        /**
+         * When running `wxt build --analyze` or setting `analysis.enabled` to true, customize how the
+         * bundle will be visualized. See
+         * [`rollup-plugin-visualizer`](https://github.com/btd/rollup-plugin-visualizer#how-to-use-generated-files)
+         * for more details.
+         */
+        template?: PluginVisualizerOptions['template'];
+    };
 }
 interface WxtInlineViteConfig extends Omit<vite.InlineConfig, 'root' | 'configFile' | 'mode' | 'build'> {
     build?: Omit<vite.BuildOptions, 'outDir'>;
@@ -483,7 +514,7 @@ type EntrypointGroup = Entrypoint | Entrypoint[];
  */
 declare function clean(root?: string): Promise<void>;
 
-var version = "0.6.0";
+var version = "0.6.2";
 
 declare function defineConfig(config: UserConfig): UserConfig;
 

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import * as vite from 'vite';
 import { Manifest, Scripting } from 'webextension-polyfill';
 import { UnimportOptions } from 'unimport';
 import { LogLevel } from 'consola';
+import { PluginVisualizerOptions } from 'rollup-plugin-visualizer';
 
 /**
  * Extends [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController).
@@ -205,6 +206,36 @@ interface InlineConfig {
          */
         ignoredSources?: string[];
     };
+    /**
+     * Transform the final manifest before it's written to the file system. Edit the `manifest`
+     * parameter directly, do not return a new object. Return values are ignored.
+     *
+     * @example
+     * defineConfig({
+     *   // Add a CSS-only content script.
+     *   transformManifest(manifest) {
+     *     manifest.content_scripts.push({
+     *       matches: ["*://google.com/*"],
+     *       css: ["content-scripts/some-example.css"],
+     *     });
+     *   }
+     * })
+     */
+    transformManifest?: (manifest: Manifest.WebExtensionManifest) => void;
+    analysis?: {
+        /**
+         * Explicitly include bundle analysis when running `wxt build`. This can be overridden by the
+         * command line `--analysis` option.
+         */
+        enabled?: boolean;
+        /**
+         * When running `wxt build --analyze` or setting `analysis.enabled` to true, customize how the
+         * bundle will be visualized. See
+         * [`rollup-plugin-visualizer`](https://github.com/btd/rollup-plugin-visualizer#how-to-use-generated-files)
+         * for more details.
+         */
+        template?: PluginVisualizerOptions['template'];
+    };
 }
 interface WxtInlineViteConfig extends Omit<vite.InlineConfig, 'root' | 'configFile' | 'mode' | 'build'> {
     build?: Omit<vite.BuildOptions, 'outDir'>;
@@ -483,7 +514,7 @@ type EntrypointGroup = Entrypoint | Entrypoint[];
  */
 declare function clean(root?: string): Promise<void>;
 
-var version = "0.6.0";
+var version = "0.6.2";
 
 declare function defineConfig(config: UserConfig): UserConfig;
 

package/dist/index.js

@@ -406,6 +406,17 @@ function cssEntrypoints(entrypoint, config) {
   };
 }
 
+// src/core/vite-plugins/bundleAnalysis.ts
+import { visualizer } from "rollup-plugin-visualizer";
+var increment = 0;
+function bundleAnalysis() {
+  return visualizer({
+    emitFile: true,
+    template: "raw-data",
+    filename: `stats-${increment++}.json`
+  });
+}
+
 // src/core/utils/globals.ts
 function getGlobals(config) {
   return [
@@ -523,7 +534,15 @@ async function getInternalConfig(inlineConfig, command) {
     vite: () => ({}),
     // Real value added after this object is initialized.
     wxtDir,
-    zip: resolveInternalZipConfig(root, mergedConfig)
+    zip: resolveInternalZipConfig(root, mergedConfig),
+    transformManifest(manifest) {
+      userConfig.transformManifest?.(manifest);
+      inlineConfig.transformManifest?.(manifest);
+    },
+    analysis: {
+      enabled: mergedConfig.analysis?.enabled ?? false,
+      template: mergedConfig.analysis?.template ?? "treemap"
+    }
   };
   finalConfig.vite = (env2) => resolveInternalViteConfig(env2, mergedConfig, finalConfig);
   return finalConfig;
@@ -576,7 +595,11 @@ function mergeInlineConfig(inlineConfig, userConfig) {
     runner,
     srcDir: inlineConfig.srcDir ?? userConfig.srcDir,
     vite: viteConfig,
-    zip
+    zip,
+    analysis: {
+      enabled: inlineConfig.analysis?.enabled ?? userConfig.analysis?.enabled,
+      template: inlineConfig.analysis?.template ?? userConfig.analysis?.template
+    }
   };
 }
 function resolveInternalZipConfig(root, mergedConfig) {
@@ -621,6 +644,9 @@ async function resolveInternalViteConfig(env, mergedConfig, finalConfig) {
   internalVite.plugins.push(devServerGlobals(finalConfig));
   internalVite.plugins.push(tsconfigPaths(finalConfig));
   internalVite.plugins.push(noopBackground());
+  if (finalConfig.analysis.enabled) {
+    internalVite.plugins.push(bundleAnalysis());
+  }
   internalVite.define ??= {};
   for (const global of getGlobals(finalConfig)) {
     internalVite.define[global.name] = JSON.stringify(global.value);
@@ -629,7 +655,7 @@ async function resolveInternalViteConfig(env, mergedConfig, finalConfig) {
 }
 
 // src/index.ts
-import pc4 from "picocolors";
+import pc5 from "picocolors";
 
 // src/core/utils/arrays.ts
 function every(array, predicate) {
@@ -726,7 +752,7 @@ function findEffectedSteps(changedFile, currentOutput) {
 // src/index.ts
 import { Mutex } from "async-mutex";
 import { consola as consola3 } from "consola";
-import { relative as relative5 } from "node:path";
+import { relative as relative7 } from "node:path";
 
 // src/core/build/buildEntrypoints.ts
 import * as vite3 from "vite";
@@ -764,9 +790,12 @@ async function getPublicFiles(config) {
 }
 
 // src/core/build/buildEntrypoints.ts
-async function buildEntrypoints(groups, config) {
+import pc from "picocolors";
+async function buildEntrypoints(groups, config, spinner) {
   const steps = [];
-  for (const group of groups) {
+  for (let i = 0; i < groups.length; i++) {
+    const group = groups[i];
+    spinner.text = pc.dim(`[${i + 1}/${groups.length}]`) + ` ${[group].flat().map((e) => e.name).join(pc.dim(", "))}`;
     const step = Array.isArray(group) ? await buildMultipleEntrypoints(group, config) : await buildSingleEntrypoint(group, config);
     steps.push(step);
   }
@@ -970,7 +999,7 @@ async function findEntrypoints(config) {
     relativePaths.map(async (relativePath) => {
       const path7 = resolve8(config.entrypointsDir, relativePath);
       const matchingGlob = pathGlobs.find(
-        (glob4) => minimatch(relativePath, glob4)
+        (glob5) => minimatch(relativePath, glob5)
       );
       if (matchingGlob == null) {
         return config.logger.warn(
@@ -1537,6 +1566,7 @@ async function getPackageJson(config) {
 }
 
 // src/core/utils/manifest.ts
+import { produce } from "immer";
 async function writeManifest(manifest, output, config) {
   const str = config.mode === "production" ? JSON.stringify(manifest) : JSON.stringify(manifest, null, 2);
   await fs12.ensureDir(config.outDir);
@@ -1578,7 +1608,7 @@ async function generateMainfest(entrypoints, buildOutput, config) {
       "Manifest 'version' is missing. Either:\n1. Add a version in your <rootDir>/package.json\n2. Pass the version via the manifest option in your wxt.config.ts"
     );
   }
-  return manifest;
+  return produce(manifest, config.transformManifest);
 }
 function simplifyVersion(versionName) {
   const version3 = /^((0|[1-9][0-9]{0,8})([.](0|[1-9][0-9]{0,8})){0,3}).*$/.exec(
@@ -1858,7 +1888,7 @@ function addHostPermission(manifest, hostPermission) {
 }
 
 // src/core/build.ts
-import pc2 from "picocolors";
+import pc3 from "picocolors";
 import * as vite4 from "vite";
 import fs14 from "fs-extra";
 
@@ -1914,7 +1944,7 @@ import { resolve as resolve12 } from "path";
 
 // src/core/log/printFileList.ts
 import path5 from "node:path";
-import pc from "picocolors";
+import pc2 from "picocolors";
 import fs13 from "fs-extra";
 import { filesize } from "filesize";
 
@@ -1960,21 +1990,21 @@ async function printFileList(log, header, baseDir, files) {
       totalSize += stats.size;
       const size = String(filesize(stats.size));
       return [
-        `${pc.gray(prefix)} ${pc.dim(parts[0])}${color(parts[1])}`,
-        pc.dim(size)
+        `${pc2.gray(prefix)} ${pc2.dim(parts[0])}${color(parts[1])}`,
+        pc2.dim(size)
       ];
     })
   );
-  fileRows.push([`${pc.cyan("\u03A3 Total size:")} ${String(filesize(totalSize))}`]);
+  fileRows.push([`${pc2.cyan("\u03A3 Total size:")} ${String(filesize(totalSize))}`]);
   printTable(log, header, fileRows);
 }
-var DEFAULT_COLOR = pc.blue;
+var DEFAULT_COLOR = pc2.blue;
 var CHUNK_COLORS = {
-  ".js.map": pc.gray,
-  ".html": pc.green,
-  ".css": pc.magenta,
-  ".js": pc.cyan,
-  ".zip": pc.yellow
+  ".js.map": pc2.gray,
+  ".html": pc2.green,
+  ".css": pc2.magenta,
+  ".js": pc2.cyan,
+  ".zip": pc2.yellow
 };
 function getChunkColor(filename) {
   return Object.entries(CHUNK_COLORS).find(([key]) => filename.endsWith(key))?.[1] ?? DEFAULT_COLOR;
@@ -2011,11 +2041,13 @@ function getChunkSortWeight(filename) {
 }
 
 // src/core/build.ts
+import { execSync } from "node:child_process";
+import glob3 from "fast-glob";
 async function buildInternal(config) {
   const verb = config.command === "serve" ? "Pre-rendering" : "Building";
   const target = `${config.browser}-mv${config.manifestVersion}`;
   config.logger.info(
-    `${verb} ${pc2.cyan(target)} for ${pc2.cyan(config.mode)} with ${pc2.green(
+    `${verb} ${pc3.cyan(target)} for ${pc3.cyan(config.mode)} with ${pc3.green(
       `Vite ${vite4.version}`
     )}`
   );
@@ -2032,19 +2064,28 @@ async function buildInternal(config) {
     output,
     config
   );
+  if (config.analysis.enabled) {
+    await combineAnalysisStats(config);
+    config.logger.info(
+      `Analysis complete:
+  ${pc3.gray("\u2514\u2500")} ${pc3.yellow("stats.html")}`
+    );
+  }
   return output;
 }
 async function rebuild(config, entrypointGroups, existingOutput = {
   steps: [],
   publicAssets: []
 }) {
+  const { default: ora } = await import("ora");
+  const spinner = ora(`Preparing...`).start();
   const allEntrypoints = await findEntrypoints(config);
   await generateTypesDir(allEntrypoints, config).catch((err) => {
     config.logger.warn("Failed to update .wxt directory:", err);
     if (config.command === "build")
       throw err;
   });
-  const newOutput = await buildEntrypoints(entrypointGroups, config);
+  const newOutput = await buildEntrypoints(entrypointGroups, config, spinner);
   const mergedOutput = {
     steps: [...existingOutput.steps, ...newOutput.steps],
     publicAssets: [...existingOutput.publicAssets, ...newOutput.publicAssets]
@@ -2059,6 +2100,7 @@ async function rebuild(config, entrypointGroups, existingOutput = {
     ...newOutput
   };
   await writeManifest(newManifest, finalOutput, config);
+  spinner.clear().stop();
   return {
     output: {
       manifest: newManifest,
@@ -2071,19 +2113,44 @@ async function rebuild(config, entrypointGroups, existingOutput = {
     manifest: newManifest
   };
 }
+async function combineAnalysisStats(config) {
+  const unixFiles = await glob3(`stats-*.json`, {
+    cwd: config.outDir,
+    absolute: true
+  });
+  const absolutePaths = unixFiles.map(unnormalizePath);
+  execSync(
+    `rollup-plugin-visualizer ${absolutePaths.join(" ")} --template ${config.analysis.template}`,
+    { cwd: config.root, stdio: "inherit" }
+  );
+}
 
 // src/core/server.ts
 import * as vite5 from "vite";
 
-// src/core/runners/createWebExtRunner.ts
+// src/core/runners/wsl.ts
+import { relative as relative5 } from "node:path";
+function createWslRunner() {
+  return {
+    async openBrowser(config) {
+      config.logger.warn(
+        `Cannot open browser when using WSL. Load "${relative5(
+          process.cwd(),
+          config.outDir
+        )}" as an unpacked extension manually`
+      );
+    },
+    async closeBrowser() {
+    }
+  };
+}
+
+// src/core/runners/web-ext.ts
 function createWebExtRunner() {
   let runner;
   return {
     async openBrowser(config) {
-      if (config.browser === "safari") {
-        config.logger.warn("Cannot open safari automatically.");
-        return;
-      }
+      config.logger.info("Opening browser...");
       const webExtLogger = await import("web-ext-run/util/logger");
       webExtLogger.consoleStream.write = ({ level, msg, name }) => {
         if (level >= ERROR_LOG_LEVEL)
@@ -2123,6 +2190,7 @@ function createWebExtRunner() {
       config.logger.debug("web-ext options:", options);
       const webExt = await import("web-ext-run");
       runner = await webExt.default.cmd.run(finalConfig, options);
+      config.logger.success("Opened!");
     },
     async closeBrowser() {
       return await runner?.exit();
@@ -2132,6 +2200,33 @@ function createWebExtRunner() {
 var WARN_LOG_LEVEL = 40;
 var ERROR_LOG_LEVEL = 50;
 
+// src/core/runners/safari.ts
+import { relative as relative6 } from "node:path";
+function createSafariRunner() {
+  return {
+    async openBrowser(config) {
+      config.logger.warn(
+        `Cannot Safari using web-ext. Load "${relative6(
+          process.cwd(),
+          config.outDir
+        )}" as an unpacked extension manually`
+      );
+    },
+    async closeBrowser() {
+    }
+  };
+}
+
+// src/core/runners/index.ts
+async function createExtensionRunner(config) {
+  if (config.browser === "safari")
+    return createSafariRunner();
+  const { default: isWsl } = await import("is-wsl");
+  if (isWsl)
+    return createWslRunner();
+  return createWebExtRunner();
+}
+
 // src/core/server.ts
 async function getServerInfo() {
   const { default: getPort, portNumbers } = await import("get-port");
@@ -2151,7 +2246,7 @@ async function getServerInfo() {
   };
 }
 async function setupServer(serverInfo, config) {
-  const runner = createWebExtRunner();
+  const runner = await createExtensionRunner(config);
   const viteServer = await vite5.createServer(
     vite5.mergeConfig(serverInfo, await config.vite(config.env))
   );
@@ -2159,9 +2254,7 @@ async function setupServer(serverInfo, config) {
     await viteServer.listen(server.port);
     config.logger.success(`Started dev server @ ${serverInfo.origin}`);
     server.currentOutput = await buildInternal(config);
-    config.logger.info("Opening browser...");
     await runner.openBrowser(config);
-    config.logger.success("Opened!");
   };
   const reloadExtension = () => {
     viteServer.ws.send("wxt:reload-extension");
@@ -2220,10 +2313,10 @@ function reloadHtmlPages(groups, server, config) {
 
 // src/core/clean.ts
 import path6 from "node:path";
-import glob3 from "fast-glob";
+import glob4 from "fast-glob";
 import fs15 from "fs-extra";
 import { consola as consola2 } from "consola";
-import pc3 from "picocolors";
+import pc4 from "picocolors";
 async function clean(root = process.cwd()) {
   consola2.info("Cleaning Project");
   const tempDirs = [
@@ -2232,8 +2325,8 @@ async function clean(root = process.cwd()) {
     "**/.wxt",
     ".output/*"
   ];
-  consola2.debug("Looking for:", tempDirs.map(pc3.cyan).join(", "));
-  const directories = await glob3(tempDirs, {
+  consola2.debug("Looking for:", tempDirs.map(pc4.cyan).join(", "));
+  const directories = await glob4(tempDirs, {
     cwd: path6.resolve(root),
     absolute: true,
     onlyDirectories: true,
@@ -2245,16 +2338,16 @@ async function clean(root = process.cwd()) {
   }
   consola2.debug(
     "Found:",
-    directories.map((dir) => pc3.cyan(path6.relative(root, dir))).join(", ")
+    directories.map((dir) => pc4.cyan(path6.relative(root, dir))).join(", ")
   );
   for (const directory of directories) {
     await fs15.rm(directory, { force: true, recursive: true });
-    consola2.debug("Deleted " + pc3.cyan(path6.relative(root, directory)));
+    consola2.debug("Deleted " + pc4.cyan(path6.relative(root, directory)));
   }
 }
 
 // package.json
-var version2 = "0.6.0";
+var version2 = "0.6.2";
 
 // src/core/utils/defineConfig.ts
 function defineConfig(config) {
@@ -2302,13 +2395,13 @@ async function createServer2(config) {
       if (changes.type === "no-change")
         return;
       internalConfig.logger.info(
-        `Changed: ${Array.from(new Set(fileChanges.map((change) => change[1]))).map((file) => pc4.dim(relative5(internalConfig.root, file))).join(", ")}`
+        `Changed: ${Array.from(new Set(fileChanges.map((change) => change[1]))).map((file) => pc5.dim(relative7(internalConfig.root, file))).join(", ")}`
       );
       const rebuiltNames = changes.rebuildGroups.flat().map((entry) => {
-        return pc4.cyan(
-          relative5(internalConfig.outDir, getEntrypointOutputFile(entry, ""))
+        return pc5.cyan(
+          relative7(internalConfig.outDir, getEntrypointOutputFile(entry, ""))
         );
-      }).join(pc4.dim(", "));
+      }).join(pc5.dim(", "));
       internalConfig = await getLatestInternalConfig();
       internalConfig.server = server;
       const { output: newOutput } = await rebuild(