wxt 0.6.1 → 0.6.3

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).
@@ -31,6 +32,18 @@ declare class ContentScriptContext extends AbortController {
      * removeInvalidatedListener();
      */
     onInvalidated(cb: () => void): () => void;
+    /**
+     * Return a promise that never resolves. Useful if you have an async function that shouldn't run
+     * after the context is expired.
+     *
+     * @example
+     * const getValueFromStorage = async () => {
+     *   if (ctx.isInvalid) return ctx.block();
+     *
+     *   // ...
+     * }
+     */
+    block<T>(): Promise<T>;
     /**
      * Wrapper around `window.setInterval` that automatically clears the interval when invalidated.
      */
@@ -49,6 +62,18 @@ declare class ContentScriptContext extends AbortController {
      * invalidated.
      */
     requestIdleCallback(callback: IdleRequestCallback, options?: IdleRequestOptions): number;
+    /**
+     * Call `target.addEventListener` and remove the event listener when the context is invalidated.
+     *
+     * @example
+     * ctx.addEventListener(window, "mousemove", () => {
+     *   // ...
+     * });
+     * ctx.addEventListener(document, "visibilitychange", () => {
+     *   // ...
+     * });
+     */
+    addEventListener(target: any, type: string, handler: (event: Event) => void, options?: AddEventListenerOptions): void;
     /**
      * Abort the abort controller and execute all `onInvalidated` listeners.
      */
@@ -221,6 +246,20 @@ interface InlineConfig {
      * })
      */
     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'>;
@@ -499,7 +538,7 @@ type EntrypointGroup = Entrypoint | Entrypoint[];
  */
 declare function clean(root?: string): Promise<void>;
 
-var version = "0.6.1";
+var version = "0.6.3";
 
 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).
@@ -31,6 +32,18 @@ declare class ContentScriptContext extends AbortController {
      * removeInvalidatedListener();
      */
     onInvalidated(cb: () => void): () => void;
+    /**
+     * Return a promise that never resolves. Useful if you have an async function that shouldn't run
+     * after the context is expired.
+     *
+     * @example
+     * const getValueFromStorage = async () => {
+     *   if (ctx.isInvalid) return ctx.block();
+     *
+     *   // ...
+     * }
+     */
+    block<T>(): Promise<T>;
     /**
      * Wrapper around `window.setInterval` that automatically clears the interval when invalidated.
      */
@@ -49,6 +62,18 @@ declare class ContentScriptContext extends AbortController {
      * invalidated.
      */
     requestIdleCallback(callback: IdleRequestCallback, options?: IdleRequestOptions): number;
+    /**
+     * Call `target.addEventListener` and remove the event listener when the context is invalidated.
+     *
+     * @example
+     * ctx.addEventListener(window, "mousemove", () => {
+     *   // ...
+     * });
+     * ctx.addEventListener(document, "visibilitychange", () => {
+     *   // ...
+     * });
+     */
+    addEventListener(target: any, type: string, handler: (event: Event) => void, options?: AddEventListenerOptions): void;
     /**
      * Abort the abort controller and execute all `onInvalidated` listeners.
      */
@@ -221,6 +246,20 @@ interface InlineConfig {
      * })
      */
     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'>;
@@ -499,7 +538,7 @@ type EntrypointGroup = Entrypoint | Entrypoint[];
  */
 declare function clean(root?: string): Promise<void>;
 
-var version = "0.6.1";
+var version = "0.6.3";
 
 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 [
@@ -527,6 +538,10 @@ async function getInternalConfig(inlineConfig, command) {
     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);
@@ -580,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) {
@@ -625,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);
@@ -633,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) {
@@ -768,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);
   }
@@ -974,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(
@@ -1863,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";
 
@@ -1919,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";
 
@@ -1965,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;
@@ -2016,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}`
     )}`
   );
@@ -2037,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]
@@ -2064,6 +2100,7 @@ async function rebuild(config, entrypointGroups, existingOutput = {
     ...newOutput
   };
   await writeManifest(newManifest, finalOutput, config);
+  spinner.clear().stop();
   return {
     output: {
       manifest: newManifest,
@@ -2076,6 +2113,17 @@ 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";
@@ -2265,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 = [
@@ -2277,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,
@@ -2290,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.1";
+var version2 = "0.6.3";
 
 // src/core/utils/defineConfig.ts
 function defineConfig(config) {
@@ -2347,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(relative7(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(
+        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(