image-exporter 1.1.0 → 1.2.0

package/src/cors-proxy/proxy-css.ts

@@ -1,48 +0,0 @@
-import { log } from "../logger";
-import { Config } from "../types";
-import { isValidUrl } from "./is-valid-url";
-
-/**
- * proxyCSS
- *
- * Proxies all linked CSS files and the absolute URLs inside them, including fonts and images.
- * Upon completion of capture, the links will be restored and the style elements removed.
- */
-export async function proxyCSS(config: Config) {
-  const stylesheetElements = document.querySelectorAll('link[rel="stylesheet"]');
-  log.verbose("stylesheet elements to proxy", stylesheetElements.length);
-
-  for (let stylesheetElement of stylesheetElements) {
-    const stylesheetURL = stylesheetElement.getAttribute("href");
-
-    // Exclude data URLs, invalid URLs, and already proxied URLs
-    if (!stylesheetURL) continue;
-    if (stylesheetURL.startsWith("data:")) continue;
-    if (stylesheetURL.startsWith(config.corsProxyBaseUrl)) continue;
-    if (!isValidUrl(stylesheetURL)) continue;
-
-    stylesheetElement.setAttribute("crossorigin", "anonymous");
-    const proxiedURL = config.corsProxyBaseUrl + encodeURIComponent(stylesheetURL);
-
-    try {
-      // Fetch the CSS content
-      const response = await fetch(proxiedURL);
-      let cssContent = await response.text();
-
-      // Insert the parsed CSS content into a <style> element
-      const styleElement = document.createElement("style");
-      styleElement.textContent = cssContent;
-      styleElement.setAttribute(
-        "original-link-element",
-        encodeURIComponent(stylesheetElement.outerHTML)
-      );
-
-      // Insert the <style> element directly after the original <link> element to easy restoration
-      stylesheetElement.insertAdjacentElement("afterend", styleElement);
-      stylesheetElement.remove();
-      log.verbose("Proxied: ", stylesheetURL);
-    } catch (error) {
-      console.error("Error fetching CSS:", error);
-    }
-  }
-}

package/src/cors-proxy/proxy-images.ts

@@ -1,34 +0,0 @@
-import { Config } from "../types";
-import { isValidUrl } from "./is-valid-url";
-import { log } from "../logger";
-
-/**
- * proxyImages
- *
- * Proxies all images inside capture elements.
- * The original src is stored for later restoration.
- */
-export async function proxyImages(
-  config: Config,
-  elements: HTMLElement[] | NodeListOf<HTMLElement>
-) {
-  try {
-    const elementArray = Array.from(elements);
-    if (!elementArray.length) return;
-    log.verbose("images to proxy", elementArray.length);
-
-    for (const element of elementArray) {
-      const images = Array.from(element.querySelectorAll("img")) as HTMLImageElement[];
-      for (const img of images) {
-        if (isValidUrl(img.src) && !img.src.startsWith(config.corsProxyBaseUrl)) {
-          img.setAttribute("original-src", img.src);
-          img.src = config.corsProxyBaseUrl + encodeURIComponent(img.src);
-          log.verbose("Proxied: ", img.src);
-        }
-      }
-    }
-  } catch (e) {
-    console.error("ImageExporter: Error in proxyImages", e);
-    return;
-  }
-}

package/src/cors-proxy/run.ts

@@ -1,26 +0,0 @@
-import { proxyCSS } from "./proxy-css";
-import { proxyImages } from "./proxy-images";
-import { Config } from "../types";
-import { isValidUrl } from "./is-valid-url";
-import { log } from "../logger";
-
-/**
- * runCorsProxy
- *
- * Proxies all images inside capture elements, as well as all linked CSS files and the absolute URLs inside them.
- * Upon completion of capture, these will be reverted to their original state.
- */
-export async function runCorsProxy(
-  config: Config,
-  elements: HTMLElement[] | NodeListOf<HTMLElement>
-): Promise<void> {
-  try {
-    log.verbose("running CORS proxy");
-    if (!config.corsProxyBaseUrl || !isValidUrl(config.corsProxyBaseUrl)) return;
-
-    await proxyCSS(config);
-    await proxyImages(config, elements);
-  } catch (e) {
-    console.error("ImageExporter: Error in runCorsProxy", e);
-  }
-}

package/src/index.ts

@@ -1,14 +0,0 @@
-/* -------------------------------------------------------------------------- */
-/*                               Image Exporter                               */
-/*                                                                            */
-/*                            by briantuckerdesign                            */
-/* -------------------------------------------------------------------------- */
-import { capture } from "./capture";
-
-/** Exports for use in browser */
-if (typeof window !== "undefined") {
-  (window as any).imageExporter = capture;
-}
-
-/** Exports for use as an imported package */
-export { capture };

package/src/logger.ts

@@ -1,71 +0,0 @@
-import { windowLogging, loggingLevel } from "./capture";
-
-export const log = {
-  info: (...messages: any[]) => logAction(messages, "info"),
-  error: (...messages: any[]) => logAction(messages, "error"),
-  verbose: (...messages: any[]) => logAction(messages, "verbose"),
-  progress: (progress: number, total: number) => logProgress(progress, total),
-  group: {
-    open: (...messages: any[]) => logAction(messages, "group"),
-    close: (...messages: any[]) => logAction(messages, "groupEnd"),
-  },
-};
-
-async function logAction(messages: any[], type: LogType = "info") {
-  const combinedMessage = messages
-    .map((msg) => (typeof msg === "object" ? JSON.stringify(msg) : msg))
-    .join(" ");
-
-  switch (type) {
-    case "info":
-      if (loggingLevel === "info" || loggingLevel === "verbose") {
-        console.log(...messages);
-      }
-      break;
-    case "error":
-      if (loggingLevel === "error" || loggingLevel === "verbose") {
-        console.error(...messages);
-      }
-      break;
-    case "verbose":
-      if (loggingLevel === "verbose") {
-        console.log(...messages);
-      }
-      break;
-    case "group":
-      console.group(...messages);
-      break;
-    case "groupEnd":
-      console.groupEnd();
-      break;
-  }
-
-  if (windowLogging) window.imageExporterLogs.push({ message: combinedMessage, type });
-}
-
-async function logProgress(progress: number, total: number) {
-  if (windowLogging) {
-    window.imageExporterProgress.push([progress, total]);
-  }
-}
-
-type LogType = "info" | "error" | "verbose" | "progress" | "group" | "groupEnd";
-
-type Log = {
-  message: string;
-  type: LogType;
-  progress?: number;
-  total?: number;
-};
-
-type Progress = [number, number];
-
-declare global {
-  interface Window {
-    imageExporterLogs: Log[];
-    imageExporterProgress: Progress[];
-  }
-}
-
-window.imageExporterLogs = [];
-window.imageExporterProgress = [];

package/src/types.d.ts

@@ -1,51 +0,0 @@
-export interface ImageOptions {
-  /** Label for image. Does not include file extension or scale. */
-  label: Label;
-  /** File format, jpg, png, or svg. */
-  format: Format;
-  /** Scale of image. Can be a number or a comma-separated list of numbers. */
-  scale: Scale;
-  /** Quality of image. 0.0 to 1.0, only applies to jpg.*/
-  quality: Quality;
-  /** Include scale in label. True or false. Automatically true if scale is an array. */
-  includeScaleInLabel: IncludeScaleInLabel;
-}
-
-export interface Config extends ImageOptions {
-  /** Download images as files upon capture. */
-  downloadImages: boolean;
-  /** Default label for images. Does not include file extension or scale. */
-  defaultImageLabel: string;
-  /** Label for zip file. Does not include file extension or scale. */
-  zipLabel: Label;
-  /** Base URL for CORS proxy used when fetching external images.
-   *
-   * URLs will be encoded and appended without a `?`. Include your own trailing slash.
-   *
-   * I recommend [cors-proxy-worker](https://github.com/briantuckerdesign/cors-proxy-worker) for production and [local-cors-proxy-encoded](https://github.com/briantuckerdesign/local-cors-proxy-encoded) for development.
-   *
-   * Example: `https://cors-proxy.com/` -> `https://cors-proxy.com/https%3A%2F%2FmyEncodedUrl.com`
-   */
-  corsProxyBaseUrl: string;
-  /** Enable window logging for use by external scripts. */
-  enableWindowLogging: boolean;
-  /** Enable verbose logging for debugging. */
-  loggingLevel: LoggingLevel;
-}
-
-export interface ParsedImageOptions extends ImageOptions {
-  /** After parsing, this will always be a number rather than possibly an array. */
-  scale: number;
-}
-
-export interface Image {
-  dataURL: string;
-  fileName: string;
-}
-
-export type Label = string;
-export type Format = "jpg" | "png" | "svg" | "webp";
-export type Scale = number | number[];
-export type Quality = number;
-export type IncludeScaleInLabel = boolean;
-export type LoggingLevel = "none" | "info" | "error" | "verbose";

package/vite.config.js

@@ -1,35 +0,0 @@
-import { defineConfig } from "vite";
-
-export default defineConfig({
-  test: {
-    environment: "jsdom",
-  },
-  build: {
-    outDir: "dist",
-    emptyOutDir: true,
-    minify: false,
-    lib: {
-      entry: "src/index.ts",
-      name: "image-exporter",
-      fileName: (format) => `image-exporter.${format}.js`,
-    },
-    rollupOptions: {
-      input: "src/index.ts",
-      plugins: [
-        {
-          name: "wrap-in-iife",
-          generateBundle(outputOptions, bundle) {
-            if (outputOptions.format === "umd") {
-              Object.keys(bundle).forEach((fileName) => {
-                const file = bundle[fileName];
-                if (fileName.slice(-3) === ".js" && "code" in file) {
-                  file.code = `(() => {\n${file.code}})()`;
-                }
-              });
-            }
-          },
-        },
-      ],
-    },
-  },
-});