Skip to content

Commit cc638e7

Browse files
tinchox5tinchox5
committed
Optimice
1 parent c4f4182 commit cc638e7

2 files changed

Lines changed: 27 additions & 55 deletions

File tree

‎src/core/prepare.js‎

Lines changed: 21 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,46 @@
1-
import { getDefaultStyles, generateReusableCSSClasses } from '../utils/cssTools.js';
2-
import { deepCloneWithShadow } from './clone.js';
3-
import { inlineImages } from '../modules/images.js';
4-
import { inlineBackgroundImages } from '../modules/background.js';
1+
import { generateCSSClasses} from '../utils/cssTools.js';
2+
import { deepClone } from './clone.js';
53
import { inlinePseudoElements } from '../modules/pseudo.js';
6-
import { applyFontClasses } from '../modules/fonts.js';
74

85
/**
9-
* Prepares a clone of an element with all its styles and content
6+
* Prepares a clone of an element
107
* @param {Element} element - Element to clone
118
* @returns {Promise<Object>} Object containing the clone, CSS, and style cache
129
*/
1310

14-
export async function prepareClone(element) {
15-
const styleMap = /* @__PURE__ */ new Map();
16-
const styleCache = /* @__PURE__ */ new WeakMap();
17-
const nodeMap = /* @__PURE__ */ new WeakMap();
18-
let defaults;
19-
// TO-DO option to use default styles. Meanwhile, getDefaultStyles() is disabled;
20-
try {
21-
defaults = {} // getDefaultStyles();
22-
} catch (e) {
23-
console.warn("getDefaultStyles failed:", e);
24-
defaults = {};
25-
}
11+
export async function prepareClone(element, compress = false) {
12+
const styleMap = new Map();
13+
const styleCache = new WeakMap();
14+
const nodeMap = new WeakMap();
2615
let clone;
16+
2717
try {
28-
clone = deepCloneWithShadow(element, styleMap, defaults, styleCache, nodeMap);
18+
clone = deepClone(element, styleMap, styleCache, nodeMap, compress);
2919
} catch (e) {
30-
console.warn("deepCloneWithShadow failed:", e);
20+
console.warn("deepClone failed:", e);
3121
throw e;
3222
}
23+
3324
try {
34-
await inlineImages(clone);
35-
} catch (e) {
36-
console.warn("inlineImages failed:", e);
37-
}
38-
try {
39-
await inlineBackgroundImages(element, clone, styleCache);
40-
} catch (e) {
41-
console.warn("inlineBackgroundImages failed:", e);
42-
}
43-
try {
44-
await inlinePseudoElements(element, clone);
25+
await inlinePseudoElements(element, clone, styleMap, styleCache, compress);
4526
} catch (e) {
4627
console.warn("inlinePseudoElements failed:", e);
47-
}
48-
// Generate optimized CSS classes from the collected styles
49-
const keyToClass = generateReusableCSSClasses(styleMap);
50-
const classCSS = Array.from(keyToClass.entries()).map(([key, className]) => `.${className}{${key}}`).join("");
51-
// Apply classes to elements and remove inline styles
28+
}
29+
30+
const keyToClass = generateCSSClasses(styleMap);
31+
const classCSS = Array.from(keyToClass.entries())
32+
.map(([key, className]) => `.${className}{${key}}`)
33+
.join("");
34+
5235
for (const [node, key] of styleMap.entries()) {
5336
if (node.tagName === "STYLE") continue;
5437
const className = keyToClass.get(key);
55-
if (className) {
56-
node.classList.add(className);
57-
try {
58-
applyFontClasses(node, nodeMap.get(node), styleCache);
59-
} catch (e) {
60-
console.warn("applyFontClasses failed for node:", node, e);
61-
}
62-
}
38+
if (className) node.classList.add(className);
6339

64-
// Preserve background images while removing other inline styles
6540
const bgImage = node.style?.backgroundImage;
6641
node.removeAttribute("style");
6742
if (bgImage && bgImage !== "none") node.style.backgroundImage = bgImage;
6843
}
44+
6945
return { clone, classCSS, styleCache };
7046
}

‎src/modules/images.js‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,28 @@
1-
import { fetchImageAsDataURL } from '../utils/fetchImage.js';
2-
import { delay } from '../utils/delay.js';
1+
import { fetchImage } from '../utils/helpers.js';
32

43
/**
54
* Converts images to data URLs or replaces them with placeholders
65
* @param {Element} clone - Clone of the original element
76
* @returns {Promise<void>} Promise that resolves when all images are processed
87
*/
98
export async function inlineImages(clone) {
10-
const imgs = Array.from(clone.querySelectorAll('img'));
9+
const imgs = Array.from(clone.querySelectorAll("img"));
1110
const processImg = async (img) => {
1211
const src = img.src;
1312
try {
14-
const dataUrl = await fetchImageAsDataURL(src);
13+
const dataUrl = await fetchImage(src);
1514
img.src = dataUrl;
1615
if (!img.width) img.width = img.naturalWidth || 100;
1716
if (!img.height) img.height = img.naturalHeight || 100;
1817
} catch {
19-
const fallback = document.createElement('div');
18+
const fallback = document.createElement("div");
2019
fallback.style = `width: ${img.width || 100}px; height: ${img.height || 100}px; background: #ccc; display: inline-block; text-align: center; line-height: ${img.height || 100}px; color: #666; font-size: 12px;`;
21-
fallback.innerText = 'img';
20+
fallback.innerText = "img";
2221
img.replaceWith(fallback);
2322
}
2423
};
25-
26-
// Process images in batches to avoid overwhelming the browser
2724
for (let i = 0; i < imgs.length; i += 4) {
2825
const group = imgs.slice(i, i + 4).map(processImg);
2926
await Promise.allSettled(group);
30-
// await delay(1); // Small delay to keep the browser responsive
3127
}
32-
}
28+
}

0 commit comments

Comments
 (0)