@unicom-cloud/utils 0.1.3 → 0.1.5

package/snapdom/src/api/snapdom.js

@@ -1,91 +1,91 @@
 import { captureDOM as v } from "../core/capture.js";
 import { isSafari as R } from "../utils/helpers.js";
-async function I(a, { dpr: t = 1, scale: n = 1 }) {
-  const e = new Image();
-  return e.src = a, await e.decode(), R ? (e.width = e.width * n, e.height = e.height * n) : (e.width = e.width / n, e.height = e.height / n), e;
+async function x(e, { dpr: t = 1, scale: c = 1 }) {
+  const a = new Image();
+  return a.src = e, await a.decode(), R ? (a.width = a.width * c, a.height = a.height * c) : (a.width = a.width / c, a.height = a.height / c), a;
 }
-async function h(a, { dpr: t = 1, scale: n = 1 }) {
-  const e = new Image();
-  e.src = a, await e.decode();
-  const c = document.createElement("canvas"), o = e.width * n * t, g = e.height * n * t;
-  c.width = Math.ceil(o), c.height = Math.ceil(g);
-  const s = c.getContext("2d");
-  return s.scale(n * t, n * t), s.drawImage(e, 0, 0), c;
+async function p(e, { dpr: t = 1, scale: c = 1 } = {}) {
+  const a = new Image();
+  a.src = e, await a.decode();
+  const n = document.createElement("canvas"), o = a.width * c, g = a.height * c;
+  n.width = Math.ceil(o * t), n.height = Math.ceil(g * t);
+  const s = n.getContext("2d");
+  return s.scale(t, t), s.drawImage(a, 0, 0, o, g), n.style.width = `${o}px`, n.style.height = `${g}px`, n;
 }
-async function p(a) {
-  const t = decodeURIComponent(a.split(",")[1]);
+async function u(e) {
+  const t = decodeURIComponent(e.split(",")[1]);
   return new Blob([t], { type: "image/svg+xml" });
 }
-async function m(a, { dpr: t = 1, scale: n = 1 }, e) {
-  const c = await h(a, { dpr: t, scale: n });
-  if (!e) return c;
+async function l(e, { dpr: t = 1, scale: c = 1 }, a) {
+  const n = await p(e, { dpr: t, scale: c });
+  if (!a) return n;
   const o = document.createElement("canvas");
-  o.width = c.width, o.height = c.height;
+  o.width = n.width, o.height = n.height;
   const g = o.getContext("2d");
-  return g.fillStyle = e, g.fillRect(0, 0, o.width, o.height), g.drawImage(c, 0, 0), o;
+  return g.fillStyle = a, g.fillRect(0, 0, o.width, o.height), g.drawImage(n, 0, 0), o;
 }
-async function d(a, { dpr: t = 1, scale: n = 1, backgroundColor: e = "#fff", quality: c }, o = "png") {
-  const g = await m(a, { dpr: t, scale: n }, e), s = new Image();
-  return s.src = g.toDataURL(`image/${o}`, c), await s.decode(), s.style.width = `${g.width / t}px`, s.style.height = `${g.height / t}px`, s;
+async function d(e, { dpr: t = 1, scale: c = 1, backgroundColor: a = "#fff", quality: n }, o = "png") {
+  const g = await l(e, { dpr: t, scale: c }, a), s = new Image();
+  return s.src = g.toDataURL(`image/${o}`, n), await s.decode(), s.style.width = `${g.width / t}px`, s.style.height = `${g.height / t}px`, s;
 }
-async function j(a, {
+async function I(e, {
   dpr: t = 1,
-  scale: n = 1,
-  backgroundColor: e = "#fff",
-  format: c = "png",
+  scale: c = 1,
+  backgroundColor: a = "#fff",
+  format: n = "png",
   filename: o = "capture"
 } = {}) {
-  if (c === "svg") {
-    const b = await p(a), u = URL.createObjectURL(b), w = document.createElement("a");
-    w.href = u, w.download = `${o}.svg`, w.click(), URL.revokeObjectURL(u);
+  if (n === "svg") {
+    const b = await u(e), h = URL.createObjectURL(b), w = document.createElement("a");
+    w.href = h, w.download = `${o}.svg`, w.click(), URL.revokeObjectURL(h);
     return;
   }
-  const g = ["jpg", "jpeg", "webp"].includes(c) ? "#fff" : void 0, l = await m(a, { dpr: t, scale: n }, e ?? g), f = {
+  const g = ["jpg", "jpeg", "webp"].includes(n) ? "#fff" : void 0, m = await l(e, { dpr: t, scale: c }, a ?? g), f = {
     jpg: "image/jpeg",
     jpeg: "image/jpeg",
     png: "image/png",
     webp: "image/webp"
-  }[c] || "image/png", y = l.toDataURL(f), r = document.createElement("a");
-  r.href = y, r.download = `${o}.${c}`, r.click();
+  }[n] || "image/png", y = m.toDataURL(f), r = document.createElement("a");
+  r.href = y, r.download = `${o}.${n}`, r.click();
 }
-async function i(a, t = {}) {
-  if (t = { scale: 1, ...t }, !a) throw new Error("Element cannot be null or undefined");
-  return await i.capture(a, t);
+async function i(e, t = {}) {
+  if (t = { scale: 1, ...t }, !e) throw new Error("Element cannot be null or undefined");
+  return await i.capture(e, t);
 }
-i.capture = async (a, t = {}) => {
-  const n = await v(a, t), e = window.devicePixelRatio || 1, c = t.scale || 1;
+i.capture = async (e, t = {}) => {
+  const c = await v(e, t), a = window.devicePixelRatio || 1, n = t.scale || 1;
   return {
-    url: n,
+    url: c,
     options: t,
-    toRaw: () => n,
-    toImg: () => I(n, { dpr: e, scale: c }),
-    toCanvas: () => h(n, { dpr: e, scale: c }),
-    toBlob: () => p(n),
-    toPng: (o) => d(n, { dpr: e, scale: c, ...o }, "png"),
-    toJpg: (o) => d(n, { dpr: e, scale: c, ...o }, "jpeg"),
-    toWebp: (o) => d(n, { dpr: e, scale: c, ...o }, "webp"),
+    toRaw: () => c,
+    toImg: () => x(c, { dpr: a, scale: n }),
+    toCanvas: () => p(c, { dpr: a, scale: n }),
+    toBlob: () => u(c),
+    toPng: (o) => d(c, { dpr: a, scale: n, ...o }, "png"),
+    toJpg: (o) => d(c, { dpr: a, scale: n, ...o }, "jpeg"),
+    toWebp: (o) => d(c, { dpr: a, scale: n, ...o }, "webp"),
     download: ({
       format: o = "png",
       filename: g = "capture",
       backgroundColor: s
-    } = {}) => j(n, { dpr: e, scale: c, backgroundColor: s, format: o, filename: g })
+    } = {}) => I(c, { dpr: a, scale: n, backgroundColor: s, format: o, filename: g })
   };
 };
-i.toRaw = async (a, t) => (await i.capture(a, t)).toRaw();
-i.toImg = async (a, t) => (await i.capture(a, t)).toImg();
-i.toCanvas = async (a, t) => (await i.capture(a, t)).toCanvas();
-i.toBlob = async (a, t) => (await i.capture(a, t)).toBlob();
-i.toPng = async (a, t) => (await i.capture(a, t)).toPng(t);
-i.toJpg = async (a, t) => (await i.capture(a, t)).toJpg(t);
-i.toWebp = async (a, t) => (await i.capture(a, t)).toWebp(t);
-i.download = async (a, t = {}) => {
+i.toRaw = async (e, t) => (await i.capture(e, t)).toRaw();
+i.toImg = async (e, t) => (await i.capture(e, t)).toImg();
+i.toCanvas = async (e, t) => (await i.capture(e, t)).toCanvas();
+i.toBlob = async (e, t) => (await i.capture(e, t)).toBlob();
+i.toPng = async (e, t) => (await i.capture(e, t)).toPng(t);
+i.toJpg = async (e, t) => (await i.capture(e, t)).toJpg(t);
+i.toWebp = async (e, t) => (await i.capture(e, t)).toWebp(t);
+i.download = async (e, t = {}) => {
   const {
-    format: n = "png",
-    filename: e = "capture",
-    backgroundColor: c,
+    format: c = "png",
+    filename: a = "capture",
+    backgroundColor: n,
     ...o
   } = t;
-  return await (await i.capture(a, o)).download({ format: n, filename: e, backgroundColor: c });
+  return await (await i.capture(e, o)).download({ format: c, filename: a, backgroundColor: n });
 };
 export {
   i as snapdom

package/snapdom/src/core/cache.js

@@ -1,9 +1,10 @@
-const e = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new WeakMap();
+const e = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new WeakMap(), o = /* @__PURE__ */ new Set();
 export {
   t as baseCSSCache,
   a as bgCache,
-  o as computedStyleCache,
+  s as computedStyleCache,
   n as defaultStylesCache,
   e as imageCache,
+  o as processedFontURLs,
   c as resourceCache
 };

package/snapdom/src/core/capture.js

@@ -1,72 +1,72 @@
+import { baseCSSCache as w } from "./cache.js";
 import { inlineBackgroundImages as $ } from "../modules/background.js";
 import { embedCustomFonts as B } from "../modules/fonts.js";
 import { inlineImages as E } from "../modules/images.js";
 import { collectUsedTagNames as F, generateDedupedBaseCSS as I } from "../utils/cssTools.js";
 import { idle as i, isSafari as P } from "../utils/helpers.js";
-import { baseCSSCache as g } from "./cache.js";
 import { prepareClone as z } from "./prepare.js";
-async function L(a, y = {}) {
+async function L(a, l = {}) {
   if (!a) throw new Error("Element cannot be null or undefined");
   const {
-    compress: w = !0,
-    embedFonts: l = !1,
-    fast: s = !0,
-    scale: d = 1
-  } = y;
-  let t, f, p, h = "", r = "", u, S;
-  if ({ clone: t, classCSS: f, styleCache: p } = await z(
+    compress: d = !0,
+    embedFonts: m = !1,
+    fast: o = !0,
+    scale: f = 1
+  } = l;
+  let t, h, p, u = "", r = "", S, v;
+  if ({ clone: t, classCSS: h, styleCache: p } = await z(
     a,
-    w,
-    l
+    d,
+    m
   ), await new Promise((e) => {
     i(
       async () => {
-        await E(t), e();
+        await E(t, l), e();
       },
-      { fast: s }
+      { fast: o }
     );
   }), await new Promise((e) => {
     i(
       async () => {
-        await $(a, t, p), e();
+        await $(a, t, p, l), e();
       },
-      { fast: s }
+      { fast: o }
     );
-  }), l && await new Promise((e) => {
+  }), m && await new Promise((e) => {
     i(
       async () => {
-        h = await B({ ignoreIconFonts: !l }), e();
+        u = await B({ ignoreIconFonts: !m }), e();
       },
-      { fast: s }
+      { fast: o }
     );
-  }), w) {
-    const e = F(t).sort(), o = e.join(",");
-    g.has(o) ? r = g.get(o) : await new Promise((c) => {
+  }), d) {
+    const e = F(t).sort(), s = e.join(",");
+    w.has(s) ? r = w.get(s) : await new Promise((c) => {
       i(
         () => {
-          r = I(e), g.set(o, r), c();
+          r = I(e), w.set(s, r), c();
         },
-        { fast: s }
+        { fast: o }
       );
     });
   }
   await new Promise((e) => {
     i(
       () => {
-        const o = a.getBoundingClientRect(), c = Math.ceil(o.width), v = Math.ceil(o.height);
-        t.setAttribute("xmlns", "http://www.w3.org/1999/xhtml"), t.style.transformOrigin = "top left", d !== 1 && P() && (t.style.scale = `${d}`);
-        const C = "http://www.w3.org/2000/svg", n = document.createElementNS(C, "foreignObject");
+        const s = a.getBoundingClientRect(), c = Math.ceil(s.width), C = Math.ceil(s.height);
+        t.setAttribute("xmlns", "http://www.w3.org/1999/xhtml"), t.style.transformOrigin = "top left", f !== 1 && P() && (t.style.scale = `${f}`);
+        const b = "http://www.w3.org/2000/svg", n = document.createElementNS(b, "foreignObject");
         n.setAttribute("width", "100%"), n.setAttribute("height", "100%");
-        const b = document.createElement("style");
-        b.textContent = r + h + "svg{overflow:visible;}" + f, n.appendChild(b), n.appendChild(t);
+        const y = document.createElement("style");
+        y.textContent = r + u + "svg{overflow:visible;}" + h, n.appendChild(y), n.appendChild(t);
         const x = new XMLSerializer().serializeToString(n);
-        S = `<svg xmlns="${C}" width="${c}" height="${v}" viewBox="0 0 ${c} ${v}">` + x + "</svg>", u = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(S)}`, e();
+        v = `<svg xmlns="${b}" width="${c}" height="${C}" viewBox="0 0 ${c} ${C}">` + x + "</svg>", S = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(v)}`, e();
       },
-      { fast: s }
+      { fast: o }
     );
   });
-  const m = document.getElementById("snapdom-sandbox");
-  return m && m.style.position === "absolute" && m.remove(), u;
+  const g = document.getElementById("snapdom-sandbox");
+  return g && g.style.position === "absolute" && g.remove(), S;
 }
 export {
   L as captureDOM

package/snapdom/src/core/clone.js

@@ -1,50 +1,51 @@
-import { inlineAllStyles as h } from "../modules/styles.js";
-function f(t, a, l, c, o) {
-  var s;
-  if (t.nodeType === Node.ELEMENT_NODE && t.getAttribute("data-capture") === "exclude") {
-    const i = document.createElement("div"), e = t.getBoundingClientRect();
-    return i.style.cssText = `display: inline-block; width: ${e.width}px; height: ${e.height}px; visibility: hidden;`, i;
+import { inlineAllStyles as f } from "../modules/styles.js";
+function h(e, c, r, n, s) {
+  if (e.nodeType === Node.ELEMENT_NODE && e.getAttribute("data-capture") === "exclude") {
+    const t = document.createElement("div"), i = e.getBoundingClientRect();
+    return t.style.cssText = `display: inline-block; width: ${i.width}px; height: ${i.height}px; visibility: hidden;`, t;
   }
-  if (t.tagName === "IFRAME") {
-    const i = document.createElement("div");
-    return i.textContent = "", i.style.cssText = `width: ${t.offsetWidth}px; height: ${t.offsetHeight}px; background: 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;`, i;
+  if (e.tagName === "IFRAME") {
+    const t = document.createElement("div");
+    return t.textContent = "", t.style.cssText = `width: ${e.offsetWidth}px; height: ${e.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;`, t;
   }
-  if (t.nodeType === Node.ELEMENT_NODE && t.getAttribute("data-capture") === "placeholder") {
-    const i = t.cloneNode(!1);
-    c.set(i, t), h(t, i, a, l, o);
-    const e = document.createElement("div");
-    return e.textContent = t.getAttribute("data-placeholder-text") || "", e.style.cssText = "color: #666;font-size: 12px;text-align: center;line-height: 1.4;padding: 0.5em;box-sizing: border-box;", i.appendChild(e), i;
+  if (e.nodeType === Node.ELEMENT_NODE && e.getAttribute("data-capture") === "placeholder") {
+    const t = e.cloneNode(!1);
+    n.set(t, e), f(e, t, c, r, s);
+    const i = document.createElement("div");
+    return i.textContent = e.getAttribute("data-placeholder-text") || "", i.style.cssText = "color: #666;font-size: 12px;text-align: center;line-height: 1.4;padding: 0.5em;box-sizing: border-box;", t.appendChild(i), t;
   }
-  if (t.tagName === "CANVAS") {
-    const i = t.toDataURL(), e = document.createElement("img");
-    return e.src = i, e.width = t.width, e.height = t.height, e.style.display = "inline-block", e.style.width = `${t.width}px`, e.style.height = `${t.height}px`, e;
+  if (e.tagName === "CANVAS") {
+    const t = e.toDataURL(), i = document.createElement("img");
+    return i.src = t, i.width = e.width, i.height = e.height, i.style.display = "inline-block", i.style.width = `${e.width}px`, i.style.height = `${e.height}px`, i;
   }
-  if (t.nodeType === Node.TEXT_NODE) {
-    if ((s = t.parentElement) != null && s.shadowRoot) {
-      const i = t.parentElement.tagName.toLowerCase();
-      if (customElements.get(i)) return null;
+  if (e.nodeType === Node.TEXT_NODE) {
+    if (e.parentElement?.shadowRoot) {
+      const t = e.parentElement.tagName.toLowerCase();
+      if (customElements.get(t)) return null;
     }
-    return t.cloneNode(!0);
+    return e.cloneNode(!0);
   }
-  if (t.nodeType !== Node.ELEMENT_NODE) return t.cloneNode(!0);
-  const r = t.cloneNode(!1);
-  c.set(r, t), h(t, r, a, l, o);
-  const d = document.createDocumentFragment();
-  if (t.childNodes.forEach((i) => {
-    const e = f(
-      i,
-      a,
-      l,
+  if (e.nodeType !== Node.ELEMENT_NODE) return e.cloneNode(!0);
+  const l = e.cloneNode(!1);
+  n.set(l, e), e instanceof HTMLInputElement ? (l.value = e.value, l.setAttribute("value", e.value), e.checked !== void 0 && (l.checked = e.checked, e.checked && l.setAttribute("checked", ""))) : e instanceof HTMLTextAreaElement ? (l.value = e.value, l.textContent = e.value) : e instanceof HTMLSelectElement && (l.value = e.value, Array.from(l.options).forEach((t) => {
+    t.value === e.value ? t.setAttribute("selected", "") : t.removeAttribute("selected");
+  })), f(e, l, c, r, s);
+  const o = document.createDocumentFragment();
+  if (e.childNodes.forEach((t) => {
+    const i = h(
+      t,
       c,
-      o
+      r,
+      n,
+      s
     );
-    e && d.appendChild(e);
-  }), r.appendChild(d), t.shadowRoot) {
-    const i = Array.from(t.shadowRoot.children).filter((n) => n.tagName !== "STYLE").map((n) => f(n, a, l, c)).filter(Boolean), e = document.createDocumentFragment();
-    i.forEach((n) => e.appendChild(n)), r.appendChild(e);
+    i && o.appendChild(i);
+  }), l.appendChild(o), e.shadowRoot) {
+    const t = Array.from(e.shadowRoot.children).filter((a) => a.tagName !== "STYLE").map((a) => h(a, c, r, n)).filter(Boolean), i = document.createDocumentFragment();
+    t.forEach((a) => i.appendChild(a)), l.appendChild(i);
   }
-  return r;
+  return l;
 }
 export {
-  f as deepClone
+  h as deepClone
 };

package/snapdom/src/core/prepare.js

@@ -1,36 +1,35 @@
-import { inlinePseudoElements as h } from "../modules/pseudo.js";
-import { generateCSSClasses as g } from "../utils/cssTools.js";
-import { deepClone as C } from "./clone.js";
-async function b(f, r = !1, m = !1) {
-  var p;
+import { inlinePseudoElements as m } from "../modules/pseudo.js";
+import { generateCSSClasses as h } from "../utils/cssTools.js";
+import { deepClone as g } from "./clone.js";
+async function S(f, r = !1, p = !1) {
   const l = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new Map();
   let c;
   try {
-    c = C(f, l, i, d, r);
+    c = g(f, l, i, d, r);
   } catch (e) {
     throw console.warn("deepClone failed:", e), e;
   }
   try {
-    await h(
+    await m(
       f,
       c,
       l,
       i,
       r,
-      m
+      p
     );
   } catch (e) {
     console.warn("inlinePseudoElements failed:", e);
   }
   let y = "";
   if (r) {
-    const e = g(l);
+    const e = h(l);
     y = Array.from(e.entries()).map(([t, n]) => `.${n}{${t}}`).join("");
     for (const [t, n] of l.entries()) {
       if (t.tagName === "STYLE") continue;
       const s = e.get(n);
       s && t.classList.add(s);
-      const a = (p = t.style) == null ? void 0 : p.backgroundImage;
+      const a = t.style?.backgroundImage;
       t.removeAttribute("style"), a && a !== "none" && (t.style.backgroundImage = a);
     }
   } else
@@ -49,5 +48,5 @@ async function b(f, r = !1, m = !1) {
   return { clone: c, classCSS: y, styleCache: i };
 }
 export {
-  b as prepareClone
+  S as prepareClone
 };

package/snapdom/src/modules/background.js

@@ -1,27 +1,50 @@
-import { bgCache as a } from "../core/cache.js";
-import { getStyle as f, fetchImage as m } from "../utils/helpers.js";
-async function p(u, d, o) {
-  const c = [[u, d]];
-  for (; c.length; ) {
-    const [t, l] = c.shift(), i = o.get(t) || f(t);
-    o.has(t) || o.set(t, i);
-    const s = i.getPropertyValue("background-image");
-    if (s && s.includes("url(")) {
-      const e = s.match(/url\(["']?([^"')]+)["']?\)/);
-      if (e != null && e[1])
-        try {
-          const n = e[1];
-          let r;
-          a.has(n) ? r = a.get(n) : (r = await m(n), a.set(n, r)), l.style.backgroundImage = `url(${r})`;
-        } catch {
-          l.style.backgroundImage = "none";
-        }
+import { bgCache as u } from "../core/cache.js";
+import { getStyle as C, extractURL as A, fetchImage as B } from "../utils/helpers.js";
+async function O(k, w, c, h = {}) {
+  const o = [[k, w]];
+  for (; o.length; ) {
+    const [e, i] = o.shift(), l = c.get(e) || C(e);
+    c.has(e) || c.set(e, l);
+    const g = l.getPropertyValue("background-image"), s = l.getPropertyValue("background-color");
+    if (!g || g === "none") {
+      const r = Array.from(e.children), a = Array.from(i.children);
+      for (let t = 0; t < Math.min(r.length, a.length); t++)
+        o.push([r[t], a[t]]);
+      continue;
     }
-    const g = Array.from(t.children), h = Array.from(l.children);
-    for (let e = 0; e < Math.min(g.length, h.length); e++)
-      c.push([g[e], h[e]]);
+    const U = g.split(/,(?=(?:[^()]*\([^()]*\))*[^()]*$)/).map((r) => r.trim()), m = await Promise.all(
+      U.map(async (r) => {
+        const a = r.startsWith("url("), t = /^((repeating-)?(linear|radial|conic)-gradient)\(/i.test(r);
+        if (a) {
+          const d = A(r);
+          if (!d) return r;
+          try {
+            const n = encodeURI(d);
+            if (u.has(n))
+              return `url(${u.get(n)})`;
+            {
+              const y = h.crossOrigin ? h.crossOrigin(n) : "anonymous", b = await B(n, 3e3, y);
+              return u.set(n, b), `url(${b})`;
+            }
+          } catch (n) {
+            return console.warn(
+              "[snapdom] Failed to inline background-image:",
+              d,
+              n
+            ), r;
+          }
+        }
+        return r;
+      })
+    );
+    m.some(
+      (r) => r && r !== "none" && !/^url\(undefined\)/.test(r)
+    ) && (i.style.backgroundImage = m.join(", ")), s && s !== "transparent" && s !== "rgba(0, 0, 0, 0)" && (i.style.backgroundColor = s);
+    const f = Array.from(e.children), p = Array.from(i.children);
+    for (let r = 0; r < Math.min(f.length, p.length); r++)
+      o.push([f[r], p[r]]);
   }
 }
 export {
-  p as inlineBackgroundImages
+  O as inlineBackgroundImages
 };