wxt 0.20.13 → 0.20.15

package/dist/utils/content-script-ui/integrated.d.mts

@@ -0,0 +1,37 @@
+import { ContentScriptContext } from "../content-script-context.mjs";
+import { ContentScriptUi, ContentScriptUiOptions } from "./types.mjs";
+
+//#region src/utils/content-script-ui/integrated.d.ts
+/**
+ * Create a content script UI without any isolation.
+ *
+ * @see https://wxt.dev/guide/essentials/content-scripts.html#integrated
+ */
+declare function createIntegratedUi<TMounted>(ctx: ContentScriptContext, options: IntegratedContentScriptUiOptions<TMounted>): IntegratedContentScriptUi<TMounted>;
+/**
+ * Shared types for the different `wxt/utils/content-script-ui/*` modules.
+ * @module wxt/utils/content-script-ui/types
+ */
+interface IntegratedContentScriptUi<TMounted> extends ContentScriptUi<TMounted> {
+  /**
+   * A wrapper div that assists in positioning.
+   */
+  wrapper: HTMLElement;
+}
+type IntegratedContentScriptUiOptions<TMounted> = ContentScriptUiOptions<TMounted> & {
+  /**
+   * Tag used to create the wrapper element.
+   *
+   * @default "div"
+   */
+  tag?: string;
+  /**
+   * Callback executed when mounting the UI. This function should create and append the UI to the
+   * `wrapper` element. It is called every time `ui.mount()` is called.
+   *
+   * Optionally return a value that can be accessed at `ui.mounted` or in the `onRemove` callback.
+   */
+  onMount: (wrapper: HTMLElement) => TMounted;
+};
+//#endregion
+export { IntegratedContentScriptUi, IntegratedContentScriptUiOptions, createIntegratedUi };

package/dist/utils/content-script-ui/integrated.mjs

@@ -1,31 +1,38 @@
 import { applyPosition, createMountFunctions, mountUi } from "./shared.mjs";
-export function createIntegratedUi(ctx, options) {
-  const wrapper = document.createElement(options.tag || "div");
-  let mounted = void 0;
-  const mount = () => {
-    applyPosition(wrapper, void 0, options);
-    mountUi(wrapper, options);
-    mounted = options.onMount?.(wrapper);
-  };
-  const remove = () => {
-    options.onRemove?.(mounted);
-    wrapper.replaceChildren();
-    wrapper.remove();
-    mounted = void 0;
-  };
-  const mountFunctions = createMountFunctions(
-    {
-      mount,
-      remove
-    },
-    options
-  );
-  ctx.onInvalidated(remove);
-  return {
-    get mounted() {
-      return mounted;
-    },
-    wrapper,
-    ...mountFunctions
-  };
+
+//#region src/utils/content-script-ui/integrated.ts
+/**
+* Create a content script UI without any isolation.
+*
+* @see https://wxt.dev/guide/essentials/content-scripts.html#integrated
+*/
+function createIntegratedUi(ctx, options) {
+	const wrapper = document.createElement(options.tag || "div");
+	let mounted;
+	const mount = () => {
+		applyPosition(wrapper, void 0, options);
+		mountUi(wrapper, options);
+		mounted = options.onMount?.(wrapper);
+	};
+	const remove = () => {
+		options.onRemove?.(mounted);
+		wrapper.replaceChildren();
+		wrapper.remove();
+		mounted = void 0;
+	};
+	const mountFunctions = createMountFunctions({
+		mount,
+		remove
+	}, options);
+	ctx.onInvalidated(remove);
+	return {
+		get mounted() {
+			return mounted;
+		},
+		wrapper,
+		...mountFunctions
+	};
 }
+
+//#endregion
+export { createIntegratedUi };

package/dist/utils/content-script-ui/shadow-root.d.mts

@@ -0,0 +1,80 @@
+import { ContentScriptContext } from "../content-script-context.mjs";
+import { ContentScriptUi, ContentScriptUiOptions } from "./types.mjs";
+
+//#region src/utils/content-script-ui/shadow-root.d.ts
+/**
+ * Create a content script UI inside a [`ShadowRoot`](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot).
+ *
+ * > This function is async because it has to load the CSS via a network call.
+ *
+ * @see https://wxt.dev/guide/essentials/content-scripts.html#shadow-root
+ */
+declare function createShadowRootUi<TMounted>(ctx: ContentScriptContext, options: ShadowRootContentScriptUiOptions<TMounted>): Promise<ShadowRootContentScriptUi<TMounted>>;
+interface ShadowRootContentScriptUi<TMounted> extends ContentScriptUi<TMounted> {
+  /**
+   * The `HTMLElement` hosting the shadow root used to isolate the UI's styles. This is the element
+   * that get's added to the DOM. This element's style is not isolated from the webpage.
+   */
+  shadowHost: HTMLElement;
+  /**
+   * The container element inside the `ShadowRoot` whose styles are isolated. The UI is mounted
+   * inside this `HTMLElement`.
+   */
+  uiContainer: HTMLElement;
+  /**
+   * The shadow root performing the isolation.
+   */
+  shadow: ShadowRoot;
+}
+type ShadowRootContentScriptUiOptions<TMounted> = ContentScriptUiOptions<TMounted> & {
+  /**
+   * The name of the custom component used to host the ShadowRoot. Must be kebab-case.
+   */
+  name: string;
+  /**
+   * Custom CSS text to apply to the UI. If your content script imports/generates CSS and you've
+   * set `cssInjectionMode: "ui"`, the imported CSS will be included automatically. You do not need
+   * to pass those styles in here. This is for any additional styles not in the imported CSS.
+   */
+  css?: string;
+  /**
+   * ShadowRoot's mode.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/mode
+   * @default "open"
+   */
+  mode?: 'open' | 'closed';
+  /**
+   * When enabled, `event.stopPropagation` will be called on events trying to bubble out of the
+   * shadow root.
+   *
+   * - Set to `true` to stop the propagation of a default set of events,
+   *   `["keyup", "keydown", "keypress"]`
+   * - Set to an array of event names to stop the propagation of a custom list of events
+   */
+  isolateEvents?: boolean | string[];
+  /**
+   * By default, WXT adds `all: initial` to the shadow root before the rest of
+   * your CSS. This resets any inheritable CSS styles that
+   * [normally pierce the Shadow DOM](https://open-wc.org/guides/knowledge/styling/styles-piercing-shadow-dom/).
+   *
+   * WXT resets everything but:
+   * - **`rem` Units**: they continue to scale based off the webpage's HTML `font-size`.
+   * - **CSS Variables/Custom Properties**: CSS variables defined outside the shadow root can be accessed inside it.
+   * - **`@font-face` Definitions**: Fonts defined outside the shadow root can be used inside it.
+   *
+   * To disable this behavior and inherit styles from the webpage, set `inheritStyles: true`.
+   *
+   * @default false
+   */
+  inheritStyles?: boolean;
+  /**
+   * Callback executed when mounting the UI. This function should create and append the UI to the
+   * `uiContainer` element. It is called every time `ui.mount()` is called.
+   *
+   * Optionally return a value that can be accessed at `ui.mounted` or in the `onRemove` callback.
+   */
+  onMount: (uiContainer: HTMLElement, shadow: ShadowRoot, shadowHost: HTMLElement) => TMounted;
+};
+//#endregion
+export { ShadowRootContentScriptUi, ShadowRootContentScriptUiOptions, createShadowRootUi };

package/dist/utils/content-script-ui/shadow-root.mjs

@@ -1,87 +1,80 @@
-import { browser } from "wxt/browser";
-import { createIsolatedElement } from "@webext-core/isolated-element";
-import { applyPosition, createMountFunctions, mountUi } from "./shared.mjs";
 import { logger } from "../internal/logger.mjs";
+import { applyPosition, createMountFunctions, mountUi } from "./shared.mjs";
 import { splitShadowRootCss } from "../split-shadow-root-css.mjs";
-export async function createShadowRootUi(ctx, options) {
-  const instanceId = Math.random().toString(36).substring(2, 15);
-  const css = [];
-  if (!options.inheritStyles) {
-    css.push(`/* WXT Shadow Root Reset */ :host{all:initial !important;}`);
-  }
-  if (options.css) {
-    css.push(options.css);
-  }
-  if (ctx.options?.cssInjectionMode === "ui") {
-    const entryCss = await loadCss();
-    css.push(entryCss.replaceAll(":root", ":host"));
-  }
-  const { shadowCss, documentCss } = splitShadowRootCss(css.join("\n").trim());
-  const {
-    isolatedElement: uiContainer,
-    parentElement: shadowHost,
-    shadow
-  } = await createIsolatedElement({
-    name: options.name,
-    css: {
-      textContent: shadowCss
-    },
-    mode: options.mode ?? "open",
-    isolateEvents: options.isolateEvents
-  });
-  let mounted;
-  const mount = () => {
-    mountUi(shadowHost, options);
-    applyPosition(shadowHost, shadow.querySelector("html"), options);
-    if (documentCss && !document.querySelector(
-      `style[wxt-shadow-root-document-styles="${instanceId}"]`
-    )) {
-      const style = document.createElement("style");
-      style.textContent = documentCss;
-      style.setAttribute("wxt-shadow-root-document-styles", instanceId);
-      (document.head ?? document.body).append(style);
-    }
-    mounted = options.onMount(uiContainer, shadow, shadowHost);
-  };
-  const remove = () => {
-    options.onRemove?.(mounted);
-    shadowHost.remove();
-    const documentStyle = document.querySelector(
-      `style[wxt-shadow-root-document-styles="${instanceId}"]`
-    );
-    documentStyle?.remove();
-    while (uiContainer.lastChild)
-      uiContainer.removeChild(uiContainer.lastChild);
-    mounted = void 0;
-  };
-  const mountFunctions = createMountFunctions(
-    {
-      mount,
-      remove
-    },
-    options
-  );
-  ctx.onInvalidated(remove);
-  return {
-    shadow,
-    shadowHost,
-    uiContainer,
-    ...mountFunctions,
-    get mounted() {
-      return mounted;
-    }
-  };
+import { browser } from "wxt/browser";
+import { createIsolatedElement } from "@webext-core/isolated-element";
+
+//#region src/utils/content-script-ui/shadow-root.ts
+/** @module wxt/utils/content-script-ui/shadow-root */
+/**
+* Create a content script UI inside a [`ShadowRoot`](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot).
+*
+* > This function is async because it has to load the CSS via a network call.
+*
+* @see https://wxt.dev/guide/essentials/content-scripts.html#shadow-root
+*/
+async function createShadowRootUi(ctx, options) {
+	const instanceId = Math.random().toString(36).substring(2, 15);
+	const css = [];
+	if (!options.inheritStyles) css.push(`/* WXT Shadow Root Reset */ :host{all:initial !important;}`);
+	if (options.css) css.push(options.css);
+	if (ctx.options?.cssInjectionMode === "ui") {
+		const entryCss = await loadCss();
+		css.push(entryCss.replaceAll(":root", ":host"));
+	}
+	const { shadowCss, documentCss } = splitShadowRootCss(css.join("\n").trim());
+	const { isolatedElement: uiContainer, parentElement: shadowHost, shadow } = await createIsolatedElement({
+		name: options.name,
+		css: { textContent: shadowCss },
+		mode: options.mode ?? "open",
+		isolateEvents: options.isolateEvents
+	});
+	let mounted;
+	const mount = () => {
+		mountUi(shadowHost, options);
+		applyPosition(shadowHost, shadow.querySelector("html"), options);
+		if (documentCss && !document.querySelector(`style[wxt-shadow-root-document-styles="${instanceId}"]`)) {
+			const style = document.createElement("style");
+			style.textContent = documentCss;
+			style.setAttribute("wxt-shadow-root-document-styles", instanceId);
+			(document.head ?? document.body).append(style);
+		}
+		mounted = options.onMount(uiContainer, shadow, shadowHost);
+	};
+	const remove = () => {
+		options.onRemove?.(mounted);
+		shadowHost.remove();
+		document.querySelector(`style[wxt-shadow-root-document-styles="${instanceId}"]`)?.remove();
+		while (uiContainer.lastChild) uiContainer.removeChild(uiContainer.lastChild);
+		mounted = void 0;
+	};
+	const mountFunctions = createMountFunctions({
+		mount,
+		remove
+	}, options);
+	ctx.onInvalidated(remove);
+	return {
+		shadow,
+		shadowHost,
+		uiContainer,
+		...mountFunctions,
+		get mounted() {
+			return mounted;
+		}
+	};
 }
+/**
+* Load the CSS for the current entrypoint.
+*/
 async function loadCss() {
-  const url = browser.runtime.getURL(`/content-scripts/${import.meta.env.ENTRYPOINT}.css`);
-  try {
-    const res = await fetch(url);
-    return await res.text();
-  } catch (err) {
-    logger.warn(
-      `Failed to load styles @ ${url}. Did you forget to import the stylesheet in your entrypoint?`,
-      err
-    );
-    return "";
-  }
+	const url = browser.runtime.getURL(`/content-scripts/${import.meta.env.ENTRYPOINT}.css`);
+	try {
+		return await (await fetch(url)).text();
+	} catch (err) {
+		logger.warn(`Failed to load styles @ ${url}. Did you forget to import the stylesheet in your entrypoint?`, err);
+		return "";
+	}
 }
+
+//#endregion
+export { createShadowRootUi };

package/dist/utils/content-script-ui/shared.mjs

@@ -1,157 +1,122 @@
+import { logger } from "../internal/logger.mjs";
 import { waitElement } from "@1natsu/wait-element";
-import {
-  isExist as mountDetector,
-  isNotExist as removeDetector
-} from "@1natsu/wait-element/detectors";
-import { logger } from "../../utils/internal/logger.mjs";
-export function applyPosition(root, positionedElement, options) {
-  if (options.position === "inline") return;
-  if (options.zIndex != null) root.style.zIndex = String(options.zIndex);
-  root.style.overflow = "visible";
-  root.style.position = "relative";
-  root.style.width = "0";
-  root.style.height = "0";
-  root.style.display = "block";
-  if (positionedElement) {
-    if (options.position === "overlay") {
-      positionedElement.style.position = "absolute";
-      if (options.alignment?.startsWith("bottom-"))
-        positionedElement.style.bottom = "0";
-      else positionedElement.style.top = "0";
-      if (options.alignment?.endsWith("-right"))
-        positionedElement.style.right = "0";
-      else positionedElement.style.left = "0";
-    } else {
-      positionedElement.style.position = "fixed";
-      positionedElement.style.top = "0";
-      positionedElement.style.bottom = "0";
-      positionedElement.style.left = "0";
-      positionedElement.style.right = "0";
-    }
-  }
+import { isExist, isNotExist } from "@1natsu/wait-element/detectors";
+
+//#region src/utils/content-script-ui/shared.ts
+function applyPosition(root, positionedElement, options) {
+	if (options.position === "inline") return;
+	if (options.zIndex != null) root.style.zIndex = String(options.zIndex);
+	root.style.overflow = "visible";
+	root.style.position = "relative";
+	root.style.width = "0";
+	root.style.height = "0";
+	root.style.display = "block";
+	if (positionedElement) if (options.position === "overlay") {
+		positionedElement.style.position = "absolute";
+		if (options.alignment?.startsWith("bottom-")) positionedElement.style.bottom = "0";
+		else positionedElement.style.top = "0";
+		if (options.alignment?.endsWith("-right")) positionedElement.style.right = "0";
+		else positionedElement.style.left = "0";
+	} else {
+		positionedElement.style.position = "fixed";
+		positionedElement.style.top = "0";
+		positionedElement.style.bottom = "0";
+		positionedElement.style.left = "0";
+		positionedElement.style.right = "0";
+	}
 }
-export function getAnchor(options) {
-  if (options.anchor == null) return document.body;
-  let resolved = typeof options.anchor === "function" ? options.anchor() : options.anchor;
-  if (typeof resolved === "string") {
-    if (resolved.startsWith("/")) {
-      const result = document.evaluate(
-        resolved,
-        document,
-        null,
-        XPathResult.FIRST_ORDERED_NODE_TYPE,
-        null
-      );
-      return result.singleNodeValue ?? void 0;
-    } else {
-      return document.querySelector(resolved) ?? void 0;
-    }
-  }
-  return resolved ?? void 0;
+function getAnchor(options) {
+	if (options.anchor == null) return document.body;
+	let resolved = typeof options.anchor === "function" ? options.anchor() : options.anchor;
+	if (typeof resolved === "string") if (resolved.startsWith("/")) return document.evaluate(resolved, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue ?? void 0;
+	else return document.querySelector(resolved) ?? void 0;
+	return resolved ?? void 0;
 }
-export function mountUi(root, options) {
-  const anchor = getAnchor(options);
-  if (anchor == null)
-    throw Error(
-      "Failed to mount content script UI: could not find anchor element"
-    );
-  switch (options.append) {
-    case void 0:
-    case "last":
-      anchor.append(root);
-      break;
-    case "first":
-      anchor.prepend(root);
-      break;
-    case "replace":
-      anchor.replaceWith(root);
-      break;
-    case "after":
-      anchor.parentElement?.insertBefore(root, anchor.nextElementSibling);
-      break;
-    case "before":
-      anchor.parentElement?.insertBefore(root, anchor);
-      break;
-    default:
-      options.append(anchor, root);
-      break;
-  }
+function mountUi(root, options) {
+	const anchor = getAnchor(options);
+	if (anchor == null) throw Error("Failed to mount content script UI: could not find anchor element");
+	switch (options.append) {
+		case void 0:
+		case "last":
+			anchor.append(root);
+			break;
+		case "first":
+			anchor.prepend(root);
+			break;
+		case "replace":
+			anchor.replaceWith(root);
+			break;
+		case "after":
+			anchor.parentElement?.insertBefore(root, anchor.nextElementSibling);
+			break;
+		case "before":
+			anchor.parentElement?.insertBefore(root, anchor);
+			break;
+		default: options.append(anchor, root);
+	}
 }
-export function createMountFunctions(baseFunctions, options) {
-  let autoMountInstance = void 0;
-  const stopAutoMount = () => {
-    autoMountInstance?.stopAutoMount();
-    autoMountInstance = void 0;
-  };
-  const mount = () => {
-    baseFunctions.mount();
-  };
-  const unmount = baseFunctions.remove;
-  const remove = () => {
-    stopAutoMount();
-    baseFunctions.remove();
-  };
-  const autoMount = (autoMountOptions) => {
-    if (autoMountInstance) {
-      logger.warn("autoMount is already set.");
-    }
-    autoMountInstance = autoMountUi(
-      { mount, unmount, stopAutoMount },
-      {
-        ...options,
-        ...autoMountOptions
-      }
-    );
-  };
-  return {
-    mount,
-    remove,
-    autoMount
-  };
+function createMountFunctions(baseFunctions, options) {
+	let autoMountInstance;
+	const stopAutoMount = () => {
+		autoMountInstance?.stopAutoMount();
+		autoMountInstance = void 0;
+	};
+	const mount = () => {
+		baseFunctions.mount();
+	};
+	const unmount = baseFunctions.remove;
+	const remove = () => {
+		stopAutoMount();
+		baseFunctions.remove();
+	};
+	const autoMount = (autoMountOptions) => {
+		if (autoMountInstance) logger.warn("autoMount is already set.");
+		autoMountInstance = autoMountUi({
+			mount,
+			unmount,
+			stopAutoMount
+		}, {
+			...options,
+			...autoMountOptions
+		});
+	};
+	return {
+		mount,
+		remove,
+		autoMount
+	};
 }
 function autoMountUi(uiCallbacks, options) {
-  const abortController = new AbortController();
-  const EXPLICIT_STOP_REASON = "explicit_stop_auto_mount";
-  const _stopAutoMount = () => {
-    abortController.abort(EXPLICIT_STOP_REASON);
-    options.onStop?.();
-  };
-  let resolvedAnchor = typeof options.anchor === "function" ? options.anchor() : options.anchor;
-  if (resolvedAnchor instanceof Element) {
-    throw Error(
-      "autoMount and Element anchor option cannot be combined. Avoid passing `Element` directly or `() => Element` to the anchor."
-    );
-  }
-  async function observeElement(selector) {
-    let isAnchorExist = !!getAnchor(options);
-    if (isAnchorExist) {
-      uiCallbacks.mount();
-    }
-    while (!abortController.signal.aborted) {
-      try {
-        const changedAnchor = await waitElement(selector ?? "body", {
-          customMatcher: () => getAnchor(options) ?? null,
-          detector: isAnchorExist ? removeDetector : mountDetector,
-          signal: abortController.signal
-        });
-        isAnchorExist = !!changedAnchor;
-        if (isAnchorExist) {
-          uiCallbacks.mount();
-        } else {
-          uiCallbacks.unmount();
-          if (options.once) {
-            uiCallbacks.stopAutoMount();
-          }
-        }
-      } catch (error) {
-        if (abortController.signal.aborted && abortController.signal.reason === EXPLICIT_STOP_REASON) {
-          break;
-        } else {
-          throw error;
-        }
-      }
-    }
-  }
-  observeElement(resolvedAnchor);
-  return { stopAutoMount: _stopAutoMount };
+	const abortController = new AbortController();
+	const EXPLICIT_STOP_REASON = "explicit_stop_auto_mount";
+	const _stopAutoMount = () => {
+		abortController.abort(EXPLICIT_STOP_REASON);
+		options.onStop?.();
+	};
+	let resolvedAnchor = typeof options.anchor === "function" ? options.anchor() : options.anchor;
+	if (resolvedAnchor instanceof Element) throw Error("autoMount and Element anchor option cannot be combined. Avoid passing `Element` directly or `() => Element` to the anchor.");
+	async function observeElement(selector) {
+		let isAnchorExist = !!getAnchor(options);
+		if (isAnchorExist) uiCallbacks.mount();
+		while (!abortController.signal.aborted) try {
+			isAnchorExist = !!await waitElement(selector ?? "body", {
+				customMatcher: () => getAnchor(options) ?? null,
+				detector: isAnchorExist ? isNotExist : isExist,
+				signal: abortController.signal
+			});
+			if (isAnchorExist) uiCallbacks.mount();
+			else {
+				uiCallbacks.unmount();
+				if (options.once) uiCallbacks.stopAutoMount();
+			}
+		} catch (error) {
+			if (abortController.signal.aborted && abortController.signal.reason === EXPLICIT_STOP_REASON) break;
+			else throw error;
+		}
+	}
+	observeElement(resolvedAnchor);
+	return { stopAutoMount: _stopAutoMount };
 }
+
+//#endregion
+export { applyPosition, createMountFunctions, mountUi };