@zumer/snapdom 1.9.7 → 1.9.8

package/dist/snapdom.mjs

@@ -1,7 +1,7 @@
 
 /*
 * snapdom
-* v.1.9.7
+* v.1.9.8
 * Author Juan Martin Muda
 * License MIT
 **/
@@ -81,7 +81,7 @@ function getDefaultStyleForTag(tagName) {
   if (cache.defaultStyle.has(tagName)) {
     return cache.defaultStyle.get(tagName);
   }
-  const skipTags = /* @__PURE__ */ new Set(["script", "style", "meta", "link", "noscript", "template"]);
+  const skipTags = /* @__PURE__ */ new Set(["script", "style", "meta", "link", "noscript", "template", "defs", "symbol", "title", "metadata", "desc"]);
   if (skipTags.has(tagName)) {
     const empty = {};
     cache.defaultStyle.set(tagName, empty);
@@ -111,10 +111,14 @@ function getDefaultStyleForTag(tagName) {
   cache.defaultStyle.set(tagName, defaults);
   return defaults;
 }
+var IGNORED_PROPS = /* @__PURE__ */ new Set([
+  "-webkit-locale"
+]);
 function getStyleKey(snapshot, tagName, compress = false) {
   const entries = [];
   const defaultStyles = getDefaultStyleForTag(tagName);
   for (let [prop, value] of Object.entries(snapshot)) {
+    if (IGNORED_PROPS.has(prop)) continue;
     if (!compress) {
       if (value) {
         entries.push(`${prop}:${value}`);
@@ -164,6 +168,7 @@ function generateCSSClasses() {
   const classMap = /* @__PURE__ */ new Map();
   let counter = 1;
   for (const key of keySet) {
+    if (!key.trim()) continue;
     classMap.set(key, `c${counter++}`);
   }
   return classMap;
@@ -395,6 +400,7 @@ function splitBackgroundImage(bg) {
 // src/modules/styles.js
 function snapshotComputedStyleFull(style) {
   const result = {};
+  const computedVisibility = style.getPropertyValue("visibility");
   for (let i = 0; i < style.length; i++) {
     const prop = style[i];
     let val = style.getPropertyValue(prop);
@@ -403,6 +409,9 @@ function snapshotComputedStyleFull(style) {
     }
     result[prop] = val;
   }
+  if (computedVisibility === "hidden") {
+    result.opacity = "0";
+  }
   return result;
 }
 function inlineAllStyles(source, clone, compress) {
@@ -622,25 +631,38 @@ function isIconFont(input) {
 async function iconToImage(unicodeChar, fontFamily, fontWeight, fontSize = 32, color = "#000") {
   fontFamily = fontFamily.replace(/^['"]+|['"]+$/g, "");
   const dpr = window.devicePixelRatio || 1;
-  const tempCanvas = document.createElement("canvas");
-  const tempCtx = tempCanvas.getContext("2d");
-  tempCtx.font = fontWeight ? `${fontWeight} ${fontSize}px "${fontFamily}"` : `${fontSize}px "${fontFamily}"`;
-  const metrics = tempCtx.measureText(unicodeChar);
-  const ascent = metrics.actualBoundingBoxAscent || fontSize * 0.8;
-  const descent = metrics.actualBoundingBoxDescent || fontSize * 0.2;
-  const height = ascent + descent;
-  const width = metrics.width;
+  await document.fonts.ready;
+  const span = document.createElement("span");
+  span.textContent = unicodeChar;
+  span.style.position = "absolute";
+  span.style.visibility = "hidden";
+  span.style.fontFamily = `"${fontFamily}"`;
+  span.style.fontWeight = fontWeight || "normal";
+  span.style.fontSize = `${fontSize}px`;
+  span.style.lineHeight = "1";
+  span.style.whiteSpace = "nowrap";
+  span.style.padding = "0";
+  span.style.margin = "0";
+  document.body.appendChild(span);
+  const rect = span.getBoundingClientRect();
+  const width = Math.ceil(rect.width);
+  const height = Math.ceil(rect.height);
+  document.body.removeChild(span);
   const canvas = document.createElement("canvas");
-  canvas.width = Math.ceil(width * dpr);
-  canvas.height = Math.ceil(height * dpr);
+  canvas.width = width * dpr;
+  canvas.height = height * dpr;
   const ctx = canvas.getContext("2d");
   ctx.scale(dpr, dpr);
-  ctx.font = tempCtx.font;
+  ctx.font = fontWeight ? `${fontWeight} ${fontSize}px "${fontFamily}"` : `${fontSize}px "${fontFamily}"`;
   ctx.textAlign = "left";
-  ctx.textBaseline = "alphabetic";
+  ctx.textBaseline = "top";
   ctx.fillStyle = color;
-  ctx.fillText(unicodeChar, 0, ascent);
-  return canvas.toDataURL();
+  ctx.fillText(unicodeChar, 0, 0);
+  return {
+    dataUrl: canvas.toDataURL(),
+    width,
+    height
+  };
 }
 function isStylesheetLoaded(href) {
   return Array.from(document.styleSheets).some((sheet) => sheet.href === href);
@@ -825,18 +847,20 @@ async function embedCustomFonts({ preCached = false } = {}) {
 }
 
 // src/modules/pseudo.js
-async function inlinePseudoElements(source, clone, compress, embedFonts = false, useProxy) {
+async function inlinePseudoElements(source, clone, options) {
   if (!(source instanceof Element) || !(clone instanceof Element)) return;
   for (const pseudo of ["::before", "::after", "::first-letter"]) {
     try {
       const style = getStyle(source, pseudo);
       if (!style || typeof style[Symbol.iterator] !== "function") continue;
+      const isEmptyPseudo = style.content === "none" && style.backgroundImage === "none" && style.backgroundColor === "transparent" && (style.borderStyle === "none" || parseFloat(style.borderWidth) === 0) && (!style.transform || style.transform === "none") && style.display === "inline";
+      if (isEmptyPseudo) continue;
       if (pseudo === "::first-letter") {
         const normal = getComputedStyle(source);
         const isMeaningful = style.color !== normal.color || style.fontSize !== normal.fontSize || style.fontWeight !== normal.fontWeight;
         if (!isMeaningful) continue;
         const textNode = Array.from(clone.childNodes).find(
-          (n) => n.nodeType === Node.TEXT_NODE && n.textContent && n.textContent.trim().length > 0
+          (n) => n.nodeType === Node.TEXT_NODE && n.textContent?.trim().length > 0
         );
         if (!textNode) continue;
         const text = textNode.textContent;
@@ -848,57 +872,55 @@ async function inlinePseudoElements(source, clone, compress, embedFonts = false,
         span.textContent = first;
         span.dataset.snapdomPseudo = "::first-letter";
         const snapshot2 = snapshotComputedStyle(style);
-        const key2 = getStyleKey(snapshot2, "span", compress);
+        const key2 = getStyleKey(snapshot2, "span", options);
         cache.preStyleMap.set(span, key2);
         const restNode = document.createTextNode(rest);
         clone.replaceChild(restNode, textNode);
         clone.insertBefore(span, restNode);
         continue;
       }
-      const content = style.getPropertyValue("content");
-      const bg = style.getPropertyValue("background-image");
-      const bgColor = style.getPropertyValue("background-color");
-      const fontFamily = style.getPropertyValue("font-family");
-      const fontSize = parseInt(style.getPropertyValue("font-size")) || 32;
-      const fontWeight = parseInt(style.getPropertyValue("font-weight")) || false;
-      const color = style.getPropertyValue("color") || "#000";
-      const display = style.getPropertyValue("display");
-      const width = parseFloat(style.getPropertyValue("width"));
-      const height = parseFloat(style.getPropertyValue("height"));
-      const borderStyle = style.getPropertyValue("border-style");
-      const transform = style.getPropertyValue("transform");
+      const content = style.content;
+      const cleanContent = /counter\s*\(|counters\s*\(/.test(content) ? "- " : parseContent(content);
+      const bg = style.backgroundImage;
+      const bgColor = style.backgroundColor;
+      const fontFamily = style.fontFamily;
+      const fontSize = parseInt(style.fontSize) || 32;
+      const fontWeight = parseInt(style.fontWeight) || false;
+      const color = style.color || "#000";
+      const display = style.display;
+      const width = parseFloat(style.width);
+      const height = parseFloat(style.height);
+      const borderStyle = style.borderStyle;
+      const borderWidth = parseFloat(style.borderWidth);
+      const transform = style.transform;
       const isIconFont2 = isIconFont(fontFamily);
-      let cleanContent;
-      if (/counter\s*\(|counters\s*\(/.test(content)) {
-        cleanContent = "- ";
-      } else {
-        cleanContent = parseContent(content);
-      }
-      const hasContent = content !== "none";
-      const hasExplicitContent = hasContent && cleanContent !== "";
+      const hasExplicitContent = content !== "none" && cleanContent !== "";
       const hasBg = bg && bg !== "none";
       const hasBgColor = bgColor && bgColor !== "transparent" && bgColor !== "rgba(0, 0, 0, 0)";
       const hasBox = display !== "inline" && (width > 0 || height > 0);
-      const hasBorder = borderStyle && borderStyle !== "none";
+      const hasBorder = borderStyle && borderStyle !== "none" && borderWidth > 0;
       const hasTransform = transform && transform !== "none";
       const shouldRender = hasExplicitContent || hasBg || hasBgColor || hasBox || hasBorder || hasTransform;
       if (!shouldRender) continue;
       const pseudoEl = document.createElement("span");
       pseudoEl.dataset.snapdomPseudo = pseudo;
+      pseudoEl.style.verticalAlign = "middle";
       const snapshot = snapshotComputedStyle(style);
-      const key = getStyleKey(snapshot, "span", compress);
+      const key = getStyleKey(snapshot, "span", options);
       cache.preStyleMap.set(pseudoEl, key);
       if (isIconFont2 && cleanContent.length === 1) {
+        const { dataUrl, width: width2, height: height2 } = await iconToImage(cleanContent, fontFamily, fontWeight, fontSize, color);
         const imgEl = document.createElement("img");
-        imgEl.src = await iconToImage(cleanContent, fontFamily, fontWeight, fontSize, color);
-        imgEl.style = `width:${fontSize}px;height:auto;object-fit:contain;`;
+        imgEl.src = dataUrl;
+        imgEl.style = `height:${fontSize}px;width:${width2 / height2 * fontSize}px;object-fit:contain;`;
         pseudoEl.appendChild(imgEl);
+        clone.dataset.snapdomHasIcon = "true";
       } else if (cleanContent.startsWith("url(")) {
         const rawUrl = extractURL(cleanContent);
-        if (rawUrl && rawUrl.trim() !== "") {
+        if (rawUrl?.trim()) {
           try {
             const imgEl = document.createElement("img");
-            const dataUrl = await fetchImage(safeEncodeURI(rawUrl, { useProxy }));
+            const dataUrl = await fetchImage(safeEncodeURI(rawUrl), options);
             imgEl.src = dataUrl;
             imgEl.style = `width:${fontSize}px;height:auto;object-fit:contain;`;
             pseudoEl.appendChild(imgEl);
@@ -912,19 +934,21 @@ async function inlinePseudoElements(source, clone, compress, embedFonts = false,
       if (hasBg) {
         try {
           const bgSplits = splitBackgroundImage(bg);
-          const newBgParts = await Promise.all(
-            bgSplits.map((entry) => inlineSingleBackgroundEntry(entry))
-          );
+          const newBgParts = await Promise.all(bgSplits.map(inlineSingleBackgroundEntry));
           pseudoEl.style.backgroundImage = newBgParts.join(", ");
         } catch (e) {
           console.warn(`[snapdom] Failed to inline background-image for ${pseudo}`, e);
         }
       }
       if (hasBgColor) pseudoEl.style.backgroundColor = bgColor;
-      const hasContent2 = pseudoEl.childNodes.length > 0 || pseudoEl.textContent && pseudoEl.textContent.trim() !== "";
+      const hasContent2 = pseudoEl.childNodes.length > 0 || pseudoEl.textContent?.trim() !== "";
       const hasVisibleBox = hasContent2 || hasBg || hasBgColor || hasBox || hasBorder || hasTransform;
       if (!hasVisibleBox) continue;
-      pseudo === "::before" ? clone.insertBefore(pseudoEl, clone.firstChild) : clone.appendChild(pseudoEl);
+      if (pseudo === "::before") {
+        clone.insertBefore(pseudoEl, clone.firstChild);
+      } else {
+        clone.appendChild(pseudoEl);
+      }
     } catch (e) {
       console.warn(`[snapdom] Failed to capture ${pseudo} for`, source, e);
     }
@@ -932,43 +956,57 @@ async function inlinePseudoElements(source, clone, compress, embedFonts = false,
   const sChildren = Array.from(source.children);
   const cChildren = Array.from(clone.children).filter((child) => !child.dataset.snapdomPseudo);
   for (let i = 0; i < Math.min(sChildren.length, cChildren.length); i++) {
-    await inlinePseudoElements(
-      sChildren[i],
-      cChildren[i],
-      compress,
-      embedFonts,
-      useProxy
-    );
+    await inlinePseudoElements(sChildren[i], cChildren[i], options);
   }
 }
 
 // src/modules/svgDefs.js
-function inlineExternalDef(root) {
-  if (!root) return;
-  const defsSources = document.querySelectorAll("svg > defs");
-  if (!defsSources.length) return;
-  root.querySelectorAll("svg").forEach((svg) => {
-    const uses = svg.querySelectorAll("use");
-    if (!uses.length) return;
-    const usedIds = /* @__PURE__ */ new Set();
-    uses.forEach((use) => {
-      const href = use.getAttribute("xlink:href") || use.getAttribute("href");
-      if (href && href.startsWith("#")) usedIds.add(href.slice(1));
-    });
-    if (!usedIds.size) return;
-    const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
-    for (const id of usedIds) {
-      for (const source of defsSources) {
-        const def = source.querySelector(`#${CSS.escape(id)}`);
-        if (def) {
-          defs.appendChild(def.cloneNode(true));
-          break;
+function inlineExternalDefsAndSymbols(rootElement) {
+  if (!rootElement) return;
+  const usedIds = /* @__PURE__ */ new Set();
+  rootElement.querySelectorAll("use").forEach((use) => {
+    const href = use.getAttribute("xlink:href") || use.getAttribute("href");
+    if (href && href.startsWith("#")) {
+      usedIds.add(href.slice(1));
+    }
+  });
+  if (!usedIds.size) return;
+  const allGlobal = Array.from(document.querySelectorAll("svg > symbol, svg > defs"));
+  const globalSymbols = allGlobal.filter((el) => el.tagName.toLowerCase() === "symbol");
+  const globalDefs = allGlobal.filter((el) => el.tagName.toLowerCase() === "defs");
+  let container = rootElement.querySelector("svg.inline-defs-container");
+  if (!container) {
+    container = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    container.setAttribute("aria-hidden", "true");
+    container.setAttribute("style", "position: absolute; width: 0; height: 0; overflow: hidden;");
+    container.classList.add("inline-defs-container");
+    rootElement.insertBefore(container, rootElement.firstChild);
+  }
+  const existingIds = /* @__PURE__ */ new Set();
+  rootElement.querySelectorAll("symbol[id], defs > *[id]").forEach((el) => {
+    existingIds.add(el.id);
+  });
+  usedIds.forEach((id) => {
+    if (existingIds.has(id)) return;
+    const symbol = globalSymbols.find((sym) => sym.id === id);
+    if (symbol) {
+      container.appendChild(symbol.cloneNode(true));
+      existingIds.add(id);
+      return;
+    }
+    for (const defs of globalDefs) {
+      const defEl = defs.querySelector(`#${CSS.escape(id)}`);
+      if (defEl) {
+        let defsContainer = container.querySelector("defs");
+        if (!defsContainer) {
+          defsContainer = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+          container.appendChild(defsContainer);
         }
+        defsContainer.appendChild(defEl.cloneNode(true));
+        existingIds.add(id);
+        break;
       }
     }
-    if (defs.childNodes.length) {
-      svg.insertBefore(defs, svg.firstChild);
-    }
   });
 }
 
@@ -976,6 +1014,12 @@ function inlineExternalDef(root) {
 async function prepareClone(element, compress = false, embedFonts = false, options = {}) {
   let clone;
   let classCSS = "";
+  stabilizeLayout(element);
+  try {
+    inlineExternalDefsAndSymbols(element);
+  } catch (e) {
+    console.warn("inlineExternal defs or symbol failed:", e);
+  }
   try {
     clone = deepClone(element, compress, options, element);
   } catch (e) {
@@ -987,21 +1031,24 @@ async function prepareClone(element, compress = false, embedFonts = false, optio
   } catch (e) {
     console.warn("inlinePseudoElements failed:", e);
   }
-  try {
-    inlineExternalDef(clone);
-  } catch (e) {
-    console.warn("inlineExternalDef failed:", e);
-  }
   if (compress) {
     const keyToClass = generateCSSClasses();
     classCSS = Array.from(keyToClass.entries()).map(([key, className]) => `.${className}{${key}}`).join("");
     for (const [node, key] of cache.preStyleMap.entries()) {
       if (node.tagName === "STYLE") continue;
+      if (node.getRootNode && node.getRootNode() instanceof ShadowRoot) {
+        node.setAttribute("style", key.replace(/;/g, "; "));
+        continue;
+      }
       const className = keyToClass.get(key);
       if (className) node.classList.add(className);
       const bgImage = node.style?.backgroundImage;
-      node.removeAttribute("style");
+      const hasIcon = node.dataset?.snapdomHasIcon;
       if (bgImage && bgImage !== "none") node.style.backgroundImage = bgImage;
+      if (hasIcon) {
+        node.style.verticalAlign = "middle";
+        node.style.display = "inline";
+      }
     }
   } else {
     for (const [node, key] of cache.preStyleMap.entries()) {
@@ -1051,6 +1098,18 @@ async function prepareClone(element, compress = false, embedFonts = false, optio
   }
   return { clone, classCSS };
 }
+function stabilizeLayout(element) {
+  const style = getComputedStyle(element);
+  const outlineStyle = style.outlineStyle;
+  const outlineWidth = style.outlineWidth;
+  const borderStyle = style.borderStyle;
+  const borderWidth = style.borderWidth;
+  const outlineVisible = outlineStyle !== "none" && parseFloat(outlineWidth) > 0;
+  const borderAbsent = borderStyle === "none" || parseFloat(borderWidth) === 0;
+  if (outlineVisible && borderAbsent) {
+    element.style.border = `${outlineWidth} solid transparent`;
+  }
+}
 
 // src/modules/images.js
 async function inlineImages(clone, options = {}) {
@@ -1086,13 +1145,27 @@ async function inlineBackgroundImages(source, clone, options = {}) {
     "mask-source",
     "mask-box-image-source",
     "mask-border-source",
-    "-webkit-mask-box-image-source"
+    "-webkit-mask-box-image-source",
+    "border-image",
+    "border-image-source",
+    "border-image-slice",
+    "border-image-width",
+    "border-image-outset",
+    "border-image-repeat"
   ];
   while (queue.length) {
     const [srcNode, cloneNode] = queue.shift();
     const style = cache.preStyle.get(srcNode) || getStyle(srcNode);
     if (!cache.preStyle.has(srcNode)) cache.preStyle.set(srcNode, style);
+    const hasBorderImage = (() => {
+      const bi = style.getPropertyValue("border-image");
+      const bis = style.getPropertyValue("border-image-source");
+      return bi && bi !== "none" || bis && bis !== "none";
+    })();
     for (const prop of imageProps) {
+      if (["border-image-slice", "border-image-width", "border-image-outset", "border-image-repeat"].includes(prop) && !hasBorderImage) {
+        continue;
+      }
       const val = style.getPropertyValue(prop);
       if (!val || val === "none") continue;
       const splits = splitBackgroundImage(val);
@@ -1218,12 +1291,14 @@ async function captureDOM(element, options = {}) {
 }
 
 // src/api/snapdom.js
-async function toImg(url, { dpr = 1, scale = 1 }) {
+async function toImg(url, { scale = 1 } = {}) {
   const img = new Image();
   img.src = url;
   await img.decode();
-  img.width = img.width * scale;
-  img.height = img.height * scale;
+  if (scale !== 1) {
+    img.style.width = `${img.naturalWidth * scale}px`;
+    img.style.height = `${img.naturalHeight * scale}px`;
+  }
   return img;
 }
 async function toCanvas(url, { dpr = 1, scale = 1 } = {}) {
@@ -1246,8 +1321,8 @@ async function toCanvas(url, { dpr = 1, scale = 1 } = {}) {
     if (appended) img.remove();
     throw new Error("Image failed to load or has no dimensions");
   }
-  const width = img.width * scale;
-  const height = img.height * scale;
+  const width = img.naturalWidth * scale;
+  const height = img.naturalHeight * scale;
   const canvas = document.createElement("canvas");
   canvas.width = Math.ceil(width * dpr);
   canvas.height = Math.ceil(height * dpr);
@@ -1339,19 +1414,19 @@ async function snapdom(element, options = {}) {
 }
 snapdom.capture = async (el, options = {}) => {
   const url = await captureDOM(el, options);
-  const dpr = window.devicePixelRatio || 1;
+  const dpr = options.dpr ?? (window.devicePixelRatio || 1);
   const scale = options.scale || 1;
   return {
     url,
     options,
     toRaw: () => url,
-    toImg: () => toImg(url, { dpr, scale }),
-    toCanvas: () => toCanvas(url, { dpr, scale }),
-    toBlob: (options2) => toBlob(url, { dpr, scale, ...options2 }),
-    toPng: (options2) => toRasterImg(url, { dpr, scale, ...options2 }, "png"),
-    toJpg: (options2) => toRasterImg(url, { dpr, scale, ...options2 }, "jpeg"),
-    toWebp: (options2) => toRasterImg(url, { dpr, scale, ...options2 }, "webp"),
-    download: ({ format = "png", filename = "capture", backgroundColor } = {}) => download(url, { dpr, scale, backgroundColor, format, filename })
+    toImg: (opts = {}) => toImg(url, { dpr, scale, ...opts }),
+    toCanvas: (opts = {}) => toCanvas(url, { dpr, scale, ...opts }),
+    toBlob: (opts = {}) => toBlob(url, { dpr, scale, ...opts }),
+    toPng: (opts = {}) => toRasterImg(url, { dpr, scale, ...opts }, "png"),
+    toJpg: (opts = {}) => toRasterImg(url, { dpr, scale, ...opts }, "jpeg"),
+    toWebp: (opts = {}) => toRasterImg(url, { dpr, scale, ...opts }, "webp"),
+    download: ({ format = "png", filename = "snapDOM", backgroundColor, ...opts } = {}) => download(url, { dpr, scale, format, filename, backgroundColor, ...opts })
   };
 };
 snapdom.toRaw = async (el, options) => (await snapdom.capture(el, options)).toRaw();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zumer/snapdom",
-  "version": "1.9.7",
+  "version": "1.9.8",
   "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

@@ -58,6 +58,7 @@ declare module "@zumer/snapdom" {
     options?: {
       embedFonts?: boolean;
       useProxy?: string;
+      reset?: boolean;
     }
   ): Promise<void>;
 }