wxt 0.20.0-beta1 → 0.20.0

package/dist/browser.d.ts

@@ -9,6 +9,7 @@
  * ```
  * @module wxt/browser
  */
+import { browser as _browser, type Browser } from '@wxt-dev/browser';
 /**
  * This interface is empty because it is generated per-project when running `wxt prepare`. See:
  * - `.wxt/types/paths.d.ts`
@@ -21,8 +22,9 @@ export interface WxtRuntime {
  */
 export interface WxtI18n {
 }
-export type WxtBrowser = Omit<typeof chrome, 'runtime' | 'i18n'> & {
-    runtime: WxtRuntime & Omit<(typeof chrome)['runtime'], 'getURL'>;
-    i18n: WxtI18n & Omit<(typeof chrome)['i18n'], 'getMessage'>;
+export type WxtBrowser = Omit<typeof _browser, 'runtime' | 'i18n'> & {
+    runtime: WxtRuntime & Omit<(typeof _browser)['runtime'], 'getURL'>;
+    i18n: WxtI18n & Omit<(typeof _browser)['i18n'], 'getMessage'>;
 };
 export declare const browser: WxtBrowser;
+export { Browser };

package/dist/browser.mjs

@@ -1,7 +1,3 @@
-export const browser = (
-  // @ts-expect-error
-  globalThis.browser?.runtime?.id == null ? globalThis.chrome : (
-    // @ts-expect-error
-    globalThis.browser
-  )
-);
+import { browser as _browser } from "@wxt-dev/browser";
+export const browser = _browser;
+export {};

package/dist/builtin-modules/unimport.d.ts

@@ -1,8 +1,5 @@
 import type { EslintGlobalsPropValue, WxtDirFileEntry, WxtModule, WxtResolvedUnimportOptions } from '../types';
-import { type Unimport } from 'unimport';
-import { Plugin } from 'vite';
 declare const _default: WxtModule<import("../types").WxtModuleOptions>;
 export default _default;
-export declare function vitePlugin(unimport: Unimport, autoImportsEnabled: boolean): Plugin;
 export declare function getEslint8ConfigEntry(options: WxtResolvedUnimportOptions, globals: Record<string, EslintGlobalsPropValue>): WxtDirFileEntry;
 export declare function getEslint9ConfigEntry(options: WxtResolvedUnimportOptions, globals: Record<string, EslintGlobalsPropValue>): WxtDirFileEntry;

package/dist/builtin-modules/unimport.mjs

@@ -1,6 +1,6 @@
 import { addViteConfig, defineWxtModule } from "../modules.mjs";
 import { createUnimport, toExports } from "unimport";
-import { extname } from "node:path";
+import UnimportPlugin from "unimport/unplugin";
 export default defineWxtModule({
   name: "wxt:built-in:unimport",
   setup(wxt) {
@@ -35,37 +35,10 @@ export default defineWxtModule({
       );
     });
     addViteConfig(wxt, () => ({
-      plugins: [vitePlugin(unimport, isEnabled())]
+      plugins: [UnimportPlugin.vite(wxt.config.imports)]
     }));
   }
 });
-export function vitePlugin(unimport, autoImportsEnabled) {
-  const ENABLED_EXTENSIONS = /* @__PURE__ */ new Set([
-    ".js",
-    ".jsx",
-    ".ts",
-    ".tsx",
-    ".vue",
-    ".svelte"
-  ]);
-  return {
-    name: "wxt:unimport",
-    async transform(code, id) {
-      if (id.includes("node_modules")) return;
-      if (!ENABLED_EXTENSIONS.has(extname(id))) return;
-      const injected = await unimport.injectImports(code, id, {
-        // Only auto-import modules if enabled
-        autoImport: autoImportsEnabled,
-        // Always resolve the #imports module, even when auto-imports are disabled
-        transformVirtualImports: true
-      });
-      return {
-        code: injected.code,
-        map: injected.s.generateMap({ hires: "boundary", source: id })
-      };
-    }
-  };
-}
 async function getImportsDeclarationEntry(unimport) {
   return {
     path: "types/imports.d.ts",

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

@@ -34,6 +34,8 @@ export async function createViteBuilder(wxtConfig, hooks, getWxtDevServer) {
     config.server.watch = {
       ignored: [`${wxtConfig.outBaseDir}/**`, `${wxtConfig.wxtDir}/**`]
     };
+    config.legacy ??= {};
+    config.legacy.skipWebSocketTokenCheck = true;
     const server = getWxtDevServer?.();
     config.plugins ??= [];
     config.plugins.push(

package/dist/core/create-server.mjs

@@ -1,4 +1,5 @@
 import { debounce } from "perfect-debounce";
+import chokidar from "chokidar";
 import { getEntrypointBundlePath, isHtmlEntrypoint } from "./utils/entrypoints.mjs";
 import {
   getContentScriptCssFiles,
@@ -21,6 +22,7 @@ import {
   mapWxtOptionsToRegisteredContentScript
 } from "./utils/content-scripts.mjs";
 import { createKeyboardShortcuts } from "./keyboard-shortcuts.mjs";
+import { isBabelSyntaxError, logBabelSyntaxError } from "./utils/syntax-errors.mjs";
 export async function createServer(inlineConfig) {
   await registerWxt("serve", inlineConfig);
   wxt.server = await createServerInternal();
@@ -116,7 +118,24 @@ async function createServerInternal() {
   };
   const keyboardShortcuts = createKeyboardShortcuts(server);
   const buildAndOpenBrowser = async () => {
-    server.currentOutput = await internalBuild();
+    try {
+      server.currentOutput = await internalBuild();
+    } catch (err) {
+      if (!isBabelSyntaxError(err)) {
+        throw err;
+      }
+      logBabelSyntaxError(err);
+      wxt.logger.info("Waiting for syntax error to be fixed...");
+      await new Promise((resolve) => {
+        const watcher = chokidar.watch(err.id, { ignoreInitial: true });
+        watcher.on("all", () => {
+          watcher.close();
+          wxt.logger.info("Syntax error resolved, rebuilding...");
+          resolve();
+        });
+      });
+      return buildAndOpenBrowser();
+    }
     try {
       server.watcher.add(getExternalOutputDependencies(server));
     } catch (err) {
@@ -132,7 +151,7 @@ function createFileReloader(server) {
   const changeQueue = [];
   const cb = async (event, path) => {
     changeQueue.push([event, path]);
-    await fileChangedMutex.runExclusive(async () => {
+    const reloading = fileChangedMutex.runExclusive(async () => {
       if (server.currentOutput == null) return;
       const fileChanges = changeQueue.splice(0, changeQueue.length).map(([_, file]) => file);
       if (fileChanges.length === 0) return;
@@ -182,6 +201,12 @@ function createFileReloader(server) {
       } catch {
       }
     });
+    await reloading.catch((error) => {
+      if (!isBabelSyntaxError(error)) {
+        throw error;
+      }
+      logBabelSyntaxError(error);
+    });
   };
   return debounce(cb, wxt.config.dev.server.watchDebounce, {
     leading: true,

package/dist/core/generate-wxt-dir.mjs

@@ -19,7 +19,6 @@ export async function generateWxtDir(entrypoints) {
   entries.push(await getPathsDeclarationEntry(entrypoints));
   entries.push(await getI18nDeclarationEntry());
   entries.push(await getGlobalsDeclarationEntry());
-  entries.push({ module: "@types/chrome" });
   entries.push(await getTsConfigEntry());
   await wxt.hooks.callHook("prepare:types", wxt, entries);
   entries.push(getMainDeclarationEntry(entries));
@@ -160,7 +159,7 @@ function getMainDeclarationEntry(references) {
     } else if (ref.tsReference) {
       const absolutePath = resolve(wxt.config.wxtDir, ref.path);
       const relativePath = relative(wxt.config.wxtDir, absolutePath);
-      lines.push(`/// <reference types="./${normalizePath(relativePath)}" />`);
+      lines.push(`/// <reference path="./${normalizePath(relativePath)}" />`);
     }
   });
   return {

package/dist/core/resolve-config.d.ts

@@ -8,4 +8,4 @@ import { InlineConfig, ResolvedConfig, UserConfig, Logger, WxtCommand, WxtModule
  */
 export declare function resolveConfig(inlineConfig: InlineConfig, command: WxtCommand): Promise<ResolvedConfig>;
 export declare function mergeBuilderConfig(logger: Logger, inlineConfig: InlineConfig, userConfig: UserConfig): Promise<Pick<InlineConfig, 'vite'>>;
-export declare function resolveWxtUserModules(modulesDir: string, modules?: string[]): Promise<WxtModuleWithMetadata<any>[]>;
+export declare function resolveWxtUserModules(root: string, modulesDir: string, modules?: string[]): Promise<WxtModuleWithMetadata<any>[]>;

package/dist/core/resolve-config.mjs

@@ -1,4 +1,5 @@
 import { loadConfig } from "c12";
+import { resolve as esmResolve } from "import-meta-resolve";
 import path from "node:path";
 import { createFsCache } from "./utils/cache.mjs";
 import consola, { LogLevels } from "consola";
@@ -11,7 +12,7 @@ import { getEslintVersion } from "./utils/eslint.mjs";
 import { safeStringToNumber } from "./utils/number.mjs";
 import { loadEnv } from "./utils/env.mjs";
 import { getPort } from "get-port-please";
-import { fileURLToPath } from "node:url";
+import { fileURLToPath, pathToFileURL } from "node:url";
 export async function resolveConfig(inlineConfig, command) {
   let userConfig = {};
   let userConfigMetadata;
@@ -41,7 +42,7 @@ export async function resolveConfig(inlineConfig, command) {
     inlineConfig.root ?? userConfig.root ?? process.cwd()
   );
   const wxtDir = path.resolve(root, ".wxt");
-  const wxtModuleDir = await resolveWxtModuleDir();
+  const wxtModuleDir = resolveWxtModuleDir();
   const srcDir = path.resolve(root, mergedConfig.srcDir ?? root);
   const entrypointsDir = path.resolve(
     srcDir,
@@ -104,6 +105,7 @@ export async function resolveConfig(inlineConfig, command) {
     };
   }
   const userModules = await resolveWxtUserModules(
+    root,
     modulesDir,
     mergedConfig.modules
   );
@@ -241,7 +243,7 @@ async function getUnimportOptions(wxtDir, srcDir, logger, config) {
     presets: [
       {
         from: "wxt/browser",
-        imports: defineImportsAndTypes(["browser"], [])
+        imports: defineImportsAndTypes(["browser"], ["Browser"])
       },
       {
         from: "wxt/utils/storage",
@@ -391,8 +393,9 @@ async function getUnimportEslintOptions(wxtDir, options) {
     globalsPropValue: true
   };
 }
-async function resolveWxtModuleDir() {
-  const url = import.meta.resolve("wxt", import.meta.url);
+function resolveWxtModuleDir() {
+  const importer = typeof __filename === "string" ? pathToFileURL(__filename).href : import.meta.url;
+  const url = esmResolve("wxt", importer);
   return path.resolve(fileURLToPath(url), "../..");
 }
 async function isDirMissing(dir) {
@@ -424,12 +427,14 @@ export async function mergeBuilderConfig(logger, inlineConfig, userConfig) {
   }
   throw Error("Builder not found. Make sure vite is installed.");
 }
-export async function resolveWxtUserModules(modulesDir, modules = []) {
+export async function resolveWxtUserModules(root, modulesDir, modules = []) {
+  const importer = pathToFileURL(path.join(root, "index.js")).href;
   const npmModules = await Promise.all(
     modules.map(async (moduleId) => {
+      const resolvedModulePath = esmResolve(moduleId, importer);
       const mod = await import(
         /* @vite-ignore */
-        moduleId
+        resolvedModulePath
       );
       if (mod.default == null) {
         throw Error("Module missing default export: " + moduleId);
@@ -471,9 +476,3 @@ export async function resolveWxtUserModules(modulesDir, modules = []) {
   );
   return [...npmModules, ...localModules];
 }
-if (false) {
-  (void 0).resolve = (path2) => (
-    // @ts-expect-error: vitestCreateRequire defined in vitest.setup.ts
-    "file://" + vitestCreateRequire(import.meta.url).resolve(path2)
-  );
-}

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

@@ -83,13 +83,24 @@ export function detectDevChanges(changedFiles, currentOutput) {
 function findEffectedSteps(changedFile, currentOutput) {
   const changes = [];
   const changedPath = normalizePath(changedFile);
-  const isChunkEffected = (chunk) => (
-    // If it's an HTML file with the same path, is is effected because HTML files need to be re-rendered
-    // - fileName is normalized, relative bundle path, "<entrypoint-name>.html"
-    chunk.type === "asset" && changedPath.replace("/index.html", ".html").endsWith(chunk.fileName) || // If it's a chunk that depends on the changed file, it is effected
-    // - moduleIds are absolute, normalized paths
-    chunk.type === "chunk" && chunk.moduleIds.includes(changedPath)
-  );
+  const isChunkEffected = (chunk) => {
+    switch (chunk.type) {
+      // If it's an HTML file with the same path, is is effected because HTML files need to be re-rendered
+      // - fileName is normalized, relative bundle path, "<entrypoint-name>.html"
+      case "asset": {
+        return changedPath.replace("/index.html", ".html").endsWith(chunk.fileName);
+      }
+      // If it's a chunk that depends on the changed file, it is effected
+      // - moduleIds are absolute, normalized paths
+      case "chunk": {
+        const modulePaths = chunk.moduleIds.map((path) => path.split("?")[0]);
+        return modulePaths.includes(changedPath);
+      }
+      default: {
+        return false;
+      }
+    }
+  };
   for (const step of currentOutput.steps) {
     const effectedChunk = step.chunks.find((chunk) => isChunkEffected(chunk));
     if (effectedChunk) changes.push(step);

package/dist/core/utils/building/rebuild.d.ts

@@ -1,4 +1,5 @@
 import { BuildOutput, Entrypoint, EntrypointGroup } from '../../../types';
+import type { Browser } from '@wxt-dev/browser';
 /**
  * Given a configuration, list of entrypoints, and an existing, partial output, build the
  * entrypoints and merge the new output with the existing output.
@@ -17,6 +18,6 @@ import { BuildOutput, Entrypoint, EntrypointGroup } from '../../../types';
  */
 export declare function rebuild(allEntrypoints: Entrypoint[], entrypointGroups: EntrypointGroup[], existingOutput?: Omit<BuildOutput, 'manifest'>): Promise<{
     output: BuildOutput;
-    manifest: chrome.runtime.Manifest;
+    manifest: Browser.runtime.Manifest;
     warnings: any[][];
 }>;

package/dist/core/utils/content-scripts.d.ts

@@ -1,3 +1,4 @@
+import type { Browser } from '@wxt-dev/browser';
 import { ContentScriptEntrypoint, ResolvedConfig } from '../../types';
 import { ManifestContentScript } from './types';
 /**
@@ -7,5 +8,5 @@ import { ManifestContentScript } from './types';
  */
 export declare function hashContentScriptOptions(options: ContentScriptEntrypoint['options']): string;
 export declare function mapWxtOptionsToContentScript(options: ContentScriptEntrypoint['options'], js: string[] | undefined, css: string[] | undefined): ManifestContentScript;
-export declare function mapWxtOptionsToRegisteredContentScript(options: ContentScriptEntrypoint['options'], js: string[] | undefined, css: string[] | undefined): Omit<chrome.scripting.RegisteredContentScript, 'id'>;
+export declare function mapWxtOptionsToRegisteredContentScript(options: ContentScriptEntrypoint['options'], js: string[] | undefined, css: string[] | undefined): Omit<Browser.scripting.RegisteredContentScript, 'id'>;
 export declare function getContentScriptJs(config: ResolvedConfig, entrypoint: ContentScriptEntrypoint): string[];

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

@@ -2,4 +2,4 @@ import type { TargetBrowser } from '../../types';
 /**
  * Load environment files based on the current mode and browser.
  */
-export declare function loadEnv(mode: string, browser: TargetBrowser): import("dotenv").DotenvConfigOutput;
+export declare function loadEnv(mode: string, browser: TargetBrowser): import("dotenv-expand").DotenvExpandOutput;

package/dist/core/utils/env.mjs

@@ -1,16 +1,19 @@
 import { config } from "dotenv";
+import { expand } from "dotenv-expand";
 export function loadEnv(mode, browser) {
-  return config({
-    // Files on top override files below
-    path: [
-      `.env.${mode}.${browser}.local`,
-      `.env.${mode}.${browser}`,
-      `.env.${browser}.local`,
-      `.env.${browser}`,
-      `.env.${mode}.local`,
-      `.env.${mode}`,
-      `.env.local`,
-      `.env`
-    ]
-  });
+  return expand(
+    config({
+      // Files on top override files below
+      path: [
+        `.env.${mode}.${browser}.local`,
+        `.env.${mode}.${browser}`,
+        `.env.${browser}.local`,
+        `.env.${browser}`,
+        `.env.${mode}.local`,
+        `.env.${mode}`,
+        `.env.local`,
+        `.env`
+      ]
+    })
+  );
 }

package/dist/core/utils/eslint.mjs

@@ -1,8 +1,10 @@
-const ESLINT_PACKAGE_NAME = "eslint";
 export async function getEslintVersion() {
   try {
-    const { version } = await import(ESLINT_PACKAGE_NAME);
-    return version.split(".") ?? [];
+    const require = (await import("node:module")).default.createRequire(
+      import.meta.url
+    );
+    const { ESLint } = require("eslint");
+    return ESLint.version?.split(".") ?? [];
   } catch {
     return [];
   }

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

@@ -1,13 +1,14 @@
 import { Entrypoint, BuildOutput, ContentScriptEntrypoint } from '../../types';
+import type { Browser } from '@wxt-dev/browser';
 /**
  * Writes the manifest to the output directory and the build output.
  */
-export declare function writeManifest(manifest: chrome.runtime.Manifest, output: BuildOutput): Promise<void>;
+export declare function writeManifest(manifest: Browser.runtime.Manifest, output: BuildOutput): Promise<void>;
 /**
  * Generates the manifest based on the config and entrypoints.
  */
 export declare function generateManifest(allEntrypoints: Entrypoint[], buildOutput: Omit<BuildOutput, 'manifest'>): Promise<{
-    manifest: chrome.runtime.Manifest;
+    manifest: Browser.runtime.Manifest;
     warnings: any[][];
 }>;
 /**
@@ -36,4 +37,4 @@ export declare function stripPathFromMatchPattern(pattern: string): string;
  * generated in this file, and may be defined by the user in their manifest. In both cases, when
  * targeting MV2, automatically convert their definitions down to the basic MV2 array.
  */
-export declare function convertWebAccessibleResourcesToMv2(manifest: chrome.runtime.Manifest): void;
+export declare function convertWebAccessibleResourcesToMv2(manifest: Browser.runtime.Manifest): void;

package/dist/core/utils/manifest.mjs

@@ -41,6 +41,12 @@ export async function generateManifest(allEntrypoints, buildOutput) {
     icons: discoverIcons(buildOutput)
   };
   const userManifest = wxt.config.manifest;
+  if (userManifest.manifest_version) {
+    delete userManifest.manifest_version;
+    wxt.logger.warn(
+      "`manifest.manifest_version` config was set, but ignored. To change the target manifest version, use the `manifestVersion` option or the `--mv2`/`--mv3` CLI flags.\nSee https://wxt.dev/guide/essentials/target-different-browsers.html#target-a-manifest-version"
+    );
+  }
   let manifest = defu(userManifest, baseManifest);
   if (wxt.config.command === "serve" && wxt.config.dev.reloadCommand) {
     if (manifest.commands && // If the following limit is exceeded, Chrome will fail to load the extension.
@@ -216,7 +222,7 @@ function addEntrypoints(manifest, entrypoints, buildOutput) {
     const page = getEntrypointBundlePath(options, wxt.config.outDir, ".html");
     manifest.options_ui = {
       open_in_tab: options.options.openInTab,
-      // @ts-expect-error: Not typed by @types/chrome, but supported by Firefox
+      // @ts-expect-error: Not typed by @wxt-dev/browser, but supported by Firefox
       browser_style: wxt.config.browser === "firefox" ? options.options.browserStyle : void 0,
       chrome_style: wxt.config.browser !== "firefox" ? options.options.chromeStyle : void 0,
       page
@@ -294,11 +300,6 @@ function addEntrypoints(manifest, entrypoints, buildOutput) {
       const runtimeContentScripts = contentScripts.filter(
         (cs) => cs.options.registration === "runtime"
       );
-      if (runtimeContentScripts.length > 0 && wxt.config.manifestVersion === 2) {
-        throw Error(
-          'Cannot use `registration: "runtime"` with MV2 content scripts, it is a MV3-only feature.'
-        );
-      }
       runtimeContentScripts.forEach((script) => {
         script.options.matches?.forEach((matchPattern) => {
           addHostPermission(manifest, matchPattern);

package/dist/core/utils/syntax-errors.d.ts

@@ -0,0 +1,11 @@
+export interface BabelSyntaxError extends SyntaxError {
+    code: 'BABEL_PARSER_SYNTAX_ERROR';
+    frame?: string;
+    id: string;
+    loc: {
+        line: number;
+        column: number;
+    };
+}
+export declare function isBabelSyntaxError(error: unknown): error is BabelSyntaxError;
+export declare function logBabelSyntaxError(error: BabelSyntaxError): void;

package/dist/core/utils/syntax-errors.mjs

@@ -0,0 +1,20 @@
+import { relative } from "node:path";
+import pc from "picocolors";
+import { wxt } from "../wxt.mjs";
+export function isBabelSyntaxError(error) {
+  return error instanceof SyntaxError && error.code === "BABEL_PARSER_SYNTAX_ERROR";
+}
+export function logBabelSyntaxError(error) {
+  let filename = relative(wxt.config.root, error.id);
+  if (filename.startsWith("..")) {
+    filename = error.id;
+  }
+  let message = error.message.replace(
+    /\(\d+:\d+\)$/,
+    `(${filename}:${error.loc.line}:${error.loc.column + 1})`
+  );
+  if (error.frame) {
+    message += "\n\n" + pc.red(error.frame);
+  }
+  wxt.logger.error(message);
+}