@zumer/snapdom 1.9.6-dev.2 → 1.9.6

package/dist/snapdom.mjs

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.1.9.6-dev.2
+* v.1.9.6
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -223,13 +223,10 @@ function parseContent(content) {
   return clean;
 }
 function extractURL(value) {
-  const urlStart = value.indexOf("url(");
-  if (urlStart === -1) return null;
-  let url = value.slice(urlStart + 4).trim();
-  if (url.endsWith(")")) url = url.slice(0, -1).trim();
-  if (url.startsWith('"') && url.endsWith('"') || url.startsWith("'") && url.endsWith("'")) {
-    url = url.slice(1, -1);
-  }
+  const match = value.match(/url\((['"]?)(.*?)(\1)\)/);
+  if (!match) return null;
+  const url = match[2].trim();
+  if (url.startsWith("#")) return null;
   return url;
 }
 function fetchImage(src, { timeout = 3e3, useProxy = "" } = {}) {
@@ -266,19 +263,15 @@ function fetchImage(src, { timeout = 3e3, useProxy = "" } = {}) {
         try {
           return await fetchBlobAsDataURL(proxied);
         } catch {
-          console.error(`[SnapDOM - fetchImage] Proxy fallback failed for: ${url}`);
-          throw new Error("CORS restrictions prevented image capture (even via proxy)");
+          throw new Error("[SnapDOM - fetchImage] CORS restrictions prevented image capture (even via proxy)");
         }
       } else {
-        console.error(`[SnapDOM - fetchImage] No valid proxy URL provided for fallback: ${url}`);
-        throw new Error("Fetch fallback failed and no proxy provided");
+        throw new Error("[SnapDOM - fetchImage] Fetch fallback failed and no proxy provided");
       }
     }
   }
   const crossOriginValue = getCrossOriginMode(src);
-  console.log(`[SnapDOM - fetchImage] Start loading image: ${src} with crossOrigin=${crossOriginValue}`);
   if (cache.image.has(src)) {
-    console.log(`[SnapDOM - fetchImage] Cache hit for: ${src}`);
     return Promise.resolve(cache.image.get(src));
   }
   const isDataURI = src.startsWith("data:image/");
@@ -305,8 +298,7 @@ function fetchImage(src, { timeout = 3e3, useProxy = "" } = {}) {
   }
   return new Promise((resolve, reject) => {
     const timeoutId = setTimeout(() => {
-      console.log(`[SnapDOM - fetchImage] Timeout after ${timeout}ms for image: ${src}`);
-      reject(new Error("Image load timed out"));
+      reject(new Error("[SnapDOM - fetchImage] Image load timed out"));
     }, timeout);
     const image = new Image();
     image.crossOrigin = crossOriginValue;
@@ -436,158 +428,158 @@ function inlineAllStyles(source, clone, compress) {
 }
 
 // src/core/clone.js
-function isSlotElement(node) {
-  return node.nodeType === Node.ELEMENT_NODE && node.tagName === "SLOT";
-}
 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") {
+  if (!node) throw new Error("Invalid node");
+  const clonedAssignedNodes = /* @__PURE__ */ new Set();
+  let pendingSelectValue = null;
+  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 (!options.filter(node, originalRoot || node)) {
+        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;`;
+          spacer.style.cssText = `display:inline-block;width:${rect.width}px;height:${rect.height}px;visibility:hidden;`;
           return spacer;
         }
       } catch (err) {
-        console.warn("Error in filter function:", err);
+        console.warn(`Invalid selector in exclude option: ${selector}`, 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;
-      cache.preNodeMap.set(img, node);
-      inlineAllStyles(node, img, compress);
-      return img;
-    }
-    let clone;
+  }
+  if (typeof options.filter === "function") {
     try {
-      clone = node.cloneNode(false);
-      if (!clone) {
-        throw new Error("Failed to clone node: cloneNode returned null");
+      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;
       }
-      cache.preNodeMap.set(clone, node);
     } catch (err) {
-      console.error("[Snapdom] Failed to clone node:", node, err);
-      throw err;
+      console.warn("Error in filter function:", err);
     }
-    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.tagName === "IFRAME") {
+    const fallback = document.createElement("div");
+    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 {
+    clone = node.cloneNode(false);
+    cache.preNodeMap.set(clone, node);
+  } catch (err) {
+    console.error("[Snapdom] Failed to clone node:", node, err);
+    throw err;
+  }
+  if (node instanceof HTMLTextAreaElement) {
+    clone.textContent = node.value;
+    clone.value = node.value;
+    const rect = node.getBoundingClientRect();
+    clone.style.width = `${rect.width}px`;
+    clone.style.height = `${rect.height}px`;
+    return clone;
+  }
+  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", "");
+      if (node.indeterminate) clone.indeterminate = node.indeterminate;
     }
-    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);
+    return clone;
+  }
+  if (node instanceof HTMLSelectElement) {
+    pendingSelectValue = node.value;
+  }
+  inlineAllStyles(node, clone, compress);
+  if (node.shadowRoot) {
+    const hasSlot = Array.from(node.shadowRoot.querySelectorAll("slot")).length > 0;
+    if (hasSlot) {
+      for (const child of node.shadowRoot.childNodes) {
+        if (child.nodeType === Node.ELEMENT_NODE && child.tagName === "STYLE") {
+          const cssText = child.textContent || "";
+          if (cssText.trim() && compress) {
+            if (!cache.preStyle) cache.preStyle = /* @__PURE__ */ new WeakMap();
+            cache.preStyle.set(child, cssText);
           }
         }
-        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);
-            }
+      }
+    } else {
+      const shadowFrag = document.createDocumentFragment();
+      for (const child of node.shadowRoot.childNodes) {
+        if (child.nodeType === Node.ELEMENT_NODE && child.tagName === "STYLE") {
+          const cssText = child.textContent || "";
+          if (cssText.trim() && compress) {
+            if (!cache.preStyle) cache.preStyle = /* @__PURE__ */ new WeakMap();
+            cache.preStyle.set(child, cssText);
           }
-          clone.appendChild(lightDomContent);
+          continue;
         }
+        const clonedChild = deepClone(child, compress, options, originalRoot || node);
+        if (clonedChild) shadowFrag.appendChild(clonedChild);
       }
-    } catch (err) {
-      console.error("[Snapdom] Error cloning children:", err);
-      throw err;
+      clone.appendChild(shadowFrag);
     }
-    return clone;
-  } catch (error) {
-    console.error("[Snapdom] Error in deepClone:", error);
-    throw error;
   }
+  if (node.tagName === "SLOT") {
+    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;
+  }
+  for (const child of node.childNodes) {
+    if (clonedAssignedNodes.has(child)) continue;
+    const clonedChild = deepClone(child, compress, options, originalRoot || node);
+    if (clonedChild) clone.appendChild(clonedChild);
+  }
+  if (pendingSelectValue !== null && clone instanceof HTMLSelectElement) {
+    clone.value = pendingSelectValue;
+    for (const opt of clone.options) {
+      if (opt.value === pendingSelectValue) {
+        opt.setAttribute("selected", "");
+      } else {
+        opt.removeAttribute("selected");
+      }
+    }
+  }
+  return clone;
 }
 
 // src/modules/iconFonts.js
@@ -747,6 +739,13 @@ async function embedCustomFonts({ preCached = false } = {}) {
             const family = rule.style.getPropertyValue("font-family");
             if (!src || isIconFont(family)) continue;
             const urlRegex = /url\((["']?)([^"')]+)\1\)/g;
+            const localRegex = /local\((["']?)[^)]+?\1\)/g;
+            const hasURL = urlRegex.test(src);
+            const hasLocal = localRegex.test(src);
+            if (!hasURL && hasLocal) {
+              finalCSS += `@font-face{font-family:${family};src:${src};font-style:${rule.style.getPropertyValue("font-style") || "normal"};font-weight:${rule.style.getPropertyValue("font-weight") || "normal"};}`;
+              continue;
+            }
             let inlinedSrc = src;
             const matches = Array.from(src.matchAll(urlRegex));
             for (const match of matches) {
@@ -778,13 +777,7 @@ async function embedCustomFonts({ preCached = false } = {}) {
                 console.warn("[snapdom] Failed to fetch font URL:", url);
               }
             }
-            finalCSS += `@font-face {
-  font-family: ${family};
-  src: ${inlinedSrc};
-  font-style: ${rule.style.getPropertyValue("font-style") || "normal"};
-  font-weight: ${rule.style.getPropertyValue("font-weight") || "normal"};
-}
-`;
+            finalCSS += `@font-face{font-family:${family};src:${inlinedSrc};font-style:${rule.style.getPropertyValue("font-style") || "normal"};font-weight:${rule.style.getPropertyValue("font-weight") || "normal"};}`;
           }
         }
       }
@@ -817,13 +810,7 @@ async function embedCustomFonts({ preCached = false } = {}) {
           }
         }
       }
-      finalCSS += `@font-face {
-  font-family: '${font.family}';
-  src: url(${b64});
-  font-style: ${font.style || "normal"};
-  font-weight: ${font.weight || "normal"};
-}
-`;
+      finalCSS += `@font-face{font-family:'${font.family}';src:url(${b64});font-style:${font.style || "normal"};font-weight:${font.weight || "normal"};}`;
     }
   }
   if (finalCSS) {
@@ -886,7 +873,12 @@ async function inlinePseudoElements(source, clone, compress, embedFonts = false,
         const key = getStyleKey(snapshot, "span", compress);
         cache.preStyleMap.set(pseudoEl, key);
         const isIconFont2 = isIconFont(fontFamily);
-        const cleanContent = parseContent(content);
+        let cleanContent;
+        if (/counter\s*\(|counters\s*\(/.test(content)) {
+          cleanContent = "- ";
+        } else {
+          cleanContent = parseContent(content);
+        }
         if (isIconFont2 && cleanContent.length === 1) {
           const imgEl = document.createElement("img");
           imgEl.src = await iconToImage(cleanContent, fontFamily, fontWeight, fontSize, color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zumer/snapdom",
-  "version": "1.9.6-dev.2",
+  "version": "1.9.6",
   "description": "snapDOM captures HTML elements to images with exceptional speed and accuracy.",
   "main": "dist/snapdom.js",
   "module": "dist/snapdom.mjs",
@@ -15,9 +15,6 @@
     "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"