@zumer/snapdom 1.9.5 → 1.9.6-dev.1

package/dist/snapdom.mjs

@@ -1,20 +1,36 @@
 
 /*
 * snapdom
-* v.1.9.5
+* v.1.9.6-dev.0
 * Author Juan Martin Muda
 * License MIT
 **/
 
 
 // src/core/cache.js
-var imageCache = /* @__PURE__ */ new Map();
-var bgCache = /* @__PURE__ */ new Map();
-var resourceCache = /* @__PURE__ */ new Map();
-var defaultStylesCache = /* @__PURE__ */ new Map();
-var baseCSSCache = /* @__PURE__ */ new Map();
-var computedStyleCache = /* @__PURE__ */ new WeakMap();
-var processedFontURLs = /* @__PURE__ */ new Set();
+var cache = {
+  image: /* @__PURE__ */ new Map(),
+  background: /* @__PURE__ */ new Map(),
+  resource: /* @__PURE__ */ new Map(),
+  defaultStyle: /* @__PURE__ */ new Map(),
+  baseStyle: /* @__PURE__ */ new Map(),
+  computedStyle: /* @__PURE__ */ new WeakMap(),
+  font: /* @__PURE__ */ new Set(),
+  snapshot: /* @__PURE__ */ new WeakMap(),
+  snapshotKey: /* @__PURE__ */ new Map(),
+  preStyleMap: /* @__PURE__ */ new Map(),
+  preStyle: /* @__PURE__ */ new WeakMap(),
+  preNodeMap: /* @__PURE__ */ new Map(),
+  reset: resetCache
+};
+function resetCache() {
+  cache.computedStyle = /* @__PURE__ */ new WeakMap();
+  cache.snapshot = /* @__PURE__ */ new WeakMap();
+  cache.snapshotKey.clear();
+  cache.preStyleMap.clear();
+  cache.preStyle = /* @__PURE__ */ new WeakMap();
+  cache.preNodeMap.clear();
+}
 
 // src/utils/cssTools.js
 var commonTags = [
@@ -62,13 +78,13 @@ function precacheCommonTags() {
   }
 }
 function getDefaultStyleForTag(tagName) {
-  if (defaultStylesCache.has(tagName)) {
-    return defaultStylesCache.get(tagName);
+  if (cache.defaultStyle.has(tagName)) {
+    return cache.defaultStyle.get(tagName);
   }
   const skipTags = /* @__PURE__ */ new Set(["script", "style", "meta", "link", "noscript", "template"]);
   if (skipTags.has(tagName)) {
     const empty = {};
-    defaultStylesCache.set(tagName, empty);
+    cache.defaultStyle.set(tagName, empty);
     return empty;
   }
   let sandbox = document.getElementById("snapdom-sandbox");
@@ -92,7 +108,7 @@ function getDefaultStyleForTag(tagName) {
     defaults[prop] = styles.getPropertyValue(prop);
   }
   sandbox.removeChild(el);
-  defaultStylesCache.set(tagName, defaults);
+  cache.defaultStyle.set(tagName, defaults);
   return defaults;
 }
 function getStyleKey(snapshot, tagName, compress = false) {
@@ -128,7 +144,7 @@ function collectUsedTagNames(root) {
 function generateDedupedBaseCSS(usedTagNames) {
   const groups = /* @__PURE__ */ new Map();
   for (let tagName of usedTagNames) {
-    const styles = defaultStylesCache.get(tagName);
+    const styles = cache.defaultStyle.get(tagName);
     if (!styles) continue;
     const key = Object.entries(styles).map(([k, v]) => `${k}:${v};`).sort().join("");
     if (!groups.has(key)) {
@@ -143,8 +159,8 @@ function generateDedupedBaseCSS(usedTagNames) {
   }
   return css;
 }
-function generateCSSClasses(styleMap) {
-  const keySet = new Set(styleMap.values());
+function generateCSSClasses() {
+  const keySet = new Set(cache.preStyleMap.values());
   const classMap = /* @__PURE__ */ new Map();
   let counter = 1;
   for (const key of keySet) {
@@ -155,16 +171,15 @@ function generateCSSClasses(styleMap) {
 
 // src/utils/helpers.js
 async function inlineSingleBackgroundEntry(entry, options = {}) {
-  const match = entry.match(/url\(["']?(.*?)["']?\)/);
-  const rawUrl = match?.[1];
+  const rawUrl = extractURL(entry);
   const isGradient = /^((repeating-)?(linear|radial|conic)-gradient)\(/i.test(entry);
   if (rawUrl) {
     const encodedUrl = safeEncodeURI(rawUrl);
-    if (bgCache.has(encodedUrl)) {
-      return options.skipInline ? void 0 : `url(${bgCache.get(encodedUrl)})`;
+    if (cache.background.has(encodedUrl)) {
+      return options.skipInline ? void 0 : `url(${cache.background.get(encodedUrl)})`;
     } else {
       const dataUrl = await fetchImage(encodedUrl, { useProxy: options.useProxy });
-      bgCache.set(encodedUrl, dataUrl);
+      cache.background.set(encodedUrl, dataUrl);
       return options.skipInline ? void 0 : `url("${dataUrl}")`;
     }
   }
@@ -185,10 +200,10 @@ function getStyle(el, pseudo = null) {
   if (!(el instanceof Element)) {
     return window.getComputedStyle(el, pseudo);
   }
-  let map = computedStyleCache.get(el);
+  let map = cache.computedStyle.get(el);
   if (!map) {
     map = /* @__PURE__ */ new Map();
-    computedStyleCache.set(el, map);
+    cache.computedStyle.set(el, map);
   }
   if (!map.has(pseudo)) {
     const st = window.getComputedStyle(el, pseudo);
@@ -262,13 +277,13 @@ function fetchImage(src, { timeout = 3e3, useProxy = "" } = {}) {
   }
   const crossOriginValue = getCrossOriginMode(src);
   console.log(`[SnapDOM - fetchImage] Start loading image: ${src} with crossOrigin=${crossOriginValue}`);
-  if (imageCache.has(src)) {
+  if (cache.image.has(src)) {
     console.log(`[SnapDOM - fetchImage] Cache hit for: ${src}`);
-    return Promise.resolve(imageCache.get(src));
+    return Promise.resolve(cache.image.get(src));
   }
   const isDataURI = src.startsWith("data:image/");
   if (isDataURI) {
-    imageCache.set(src, src);
+    cache.image.set(src, src);
     return Promise.resolve(src);
   }
   const isSVG = /\.svg(\?.*)?$/i.test(src);
@@ -281,7 +296,7 @@ function fetchImage(src, { timeout = 3e3, useProxy = "" } = {}) {
         });
         const svgText = await response.text();
         const encoded = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgText)}`;
-        imageCache.set(src, encoded);
+        cache.image.set(src, encoded);
         return encoded;
       } catch {
         return fetchWithFallback(src);
@@ -305,12 +320,12 @@ function fetchImage(src, { timeout = 3e3, useProxy = "" } = {}) {
         const ctx = canvas.getContext("2d");
         ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
         const dataURL = canvas.toDataURL("image/png");
-        imageCache.set(src, dataURL);
+        cache.image.set(src, dataURL);
         resolve(dataURL);
       } catch {
         try {
           const fallbackDataURL = await fetchWithFallback(src);
-          imageCache.set(src, fallbackDataURL);
+          cache.image.set(src, fallbackDataURL);
           resolve(fallbackDataURL);
         } catch (e) {
           reject(e);
@@ -322,7 +337,7 @@ function fetchImage(src, { timeout = 3e3, useProxy = "" } = {}) {
       console.error(`[SnapDOM - fetchImage] Image failed to load: ${src}`);
       try {
         const fallbackDataURL = await fetchWithFallback(src);
-        imageCache.set(src, fallbackDataURL);
+        cache.image.set(src, fallbackDataURL);
         resolve(fallbackDataURL);
       } catch (e) {
         reject(e);
@@ -386,8 +401,6 @@ function splitBackgroundImage(bg) {
 }
 
 // src/modules/styles.js
-var snapshotCache = /* @__PURE__ */ new WeakMap();
-var snapshotKeyCache = /* @__PURE__ */ new Map();
 function snapshotComputedStyleFull(style) {
   const result = {};
   for (let i = 0; i < style.length; i++) {
@@ -400,147 +413,182 @@ function snapshotComputedStyleFull(style) {
   }
   return result;
 }
-function inlineAllStyles(source, clone, styleMap, cache, compress) {
+function inlineAllStyles(source, clone, compress) {
   if (source.tagName === "STYLE") return;
-  if (!cache.has(source)) {
-    cache.set(source, getStyle(source));
+  if (!cache.preStyle.has(source)) {
+    cache.preStyle.set(source, getStyle(source));
   }
-  const style = cache.get(source);
-  if (!snapshotCache.has(source)) {
+  const style = cache.preStyle.get(source);
+  if (!cache.snapshot.has(source)) {
     const snapshot2 = snapshotComputedStyleFull(style);
-    snapshotCache.set(source, snapshot2);
+    cache.snapshot.set(source, snapshot2);
   }
-  const snapshot = snapshotCache.get(source);
+  const snapshot = cache.snapshot.get(source);
   const hash = Object.entries(snapshot).sort(([a], [b]) => a.localeCompare(b)).map(([prop, val]) => `${prop}:${val}`).join(";");
-  if (snapshotKeyCache.has(hash)) {
-    styleMap.set(clone, snapshotKeyCache.get(hash));
+  if (cache.snapshotKey.has(hash)) {
+    cache.preStyleMap.set(clone, cache.snapshotKey.get(hash));
     return;
   }
   const tagName = source.tagName?.toLowerCase() || "div";
   const key = getStyleKey(snapshot, tagName, compress);
-  snapshotKeyCache.set(hash, key);
-  styleMap.set(clone, key);
+  cache.snapshotKey.set(hash, key);
+  cache.preStyleMap.set(clone, key);
 }
 
 // src/core/clone.js
 function isSlotElement(node) {
   return node.nodeType === Node.ELEMENT_NODE && node.tagName === "SLOT";
 }
-function deepClone(node, styleMap, styleCache, nodeMap, compress, options = {}, originalRoot) {
-  if (node.nodeType === Node.TEXT_NODE) {
-    return node.cloneNode(true);
-  }
-  if (node.nodeType !== Node.ELEMENT_NODE) 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.exclude && Array.isArray(options.exclude)) {
-    for (const selector of options.exclude) {
+function deepClone(node, compress, options = {}, originalRoot) {
+  if (!node) {
+    throw new Error("Invalid node: node is null or undefined");
+  }
+  try {
+    if (node.nodeType === Node.TEXT_NODE) {
+      return node.cloneNode(true);
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      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.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;
+          }
+        } catch (err) {
+          console.warn(`Invalid selector in exclude option: ${selector}`, err);
+        }
+      }
+    }
+    if (typeof options.filter === "function") {
       try {
-        if (node.matches?.(selector)) {
+        if (!options.filter(node, originalRoot || 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;
         }
       } catch (err) {
-        console.warn(`Invalid selector in exclude option: ${selector}`, err);
+        console.warn("Error in filter function:", err);
       }
     }
-  }
-  if (typeof options.filter === "function") {
+    if (node.tagName === "IFRAME") {
+      const fallback = document.createElement("div");
+      fallback.textContent = "";
+      fallback.style.cssText = `width: ${node.offsetWidth}px; height: ${node.offsetHeight}px; background-image: repeating-linear-gradient(45deg, #ddd, #ddd 5px, #f9f9f9 5px, #f9f9f9 10px);display: flex;align-items: center;justify-content: center;font-size: 12px;color: #555; border: 1px solid #aaa;`;
+      return fallback;
+    }
+    if (node.getAttribute("data-capture") === "placeholder") {
+      const clone2 = node.cloneNode(false);
+      cache.preNodeMap.set(clone2, node);
+      inlineAllStyles(node, clone2, compress);
+      const placeholder = document.createElement("div");
+      placeholder.textContent = node.getAttribute("data-placeholder-text") || "";
+      placeholder.style.cssText = `color: #666;font-size: 12px;text-align: center;line-height: 1.4;padding: 0.5em;box-sizing: border-box;`;
+      clone2.appendChild(placeholder);
+      return clone2;
+    }
+    if (node.tagName === "CANVAS") {
+      const dataURL = node.toDataURL();
+      const img = document.createElement("img");
+      img.src = dataURL;
+      img.width = node.width;
+      img.height = node.height;
+      img.style.display = "inline-block";
+      img.style.width = node.style.width || `${node.width}px`;
+      img.style.height = node.style.height || `${node.height}px`;
+      return img;
+    }
+    let clone;
     try {
-      if (!options.filter(node, originalRoot || 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;
+      clone = node.cloneNode(false);
+      if (!clone) {
+        throw new Error("Failed to clone node: cloneNode returned null");
       }
+      cache.preNodeMap.set(clone, node);
     } catch (err) {
-      console.warn("Error in filter function:", err);
+      console.error("[Snapdom] Failed to clone node:", node, err);
+      throw err;
     }
-  }
-  if (node.tagName === "IFRAME") {
-    const fallback = document.createElement("div");
-    fallback.textContent = "";
-    fallback.style.cssText = `width: ${node.offsetWidth}px; height: ${node.offsetHeight}px; background-image: repeating-linear-gradient(45deg, #ddd, #ddd 5px, #f9f9f9 5px, #f9f9f9 10px);display: flex;align-items: center;justify-content: center;font-size: 12px;color: #555; border: 1px solid #aaa;`;
-    return fallback;
-  }
-  if (node.getAttribute("data-capture") === "placeholder") {
-    const clone2 = node.cloneNode(false);
-    nodeMap.set(clone2, node);
-    inlineAllStyles(node, clone2, styleMap, styleCache, compress);
-    const placeholder = document.createElement("div");
-    placeholder.textContent = node.getAttribute("data-placeholder-text") || "";
-    placeholder.style.cssText = `color: #666;font-size: 12px;text-align: center;line-height: 1.4;padding: 0.5em;box-sizing: border-box;`;
-    clone2.appendChild(placeholder);
-    return clone2;
-  }
-  if (node.tagName === "CANVAS") {
-    const dataURL = node.toDataURL();
-    const img = document.createElement("img");
-    img.src = dataURL;
-    img.width = node.width;
-    img.height = node.height;
-    img.style.display = "inline-block";
-    img.style.width = node.style.width || `${node.width}px`;
-    img.style.height = node.style.height || `${node.height}px`;
-    return img;
-  }
-  const clone = node.cloneNode(false);
-  nodeMap.set(clone, node);
-  if (node instanceof HTMLInputElement) {
-    clone.value = node.value;
-    clone.setAttribute("value", node.value);
-    if (node.checked !== void 0) {
-      clone.checked = node.checked;
-      if (node.checked) clone.setAttribute("checked", "");
-    }
-  } else if (node instanceof HTMLTextAreaElement) {
-    const rect = node.getBoundingClientRect();
-    clone.textContent = node.value;
-    clone.style.width = `${rect.width}px`;
-    clone.style.height = `${rect.height}px`;
-  } else if (node instanceof HTMLSelectElement) {
-    clone.value = node.value;
-    Array.from(clone.options).forEach((opt) => {
-      if (opt.value === node.value) {
-        opt.setAttribute("selected", "");
-      } else {
-        opt.removeAttribute("selected");
+    if (node instanceof HTMLInputElement) {
+      clone.value = node.value;
+      clone.setAttribute("value", node.value);
+      if (node.checked !== void 0) {
+        clone.checked = node.checked;
+        if (node.checked) clone.setAttribute("checked", "");
       }
-    });
-  }
-  inlineAllStyles(node, clone, styleMap, styleCache, compress);
-  if (isSlotElement(node)) {
-    const assigned = node.assignedNodes?.({ flatten: true }) || [];
-    const nodesToClone = assigned.length > 0 ? assigned : Array.from(node.childNodes);
-    const fragment = document.createDocumentFragment();
-    for (const child of nodesToClone) {
-      const clonedChild = deepClone(child, styleMap, styleCache, nodeMap, compress, options, originalRoot || node);
-      if (clonedChild) fragment.appendChild(clonedChild);
-    }
-    return fragment;
-  } else if (node instanceof HTMLTextAreaElement) {
-  } else {
-    const baseChildren = node.shadowRoot ? node.shadowRoot.childNodes : node.childNodes;
-    for (const child of baseChildren) {
-      const clonedChild = deepClone(child, styleMap, styleCache, nodeMap, compress, options, originalRoot || node);
-      if (clonedChild) clone.appendChild(clonedChild);
+    } else if (node instanceof HTMLTextAreaElement) {
+      const rect = node.getBoundingClientRect();
+      clone.textContent = node.value;
+      clone.style.width = `${rect.width}px`;
+      clone.style.height = `${rect.height}px`;
+    } else if (node instanceof HTMLSelectElement) {
+      clone.value = node.value;
+      Array.from(clone.options).forEach((opt) => {
+        if (opt.value === node.value) {
+          opt.setAttribute("selected", "");
+        } else {
+          opt.removeAttribute("selected");
+        }
+      });
     }
-    if (node.shadowRoot && node.childNodes.length > 0 && !node.shadowRoot.querySelector("slot")) {
-      const lightDomContent = document.createDocumentFragment();
-      for (const child of node.childNodes) {
-        const clonedChild = deepClone(child, styleMap, styleCache, nodeMap, compress, options, originalRoot || node);
-        if (clonedChild) lightDomContent.appendChild(clonedChild);
+    inlineAllStyles(node, clone, compress);
+    try {
+      if (isSlotElement(node)) {
+        const assigned = node.assignedNodes?.({ flatten: true }) || [];
+        const nodesToClone = assigned.length > 0 ? assigned : Array.from(node.childNodes);
+        const fragment = document.createDocumentFragment();
+        for (const child of nodesToClone) {
+          try {
+            const clonedChild = deepClone(child, compress, options, originalRoot || node);
+            if (clonedChild) fragment.appendChild(clonedChild);
+          } catch (err) {
+            console.warn("[Snapdom] Failed to clone slot content:", child, err);
+          }
+        }
+        return fragment;
+      } else {
+        const baseChildren = node.shadowRoot ? node.shadowRoot.childNodes : node.childNodes;
+        for (const child of baseChildren) {
+          try {
+            const clonedChild = deepClone(child, compress, options, originalRoot || node);
+            if (clonedChild) clone.appendChild(clonedChild);
+          } catch (err) {
+            console.warn("[Snapdom] Failed to clone child node:", child, err);
+          }
+        }
+        if (node.shadowRoot && node.childNodes.length > 0 && !node.shadowRoot.querySelector("slot")) {
+          const lightDomContent = document.createDocumentFragment();
+          for (const child of node.childNodes) {
+            try {
+              const clonedChild = deepClone(child, compress, options, originalRoot || node);
+              if (clonedChild) lightDomContent.appendChild(clonedChild);
+            } catch (err) {
+              console.warn("[Snapdom] Failed to clone light DOM child:", child, err);
+            }
+          }
+          clone.appendChild(lightDomContent);
+        }
       }
-      clone.appendChild(lightDomContent);
+    } catch (err) {
+      console.error("[Snapdom] Error cloning children:", err);
+      throw err;
     }
+    return clone;
+  } catch (error) {
+    console.error("[Snapdom] Error in deepClone:", error);
+    throw error;
   }
-  return clone;
 }
 
 // src/modules/iconFonts.js
@@ -620,14 +668,14 @@ function injectLinkIfMissing(href) {
   });
 }
 async function embedCustomFonts({ preCached = false } = {}) {
-  if (resourceCache.has("fonts-embed-css")) {
+  if (cache.resource.has("fonts-embed-css")) {
     if (preCached) {
       const style = document.createElement("style");
       style.setAttribute("data-snapdom", "embedFonts");
-      style.textContent = resourceCache.get("fonts-embed-css");
+      style.textContent = cache.resource.get("fonts-embed-css");
       document.head.appendChild(style);
     }
-    return resourceCache.get("fonts-embed-css");
+    return cache.resource.get("fonts-embed-css");
   }
   const importRegex = /@import\s+url\(["']?([^"')]+)["']?\)/g;
   const styleImports = [];
@@ -660,11 +708,11 @@ async function embedCustomFonts({ preCached = false } = {}) {
             url = new URL(url, link.href).href;
           }
           if (isIconFont(url)) return null;
-          if (resourceCache.has(url)) {
-            processedFontURLs.add(url);
-            return { original: match[0], inlined: `url(${resourceCache.get(url)})` };
+          if (cache.resource.has(url)) {
+            cache.font.add(url);
+            return { original: match[0], inlined: `url(${cache.resource.get(url)})` };
           }
-          if (processedFontURLs.has(url)) return null;
+          if (cache.font.has(url)) return null;
           try {
             const fontRes = await fetch(url);
             const blob = await fontRes.blob();
@@ -673,8 +721,8 @@ async function embedCustomFonts({ preCached = false } = {}) {
               reader.onload = () => resolve(reader.result);
               reader.readAsDataURL(blob);
             });
-            resourceCache.set(url, b64);
-            processedFontURLs.add(url);
+            cache.resource.set(url, b64);
+            cache.font.add(url);
             return { original: match[0], inlined: `url(${b64})` };
           } catch (e) {
             console.warn("[snapdom] Failed to fetch font resource:", url);
@@ -710,12 +758,12 @@ async function embedCustomFonts({ preCached = false } = {}) {
                 url = new URL(url, sheet.href || location.href).href;
               }
               if (isIconFont(url)) continue;
-              if (resourceCache.has(url)) {
-                processedFontURLs.add(url);
-                inlinedSrc = inlinedSrc.replace(match[0], `url(${resourceCache.get(url)})`);
+              if (cache.resource.has(url)) {
+                cache.font.add(url);
+                inlinedSrc = inlinedSrc.replace(match[0], `url(${cache.resource.get(url)})`);
                 continue;
               }
-              if (processedFontURLs.has(url)) continue;
+              if (cache.font.has(url)) continue;
               try {
                 const res = await fetch(url);
                 const blob = await res.blob();
@@ -724,8 +772,8 @@ async function embedCustomFonts({ preCached = false } = {}) {
                   reader.onload = () => resolve(reader.result);
                   reader.readAsDataURL(blob);
                 });
-                resourceCache.set(url, b64);
-                processedFontURLs.add(url);
+                cache.resource.set(url, b64);
+                cache.font.add(url);
                 inlinedSrc = inlinedSrc.replace(match[0], `url(${b64})`);
               } catch (e) {
                 console.warn("[snapdom] Failed to fetch font URL:", url);
@@ -750,10 +798,10 @@ async function embedCustomFonts({ preCached = false } = {}) {
       if (isIconFont(font.family)) continue;
       let b64 = font._snapdomSrc;
       if (!b64.startsWith("data:")) {
-        if (resourceCache.has(font._snapdomSrc)) {
-          b64 = resourceCache.get(font._snapdomSrc);
-          processedFontURLs.add(font._snapdomSrc);
-        } else if (!processedFontURLs.has(font._snapdomSrc)) {
+        if (cache.resource.has(font._snapdomSrc)) {
+          b64 = cache.resource.get(font._snapdomSrc);
+          cache.font.add(font._snapdomSrc);
+        } else if (!cache.font.has(font._snapdomSrc)) {
           try {
             const res = await fetch(font._snapdomSrc);
             const blob = await res.blob();
@@ -762,8 +810,8 @@ async function embedCustomFonts({ preCached = false } = {}) {
               reader.onload = () => resolve(reader.result);
               reader.readAsDataURL(blob);
             });
-            resourceCache.set(font._snapdomSrc, b64);
-            processedFontURLs.add(font._snapdomSrc);
+            cache.resource.set(font._snapdomSrc, b64);
+            cache.font.add(font._snapdomSrc);
           } catch (e) {
             console.warn("[snapdom] Failed to fetch dynamic font src:", font._snapdomSrc);
             continue;
@@ -780,7 +828,7 @@ async function embedCustomFonts({ preCached = false } = {}) {
     }
   }
   if (finalCSS) {
-    resourceCache.set("fonts-embed-css", finalCSS);
+    cache.resource.set("fonts-embed-css", finalCSS);
     if (preCached) {
       const style = document.createElement("style");
       style.setAttribute("data-snapdom", "embedFonts");
@@ -792,7 +840,7 @@ async function embedCustomFonts({ preCached = false } = {}) {
 }
 
 // src/modules/pseudo.js
-async function inlinePseudoElements(source, clone, styleMap, styleCache, compress, embedFonts = false, useProxy) {
+async function inlinePseudoElements(source, clone, compress, embedFonts = false, useProxy) {
   if (!(source instanceof Element) || !(clone instanceof Element)) return;
   for (const pseudo of ["::before", "::after", "::first-letter"]) {
     try {
@@ -816,7 +864,7 @@ async function inlinePseudoElements(source, clone, styleMap, styleCache, compres
         span.dataset.snapdomPseudo = "::first-letter";
         const snapshot = snapshotComputedStyle(style);
         const key = getStyleKey(snapshot, "span", compress);
-        styleMap.set(span, key);
+        cache.preStyleMap.set(span, key);
         const restNode = document.createTextNode(rest);
         clone.replaceChild(restNode, textNode);
         clone.insertBefore(span, restNode);
@@ -837,7 +885,7 @@ async function inlinePseudoElements(source, clone, styleMap, styleCache, compres
         pseudoEl.dataset.snapdomPseudo = pseudo;
         const snapshot = snapshotComputedStyle(style);
         const key = getStyleKey(snapshot, "span", compress);
-        styleMap.set(pseudoEl, key);
+        cache.preStyleMap.set(pseudoEl, key);
         const isIconFont2 = isIconFont(fontFamily);
         const cleanContent = parseContent(content);
         if (isIconFont2 && cleanContent.length === 1) {
@@ -888,8 +936,6 @@ async function inlinePseudoElements(source, clone, styleMap, styleCache, compres
     await inlinePseudoElements(
       sChildren[i],
       cChildren[i],
-      styleMap,
-      styleCache,
       compress,
       embedFonts,
       useProxy
@@ -929,18 +975,16 @@ function inlineExternalDef(root) {
 
 // src/core/prepare.js
 async function prepareClone(element, compress = false, embedFonts = false, options = {}) {
-  const styleMap = /* @__PURE__ */ new Map();
-  const styleCache = /* @__PURE__ */ new WeakMap();
-  const nodeMap = /* @__PURE__ */ new Map();
   let clone;
+  let classCSS = "";
   try {
-    clone = deepClone(element, styleMap, styleCache, nodeMap, compress, options, element);
+    clone = deepClone(element, compress, options, element);
   } catch (e) {
     console.warn("deepClone failed:", e);
     throw e;
   }
   try {
-    await inlinePseudoElements(element, clone, styleMap, styleCache, compress, embedFonts, options.useProxy);
+    await inlinePseudoElements(element, clone, compress, embedFonts, options.useProxy);
   } catch (e) {
     console.warn("inlinePseudoElements failed:", e);
   }
@@ -949,11 +993,10 @@ async function prepareClone(element, compress = false, embedFonts = false, optio
   } catch (e) {
     console.warn("inlineExternalDef failed:", e);
   }
-  let classCSS = "";
   if (compress) {
-    const keyToClass = generateCSSClasses(styleMap);
+    const keyToClass = generateCSSClasses();
     classCSS = Array.from(keyToClass.entries()).map(([key, className]) => `.${className}{${key}}`).join("");
-    for (const [node, key] of styleMap.entries()) {
+    for (const [node, key] of cache.preStyleMap.entries()) {
       if (node.tagName === "STYLE") continue;
       const className = keyToClass.get(key);
       if (className) node.classList.add(className);
@@ -962,12 +1005,12 @@ async function prepareClone(element, compress = false, embedFonts = false, optio
       if (bgImage && bgImage !== "none") node.style.backgroundImage = bgImage;
     }
   } else {
-    for (const [node, key] of styleMap.entries()) {
+    for (const [node, key] of cache.preStyleMap.entries()) {
       if (node.tagName === "STYLE") continue;
       node.setAttribute("style", key.replace(/;/g, "; "));
     }
   }
-  for (const [cloneNode, originalNode] of nodeMap.entries()) {
+  for (const [cloneNode, originalNode] of cache.preNodeMap.entries()) {
     const scrollX = originalNode.scrollLeft;
     const scrollY = originalNode.scrollTop;
     const hasScroll = scrollX || scrollY;
@@ -986,9 +1029,9 @@ async function prepareClone(element, compress = false, embedFonts = false, optio
       cloneNode.appendChild(inner);
     }
   }
-  if (element === nodeMap.get(clone)) {
-    const computed = styleCache.get(element) || window.getComputedStyle(element);
-    styleCache.set(element, computed);
+  if (element === cache.preNodeMap.get(clone)) {
+    const computed = cache.preStyle.get(element) || window.getComputedStyle(element);
+    cache.preStyle.set(element, computed);
     const transform = stripTranslate(computed.transform);
     clone.style.margin = "0";
     clone.style.position = "static";
@@ -1001,13 +1044,13 @@ async function prepareClone(element, compress = false, embedFonts = false, optio
     clone.style.clear = "none";
     clone.style.transform = transform || "";
   }
-  for (const [cloneNode, originalNode] of nodeMap.entries()) {
+  for (const [cloneNode, originalNode] of cache.preNodeMap.entries()) {
     if (originalNode.tagName === "PRE") {
       cloneNode.style.marginTop = "0";
       cloneNode.style.marginBlockStart = "0";
     }
   }
-  return { clone, classCSS, styleCache };
+  return { clone, classCSS };
 }
 
 // src/modules/images.js
@@ -1034,7 +1077,7 @@ async function inlineImages(clone, options = {}) {
 }
 
 // src/modules/background.js
-async function inlineBackgroundImages(source, clone, styleCache, options = {}) {
+async function inlineBackgroundImages(source, clone, options = {}) {
   const queue = [[source, clone]];
   const imageProps = [
     "background-image",
@@ -1048,8 +1091,8 @@ async function inlineBackgroundImages(source, clone, styleCache, options = {}) {
   ];
   while (queue.length) {
     const [srcNode, cloneNode] = queue.shift();
-    const style = styleCache.get(srcNode) || getStyle(srcNode);
-    if (!styleCache.has(srcNode)) styleCache.set(srcNode, style);
+    const style = cache.preStyle.get(srcNode) || getStyle(srcNode);
+    if (!cache.preStyle.has(srcNode)) cache.preStyle.set(srcNode, style);
     for (const prop of imageProps) {
       const val = style.getPropertyValue(prop);
       if (!val || val === "none") continue;
@@ -1076,13 +1119,14 @@ async function inlineBackgroundImages(source, clone, styleCache, options = {}) {
 // src/core/capture.js
 async function captureDOM(element, options = {}) {
   if (!element) throw new Error("Element cannot be null or undefined");
+  cache.reset();
   const { compress = true, embedFonts = false, fast = true, scale = 1, useProxy = "" } = options;
-  let clone, classCSS, styleCache;
+  let clone, classCSS;
   let fontsCSS = "";
   let baseCSS = "";
   let dataURL;
   let svgString;
-  ({ clone, classCSS, styleCache } = await prepareClone(element, compress, embedFonts, options));
+  ({ clone, classCSS } = await prepareClone(element, compress, embedFonts, options));
   await new Promise((resolve) => {
     idle(async () => {
       await inlineImages(clone, options);
@@ -1091,7 +1135,7 @@ async function captureDOM(element, options = {}) {
   });
   await new Promise((resolve) => {
     idle(async () => {
-      await inlineBackgroundImages(element, clone, styleCache, options);
+      await inlineBackgroundImages(element, clone, options);
       resolve();
     }, { fast });
   });
@@ -1106,13 +1150,13 @@ async function captureDOM(element, options = {}) {
   if (compress) {
     const usedTags = collectUsedTagNames(clone).sort();
     const tagKey = usedTags.join(",");
-    if (baseCSSCache.has(tagKey)) {
-      baseCSS = baseCSSCache.get(tagKey);
+    if (cache.baseStyle.has(tagKey)) {
+      baseCSS = cache.baseStyle.get(tagKey);
     } else {
       await new Promise((resolve) => {
         idle(() => {
           baseCSS = generateDedupedBaseCSS(usedTags);
-          baseCSSCache.set(tagKey, baseCSS);
+          cache.baseStyle.set(tagKey, baseCSS);
           resolve();
         }, { fast });
       });
@@ -1239,8 +1283,10 @@ async function createBackground(url, { dpr = 1, scale = 1 }, backgroundColor) {
   ctx.drawImage(baseCanvas, 0, 0);
   return temp;
 }
-async function toRasterImg(url, { dpr = 1, scale = 1, backgroundColor = "#fff", quality }, format = "png") {
-  const canvas = await createBackground(url, { dpr, scale }, backgroundColor);
+async function toRasterImg(url, { dpr = 1, scale = 1, backgroundColor, quality }, format = "png") {
+  const defaultBg = ["jpg", "jpeg", "webp"].includes(format) ? "#fff" : void 0;
+  const finalBg = backgroundColor ?? defaultBg;
+  const canvas = await createBackground(url, { dpr, scale }, finalBg);
   const img = new Image();
   img.src = canvas.toDataURL(`image/${format}`, quality);
   await img.decode();
@@ -1321,10 +1367,7 @@ snapdom.download = async (el, options = {}) => {
 async function preCache(root = document, options = {}) {
   const { embedFonts = true, reset = false } = options;
   if (reset) {
-    imageCache.clear();
-    bgCache.clear();
-    resourceCache.clear();
-    baseCSSCache.clear();
+    cache.reset();
     return;
   }
   await document.fonts.ready;
@@ -1337,9 +1380,9 @@ async function preCache(root = document, options = {}) {
   const promises = [];
   for (const img of imgEls) {
     const src = img.src;
-    if (!imageCache.has(src)) {
+    if (!cache.image.has(src)) {
       promises.push(
-        fetchImage(src, { useProxy: options.useProxy }).then((dataURL) => imageCache.set(src, dataURL)).catch(() => {
+        fetchImage(src, { useProxy: options.useProxy }).then((dataURL) => cache.image.set(src, dataURL)).catch(() => {
         })
       );
     }