wxt 0.18.15 → 0.19.0

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

@@ -0,0 +1,192 @@
+import fs from "fs-extra";
+import { dirname, relative, resolve } from "node:path";
+import {
+  getEntrypointBundlePath,
+  isHtmlEntrypoint
+} from "../../utils/entrypoints.mjs";
+import { getEntrypointGlobals, getGlobals } from "../../utils/globals.mjs";
+import { normalizePath } from "../../utils/paths.mjs";
+import path from "node:path";
+import { parseI18nMessages } from "../../utils/i18n.mjs";
+import { writeFileIfDifferent, getPublicFiles } from "../../utils/fs.mjs";
+import { wxt } from "../../wxt.mjs";
+export async function generateTypesDir(entrypoints) {
+  await fs.ensureDir(wxt.config.typesDir);
+  const entries = [
+    // Hard-coded entries
+    { module: "wxt/vite-builder-env" }
+  ];
+  wxt.config.userModules.forEach((module) => {
+    if (module.type === "node_module") entries.push({ module: module.id });
+  });
+  entries.push(await getPathsDeclarationEntry(entrypoints));
+  entries.push(await getI18nDeclarationEntry());
+  entries.push(await getGlobalsDeclarationEntry());
+  if (wxt.config.extensionApi === "chrome") {
+    entries.push({ module: "@types/chrome" });
+  }
+  entries.push(await getTsConfigEntry());
+  await wxt.hooks.callHook("prepare:types", wxt, entries);
+  entries.push(getMainDeclarationEntry(entries));
+  const absoluteFileEntries = entries.filter((entry) => "path" in entry).map((entry) => ({
+    ...entry,
+    path: resolve(wxt.config.wxtDir, entry.path)
+  }));
+  await Promise.all(
+    absoluteFileEntries.map(async (file) => {
+      await fs.ensureDir(dirname(file.path));
+      await writeFileIfDifferent(file.path, file.text);
+    })
+  );
+}
+async function getPathsDeclarationEntry(entrypoints) {
+  const paths = entrypoints.map(
+    (entry) => getEntrypointBundlePath(
+      entry,
+      wxt.config.outDir,
+      isHtmlEntrypoint(entry) ? ".html" : ".js"
+    )
+  ).concat(await getPublicFiles());
+  await wxt.hooks.callHook("prepare:publicPaths", wxt, paths);
+  const unions = paths.map(normalizePath).sort().map((path2) => `    | "/${path2}"`).join("\n");
+  const template = `// Generated by wxt
+import "${wxt.config.browserModule}";
+
+declare module "${wxt.config.browserModule}" {
+  export type PublicPath =
+{{ union }}
+  type HtmlPublicPath = Extract<PublicPath, \`\${string}.html\`>
+  export interface WxtRuntime {
+    getURL(path: PublicPath): string;
+    getURL(path: \`\${HtmlPublicPath}\${string}\`): string;
+  }
+}
+`;
+  return {
+    path: "types/paths.d.ts",
+    text: template.replace("{{ union }}", unions || "    | never"),
+    tsReference: true
+  };
+}
+async function getI18nDeclarationEntry() {
+  const defaultLocale = wxt.config.manifest.default_locale;
+  const template = `// Generated by wxt
+import "${wxt.config.browserModule}";
+
+declare module "${wxt.config.browserModule}" {
+  /**
+   * See https://developer.chrome.com/docs/extensions/reference/i18n/#method-getMessage
+   */
+  interface GetMessageOptions {
+    /**
+     * See https://developer.chrome.com/docs/extensions/reference/i18n/#method-getMessage
+     */
+    escapeLt?: boolean
+  }
+
+  export interface WxtI18n extends I18n.Static {
+{{ overrides }}
+  }
+}
+`;
+  const defaultLocalePath = path.resolve(
+    wxt.config.publicDir,
+    "_locales",
+    defaultLocale ?? "",
+    "messages.json"
+  );
+  let messages;
+  if (await fs.exists(defaultLocalePath)) {
+    const content = JSON.parse(await fs.readFile(defaultLocalePath, "utf-8"));
+    messages = parseI18nMessages(content);
+  } else {
+    messages = parseI18nMessages({});
+  }
+  const overrides = messages.map((message) => {
+    return `    /**
+     * ${message.description || "No message description."}
+     *
+     * "${message.message}"
+     */
+    getMessage(
+      messageName: "${message.name}",
+      substitutions?: string | string[],
+      options?: GetMessageOptions,
+    ): string;`;
+  });
+  return {
+    path: "types/i18n.d.ts",
+    text: template.replace("{{ overrides }}", overrides.join("\n")),
+    tsReference: true
+  };
+}
+async function getGlobalsDeclarationEntry() {
+  const globals = [...getGlobals(wxt.config), ...getEntrypointGlobals("")];
+  return {
+    path: "types/globals.d.ts",
+    text: [
+      "// Generated by wxt",
+      "export {}",
+      "interface ImportMetaEnv {",
+      ...globals.map((global) => `  readonly ${global.name}: ${global.type};`),
+      "}",
+      "interface ImportMeta {",
+      "  readonly env: ImportMetaEnv",
+      "}",
+      ""
+    ].join("\n"),
+    tsReference: true
+  };
+}
+function getMainDeclarationEntry(references) {
+  const lines = ["// Generated by wxt"];
+  references.forEach((ref) => {
+    if ("module" in ref) {
+      return lines.push(`/// <reference types="${ref.module}" />`);
+    } 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)}" />`);
+    }
+  });
+  return {
+    path: "wxt.d.ts",
+    text: lines.join("\n") + "\n"
+  };
+}
+async function getTsConfigEntry() {
+  const dir = wxt.config.wxtDir;
+  const getTsconfigPath = (path2) => normalizePath(relative(dir, path2));
+  const paths = Object.entries(wxt.config.alias).flatMap(([alias, absolutePath]) => {
+    const aliasPath = getTsconfigPath(absolutePath);
+    return [
+      `      "${alias}": ["${aliasPath}"]`,
+      `      "${alias}/*": ["${aliasPath}/*"]`
+    ];
+  }).join(",\n");
+  const text = `{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "noEmit": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "paths": {
+${paths}
+    }
+  },
+  "include": [
+    "${getTsconfigPath(wxt.config.root)}/**/*",
+    "./wxt.d.ts"
+  ],
+  "exclude": ["${getTsconfigPath(wxt.config.outBaseDir)}"]
+}`;
+  return {
+    path: "tsconfig.json",
+    text
+  };
+}

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

@@ -0,0 +1,8 @@
+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.
+ *
+ * This function returns the entrypoints put into these types of groups.
+ */
+export declare function groupEntrypoints(entrypoints: Entrypoint[]): EntrypointGroup[];

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

@@ -0,0 +1,37 @@
+export function groupEntrypoints(entrypoints) {
+  const groupIndexMap = {};
+  const groups = [];
+  for (const entry of entrypoints) {
+    let group = ENTRY_TYPE_TO_GROUP_MAP[entry.type];
+    if (entry.type === "background" && entry.options.type === "module") {
+      group = "esm";
+    }
+    if (group === "individual") {
+      groups.push(entry);
+    } else {
+      let groupIndex = groupIndexMap[group];
+      if (groupIndex == null) {
+        groupIndex = groups.push([]) - 1;
+        groupIndexMap[group] = groupIndex;
+      }
+      groups[groupIndex].push(entry);
+    }
+  }
+  return groups;
+}
+const ENTRY_TYPE_TO_GROUP_MAP = {
+  sandbox: "sandboxed-esm",
+  popup: "esm",
+  newtab: "esm",
+  history: "esm",
+  options: "esm",
+  devtools: "esm",
+  bookmarks: "esm",
+  sidepanel: "esm",
+  "unlisted-page": "esm",
+  background: "individual",
+  "content-script": "individual",
+  "unlisted-script": "individual",
+  "unlisted-style": "individual",
+  "content-script-style": "individual"
+};

package/dist/core/utils/building/import-entrypoint.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Get the value from the default export of a `path`.
+ *
+ * It works by:
+ *
+ * 1. Reading the file text
+ * 2. Stripping all imports from it via regex
+ * 3. Auto-import only the client helper functions
+ *
+ * This prevents resolving imports of imports, speeding things up and preventing "xxx is not
+ * defined" errors.
+ *
+ * Downside is that code cannot be executed outside of the main fucntion for the entrypoint,
+ * otherwise you will see "xxx is not defined" errors for any imports used outside of main function.
+ */
+export declare function importEntrypointFile<T>(path: string): Promise<T>;

package/dist/core/utils/building/import-entrypoint.mjs

@@ -0,0 +1,97 @@
+import createJITI from "jiti";
+import { createUnimport } from "unimport";
+import fs from "fs-extra";
+import { relative, resolve } from "node:path";
+import { removeProjectImportStatements } from "../../utils/strings.mjs";
+import { normalizePath } from "../../utils/paths.mjs";
+import { transformSync } from "esbuild";
+import { fileURLToPath } from "node:url";
+import { wxt } from "../../wxt.mjs";
+export async function importEntrypointFile(path) {
+  wxt.logger.debug("Loading file metadata:", path);
+  const normalPath = normalizePath(path);
+  const unimport = createUnimport({
+    ...wxt.config.imports,
+    // Only allow specific imports, not all from the project
+    dirs: []
+  });
+  await unimport.init();
+  const text = await fs.readFile(path, "utf-8");
+  const textNoImports = removeProjectImportStatements(text);
+  const { code } = await unimport.injectImports(textNoImports);
+  wxt.logger.debug(
+    ["Text:", text, "No imports:", textNoImports, "Code:", code].join("\n")
+  );
+  const jiti = createJITI(
+    typeof __filename !== "undefined" ? __filename : fileURLToPath(import.meta.url),
+    {
+      cache: false,
+      debug: wxt.config.debug,
+      esmResolve: true,
+      alias: {
+        "webextension-polyfill": resolve(
+          wxt.config.wxtModuleDir,
+          "dist/virtual/mock-browser.mjs"
+        ),
+        // TODO: Resolve this virtual module to some file with
+        // `export default {}` instead of this hack of using another file with
+        // a default export.
+        "virtual:app-config": resolve(
+          wxt.config.wxtModuleDir,
+          "dist/virtual/mock-browser.mjs"
+        )
+      },
+      // Continue using node to load TS files even if `bun run --bun` is detected. Jiti does not
+      // respect the custom transform function when using it's native bun option.
+      experimentalBun: false,
+      // List of extensions to transform with esbuild
+      extensions: [
+        ".ts",
+        ".cts",
+        ".mts",
+        ".tsx",
+        ".js",
+        ".cjs",
+        ".mjs",
+        ".jsx"
+      ],
+      transform(opts) {
+        const isEntrypoint = opts.filename === normalPath;
+        return transformSync(
+          // Use modified source code for entrypoints
+          isEntrypoint ? code : opts.source,
+          getEsbuildOptions(opts)
+        );
+      }
+    }
+  );
+  try {
+    const res = await jiti(path);
+    return res.default;
+  } catch (err) {
+    const filePath = relative(wxt.config.root, path);
+    if (err instanceof ReferenceError) {
+      const variableName = err.message.replace(" is not defined", "");
+      throw Error(
+        `${filePath}: Cannot use imported variable "${variableName}" outside the main function. See https://wxt.dev/guide/go-further/entrypoint-side-effects.html`,
+        { cause: err }
+      );
+    } else {
+      wxt.logger.error(err);
+      throw Error(`Failed to load entrypoint: ${filePath}`, { cause: err });
+    }
+  }
+}
+function getEsbuildOptions(opts) {
+  const isJsx = opts.filename?.endsWith("x");
+  return {
+    format: "cjs",
+    loader: isJsx ? "tsx" : "ts",
+    ...isJsx ? {
+      // `h` and `Fragment` are undefined, but that's OK because JSX is never evaluated while
+      // grabbing the entrypoint's options.
+      jsxFactory: "h",
+      jsxFragment: "Fragment"
+    } : void 0
+  };
+}

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

@@ -0,0 +1,9 @@
+export * from './build-entrypoints';
+export * from './detect-dev-changes';
+export * from './find-entrypoints';
+export * from './generate-wxt-dir';
+export * from './resolve-config';
+export * from './group-entrypoints';
+export * from './import-entrypoint';
+export * from './internal-build';
+export * from './rebuild';

package/dist/core/utils/building/index.mjs

@@ -0,0 +1,9 @@
+export * from "./build-entrypoints.mjs";
+export * from "./detect-dev-changes.mjs";
+export * from "./find-entrypoints.mjs";
+export * from "./generate-wxt-dir.mjs";
+export * from "./resolve-config.mjs";
+export * from "./group-entrypoints.mjs";
+export * from "./import-entrypoint.mjs";
+export * from "./internal-build.mjs";
+export * from "./rebuild.mjs";

package/dist/core/utils/building/internal-build.d.ts

@@ -0,0 +1,12 @@
+import { BuildOutput } from '../../../types';
+/**
+ * Builds the extension based on an internal config. No more config discovery is performed, the
+ * build is based on exactly what is passed in.
+ *
+ * This function:
+ * 1. Cleans the output directory
+ * 2. Executes the rebuild function with a blank previous output so everything is built (see
+ *    `rebuild` for more details)
+ * 3. Prints the summary
+ */
+export declare function internalBuild(): Promise<BuildOutput>;

package/dist/core/utils/building/internal-build.mjs

@@ -0,0 +1,112 @@
+import { findEntrypoints } from "./find-entrypoints.mjs";
+import pc from "picocolors";
+import fs from "fs-extra";
+import { groupEntrypoints } from "./group-entrypoints.mjs";
+import { formatDuration } from "../../utils/time.mjs";
+import { printBuildSummary } from "../../utils/log/index.mjs";
+import glob from "fast-glob";
+import { unnormalizePath } from "../../utils/paths.mjs";
+import { rebuild } from "./rebuild.mjs";
+import { relative } from "node:path";
+import {
+  ValidationError,
+  validateEntrypoints
+} from "../validation.mjs";
+import { wxt } from "../../wxt.mjs";
+import { mergeJsonOutputs } from "@aklinker1/rollup-plugin-visualizer";
+import { isCI } from "ci-info";
+export async function internalBuild() {
+  await wxt.hooks.callHook("build:before", wxt);
+  const verb = wxt.config.command === "serve" ? "Pre-rendering" : "Building";
+  const target = `${wxt.config.browser}-mv${wxt.config.manifestVersion}`;
+  wxt.logger.info(
+    `${verb} ${pc.cyan(target)} for ${pc.cyan(wxt.config.mode)} with ${pc.green(
+      `${wxt.builder.name} ${wxt.builder.version}`
+    )}`
+  );
+  const startTime = Date.now();
+  await fs.rm(wxt.config.outDir, { recursive: true, force: true });
+  await fs.ensureDir(wxt.config.outDir);
+  const entrypoints = await findEntrypoints();
+  wxt.logger.debug("Detected entrypoints:", entrypoints);
+  const validationResults = validateEntrypoints(entrypoints);
+  if (validationResults.errorCount + validationResults.warningCount > 0) {
+    printValidationResults(validationResults);
+  }
+  if (validationResults.errorCount > 0) {
+    throw new ValidationError(`Entrypoint validation failed`, {
+      cause: validationResults
+    });
+  }
+  const groups = groupEntrypoints(entrypoints);
+  await wxt.hooks.callHook("entrypoints:grouped", wxt, groups);
+  const { output, warnings } = await rebuild(entrypoints, groups, void 0);
+  await wxt.hooks.callHook("build:done", wxt, output);
+  await printBuildSummary(
+    wxt.logger.success,
+    `Built extension in ${formatDuration(Date.now() - startTime)}`,
+    output
+  );
+  for (const warning of warnings) {
+    wxt.logger.warn(...warning);
+  }
+  if (wxt.config.analysis.enabled) {
+    await combineAnalysisStats();
+    const statsPath = relative(wxt.config.root, wxt.config.analysis.outputFile);
+    wxt.logger.info(
+      `Analysis complete:
+  ${pc.gray("\u2514\u2500")} ${pc.yellow(statsPath)}`
+    );
+    if (wxt.config.analysis.open) {
+      if (isCI) {
+        wxt.logger.debug(`Skipped opening ${pc.yellow(statsPath)} in CI`);
+      } else {
+        wxt.logger.info(`Opening ${pc.yellow(statsPath)} in browser...`);
+        const { default: open } = await import("open");
+        open(wxt.config.analysis.outputFile);
+      }
+    }
+  }
+  return output;
+}
+async function combineAnalysisStats() {
+  const unixFiles = await glob(`${wxt.config.analysis.outputName}-*.json`, {
+    cwd: wxt.config.analysis.outputDir,
+    absolute: true
+  });
+  const absolutePaths = unixFiles.map(unnormalizePath);
+  await mergeJsonOutputs({
+    inputs: absolutePaths,
+    template: wxt.config.analysis.template,
+    filename: wxt.config.analysis.outputFile
+  });
+  if (!wxt.config.analysis.keepArtifacts) {
+    await Promise.all(absolutePaths.map((statsFile) => fs.remove(statsFile)));
+  }
+}
+function printValidationResults({
+  errorCount,
+  errors,
+  warningCount
+}) {
+  (errorCount > 0 ? wxt.logger.error : wxt.logger.warn)(
+    `Entrypoint validation failed: ${errorCount} error${errorCount === 1 ? "" : "s"}, ${warningCount} warning${warningCount === 1 ? "" : "s"}`
+  );
+  const cwd = process.cwd();
+  const entrypointErrors = errors.reduce((map, error) => {
+    const entryErrors = map.get(error.entrypoint) ?? [];
+    entryErrors.push(error);
+    map.set(error.entrypoint, entryErrors);
+    return map;
+  }, /* @__PURE__ */ new Map());
+  Array.from(entrypointErrors.entries()).forEach(([entrypoint, errors2]) => {
+    wxt.logger.log(relative(cwd, entrypoint.inputPath));
+    console.log();
+    errors2.forEach((err) => {
+      const type = err.type === "error" ? pc.red("ERROR") : pc.yellow("WARN");
+      const recieved = pc.dim(`(recieved: ${JSON.stringify(err.value)})`);
+      wxt.logger.log(`  - ${type} ${err.message} ${recieved}`);
+    });
+    console.log();
+  });
+}

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

@@ -0,0 +1,23 @@
+import type { Manifest } from 'wxt/browser';
+import { BuildOutput, Entrypoint, EntrypointGroup } from '../../../types';
+/**
+ * Given a configuration, list of entrypoints, and an existing, partial output, build the
+ * entrypoints and merge the new output with the existing output.
+ *
+ * This function will:
+ * 1. Generate the .wxt directory's types
+ * 2. Build the `entrypointGroups` (and copies public files)
+ * 3. Generate the latest manifest for all entrypoints
+ * 4. Write the new manifest to the file system
+ *
+ * @param config Internal config containing all the project information.
+ * @param allEntrypoints List of entrypoints used to generate the types inside .wxt directory.
+ * @param entrypointGroups The list of entrypoint groups to build.
+ * @param existingOutput The previous output to combine the rebuild results into. An emptry array if
+ *                       this is the first build.
+ */
+export declare function rebuild(allEntrypoints: Entrypoint[], entrypointGroups: EntrypointGroup[], existingOutput?: Omit<BuildOutput, 'manifest'>): Promise<{
+    output: BuildOutput;
+    manifest: Manifest.WebExtensionManifest;
+    warnings: any[][];
+}>;

package/dist/core/utils/building/rebuild.mjs

@@ -0,0 +1,39 @@
+import { generateTypesDir } from "./generate-wxt-dir.mjs";
+import { buildEntrypoints } from "./build-entrypoints.mjs";
+import { generateManifest, writeManifest } from "../../utils/manifest.mjs";
+import { wxt } from "../../wxt.mjs";
+export async function rebuild(allEntrypoints, entrypointGroups, existingOutput = {
+  steps: [],
+  publicAssets: []
+}) {
+  const { default: ora } = await import("ora");
+  const spinner = ora(`Preparing...`).start();
+  await generateTypesDir(allEntrypoints).catch((err) => {
+    wxt.logger.warn("Failed to update .wxt directory:", err);
+    if (wxt.config.command === "build") throw err;
+  });
+  const newOutput = await buildEntrypoints(entrypointGroups, spinner);
+  const mergedOutput = {
+    steps: [...existingOutput.steps, ...newOutput.steps],
+    publicAssets: [...existingOutput.publicAssets, ...newOutput.publicAssets]
+  };
+  const { manifest: newManifest, warnings: manifestWarnings } = await generateManifest(allEntrypoints, mergedOutput);
+  const finalOutput = {
+    manifest: newManifest,
+    ...newOutput
+  };
+  await writeManifest(newManifest, finalOutput);
+  spinner.clear().stop();
+  return {
+    output: {
+      manifest: newManifest,
+      steps: [...existingOutput.steps, ...finalOutput.steps],
+      publicAssets: [
+        ...existingOutput.publicAssets,
+        ...finalOutput.publicAssets
+      ]
+    },
+    manifest: newManifest,
+    warnings: manifestWarnings
+  };
+}

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

@@ -0,0 +1,11 @@
+import { InlineConfig, ResolvedConfig, UserConfig, Logger, WxtCommand, WxtModuleWithMetadata } from '../../../types';
+/**
+ * Given an inline config, discover the config file if necessary, merge the results, resolve any
+ * relative paths, and apply any defaults.
+ *
+ * Inline config always has priority over user config. Cli flags are passed as inline config if set.
+ * If unset, undefined is passed in, letting this function decide default values.
+ */
+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>[]>;