@zumer/snapdom 1.9.11 → 1.9.12-dev.0

package/dist/snapdom.mjs

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.1.9.10
+* v.1.9.12-dev.0
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -127,10 +127,25 @@ var snapLogger = createSnapLogger("[snapDOM]", { ttlMs: 3 * 6e4, maxEntries: 10
 var _inflight = /* @__PURE__ */ new Map();
 var _errorCache = /* @__PURE__ */ new Map();
 function isSpecialURL(url) {
-  return /^data:|^blob:|^about:blank$/.test(url);
+  return /^data:|^blob:|^about:blank$/i.test(url);
+}
+function isAlreadyProxied(url, useProxy) {
+  try {
+    const baseHref = typeof location !== "undefined" && location.href ? location.href : "http://localhost/";
+    const proxyBaseRaw = useProxy.includes("{url}") ? useProxy.split("{url}")[0] : useProxy;
+    const proxyBase = new URL(proxyBaseRaw || ".", baseHref);
+    const u = new URL(url, baseHref);
+    if (u.origin === proxyBase.origin) return true;
+    const sp = u.searchParams;
+    if (sp && (sp.has("url") || sp.has("target"))) return true;
+  } catch {
+  }
+  return false;
 }
 function shouldProxy(url, useProxy) {
-  if (!useProxy || isSpecialURL(url)) return false;
+  if (!useProxy) return false;
+  if (isSpecialURL(url)) return false;
+  if (isAlreadyProxied(url, useProxy)) return false;
   try {
     const base = typeof location !== "undefined" && location.href ? location.href : "http://localhost/";
     const u = new URL(url, base);
@@ -141,8 +156,19 @@ function shouldProxy(url, useProxy) {
 }
 function applyProxy(url, useProxy) {
   if (!useProxy) return url;
-  if (useProxy.includes("{url}")) return useProxy.replace("{url}", encodeURIComponent(url));
-  const sep = useProxy.endsWith("?") ? "" : useProxy.includes("?") ? "&" : "?";
+  if (useProxy.includes("{url}")) {
+    return useProxy.replace("{urlRaw}", safeEncodeURI(url)).replace("{url}", encodeURIComponent(url));
+  }
+  if (/[?&]url=?$/.test(useProxy)) {
+    return `${useProxy}${encodeURIComponent(url)}`;
+  }
+  if (useProxy.endsWith("?")) {
+    return `${useProxy}url=${encodeURIComponent(url)}`;
+  }
+  if (useProxy.endsWith("/")) {
+    return `${useProxy}${safeEncodeURI(url)}`;
+  }
+  const sep = useProxy.includes("?") ? "&" : "?";
   return `${useProxy}${sep}url=${encodeURIComponent(url)}`;
 }
 function blobToDataURL(blob) {
@@ -169,6 +195,65 @@ async function snapFetch(url, options = {}) {
   const errorTTL = options.errorTTL ?? 8e3;
   const headers = options.headers || {};
   const silent = !!options.silent;
+  if (/^data:/i.test(url)) {
+    try {
+      if (as === "text") {
+        return { ok: true, data: String(url), status: 200, url, fromCache: false };
+      }
+      if (as === "dataURL") {
+        return {
+          ok: true,
+          data: String(url),
+          status: 200,
+          url,
+          fromCache: false,
+          mime: String(url).slice(5).split(";")[0] || ""
+        };
+      }
+      const [, meta = "", data = ""] = String(url).match(/^data:([^,]*),(.*)$/) || [];
+      const isBase64 = /;base64/i.test(meta);
+      const bin = isBase64 ? atob(data) : decodeURIComponent(data);
+      const bytes = new Uint8Array([...bin].map((c) => c.charCodeAt(0)));
+      const b = new Blob([bytes], { type: (meta || "").split(";")[0] || "" });
+      return { ok: true, data: b, status: 200, url, fromCache: false, mime: b.type || "" };
+    } catch {
+      return { ok: false, data: null, status: 0, url, fromCache: false, reason: "special_url_error" };
+    }
+  }
+  if (/^blob:/i.test(url)) {
+    try {
+      const resp = await fetch(url);
+      if (!resp.ok) {
+        return { ok: false, data: null, status: resp.status, url, fromCache: false, reason: "http_error" };
+      }
+      const blob = await resp.blob();
+      const mime = blob.type || resp.headers.get("content-type") || "";
+      if (as === "dataURL") {
+        const dataURL = await blobToDataURL(blob);
+        return { ok: true, data: dataURL, status: resp.status, url, fromCache: false, mime };
+      }
+      if (as === "text") {
+        const text = await blob.text();
+        return { ok: true, data: text, status: resp.status, url, fromCache: false, mime };
+      }
+      return { ok: true, data: blob, status: resp.status, url, fromCache: false, mime };
+    } catch {
+      return { ok: false, data: null, status: 0, url, fromCache: false, reason: "network" };
+    }
+  }
+  if (/^about:blank$/i.test(url)) {
+    if (as === "dataURL") {
+      return {
+        ok: true,
+        data: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==",
+        status: 200,
+        url,
+        fromCache: false,
+        mime: "image/png"
+      };
+    }
+    return { ok: true, data: as === "text" ? "" : new Blob([]), status: 200, url, fromCache: false };
+  }
   const key = makeKey(url, { as, timeout, useProxy, errorTTL });
   const e = _errorCache.get(key);
   if (e && e.until > Date.now()) {
@@ -197,7 +282,7 @@ async function snapFetch(url, options = {}) {
       const resp = await fetch(finalURL, { signal: ctrl.signal, credentials: cred, headers });
       if (!resp.ok) {
         const result = { ok: false, data: null, status: resp.status, url: finalURL, fromCache: false, reason: "http_error" };
-        _errorCache.set(key, { until: Date.now() + errorTTL, result });
+        if (errorTTL > 0) _errorCache.set(key, { until: Date.now() + errorTTL, result });
         if (!silent) {
           const short = `${resp.status} ${resp.statusText || ""}`.trim();
           snapLogger.warnOnce(
@@ -222,7 +307,9 @@ async function snapFetch(url, options = {}) {
     } catch (err) {
       const reason = err && typeof err === "object" && "name" in err && err.name === "AbortError" ? String(err.message || "").includes("timeout") ? "timeout" : "abort" : "network";
       const result = { ok: false, data: null, status: 0, url: finalURL, fromCache: false, reason };
-      _errorCache.set(key, { until: Date.now() + errorTTL, result });
+      if (!/^blob:/i.test(url) && errorTTL > 0) {
+        _errorCache.set(key, { until: Date.now() + errorTTL, result });
+      }
       if (!silent) {
         const k = `${reason}:${as}:${new URL(url, location?.href ?? "http://localhost/").origin}`;
         const tips = reason === "timeout" ? `Timeout after ${timeout}ms. Consider increasing timeout or using a proxy for ${url}` : reason === "abort" ? `Request aborted while fetching ${as} ${url}` : `Network/CORS issue while fetching ${as} ${url}. A proxy may be required`;
@@ -898,19 +985,27 @@ async function deepClone(node, sessionCache, options) {
     return node.cloneNode(true);
   }
   if (node.getAttribute("data-capture") === "exclude") {
-    const spacer = document.createElement("div");
-    const rect = node.getBoundingClientRect();
-    spacer.style.cssText = `display:inline-block;width:${rect.width}px;height:${rect.height}px;visibility:hidden;`;
-    return spacer;
+    if (options.excludeMode === "visuallyHide") {
+      const spacer = document.createElement("div");
+      const rect = node.getBoundingClientRect();
+      spacer.style.cssText = `display:inline-block;width:${rect.width}px;height:${rect.height}px;visibility:hidden;`;
+      return spacer;
+    } else if (options.excludeMode === "remove") {
+      return null;
+    }
   }
   if (options.exclude && Array.isArray(options.exclude)) {
     for (const selector of options.exclude) {
       try {
         if (node.matches?.(selector)) {
-          const spacer = document.createElement("div");
-          const rect = node.getBoundingClientRect();
-          spacer.style.cssText = `display:inline-block;width:${rect.width}px;height:${rect.height}px;visibility:hidden;`;
-          return spacer;
+          if (options.excludeMode === "visuallyHide") {
+            const spacer = document.createElement("div");
+            const rect = node.getBoundingClientRect();
+            spacer.style.cssText = `display:inline-block;width:${rect.width}px;height:${rect.height}px;visibility:hidden;`;
+            return spacer;
+          } else if (options.excludeMode === "remove") {
+            return null;
+          }
         }
       } catch (err) {
         console.warn(`Invalid selector in exclude option: ${selector}`, err);
@@ -920,10 +1015,14 @@ async function deepClone(node, sessionCache, options) {
   if (typeof options.filter === "function") {
     try {
       if (!options.filter(node)) {
-        const spacer = document.createElement("div");
-        const rect = node.getBoundingClientRect();
-        spacer.style.cssText = `display:inline-block;width:${rect.width}px;height:${rect.height}px;visibility:hidden;`;
-        return spacer;
+        if (options.filterMode === "visuallyHide") {
+          const spacer = document.createElement("div");
+          const rect = node.getBoundingClientRect();
+          spacer.style.cssText = `display:inline-block;width:${rect.width}px;height:${rect.height}px;visibility:hidden;`;
+          return spacer;
+        } else if (options.filterMode === "remove") {
+          return null;
+        }
       }
     } catch (err) {
       console.warn("Error in filter function:", err);
@@ -2385,7 +2484,7 @@ async function captureDOM(element, options) {
           const families = new Set(
             Array.from(required).map((k) => String(k).split("__")[0]).filter(Boolean)
           );
-          await ensureFontsReady(families, 5);
+          await ensureFontsReady(families, 2);
         }
         fontsCSS = await embedCustomFonts({
           required,
@@ -2660,7 +2759,9 @@ function createContext(options = {}) {
     scale: options.scale ?? 1,
     // DOM filters
     exclude: options.exclude ?? [],
+    excludeMode: options.excludeMode ?? "visuallyHide",
     filter: options.filter ?? null,
+    filterMode: options.filterMode ?? "visuallyHide",
     placeholders: options.placeholders !== false,
     // default true
     // Fuentes
@@ -2703,24 +2804,12 @@ async function toImg(url, options) {
 // src/exporters/toCanvas.js
 async function toCanvas(url, options) {
   const { scale, dpr } = options;
-  const safari = isSafari();
   const img = new Image();
   img.crossOrigin = "anonymous";
   img.loading = "eager";
   img.decoding = "sync";
   img.src = url;
-  let tempSlot = null;
-  if (safari) {
-    tempSlot = document.createElement("div");
-    tempSlot.setAttribute("aria-hidden", "true");
-    tempSlot.style.cssText = "position:absolute;left:-99999px;top:0;width:0;height:0;overflow:hidden;opacity:0;pointer-events:none;contain:size layout style;";
-    document.body.appendChild(tempSlot);
-    tempSlot.appendChild(img);
-  }
   await img.decode();
-  if (safari) {
-    await new Promise((r) => setTimeout(r, 100));
-  }
   const width = img.naturalWidth * scale;
   const height = img.naturalHeight * scale;
   const canvas = document.createElement("canvas");
@@ -2731,12 +2820,6 @@ async function toCanvas(url, options) {
   const ctx = canvas.getContext("2d");
   if (dpr !== 1) ctx.scale(dpr, dpr);
   ctx.drawImage(img, 0, 0, width, height);
-  if (tempSlot && tempSlot.parentNode) {
-    try {
-      tempSlot.parentNode.removeChild(tempSlot);
-    } catch {
-    }
-  }
   return canvas;
 }
 
@@ -2792,8 +2875,19 @@ async function download(url, options) {
 
 // src/api/snapdom.js
 var INTERNAL_TOKEN = Symbol("snapdom.internal");
+var _safariWarmup = false;
 async function snapdom(element, userOptions) {
   if (!element) throw new Error("Element cannot be null or undefined");
+  if (isSafari()) {
+    for (let i = 0; i < 3; i++) {
+      try {
+        await safariWarmup(element, userOptions);
+        console.log("Iteraci\xF3n n\xFAmero:", i);
+        _safariWarmup = false;
+      } catch (error) {
+      }
+    }
+  }
   const context = createContext(userOptions);
   if (context.iconFonts && context.iconFonts.length > 0) extendIconFonts(context.iconFonts);
   if (!context.snap) {
@@ -2837,24 +2931,65 @@ snapdom.toPng = (el, options) => snapdom(el, { ...options, format: "png" }).then
 snapdom.toJpg = (el, options) => snapdom(el, { ...options, format: "jpeg" }).then((result) => result.toJpg());
 snapdom.toWebp = (el, options) => snapdom(el, { ...options, format: "webp" }).then((result) => result.toWebp());
 snapdom.download = (el, options) => snapdom(el, options).then((result) => result.download());
+async function safariWarmup(element, baseOptions) {
+  if (_safariWarmup) return;
+  const preflight = {
+    ...baseOptions,
+    fast: true,
+    embedFonts: true,
+    scale: 0.2
+  };
+  let url;
+  try {
+    url = await captureDOM(element, preflight);
+  } catch {
+    return;
+  }
+  await new Promise((resolve) => {
+    const img = new Image();
+    img.decoding = "sync";
+    img.loading = "eager";
+    img.style.position = "fixed";
+    img.style.left = 0;
+    img.style.top = 0;
+    img.style.width = "10px";
+    img.style.height = "10px";
+    img.style.opacity = "0.01";
+    img.style.transform = "translateZ(10px)";
+    img.style.willChange = "transform,opacity;";
+    img.src = url;
+    const cleanup = async () => {
+      await new Promise((r) => setTimeout(r, 100));
+      if (img && img.parentNode) img.parentNode.removeChild(img);
+      _safariWarmup = true;
+      resolve();
+    };
+    document.body.appendChild(img);
+    cleanup();
+  });
+}
 
 // src/api/preCache.js
 async function preCache(root = document, options = {}) {
   const {
     embedFonts = true,
-    cacheOpt = "full",
     useProxy = ""
   } = options;
-  applyCachePolicy(cacheOpt);
+  const cacheMode = options.cache ?? options.cacheOpt ?? "full";
+  applyCachePolicy(cacheMode);
   try {
-    await document.fonts.ready;
+    await document.fonts?.ready;
+  } catch {
+  }
+  try {
+    precacheCommonTags();
   } catch {
   }
-  precacheCommonTags();
   cache.session = cache.session || {};
   if (!cache.session.styleCache) {
     cache.session.styleCache = /* @__PURE__ */ new WeakMap();
   }
+  cache.image = cache.image || /* @__PURE__ */ new Map();
   try {
     await inlineBackgroundImages(
       root,
@@ -2875,11 +3010,14 @@ async function preCache(root = document, options = {}) {
   }
   const promises = [];
   for (const img of imgEls) {
-    const src = img?.src;
+    const src = img?.currentSrc || img?.src;
     if (!src) continue;
     if (!cache.image.has(src)) {
-      const p = Promise.resolve().then(() => snapFetch(src, { as: "dataURL", useProxy })).then((dataURL) => {
-        cache.image.set(src, dataURL);
+      const p = Promise.resolve().then(async () => {
+        const res = await snapFetch(src, { as: "dataURL", useProxy });
+        if (res?.ok && typeof res.data === "string") {
+          cache.image.set(src, res.data);
+        }
       }).catch(() => {
       });
       promises.push(p);
@@ -2906,7 +3044,8 @@ async function preCache(root = document, options = {}) {
     try {
       const required = collectUsedFontVariants(root);
       const usedCodepoints = collectUsedCodepoints(root);
-      if (typeof isSafari === "function" ? isSafari() : !!isSafari) {
+      const safari = typeof isSafari === "function" ? isSafari() : !!isSafari;
+      if (safari) {
         const families = new Set(
           Array.from(required).map((k) => String(k).split("__")[0]).filter(Boolean)
         );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zumer/snapdom",
-  "version": "1.9.11",
+  "version": "1.9.12-dev.0",
   "description": "snapDOM captures HTML elements to images with exceptional speed and accuracy.",
   "main": "dist/snapdom.js",
   "module": "dist/snapdom.mjs",

package/types/snapdom.d.ts

@@ -13,6 +13,9 @@ export type BlobType = "svg" | RasterMime;
 export type IconFontMatcher = string | RegExp;
 export type CachePolicy = "disabled" | "full" | "auto" | "soft";
 
+export type ExcludeMode = 'visuallyHide' | 'remove';
+export type FilterMode = 'visuallyHide' | 'remove';
+
 export interface LocalFontDescriptor {
   /** CSS font-family name (e.g. "Inter"). */
   family: string;
@@ -87,12 +90,24 @@ export interface CaptureOptions {
   /** CSS selectors removed from the cloned subtree before processing. */
   exclude?: string[];
 
+  /**
+   * Mode applied to excluded nodes of the cloned tree.
+   * Default: "visuallyHide"
+   */
+  excludeMode?: ExcludeMode;
+
   /**
    * Advanced node filter; return false to exclude a node during traversal.
    * Applied to the cloned subtree.
    */
   filter?: (el: Element) => boolean;
 
+  /**
+   * Mode applied to filtered nodes of the cloned tree.
+   * Default: "visuallyHide"
+   */
+  filterMode?: FilterMode;
+
   /**
    * Whether to synthesize placeholders for broken images, etc.
    * Default: true