@zumer/snapdom 1.9.11 → 1.9.12-dev.0

package/README.md

@@ -202,7 +202,9 @@ All capture methods accept an `options` object:
 | `useProxy`        | string   | `''`     | Proxy base for CORS fallbacks                   |
 | `type`            | string   | `svg`    | Default Blob type (`svg`\|`png`\|`jpg`\|`webp`) |
 | `exclude`         | string[] | -        | CSS selectors to exclude                        |
+| `excludeMode`     | string   | 'visuallyHide' | Controls how `exclude` works with nodes    |
 | `filter`          | function | -        | Custom predicate `(el) => boolean`              |
+| `filterMode`      | string   | 'visuallyHide' | Controls how `filter` works with nodes    |
 | `cache`           | string   | `"soft"` | Control internal caches: `disabled`, `soft`, `auto`, `full` |
 | `defaultImageUrl` | string \| function  | -                  | Fallback image when an `<img>` fails. If a function is provided, it receives `{ width?, height?, src?, element }` and must return a URL (string or Promise<string>). Useful for placeholder services (e.g. `https://placehold.co/{width}x{height}`) |
 
@@ -304,7 +306,9 @@ await snapdom.toPng(el, {
 ### Filtering nodes: `exclude` vs `filter`
 
 * `exclude`: remove by **selector**.
+* `excludeMode`: `visuallyHide` applies `visibility:hidden` CSS rule on excluded nodes and the layout remains as the original. `remove` do not clone excluded nodes at all.
 * `filter`: advanced predicate per element (return `false` to drop).
+* `filterMode`: `visuallyHide` applies `visibility:hidden` CSS rule on filtered nodes and the layout remains as the original. `remove` do not clone filtered nodes at all.
 
 **Example: filter out elements with `display:none`:**
 ```js
@@ -345,7 +349,7 @@ await preCache({
 
 ### Cache control
 
-SnapDOM maintains internal caches for images, backgrounds, resources, styles, and fonts.  
+SnapDOM maintains internal caches for images, backgrounds, resources, styles, and fonts.
 You can control how they are cleared between captures using the `cache` option:
 
 | Mode        | Description                                                                 |
@@ -382,7 +386,7 @@ Values are **average capture time (ms)** → lower is better.
 
 ### Simple elements
 
-| Scenario                 | SnapDOM v1.9.10 | SnapDOM v1.9.9 | html2canvas | html-to-image |
+| Scenario                 | SnapDOM current | SnapDOM v1.9.9 | html2canvas | html-to-image |
 | ------------------------ | --------------- | -------------- | ----------- | ------------- |
 | Small (200×100)          | **0.5 ms**      | 0.8 ms         | 67.7 ms     | 3.1 ms        |
 | Modal (400×300)          | **0.5 ms**      | 0.8 ms         | 75.5 ms     | 3.6 ms        |
@@ -394,7 +398,7 @@ Values are **average capture time (ms)** → lower is better.
 
 ### Complex elements
 
-| Scenario                 | SnapDOM v1.9.10 | SnapDOM v1.9.9 | html2canvas | html-to-image |
+| Scenario                 | SnapDOM current | SnapDOM v1.9.9 | html2canvas | html-to-image |
 | ------------------------ | --------------- | -------------- | ----------- | ------------- |
 | Small (200×100)          | **1.6 ms**      | 3.3 ms         | 68.0 ms     | 14.3 ms       |
 | Modal (400×300)          | **2.9 ms**      | 6.8 ms         | 87.5 ms     | 34.8 ms       |

package/dist/snapdom.js

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.1.9.10
+* v.1.9.12-dev.0
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -167,10 +167,25 @@
   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 (e) {
+    }
+    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);
@@ -181,8 +196,19 @@
   }
   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) {
@@ -212,6 +238,65 @@
       const errorTTL = (_c = options.errorTTL) != null ? _c : 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 (e2) {
+          return { ok: false, data: null, status: 0, url, fromCache: false, reason: "special_url_error" };
+        }
+      }
+      if (/^blob:/i.test(url)) {
+        try {
+          const resp = yield fetch(url);
+          if (!resp.ok) {
+            return { ok: false, data: null, status: resp.status, url, fromCache: false, reason: "http_error" };
+          }
+          const blob = yield resp.blob();
+          const mime = blob.type || resp.headers.get("content-type") || "";
+          if (as === "dataURL") {
+            const dataURL = yield blobToDataURL(blob);
+            return { ok: true, data: dataURL, status: resp.status, url, fromCache: false, mime };
+          }
+          if (as === "text") {
+            const text = yield 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 (e2) {
+          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()) {
@@ -241,7 +326,7 @@
           const resp = yield 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(
@@ -266,7 +351,9 @@
         } 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, (_b2 = location == null ? void 0 : location.href) != null ? _b2 : "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`;
@@ -956,19 +1043,27 @@
         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 ((_a = node.matches) == null ? void 0 : _a.call(node, 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);
@@ -978,10 +1073,14 @@
       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);
@@ -2480,7 +2579,7 @@
               const families = new Set(
                 Array.from(required).map((k) => String(k).split("__")[0]).filter(Boolean)
               );
-              yield ensureFontsReady(families, 5);
+              yield ensureFontsReady(families, 2);
             }
             fontsCSS = yield embedCustomFonts({
               required,
@@ -2749,7 +2848,7 @@
     return "soft";
   }
   function createContext(options = {}) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
     const resolvedFormat = (_a = options.format) != null ? _a : "png";
     const cachePolicy = normalizeCachePolicy(options.cache);
     return {
@@ -2759,29 +2858,31 @@
       scale: (_d = options.scale) != null ? _d : 1,
       // DOM filters
       exclude: (_e = options.exclude) != null ? _e : [],
-      filter: (_f = options.filter) != null ? _f : null,
+      excludeMode: (_f = options.excludeMode) != null ? _f : "visuallyHide",
+      filter: (_g = options.filter) != null ? _g : null,
+      filterMode: (_h = options.filterMode) != null ? _h : "visuallyHide",
       placeholders: options.placeholders !== false,
       // default true
       // Fuentes
-      embedFonts: (_g = options.embedFonts) != null ? _g : false,
+      embedFonts: (_i = options.embedFonts) != null ? _i : false,
       iconFonts: Array.isArray(options.iconFonts) ? options.iconFonts : options.iconFonts ? [options.iconFonts] : [],
       localFonts: Array.isArray(options.localFonts) ? options.localFonts : [],
-      excludeFonts: (_h = options.excludeFonts) != null ? _h : void 0,
-      defaultImageUrl: (_i = options.defaultImageUrl) != null ? _i : void 0,
+      excludeFonts: (_j = options.excludeFonts) != null ? _j : void 0,
+      defaultImageUrl: (_k = options.defaultImageUrl) != null ? _k : void 0,
       /** Cache policy (disabled|full|auto|soft). Default: "soft" */
       /** @type {CachePolicy} */
       cache: cachePolicy,
       // Red
       useProxy: typeof options.useProxy === "string" ? options.useProxy : "",
       // Salida
-      width: (_j = options.width) != null ? _j : null,
-      height: (_k = options.height) != null ? _k : null,
+      width: (_l = options.width) != null ? _l : null,
+      height: (_m = options.height) != null ? _m : null,
       format: resolvedFormat,
-      type: (_l = options.type) != null ? _l : "svg",
-      quality: (_m = options.quality) != null ? _m : 0.92,
-      dpr: (_n = options.dpr) != null ? _n : window.devicePixelRatio || 1,
-      backgroundColor: (_o = options.backgroundColor) != null ? _o : ["jpg", "jpeg", "webp"].includes(resolvedFormat) ? "#ffffff" : null,
-      filename: (_p = options.filename) != null ? _p : "snapDOM"
+      type: (_n = options.type) != null ? _n : "svg",
+      quality: (_o = options.quality) != null ? _o : 0.92,
+      dpr: (_p = options.dpr) != null ? _p : window.devicePixelRatio || 1,
+      backgroundColor: (_q = options.backgroundColor) != null ? _q : ["jpg", "jpeg", "webp"].includes(resolvedFormat) ? "#ffffff" : null,
+      filename: (_r = options.filename) != null ? _r : "snapDOM"
       // Plugins (reservado para futura activación)
       // plugins: normalizePlugins(...),
     };
@@ -2805,24 +2906,12 @@
   function toCanvas(url, options) {
     return __async(this, null, function* () {
       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);
-      }
       yield img.decode();
-      if (safari) {
-        yield new Promise((r) => setTimeout(r, 100));
-      }
       const width = img.naturalWidth * scale;
       const height = img.naturalHeight * scale;
       const canvas = document.createElement("canvas");
@@ -2833,12 +2922,6 @@
       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 (e) {
-        }
-      }
       return canvas;
     });
   }
@@ -2901,9 +2984,20 @@
 
   // src/api/snapdom.js
   var INTERNAL_TOKEN = Symbol("snapdom.internal");
+  var _safariWarmup = false;
   function snapdom(element, userOptions) {
     return __async(this, null, function* () {
       if (!element) throw new Error("Element cannot be null or undefined");
+      if (isSafari()) {
+        for (let i = 0; i < 3; i++) {
+          try {
+            yield 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) {
@@ -2948,26 +3042,68 @@
   snapdom.toJpg = (el, options) => snapdom(el, __spreadProps(__spreadValues({}, options), { format: "jpeg" })).then((result) => result.toJpg());
   snapdom.toWebp = (el, options) => snapdom(el, __spreadProps(__spreadValues({}, options), { format: "webp" })).then((result) => result.toWebp());
   snapdom.download = (el, options) => snapdom(el, options).then((result) => result.download());
+  function safariWarmup(element, baseOptions) {
+    return __async(this, null, function* () {
+      if (_safariWarmup) return;
+      const preflight = __spreadProps(__spreadValues({}, baseOptions), {
+        fast: true,
+        embedFonts: true,
+        scale: 0.2
+      });
+      let url;
+      try {
+        url = yield captureDOM(element, preflight);
+      } catch (e) {
+        return;
+      }
+      yield 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(null, null, function* () {
+          yield 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
   function preCache() {
     return __async(this, arguments, function* (root = document, options = {}) {
-      var _a;
+      var _a, _b, _c, _d;
       const {
         embedFonts = true,
-        cacheOpt = "full",
         useProxy = ""
       } = options;
-      applyCachePolicy(cacheOpt);
+      const cacheMode = (_b = (_a = options.cache) != null ? _a : options.cacheOpt) != null ? _b : "full";
+      applyCachePolicy(cacheMode);
       try {
-        yield document.fonts.ready;
+        yield (_c = document.fonts) == null ? void 0 : _c.ready;
+      } catch (e) {
+      }
+      try {
+        precacheCommonTags();
       } catch (e) {
       }
-      precacheCommonTags();
       cache.session = cache.session || {};
       if (!cache.session.styleCache) {
         cache.session.styleCache = /* @__PURE__ */ new WeakMap();
       }
+      cache.image = cache.image || /* @__PURE__ */ new Map();
       try {
         yield inlineBackgroundImages(
           root,
@@ -2988,12 +3124,15 @@
       }
       const promises = [];
       for (const img of imgEls) {
-        const src = img == null ? void 0 : img.src;
+        const src = (img == null ? void 0 : img.currentSrc) || (img == null ? void 0 : 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);
-          }).catch(() => {
+          const p = Promise.resolve().then(() => __async(null, null, function* () {
+            const res = yield snapFetch(src, { as: "dataURL", useProxy });
+            if ((res == null ? void 0 : res.ok) && typeof res.data === "string") {
+              cache.image.set(src, res.data);
+            }
+          })).catch(() => {
           });
           promises.push(p);
         }
@@ -3019,7 +3158,8 @@
         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)
             );
@@ -3030,7 +3170,7 @@
             usedCodepoints,
             exclude: options.excludeFonts,
             localFonts: options.localFonts,
-            useProxy: (_a = options.useProxy) != null ? _a : useProxy
+            useProxy: (_d = options.useProxy) != null ? _d : useProxy
           });
         } catch (e) {
         }