@zumer/snapdom 1.9.6-dev.0 → 1.9.6-dev.2

package/dist/snapdom.mjs

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.1.9.6-dev.0
+* v.1.9.6-dev.2
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -440,120 +440,154 @@ function isSlotElement(node) {
   return node.nodeType === Node.ELEMENT_NODE && node.tagName === "SLOT";
 }
 function deepClone(node, 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) {
+  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;
+      cache.preNodeMap.set(img, node);
+      inlineAllStyles(node, img, compress);
+      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);
-    }
-  }
-  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;
-  }
-  const clone = node.cloneNode(false);
-  cache.preNodeMap.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", "");
+      console.error("[Snapdom] Failed to clone node:", node, err);
+      throw err;
     }
-  } 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, 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, 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, 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, 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
@@ -940,7 +974,8 @@ function inlineExternalDef(root) {
 
 // src/core/prepare.js
 async function prepareClone(element, compress = false, embedFonts = false, options = {}) {
-  let clone, classCSS;
+  let clone;
+  let classCSS = "";
   try {
     clone = deepClone(element, compress, options, element);
   } catch (e) {
@@ -1247,8 +1282,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();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zumer/snapdom",
-  "version": "1.9.6-dev.0",
+  "version": "1.9.6-dev.2",
   "description": "snapDOM captures HTML elements to images with exceptional speed and accuracy.",
   "main": "dist/snapdom.js",
   "module": "dist/snapdom.mjs",
@@ -15,6 +15,9 @@
     "bump": "npx @zumerbox/bump && npx @zumerbox/changelog",
     "prebuild": "git add CHANGELOG.md && git commit -m \"Bumped version\" && git push --follow-tags"
   },
+  "engines": {
+    "node": ">= 20"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/zumerlab/snapdom.git"

package/types/snapdom.d.ts

@@ -23,7 +23,7 @@ declare module "@zumer/snapdom" {
     toRaw(): string;
     toImg(): Promise<HTMLImageElement>;
     toCanvas(): Promise<HTMLCanvasElement>;
-    toBlob(): Promise<Blob>;
+    toBlob(options?: SnapOptions): Promise<Blob>;
     toPng(options?: SnapOptions): Promise<HTMLImageElement>;
     toJpg(options?: SnapOptions): Promise<HTMLImageElement>;
     toWebp(options?: SnapOptions): Promise<HTMLImageElement>;