123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
import { posix } from "../deps/path.ts";import { encodeBase64 } from "../deps/base64.ts";import { merge } from "../core/utils/object.ts";import { log } from "../core/utils/log.ts";import { concurrent } from "../core/utils/concurrent.ts";import binaryLoader from "../core/loaders/binary.ts";import textLoader from "../core/loaders/text.ts";import { contentType } from "../deps/media_types.ts";
import type Site from "../core/site.ts";import type { Loader } from "../core/fs.ts";import type { Page } from "../core/file.ts";
export interface Options {  /** The list of extensions this plugin applies to */  extensions?: string[];
  /** Attribute used to select the elements this plugin applies to */  attribute?: string;
  /** List of extra attributes to copy if replacing the element */  copyAttributes?: (string | RegExp)[];}
// Default optionsexport const defaults: Options = {  extensions: [".html"],  attribute: "inline",  copyAttributes: [/^data-/],};
const cache = new Map();
/** * A plugin to inline the HTML assets, * like images, JavaScript, CSS, SVG, etc. */export default function (userOptions?: Options) {  const options = merge(defaults, userOptions);
  return (site: Site) => {    site.process(options.extensions, (pages) => concurrent(pages, inline));
    site.addEventListener("beforeUpdate", () => cache.clear());
    const selector = `[${options.attribute}]`;
    async function inline(page: Page) {      const templateElements = Array.from(        page.document!.querySelectorAll("template"),      )        .flatMap((template) =>          Array.from(template.content.querySelectorAll(selector))        );      for (        const element of [          ...Array.from(page.document!.querySelectorAll(selector)),          ...templateElements,        ]      ) {        await runInline(page.data.url, element);        element.removeAttribute(options.attribute);      }    }
    function runInline(url: string, element: Element) {      if (element.hasAttribute("href")) {        return element.getAttribute("rel") === "stylesheet"          ? inlineStyles(url, element)          : inlineHref(url, element);      }
      if (element.hasAttribute("src")) {        return element.nodeName === "SCRIPT"          ? inlineScript(url, element)          : inlineSrc(url, element);      }    }
    function getContent(path: string, asDataUrl = false) {      // Ensure the path starts with "/"      path = posix.join("/", path);      const id = JSON.stringify([path, asDataUrl]);
      if (!cache.has(id)) {        cache.set(id, readContent(path, asDataUrl));      }
      return cache.get(id);    }
    async function readContent(path: string, asDataUrl: boolean) {      const url = posix.join(        "/",        posix.relative(site.options.location.pathname, path),      );
      const content = await getFileContent(        site,        url,        asDataUrl ? binaryLoader : textLoader,      );
      // Return the raw content      if (!asDataUrl) {        return content;      }
      // Return the data URL      const ext = posix.extname(path);      const type = contentType(ext);
      if (!type) {        log.warn(`[Inline plugin] Unknown file format ${path}`);        return;      }
      return `data:${type};base64,${encodeBase64(content)}`;    }
    function migrateAttributes(      from: Element,      to: Element,      attributes: string[],    ) {      for (const { name, value } of Array.from(from.attributes)) {        const shouldCopy = [...attributes, ...options.copyAttributes].some(          (attr) => attr instanceof RegExp ? attr.test(name) : attr === name,        );        if (shouldCopy && !to.hasAttribute(name)) {          to.setAttribute(name, value);        }      }    }
    async function inlineStyles(url: string, element: Element) {      const path = posix.resolve(url, element.getAttribute("href")!);      const style = element.ownerDocument!.createElement("style");
      migrateAttributes(element, style, ["id", "class", "nonce", "title"]);
      try {        let content = await getContent(path);        if (element.hasAttribute("media")) {          content = `@media ${element.getAttribute("media")} { ${content} }`;        }        style.innerHTML = content;        element.replaceWith(style);      } catch (cause) {        log.error(          `[Inline plugin] Unable to inline the file <gray>${path}</gray> in the page <gray>${url}</gray> (${cause.message})})`,        );      }    }
    async function inlineScript(url: string, element: Element) {      const path = posix.resolve(url, element.getAttribute("src")!);
      try {        element.textContent = await getContent(path);        element.removeAttribute("src");      } catch (cause) {        log.error(          `[Inline plugin] Unable to inline the file <gray>${path}</gray> in the page <gray>${url}</gray> (${cause.message})})`,        );      }    }
    async function inlineSrc(url: string, element: Element) {      const path = posix.resolve(url, element.getAttribute("src")!);      const ext = posix.extname(path);
      try {        if (ext === ".svg") {          const content = await getContent(path);          const div = element.ownerDocument!.createElement("div");          div.innerHTML = content;          const svg = div.firstElementChild;
          if (svg) {            const width = parseInt(element.getAttribute("width") || "0");            const height = parseInt(element.getAttribute("height") || "0");            const viewBox = svg.getAttribute("viewBox")?.split(" ");
            if (width && height) {              svg.setAttribute("width", String(width));              svg.setAttribute("height", String(height));            } else if (width) {              svg.setAttribute("width", String(width));              if (viewBox?.length === 4) {                const ratio = width / parseInt(viewBox[2]);                svg.setAttribute(                  "height",                  String(parseInt(viewBox[3]) * ratio),                );              }            } else if (height) {              svg.setAttribute("height", String(height));              if (viewBox?.length === 4) {                const ratio = height / parseInt(viewBox[3]);                svg.setAttribute("width", String(parseInt(viewBox[2]) * ratio));              }            }
            migrateAttributes(element, svg, ["id", "class", "width", "height"]);
            element.replaceWith(svg);          }          return;        }
        element.setAttribute("src", await getContent(path, true));      } catch (cause) {        log.error(          `[Inline plugin] Unable to inline the file <gray>${path}</gray> in the page <gray>${url}</gray> (${cause.message})})`,        );      }    }
    async function inlineHref(url: string, element: Element) {      const path = posix.resolve(url, element.getAttribute("href")!);
      try {        element.setAttribute("href", await getContent(path, true));      } catch (cause) {        log.error(          `[Inline plugin] Unable to inline the file <gray>${path}</gray> in the page <gray>${url}</gray> (${cause.message})})`,        );      }    }  };}
/** Returns the content of a file or page */async function getFileContent(  site: Site,  url: string,  loader: Loader,): Promise<string | Uint8Array> {  const content = await site.getContent(url, loader);
  if (!content) {    throw new Error(`Unable to find the file "${url}"`);  }
  return content;}