wxt 0.18.14 → 0.19.0-alpha1

package/dist/core/utils/building/detect-dev-changes.d.ts

@@ -0,0 +1,57 @@
+import { BuildOutput, BuildStepOutput, EntrypointGroup } from '../../../types';
+/**
+ * Compare the changed files vs the build output and determine what kind of reload needs to happen:
+ *
+ * - Do nothing
+ *   - CSS or JS file associated with an HTML page is changed - this is handled automatically by the
+ *     dev server
+ *   - Change isn't used by any of the entrypoints
+ * - Reload Content script
+ *   - CSS or JS file associated with a content script
+ *   - Background script will be told to reload the content script
+ * - Reload HTML file
+ *   - HTML file itself is saved - HMR doesn't handle this because the HTML pages are pre-rendered
+ *   - Chrome is OK reloading the page when the HTML file is changed without reloading the whole
+ *     extension. Not sure about firefox, this might need to change to an extension reload
+ * - Reload extension
+ *   - Background script is changed
+ *   - Manifest is different
+ * - Restart browser
+ *   - Config file changed (wxt.config.ts, .env, web-ext.config.ts, etc)
+ */
+export declare function detectDevChanges(changedFiles: string[], currentOutput: BuildOutput): DevModeChange;
+/**
+ * Contains information about what files changed, what needs rebuilt, and the type of reload that is
+ * required.
+ */
+export type DevModeChange = NoChange | HtmlReload | ExtensionReload | ContentScriptReload | FullRestart | BrowserRestart;
+interface NoChange {
+    type: 'no-change';
+}
+interface RebuildChange {
+    /**
+     * The list of entrypoints that need rebuilt.
+     */
+    rebuildGroups: EntrypointGroup[];
+    /**
+     * The previous output stripped of any files are going to change.
+     */
+    cachedOutput: BuildOutput;
+}
+interface FullRestart {
+    type: 'full-restart';
+}
+interface BrowserRestart {
+    type: 'browser-restart';
+}
+interface HtmlReload extends RebuildChange {
+    type: 'html-reload';
+}
+interface ExtensionReload extends RebuildChange {
+    type: 'extension-reload';
+}
+interface ContentScriptReload extends RebuildChange {
+    type: 'content-script-reload';
+    changedSteps: BuildStepOutput[];
+}
+export {};

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

@@ -0,0 +1,93 @@
+import { every, some } from "../../utils/arrays.mjs";
+import { normalizePath } from "../../utils/paths.mjs";
+import { wxt } from "../../wxt.mjs";
+export function detectDevChanges(changedFiles, currentOutput) {
+  const isConfigChange = some(
+    changedFiles,
+    (file) => file === wxt.config.userConfigMetadata.configFile
+  );
+  if (isConfigChange) return { type: "full-restart" };
+  const isRunnerChange = some(
+    changedFiles,
+    (file) => file === wxt.config.runnerConfig.configFile
+  );
+  if (isRunnerChange) return { type: "browser-restart" };
+  const changedSteps = new Set(
+    changedFiles.flatMap(
+      (changedFile) => findEffectedSteps(changedFile, currentOutput)
+    )
+  );
+  if (changedSteps.size === 0) {
+    const hasPublicChange = some(
+      changedFiles,
+      (file) => file.startsWith(wxt.config.publicDir)
+    );
+    if (hasPublicChange) {
+      return {
+        type: "extension-reload",
+        rebuildGroups: [],
+        cachedOutput: currentOutput
+      };
+    } else {
+      return { type: "no-change" };
+    }
+  }
+  const unchangedOutput = {
+    manifest: currentOutput.manifest,
+    steps: [],
+    publicAssets: [...currentOutput.publicAssets]
+  };
+  const changedOutput = {
+    manifest: currentOutput.manifest,
+    steps: [],
+    publicAssets: []
+  };
+  for (const step of currentOutput.steps) {
+    if (changedSteps.has(step)) {
+      changedOutput.steps.push(step);
+    } else {
+      unchangedOutput.steps.push(step);
+    }
+  }
+  const isOnlyHtmlChanges = changedFiles.length > 0 && every(changedFiles, (file) => file.endsWith(".html"));
+  if (isOnlyHtmlChanges) {
+    return {
+      type: "html-reload",
+      cachedOutput: unchangedOutput,
+      rebuildGroups: changedOutput.steps.map((step) => step.entrypoints)
+    };
+  }
+  const isOnlyContentScripts = changedOutput.steps.length > 0 && every(
+    changedOutput.steps.flatMap((step) => step.entrypoints),
+    (entry) => entry.type === "content-script"
+  );
+  if (isOnlyContentScripts) {
+    return {
+      type: "content-script-reload",
+      cachedOutput: unchangedOutput,
+      changedSteps: changedOutput.steps,
+      rebuildGroups: changedOutput.steps.map((step) => step.entrypoints)
+    };
+  }
+  return {
+    type: "extension-reload",
+    cachedOutput: unchangedOutput,
+    rebuildGroups: changedOutput.steps.map((step) => step.entrypoints)
+  };
+}
+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)
+  );
+  for (const step of currentOutput.steps) {
+    const effectedChunk = step.chunks.find((chunk) => isChunkEffected(chunk));
+    if (effectedChunk) changes.push(step);
+  }
+  return changes;
+}

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

@@ -0,0 +1,5 @@
+import { Entrypoint } from '../../../types';
+/**
+ * Return entrypoints and their configuration by looking through the project's files.
+ */
+export declare function findEntrypoints(): Promise<Entrypoint[]>;

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

@@ -0,0 +1,385 @@
+import { relative, resolve } from "path";
+import fs from "fs-extra";
+import { minimatch } from "minimatch";
+import { parseHTML } from "linkedom";
+import JSON5 from "json5";
+import glob from "fast-glob";
+import {
+  getEntrypointName,
+  resolvePerBrowserOptions
+} from "../../utils/entrypoints.mjs";
+import { VIRTUAL_NOOP_BACKGROUND_MODULE_ID } from "../../utils/constants.mjs";
+import { CSS_EXTENSIONS_PATTERN } from "../../utils/paths.mjs";
+import pc from "picocolors";
+import { wxt } from "../../wxt.mjs";
+export async function findEntrypoints() {
+  await fs.mkdir(wxt.config.wxtDir, { recursive: true });
+  await fs.writeJson(resolve(wxt.config.wxtDir, "tsconfig.json"), {});
+  const relativePaths = await glob(Object.keys(PATH_GLOB_TO_TYPE_MAP), {
+    cwd: wxt.config.entrypointsDir
+  });
+  relativePaths.sort();
+  const pathGlobs = Object.keys(PATH_GLOB_TO_TYPE_MAP);
+  const entrypointInfos = relativePaths.reduce((results, relativePath) => {
+    const inputPath = resolve(wxt.config.entrypointsDir, relativePath);
+    const name = getEntrypointName(wxt.config.entrypointsDir, inputPath);
+    const matchingGlob = pathGlobs.find(
+      (glob2) => minimatch(relativePath, glob2)
+    );
+    if (matchingGlob) {
+      const type = PATH_GLOB_TO_TYPE_MAP[matchingGlob];
+      results.push({
+        name,
+        inputPath,
+        type,
+        skipped: wxt.config.filterEntrypoints != null && !wxt.config.filterEntrypoints.has(name)
+      });
+    }
+    return results;
+  }, []);
+  preventNoEntrypoints(entrypointInfos);
+  preventDuplicateEntrypointNames(entrypointInfos);
+  let hasBackground = false;
+  const entrypoints = await Promise.all(
+    entrypointInfos.map(async (info) => {
+      const { type } = info;
+      switch (type) {
+        case "popup":
+          return await getPopupEntrypoint(info);
+        case "sidepanel":
+          return await getSidepanelEntrypoint(info);
+        case "options":
+          return await getOptionsEntrypoint(info);
+        case "background":
+          hasBackground = true;
+          return await getBackgroundEntrypoint(info);
+        case "content-script":
+          return await getContentScriptEntrypoint(info);
+        case "unlisted-page":
+          return await getUnlistedPageEntrypoint(info);
+        case "unlisted-script":
+          return await getUnlistedScriptEntrypoint(info);
+        case "content-script-style":
+          return {
+            ...info,
+            type,
+            outputDir: resolve(wxt.config.outDir, CONTENT_SCRIPT_OUT_DIR),
+            options: {
+              include: void 0,
+              exclude: void 0
+            }
+          };
+        default:
+          return {
+            ...info,
+            type,
+            outputDir: wxt.config.outDir,
+            options: {
+              include: void 0,
+              exclude: void 0
+            }
+          };
+      }
+    })
+  );
+  if (wxt.config.command === "serve" && !hasBackground) {
+    entrypoints.push(
+      await getBackgroundEntrypoint({
+        inputPath: VIRTUAL_NOOP_BACKGROUND_MODULE_ID,
+        name: "background",
+        type: "background",
+        skipped: false
+      })
+    );
+  }
+  wxt.logger.debug("All entrypoints:", entrypoints);
+  const skippedEntrypointNames = entrypointInfos.filter((item) => item.skipped).map((item) => item.name);
+  if (skippedEntrypointNames.length) {
+    wxt.logger.warn(
+      `Filter excluded the following entrypoints:
+${skippedEntrypointNames.map((item) => `${pc.dim("-")} ${pc.cyan(item)}`).join("\n")}`
+    );
+  }
+  const targetEntrypoints = entrypoints.filter((entry) => {
+    const { include, exclude } = entry.options;
+    if (include?.length && exclude?.length) {
+      wxt.logger.warn(
+        `The ${entry.name} entrypoint lists both include and exclude, but only one can be used per entrypoint. Entrypoint ignored.`
+      );
+      return false;
+    }
+    if (exclude?.length && !include?.length) {
+      return !exclude.includes(wxt.config.browser);
+    }
+    if (include?.length && !exclude?.length) {
+      return include.includes(wxt.config.browser);
+    }
+    if (skippedEntrypointNames.includes(entry.name)) {
+      return false;
+    }
+    return true;
+  });
+  wxt.logger.debug(`${wxt.config.browser} entrypoints:`, targetEntrypoints);
+  await wxt.hooks.callHook("entrypoints:resolved", wxt, targetEntrypoints);
+  return targetEntrypoints;
+}
+function preventDuplicateEntrypointNames(files) {
+  const namesToPaths = files.reduce(
+    (map, { name, inputPath }) => {
+      map[name] ??= [];
+      map[name].push(inputPath);
+      return map;
+    },
+    {}
+  );
+  const errorLines = Object.entries(namesToPaths).reduce(
+    (lines, [name, absolutePaths]) => {
+      if (absolutePaths.length > 1) {
+        lines.push(`- ${name}`);
+        absolutePaths.forEach((absolutePath) => {
+          lines.push(`  - ${relative(wxt.config.root, absolutePath)}`);
+        });
+      }
+      return lines;
+    },
+    []
+  );
+  if (errorLines.length > 0) {
+    const errorContent = errorLines.join("\n");
+    throw Error(
+      `Multiple entrypoints with the same name detected, only one entrypoint for each name is allowed.
+
+${errorContent}`
+    );
+  }
+}
+function preventNoEntrypoints(files) {
+  if (files.length === 0) {
+    throw Error(`No entrypoints found in ${wxt.config.entrypointsDir}`);
+  }
+}
+async function getPopupEntrypoint(info) {
+  const options = await getHtmlEntrypointOptions(
+    info,
+    {
+      browserStyle: "browse_style",
+      exclude: "exclude",
+      include: "include",
+      defaultIcon: "default_icon",
+      defaultTitle: "default_title",
+      mv2Key: "type"
+    },
+    {
+      defaultTitle: (document) => document.querySelector("title")?.textContent || void 0
+    },
+    {
+      defaultTitle: (content) => content,
+      mv2Key: (content) => content === "page_action" ? "page_action" : "browser_action"
+    }
+  );
+  return {
+    type: "popup",
+    name: "popup",
+    options: resolvePerBrowserOptions(options, wxt.config.browser),
+    inputPath: info.inputPath,
+    outputDir: wxt.config.outDir,
+    skipped: info.skipped
+  };
+}
+async function getOptionsEntrypoint(info) {
+  const options = await getHtmlEntrypointOptions(
+    info,
+    {
+      browserStyle: "browse_style",
+      chromeStyle: "chrome_style",
+      exclude: "exclude",
+      include: "include",
+      openInTab: "open_in_tab"
+    }
+  );
+  return {
+    type: "options",
+    name: "options",
+    options: resolvePerBrowserOptions(options, wxt.config.browser),
+    inputPath: info.inputPath,
+    outputDir: wxt.config.outDir,
+    skipped: info.skipped
+  };
+}
+async function getUnlistedPageEntrypoint(info) {
+  const options = await getHtmlEntrypointOptions(info, {
+    exclude: "exclude",
+    include: "include"
+  });
+  return {
+    type: "unlisted-page",
+    name: info.name,
+    inputPath: info.inputPath,
+    outputDir: wxt.config.outDir,
+    options,
+    skipped: info.skipped
+  };
+}
+async function getUnlistedScriptEntrypoint({
+  inputPath,
+  name,
+  skipped
+}) {
+  const defaultExport = await wxt.builder.importEntrypoint(inputPath);
+  if (defaultExport == null) {
+    throw Error(
+      `${name}: Default export not found, did you forget to call "export default defineUnlistedScript(...)"?`
+    );
+  }
+  const { main: _, ...options } = defaultExport;
+  return {
+    type: "unlisted-script",
+    name,
+    inputPath,
+    outputDir: wxt.config.outDir,
+    options: resolvePerBrowserOptions(options, wxt.config.browser),
+    skipped
+  };
+}
+async function getBackgroundEntrypoint({
+  inputPath,
+  name,
+  skipped
+}) {
+  let options = {};
+  if (inputPath !== VIRTUAL_NOOP_BACKGROUND_MODULE_ID) {
+    const defaultExport = await wxt.builder.importEntrypoint(inputPath);
+    if (defaultExport == null) {
+      throw Error(
+        `${name}: Default export not found, did you forget to call "export default defineBackground(...)"?`
+      );
+    }
+    const { main: _, ...moduleOptions } = defaultExport;
+    options = moduleOptions;
+  }
+  if (wxt.config.manifestVersion !== 3) {
+    delete options.type;
+  }
+  return {
+    type: "background",
+    name,
+    inputPath,
+    outputDir: wxt.config.outDir,
+    options: resolvePerBrowserOptions(options, wxt.config.browser),
+    skipped
+  };
+}
+async function getContentScriptEntrypoint({
+  inputPath,
+  name,
+  skipped
+}) {
+  const defaultExport = await wxt.builder.importEntrypoint(inputPath);
+  if (defaultExport == null) {
+    throw Error(
+      `${name}: Default export not found, did you forget to call "export default defineContentScript(...)"?`
+    );
+  }
+  const { main: _, ...options } = defaultExport;
+  if (options == null) {
+    throw Error(
+      `${name}: Default export not found, did you forget to call "export default defineContentScript(...)"?`
+    );
+  }
+  return {
+    type: "content-script",
+    name,
+    inputPath,
+    outputDir: resolve(wxt.config.outDir, CONTENT_SCRIPT_OUT_DIR),
+    options: resolvePerBrowserOptions(options, wxt.config.browser),
+    skipped
+  };
+}
+async function getSidepanelEntrypoint(info) {
+  const options = await getHtmlEntrypointOptions(
+    info,
+    {
+      browserStyle: "browse_style",
+      exclude: "exclude",
+      include: "include",
+      defaultIcon: "default_icon",
+      defaultTitle: "default_title",
+      openAtInstall: "open_at_install"
+    },
+    {
+      defaultTitle: (document) => document.querySelector("title")?.textContent || void 0
+    },
+    {
+      defaultTitle: (content) => content
+    }
+  );
+  return {
+    type: "sidepanel",
+    name: info.name,
+    options: resolvePerBrowserOptions(options, wxt.config.browser),
+    inputPath: info.inputPath,
+    outputDir: wxt.config.outDir,
+    skipped: info.skipped
+  };
+}
+async function getHtmlEntrypointOptions(info, keyMap, queries, parsers) {
+  const content = await fs.readFile(info.inputPath, "utf-8");
+  const { document } = parseHTML(content);
+  const options = {};
+  const defaultQuery = (manifestKey) => document.querySelector(`meta[name='manifest.${manifestKey}']`)?.getAttribute("content");
+  Object.entries(keyMap).forEach(([_key, manifestKey]) => {
+    const key = _key;
+    const content2 = queries?.[key] ? queries[key](document, manifestKey) : defaultQuery(manifestKey);
+    if (content2) {
+      try {
+        options[key] = (parsers?.[key] ?? JSON5.parse)(content2);
+      } catch (err) {
+        wxt.logger.fatal(
+          `Failed to parse meta tag content. Usually this means you have invalid JSON5 content (content=${content2})`,
+          err
+        );
+      }
+    }
+  });
+  return options;
+}
+const PATH_GLOB_TO_TYPE_MAP = {
+  "sandbox.html": "sandbox",
+  "sandbox/index.html": "sandbox",
+  "*.sandbox.html": "sandbox",
+  "*.sandbox/index.html": "sandbox",
+  "bookmarks.html": "bookmarks",
+  "bookmarks/index.html": "bookmarks",
+  "history.html": "history",
+  "history/index.html": "history",
+  "newtab.html": "newtab",
+  "newtab/index.html": "newtab",
+  "sidepanel.html": "sidepanel",
+  "sidepanel/index.html": "sidepanel",
+  "*.sidepanel.html": "sidepanel",
+  "*.sidepanel/index.html": "sidepanel",
+  "devtools.html": "devtools",
+  "devtools/index.html": "devtools",
+  "background.[jt]s": "background",
+  "background/index.[jt]s": "background",
+  [VIRTUAL_NOOP_BACKGROUND_MODULE_ID]: "background",
+  "content.[jt]s?(x)": "content-script",
+  "content/index.[jt]s?(x)": "content-script",
+  "*.content.[jt]s?(x)": "content-script",
+  "*.content/index.[jt]s?(x)": "content-script",
+  [`content.${CSS_EXTENSIONS_PATTERN}`]: "content-script-style",
+  [`*.content.${CSS_EXTENSIONS_PATTERN}`]: "content-script-style",
+  [`content/index.${CSS_EXTENSIONS_PATTERN}`]: "content-script-style",
+  [`*.content/index.${CSS_EXTENSIONS_PATTERN}`]: "content-script-style",
+  "popup.html": "popup",
+  "popup/index.html": "popup",
+  "options.html": "options",
+  "options/index.html": "options",
+  "*.html": "unlisted-page",
+  "*/index.html": "unlisted-page",
+  "*.[jt]s?(x)": "unlisted-script",
+  "*/index.[jt]s?(x)": "unlisted-script",
+  [`*.${CSS_EXTENSIONS_PATTERN}`]: "unlisted-style",
+  [`*/index.${CSS_EXTENSIONS_PATTERN}`]: "unlisted-style"
+};
+const CONTENT_SCRIPT_OUT_DIR = "content-scripts";

package/dist/core/utils/building/generate-wxt-dir.d.ts

@@ -0,0 +1,5 @@
+import { Entrypoint } from '../../../types';
+/**
+ * Generate and write all the files inside the `InternalConfig.typesDir` directory.
+ */
+export declare function generateTypesDir(entrypoints: Entrypoint[]): Promise<void>;