@unicom-cloud/utils 0.1.13 → 0.1.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/snapdom/src/api/snapdom.js +53 -49
- package/snapdom/src/core/capture.js +42 -42
- package/snapdom/src/core/clone.js +1 -3
- package/snapdom/src/modules/fonts.js +19 -19
- package/snapdom/src/modules/pseudo.js +70 -75
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name":"@unicom-cloud/utils","version":"0.1.
|
|
1
|
+
{"name":"@unicom-cloud/utils","version":"0.1.14","dependencies":{},"peerDependencies":{"lodash":"^4.17.21"},"main":"./index.js","type":"module","types":"types/index.d.ts","publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"}}
|
|
@@ -1,91 +1,95 @@
|
|
|
1
1
|
import { captureDOM as v } from "../core/capture.js";
|
|
2
2
|
import { extendIconFonts as j } from "../modules/iconFonts.js";
|
|
3
3
|
import { isSafari as R } from "../utils/helpers.js";
|
|
4
|
-
async function
|
|
4
|
+
async function B(a, { dpr: t = 1, scale: o = 1 }) {
|
|
5
5
|
const e = new Image();
|
|
6
|
-
return e.src = a, await e.decode(),
|
|
6
|
+
return e.src = a, await e.decode(), e.width = e.width * o, e.height = e.height * o, e;
|
|
7
7
|
}
|
|
8
|
-
async function
|
|
8
|
+
async function f(a, { dpr: t = 1, scale: o = 1 } = {}) {
|
|
9
9
|
const e = new Image();
|
|
10
|
-
e.src = a,
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
e.src = a, e.crossOrigin = "anonymous", e.loading = "eager", e.decoding = "sync";
|
|
11
|
+
const c = R();
|
|
12
|
+
let n = !1;
|
|
13
|
+
if (c && (document.body.appendChild(e), n = !0), await e.decode(), c && await new Promise((w) => setTimeout(w, 100)), e.width === 0 || e.height === 0)
|
|
14
|
+
throw n && e.remove(), new Error("Image failed to load or has no dimensions");
|
|
15
|
+
const s = e.width * o, r = e.height * o, g = document.createElement("canvas");
|
|
16
|
+
g.width = Math.ceil(s * t), g.height = Math.ceil(r * t), g.style.width = `${s}px`, g.style.height = `${r}px`;
|
|
17
|
+
const d = g.getContext("2d");
|
|
18
|
+
return d.scale(t, t), d.drawImage(e, 0, 0, s, r), n && e.remove(), g;
|
|
15
19
|
}
|
|
16
|
-
async function
|
|
17
|
-
const
|
|
20
|
+
async function b(a, { type: t = "svg", scale: o = 1, backgroundColor: e = "#fff", quality: c } = {}) {
|
|
21
|
+
const n = {
|
|
18
22
|
jpg: "image/jpeg",
|
|
19
23
|
jpeg: "image/jpeg",
|
|
20
24
|
png: "image/png",
|
|
21
25
|
webp: "image/webp"
|
|
22
26
|
}[t] || "image/png";
|
|
23
27
|
if (t === "svg") {
|
|
24
|
-
const
|
|
25
|
-
return new Blob([
|
|
28
|
+
const r = decodeURIComponent(a.split(",")[1]);
|
|
29
|
+
return new Blob([r], { type: "image/svg+xml" });
|
|
26
30
|
}
|
|
27
|
-
const
|
|
31
|
+
const s = await u(
|
|
28
32
|
a,
|
|
29
33
|
{ dpr: 1, scale: o },
|
|
30
34
|
e
|
|
31
35
|
);
|
|
32
|
-
return new Promise((
|
|
33
|
-
|
|
36
|
+
return new Promise((r) => {
|
|
37
|
+
s.toBlob((g) => r(g), `${n}`, c);
|
|
34
38
|
});
|
|
35
39
|
}
|
|
36
|
-
async function
|
|
37
|
-
const
|
|
38
|
-
if (!e) return
|
|
39
|
-
const
|
|
40
|
-
|
|
41
|
-
const
|
|
42
|
-
return
|
|
40
|
+
async function u(a, { dpr: t = 1, scale: o = 1 }, e) {
|
|
41
|
+
const c = await f(a, { dpr: t, scale: o });
|
|
42
|
+
if (!e) return c;
|
|
43
|
+
const n = document.createElement("canvas");
|
|
44
|
+
n.width = c.width, n.height = c.height;
|
|
45
|
+
const s = n.getContext("2d");
|
|
46
|
+
return s.fillStyle = e, s.fillRect(0, 0, n.width, n.height), s.drawImage(c, 0, 0), n;
|
|
43
47
|
}
|
|
44
|
-
async function
|
|
45
|
-
const
|
|
46
|
-
return
|
|
48
|
+
async function l(a, { dpr: t = 1, scale: o = 1, backgroundColor: e, quality: c }, n = "png") {
|
|
49
|
+
const s = ["jpg", "jpeg", "webp"].includes(n) ? "#fff" : void 0, g = await u(a, { dpr: t, scale: o }, e ?? s), d = new Image();
|
|
50
|
+
return d.src = g.toDataURL(`image/${n}`, c), await d.decode(), d.style.width = `${g.width / t}px`, d.style.height = `${g.height / t}px`, d;
|
|
47
51
|
}
|
|
48
|
-
async function
|
|
52
|
+
async function x(a, {
|
|
49
53
|
dpr: t = 1,
|
|
50
54
|
scale: o = 1,
|
|
51
|
-
backgroundColor: e
|
|
52
|
-
format:
|
|
53
|
-
filename:
|
|
55
|
+
backgroundColor: e,
|
|
56
|
+
format: c = "png",
|
|
57
|
+
filename: n = "snapDOM"
|
|
54
58
|
} = {}) {
|
|
55
|
-
if (
|
|
56
|
-
const y = await
|
|
57
|
-
|
|
59
|
+
if (c === "svg") {
|
|
60
|
+
const y = await b(a), h = URL.createObjectURL(y), m = document.createElement("a");
|
|
61
|
+
m.href = h, m.download = `${n}.svg`, m.click(), URL.revokeObjectURL(h);
|
|
58
62
|
return;
|
|
59
63
|
}
|
|
60
|
-
const
|
|
64
|
+
const s = ["jpg", "jpeg", "webp"].includes(c) ? "#fff" : void 0, g = await u(a, { dpr: t, scale: o }, e ?? s), d = {
|
|
61
65
|
jpg: "image/jpeg",
|
|
62
66
|
jpeg: "image/jpeg",
|
|
63
67
|
png: "image/png",
|
|
64
68
|
webp: "image/webp"
|
|
65
|
-
}[
|
|
66
|
-
|
|
69
|
+
}[c] || "image/png", w = g.toDataURL(d), p = document.createElement("a");
|
|
70
|
+
p.href = w, p.download = `${n}.${c}`, p.click();
|
|
67
71
|
}
|
|
68
72
|
async function i(a, t = {}) {
|
|
69
73
|
if (t = { scale: 1, ...t }, !a) throw new Error("Element cannot be null or undefined");
|
|
70
74
|
return t.iconFonts && j(t.iconFonts), await i.capture(a, t);
|
|
71
75
|
}
|
|
72
76
|
i.capture = async (a, t = {}) => {
|
|
73
|
-
const o = await v(a, t), e = window.devicePixelRatio || 1,
|
|
77
|
+
const o = await v(a, t), e = window.devicePixelRatio || 1, c = t.scale || 1;
|
|
74
78
|
return {
|
|
75
79
|
url: o,
|
|
76
80
|
options: t,
|
|
77
81
|
toRaw: () => o,
|
|
78
|
-
toImg: () =>
|
|
79
|
-
toCanvas: () =>
|
|
80
|
-
toBlob: (
|
|
81
|
-
toPng: (
|
|
82
|
-
toJpg: (
|
|
83
|
-
toWebp: (
|
|
82
|
+
toImg: () => B(o, { dpr: e, scale: c }),
|
|
83
|
+
toCanvas: () => f(o, { dpr: e, scale: c }),
|
|
84
|
+
toBlob: (n) => b(o, { scale: c, ...n }),
|
|
85
|
+
toPng: (n) => l(o, { dpr: e, scale: c, ...n }, "png"),
|
|
86
|
+
toJpg: (n) => l(o, { dpr: e, scale: c, ...n }, "jpeg"),
|
|
87
|
+
toWebp: (n) => l(o, { dpr: e, scale: c, ...n }, "webp"),
|
|
84
88
|
download: ({
|
|
85
|
-
format:
|
|
86
|
-
filename:
|
|
87
|
-
backgroundColor:
|
|
88
|
-
} = {}) =>
|
|
89
|
+
format: n = "png",
|
|
90
|
+
filename: s = "capture",
|
|
91
|
+
backgroundColor: r
|
|
92
|
+
} = {}) => x(o, { dpr: e, scale: c, backgroundColor: r, format: n, filename: s })
|
|
89
93
|
};
|
|
90
94
|
};
|
|
91
95
|
i.toRaw = async (a, t) => (await i.capture(a, t)).toRaw();
|
|
@@ -99,10 +103,10 @@ i.download = async (a, t = {}) => {
|
|
|
99
103
|
const {
|
|
100
104
|
format: o = "png",
|
|
101
105
|
filename: e = "capture",
|
|
102
|
-
backgroundColor:
|
|
103
|
-
...
|
|
106
|
+
backgroundColor: c,
|
|
107
|
+
...n
|
|
104
108
|
} = t;
|
|
105
|
-
return await (await i.capture(a,
|
|
109
|
+
return await (await i.capture(a, n)).download({ format: o, filename: e, backgroundColor: c });
|
|
106
110
|
};
|
|
107
111
|
export {
|
|
108
112
|
i as snapdom
|
|
@@ -3,83 +3,83 @@ import { inlineBackgroundImages as H } from "../modules/background.js";
|
|
|
3
3
|
import { embedCustomFonts as I } from "../modules/fonts.js";
|
|
4
4
|
import { inlineImages as M } from "../modules/images.js";
|
|
5
5
|
import { collectUsedTagNames as A, generateDedupedBaseCSS as O } from "../utils/cssTools.js";
|
|
6
|
-
import { idle as
|
|
7
|
-
import { prepareClone as
|
|
8
|
-
async function
|
|
9
|
-
if (!
|
|
6
|
+
import { idle as c } from "../utils/helpers.js";
|
|
7
|
+
import { prepareClone as R } from "./prepare.js";
|
|
8
|
+
async function J(l, t = {}) {
|
|
9
|
+
if (!l) throw new Error("Element cannot be null or undefined");
|
|
10
10
|
h.reset();
|
|
11
11
|
const {
|
|
12
|
-
compress:
|
|
13
|
-
embedFonts:
|
|
12
|
+
compress: u = !0,
|
|
13
|
+
embedFonts: b = !1,
|
|
14
14
|
fast: n = !0,
|
|
15
|
-
scale:
|
|
16
|
-
useProxy:
|
|
15
|
+
scale: S = 1,
|
|
16
|
+
useProxy: U = ""
|
|
17
17
|
} = t;
|
|
18
|
-
let
|
|
19
|
-
if ({ clone:
|
|
20
|
-
|
|
18
|
+
let a, y, p = "", m = "", v, x;
|
|
19
|
+
if ({ clone: a, classCSS: y } = await R(
|
|
20
|
+
l,
|
|
21
|
+
u,
|
|
21
22
|
b,
|
|
22
|
-
y,
|
|
23
23
|
t
|
|
24
|
-
), await new Promise((
|
|
25
|
-
|
|
24
|
+
), await new Promise((s) => {
|
|
25
|
+
c(
|
|
26
26
|
async () => {
|
|
27
|
-
await M(
|
|
27
|
+
await M(a, t), s();
|
|
28
28
|
},
|
|
29
29
|
{ fast: n }
|
|
30
30
|
);
|
|
31
|
-
}), await new Promise((
|
|
32
|
-
|
|
31
|
+
}), await new Promise((s) => {
|
|
32
|
+
c(
|
|
33
33
|
async () => {
|
|
34
|
-
await H(
|
|
34
|
+
await H(l, a, t), s();
|
|
35
35
|
},
|
|
36
36
|
{ fast: n }
|
|
37
37
|
);
|
|
38
|
-
}),
|
|
39
|
-
|
|
38
|
+
}), b && await new Promise((s) => {
|
|
39
|
+
c(
|
|
40
40
|
async () => {
|
|
41
|
-
|
|
41
|
+
p = await I(), s();
|
|
42
42
|
},
|
|
43
43
|
{ fast: n }
|
|
44
44
|
);
|
|
45
|
-
}),
|
|
46
|
-
const
|
|
47
|
-
h.baseStyle.has(
|
|
48
|
-
|
|
45
|
+
}), u) {
|
|
46
|
+
const s = A(a).sort(), i = s.join(",");
|
|
47
|
+
h.baseStyle.has(i) ? m = h.baseStyle.get(i) : await new Promise((e) => {
|
|
48
|
+
c(
|
|
49
49
|
() => {
|
|
50
|
-
m = O(
|
|
50
|
+
m = O(s), h.baseStyle.set(i, m), e();
|
|
51
51
|
},
|
|
52
52
|
{ fast: n }
|
|
53
53
|
);
|
|
54
54
|
});
|
|
55
55
|
}
|
|
56
|
-
await new Promise((
|
|
57
|
-
|
|
56
|
+
await new Promise((s) => {
|
|
57
|
+
c(
|
|
58
58
|
() => {
|
|
59
|
-
const
|
|
60
|
-
let e =
|
|
61
|
-
const d = Number.isFinite(t.width),
|
|
62
|
-
if (!
|
|
63
|
-
const g =
|
|
64
|
-
d &&
|
|
59
|
+
const i = l.getBoundingClientRect();
|
|
60
|
+
let e = i.width, r = i.height;
|
|
61
|
+
const d = Number.isFinite(t.width), f = Number.isFinite(t.height), C = typeof S == "number" && S !== 1;
|
|
62
|
+
if (!C) {
|
|
63
|
+
const g = i.width / i.height;
|
|
64
|
+
d && f ? (e = t.width, r = t.height) : d ? (e = t.width, r = e / g) : f && (r = t.height, e = r * g);
|
|
65
|
+
}
|
|
66
|
+
if (e = Math.ceil(e), r = Math.ceil(r), a.setAttribute("xmlns", "http://www.w3.org/1999/xhtml"), a.style.transformOrigin = "top left", !C && (d || f)) {
|
|
67
|
+
const g = i.width, T = i.height, B = e / g, E = r / T, N = a.style.transform || "", z = `scale(${B}, ${E})`;
|
|
68
|
+
a.style.transform = `${z} ${N}`.trim();
|
|
65
69
|
}
|
|
66
|
-
if (e = Math.ceil(e), r = Math.ceil(r), s.setAttribute("xmlns", "http://www.w3.org/1999/xhtml"), s.style.transformOrigin = "top left", !S && (d || u)) {
|
|
67
|
-
const g = a.width, T = a.height, B = e / g, E = r / T, N = s.style.transform || "", z = `scale(${B}, ${E})`;
|
|
68
|
-
s.style.transform = `${z} ${N}`.trim();
|
|
69
|
-
} else S && R() && (s.style.scale = `${f}`);
|
|
70
70
|
const $ = "http://www.w3.org/2000/svg", o = document.createElementNS($, "foreignObject");
|
|
71
71
|
o.setAttribute("width", "100%"), o.setAttribute("height", "100%");
|
|
72
72
|
const F = document.createElement("style");
|
|
73
|
-
F.textContent = m +
|
|
73
|
+
F.textContent = m + p + "svg{overflow:visible;}" + y, o.appendChild(F), o.appendChild(a);
|
|
74
74
|
const P = new XMLSerializer().serializeToString(o);
|
|
75
|
-
|
|
75
|
+
x = `<svg xmlns="${$}" width="${e}" height="${r}" viewBox="0 0 ${e} ${r}">` + P + "</svg>", v = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(x)}`, s();
|
|
76
76
|
},
|
|
77
77
|
{ fast: n }
|
|
78
78
|
);
|
|
79
79
|
});
|
|
80
80
|
const w = document.getElementById("snapdom-sandbox");
|
|
81
|
-
return w && w.style.position === "absolute" && w.remove(),
|
|
81
|
+
return w && w.style.position === "absolute" && w.remove(), v;
|
|
82
82
|
}
|
|
83
83
|
export {
|
|
84
|
-
|
|
84
|
+
J as captureDOM
|
|
85
85
|
};
|
|
@@ -54,9 +54,7 @@ function u(e, n, a = {}, o) {
|
|
|
54
54
|
const t = e.getBoundingClientRect();
|
|
55
55
|
return c.style.width = `${t.width}px`, c.style.height = `${t.height}px`, c;
|
|
56
56
|
}
|
|
57
|
-
if (e instanceof HTMLInputElement)
|
|
58
|
-
return c.value = e.value, c.setAttribute("value", e.value), e.checked !== void 0 && (c.checked = e.checked, e.checked && c.setAttribute("checked", ""), e.indeterminate && (c.indeterminate = e.indeterminate)), c;
|
|
59
|
-
if (e instanceof HTMLSelectElement && (d = e.value), f(e, c, n), e.shadowRoot)
|
|
57
|
+
if (e instanceof HTMLInputElement && (c.value = e.value, c.setAttribute("value", e.value), e.checked !== void 0 && (c.checked = e.checked, e.checked && c.setAttribute("checked", ""), e.indeterminate && (c.indeterminate = e.indeterminate))), e instanceof HTMLSelectElement && (d = e.value), f(e, c, n), e.shadowRoot)
|
|
60
58
|
if (Array.from(e.shadowRoot.querySelectorAll("slot")).length > 0) {
|
|
61
59
|
for (const i of e.shadowRoot.childNodes)
|
|
62
60
|
if (i.nodeType === Node.ELEMENT_NODE && i.tagName === "STYLE") {
|
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
import { cache as o } from "../core/cache.js";
|
|
2
2
|
import { isIconFont as y } from "./iconFonts.js";
|
|
3
3
|
import { extractURL as L } from "../utils/helpers.js";
|
|
4
|
-
async function E(
|
|
4
|
+
async function E(m, i, a, p = 32, u = "#000") {
|
|
5
5
|
i = i.replace(/^['"]+|['"]+$/g, "");
|
|
6
6
|
const t = window.devicePixelRatio || 1, s = document.createElement("canvas").getContext("2d");
|
|
7
7
|
s.font = a ? `${a} ${p}px "${i}"` : `${p}px "${i}"`;
|
|
8
|
-
const c = s.measureText(
|
|
8
|
+
const c = s.measureText(m), l = c.actualBoundingBoxAscent || p * 0.8, f = c.actualBoundingBoxDescent || p * 0.2, d = l + f, w = c.width, e = document.createElement("canvas");
|
|
9
9
|
e.width = Math.ceil(w * t), e.height = Math.ceil(d * t);
|
|
10
10
|
const h = e.getContext("2d");
|
|
11
|
-
return h.scale(t, t), h.font = s.font, h.textAlign = "left", h.textBaseline = "alphabetic", h.fillStyle =
|
|
11
|
+
return h.scale(t, t), h.font = s.font, h.textAlign = "left", h.textBaseline = "alphabetic", h.fillStyle = u, h.fillText(m, 0, l), e.toDataURL();
|
|
12
12
|
}
|
|
13
|
-
function $(
|
|
14
|
-
return Array.from(document.styleSheets).some((i) => i.href ===
|
|
13
|
+
function $(m) {
|
|
14
|
+
return Array.from(document.styleSheets).some((i) => i.href === m);
|
|
15
15
|
}
|
|
16
|
-
function P(
|
|
16
|
+
function P(m) {
|
|
17
17
|
return new Promise((i) => {
|
|
18
|
-
if ($(
|
|
18
|
+
if ($(m)) return i(null);
|
|
19
19
|
const a = document.createElement("link");
|
|
20
|
-
a.rel = "stylesheet", a.href =
|
|
20
|
+
a.rel = "stylesheet", a.href = m, a.setAttribute("data-snapdom", "injected-import"), a.onload = () => i(a), a.onerror = () => i(null), document.head.appendChild(a);
|
|
21
21
|
});
|
|
22
22
|
}
|
|
23
|
-
async function T({ preCached:
|
|
23
|
+
async function T({ preCached: m = !1 } = {}) {
|
|
24
24
|
if (o.resource.has("fonts-embed-css")) {
|
|
25
|
-
if (
|
|
25
|
+
if (m) {
|
|
26
26
|
const t = document.createElement("style");
|
|
27
27
|
t.setAttribute("data-snapdom", "embedFonts"), t.textContent = o.resource.get("fonts-embed-css"), document.head.appendChild(t);
|
|
28
28
|
}
|
|
@@ -40,7 +40,7 @@ async function T({ preCached: u = !1 } = {}) {
|
|
|
40
40
|
const p = Array.from(
|
|
41
41
|
document.querySelectorAll('link[rel="stylesheet"]')
|
|
42
42
|
).filter((t) => t.href);
|
|
43
|
-
let
|
|
43
|
+
let u = "";
|
|
44
44
|
for (const t of p)
|
|
45
45
|
try {
|
|
46
46
|
const s = await (await fetch(t.href)).text();
|
|
@@ -71,7 +71,7 @@ async function T({ preCached: u = !1 } = {}) {
|
|
|
71
71
|
let f = s;
|
|
72
72
|
for (const d of l)
|
|
73
73
|
d && (f = f.replace(d.original, d.inlined));
|
|
74
|
-
|
|
74
|
+
u += f + `
|
|
75
75
|
`;
|
|
76
76
|
} catch {
|
|
77
77
|
console.warn("[snapdom] Failed to fetch CSS:", t.href);
|
|
@@ -83,9 +83,9 @@ async function T({ preCached: u = !1 } = {}) {
|
|
|
83
83
|
if (n.type === CSSRule.FONT_FACE_RULE) {
|
|
84
84
|
const s = n.style.getPropertyValue("src"), c = n.style.getPropertyValue("font-family");
|
|
85
85
|
if (!s || y(c)) continue;
|
|
86
|
-
const l = /url\((["']?)([^"')]+)\1\)/g, f = /local\((["']?)[^)]+?\1\)/g, d =
|
|
86
|
+
const l = /url\((["']?)([^"')]+)\1\)/g, f = /local\((["']?)[^)]+?\1\)/g, d = !!s.match(l), w = !!s.match(f);
|
|
87
87
|
if (!d && w) {
|
|
88
|
-
|
|
88
|
+
u += `@font-face{font-family:${c};src:${s};font-style:${n.style.getPropertyValue("font-style") || "normal"};font-weight:${n.style.getPropertyValue("font-weight") || "normal"};}`;
|
|
89
89
|
continue;
|
|
90
90
|
}
|
|
91
91
|
let e = s;
|
|
@@ -114,7 +114,7 @@ async function T({ preCached: u = !1 } = {}) {
|
|
|
114
114
|
}
|
|
115
115
|
}
|
|
116
116
|
}
|
|
117
|
-
|
|
117
|
+
u += `@font-face{font-family:${c};src:${e};font-style:${n.style.getPropertyValue("font-style") || "normal"};font-weight:${n.style.getPropertyValue("font-weight") || "normal"};}`;
|
|
118
118
|
}
|
|
119
119
|
}
|
|
120
120
|
} catch (n) {
|
|
@@ -142,13 +142,13 @@ async function T({ preCached: u = !1 } = {}) {
|
|
|
142
142
|
continue;
|
|
143
143
|
}
|
|
144
144
|
}
|
|
145
|
-
|
|
145
|
+
u += `@font-face{font-family:'${t.family}';src:url(${n});font-style:${t.style || "normal"};font-weight:${t.weight || "normal"};}`;
|
|
146
146
|
}
|
|
147
|
-
if (
|
|
147
|
+
if (u && (o.resource.set("fonts-embed-css", u), m)) {
|
|
148
148
|
const t = document.createElement("style");
|
|
149
|
-
t.setAttribute("data-snapdom", "embedFonts"), t.textContent =
|
|
149
|
+
t.setAttribute("data-snapdom", "embedFonts"), t.textContent = u, document.head.appendChild(t);
|
|
150
150
|
}
|
|
151
|
-
return
|
|
151
|
+
return u;
|
|
152
152
|
}
|
|
153
153
|
export {
|
|
154
154
|
T as embedCustomFonts,
|
|
@@ -1,94 +1,89 @@
|
|
|
1
|
-
import { cache as
|
|
2
|
-
import { iconToImage as
|
|
3
|
-
import { isIconFont as
|
|
4
|
-
import { getStyleKey as
|
|
5
|
-
import { getStyle as
|
|
6
|
-
async function
|
|
7
|
-
if (!(c instanceof Element) || !(
|
|
1
|
+
import { cache as M } from "../core/cache.js";
|
|
2
|
+
import { iconToImage as q } from "./fonts.js";
|
|
3
|
+
import { isIconFont as v } from "./iconFonts.js";
|
|
4
|
+
import { getStyleKey as $ } from "../utils/cssTools.js";
|
|
5
|
+
import { getStyle as G, snapshotComputedStyle as z, parseContent as H, extractURL as J, fetchImage as Q, safeEncodeURI as Y, splitBackgroundImage as Z, inlineSingleBackgroundEntry as tt } from "../utils/helpers.js";
|
|
6
|
+
async function et(c, s, p, R = !1, b) {
|
|
7
|
+
if (!(c instanceof Element) || !(s instanceof Element)) return;
|
|
8
8
|
for (const n of ["::before", "::after", "::first-letter"])
|
|
9
9
|
try {
|
|
10
|
-
const t =
|
|
10
|
+
const t = G(c, n);
|
|
11
11
|
if (!t || typeof t[Symbol.iterator] != "function") continue;
|
|
12
12
|
if (n === "::first-letter") {
|
|
13
|
-
const
|
|
14
|
-
if (!(t.color !==
|
|
15
|
-
const
|
|
16
|
-
(
|
|
13
|
+
const e = getComputedStyle(c);
|
|
14
|
+
if (!(t.color !== e.color || t.fontSize !== e.fontSize || t.fontWeight !== e.fontWeight)) continue;
|
|
15
|
+
const i = Array.from(s.childNodes).find(
|
|
16
|
+
(C) => C.nodeType === Node.TEXT_NODE && C.textContent && C.textContent.trim().length > 0
|
|
17
17
|
);
|
|
18
|
-
if (!
|
|
19
|
-
const
|
|
20
|
-
if (!
|
|
21
|
-
const
|
|
22
|
-
|
|
23
|
-
const
|
|
24
|
-
|
|
25
|
-
const
|
|
26
|
-
|
|
18
|
+
if (!i) continue;
|
|
19
|
+
const N = i.textContent, d = N.match(/^([^\p{L}\p{N}\s]*[\p{L}\p{N}](?:['’])?)/u)?.[0], O = N.slice(d?.length || 0);
|
|
20
|
+
if (!d || /[\uD800-\uDFFF]/.test(d)) continue;
|
|
21
|
+
const f = document.createElement("span");
|
|
22
|
+
f.textContent = d, f.dataset.snapdomPseudo = "::first-letter";
|
|
23
|
+
const X = z(t), _ = $(X, "span", p);
|
|
24
|
+
M.preStyleMap.set(f, _);
|
|
25
|
+
const T = document.createTextNode(O);
|
|
26
|
+
s.replaceChild(T, i), s.insertBefore(f, T);
|
|
27
27
|
continue;
|
|
28
28
|
}
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
try {
|
|
50
|
-
const i = document.createElement("img"), P = await j(
|
|
51
|
-
A(e, { useProxy: S })
|
|
52
|
-
);
|
|
53
|
-
i.src = P, i.style = `width:${m}px;height:auto;object-fit:contain;`, o.appendChild(i);
|
|
54
|
-
} catch (i) {
|
|
55
|
-
console.error(
|
|
56
|
-
`[snapdom] Error in pseudo ${n} for`,
|
|
57
|
-
c,
|
|
58
|
-
i
|
|
59
|
-
);
|
|
60
|
-
}
|
|
61
|
-
} else !a && s && s !== "none" && (o.textContent = s);
|
|
62
|
-
if (C)
|
|
29
|
+
const h = t.getPropertyValue("content"), m = t.getPropertyValue("background-image"), l = t.getPropertyValue("background-color"), E = t.getPropertyValue("font-family"), g = parseInt(t.getPropertyValue("font-size")) || 32, U = parseInt(t.getPropertyValue("font-weight")) || !1, W = t.getPropertyValue("color") || "#000", j = t.getPropertyValue("display"), A = parseFloat(t.getPropertyValue("width")), D = parseFloat(t.getPropertyValue("height")), V = t.getPropertyValue("border-style"), w = t.getPropertyValue("transform"), S = v(E);
|
|
30
|
+
let r;
|
|
31
|
+
/counter\s*\(|counters\s*\(/.test(h) ? r = "- " : r = H(h);
|
|
32
|
+
const B = h !== "none" && r !== "", u = m && m !== "none", y = l && l !== "transparent" && l !== "rgba(0, 0, 0, 0)", F = j !== "inline" && (A > 0 || D > 0), k = V && V !== "none", I = w && w !== "none";
|
|
33
|
+
if (!(B || u || y || F || k || I)) continue;
|
|
34
|
+
const o = document.createElement("span");
|
|
35
|
+
o.dataset.snapdomPseudo = n;
|
|
36
|
+
const L = z(t), K = $(L, "span", p);
|
|
37
|
+
if (M.preStyleMap.set(o, K), S && r.length === 1) {
|
|
38
|
+
const e = document.createElement("img");
|
|
39
|
+
e.src = await q(
|
|
40
|
+
r,
|
|
41
|
+
E,
|
|
42
|
+
U,
|
|
43
|
+
g,
|
|
44
|
+
W
|
|
45
|
+
), e.style = `width:${g}px;height:auto;object-fit:contain;`, o.appendChild(e);
|
|
46
|
+
} else if (r.startsWith("url(")) {
|
|
47
|
+
const e = J(r);
|
|
48
|
+
if (e && e.trim() !== "")
|
|
63
49
|
try {
|
|
64
|
-
const
|
|
65
|
-
e
|
|
66
|
-
);
|
|
67
|
-
o.style.backgroundImage = i.join(", ");
|
|
68
|
-
} catch (e) {
|
|
69
|
-
console.warn(
|
|
70
|
-
`[snapdom] Failed to inline background-image for ${n}`,
|
|
71
|
-
e
|
|
50
|
+
const a = document.createElement("img"), i = await Q(
|
|
51
|
+
Y(e, { useProxy: b })
|
|
72
52
|
);
|
|
53
|
+
a.src = i, a.style = `width:${g}px;height:auto;object-fit:contain;`, o.appendChild(a);
|
|
54
|
+
} catch (a) {
|
|
55
|
+
console.error(`[snapdom] Error in pseudo ${n} for`, c, a);
|
|
73
56
|
}
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
57
|
+
} else !S && B && (o.textContent = r);
|
|
58
|
+
if (u)
|
|
59
|
+
try {
|
|
60
|
+
const e = Z(m), a = await Promise.all(
|
|
61
|
+
e.map((i) => tt(i))
|
|
62
|
+
);
|
|
63
|
+
o.style.backgroundImage = a.join(", ");
|
|
64
|
+
} catch (e) {
|
|
65
|
+
console.warn(
|
|
66
|
+
`[snapdom] Failed to inline background-image for ${n}`,
|
|
67
|
+
e
|
|
68
|
+
);
|
|
69
|
+
}
|
|
70
|
+
if (y && (o.style.backgroundColor = l), !(o.childNodes.length > 0 || o.textContent && o.textContent.trim() !== "" || u || y || F || k || I)) continue;
|
|
71
|
+
n === "::before" ? s.insertBefore(o, s.firstChild) : s.appendChild(o);
|
|
77
72
|
} catch (t) {
|
|
78
73
|
console.warn(`[snapdom] Failed to capture ${n} for`, c, t);
|
|
79
74
|
}
|
|
80
|
-
const
|
|
75
|
+
const x = Array.from(c.children), P = Array.from(s.children).filter(
|
|
81
76
|
(n) => !n.dataset.snapdomPseudo
|
|
82
77
|
);
|
|
83
|
-
for (let n = 0; n < Math.min(
|
|
84
|
-
await
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
78
|
+
for (let n = 0; n < Math.min(x.length, P.length); n++)
|
|
79
|
+
await et(
|
|
80
|
+
x[n],
|
|
81
|
+
P[n],
|
|
82
|
+
p,
|
|
83
|
+
R,
|
|
84
|
+
b
|
|
90
85
|
);
|
|
91
86
|
}
|
|
92
87
|
export {
|
|
93
|
-
|
|
88
|
+
et as inlinePseudoElements
|
|
94
89
|
};
|