clipper: minor perf improvements

packages/clipper/src/domtoimage.ts

@@ -62,6 +62,7 @@ async function toSvg(node: HTMLElement, options: Options) {
     fonts: true,
     images: true,
     stylesheets: true,
+    inlineImages: true,
     ...options.inlineOptions
   };
 

packages/clipper/src/images.ts

@@ -27,7 +27,7 @@ async function inlineAllImages(root: HTMLElement, options?: FetchOptions) {
     promises.push(inlineImage(image, options));
   }
 
-  await Promise.all(promises).catch((e) => console.error(e));
+  await Promise.allSettled(promises).catch((e) => console.error(e));
 }
 export { inlineAllImages };
 
@@ -45,15 +45,10 @@ async function inlineImage(element: HTMLImageElement, options?: FetchOptions) {
     return element;
   }
 
-  return new Promise<HTMLImageElement | null>(function (resolve, reject) {
-    if (element.parentElement?.tagName === "PICTURE") {
-      element.parentElement?.replaceWith(element);
-    }
+  if (element.parentElement?.tagName === "PICTURE") {
+    element.parentElement?.replaceWith(element);
+  }
 
-    element.onload = () => resolve(element);
-    // for any image with invalid src(such as <img src />), just ignore it
-    element.onerror = (e) => reject(e);
-    element.src = dataURL;
-    element.removeAttribute("srcset");
-  });
+  element.src = dataURL;
+  element.removeAttribute("srcset");
 }

packages/clipper/src/index.ts

@@ -107,11 +107,11 @@ async function clipScreenshot<
     height: document.body.scrollHeight,
     fetchOptions: resolveFetchOptions(config),
     inlineOptions: {
+      inlineImages: true,
       fonts: true,
       images: true,
       stylesheets: true
-    },
-    styles: true
+    }
   });
 
   if (output === "jpeg" || output === "png")

packages/clipper/src/styles.ts

@@ -62,11 +62,9 @@ async function skipStyleSheet(sheet: CSSStyleSheet, options?: FetchOptions) {
     sheet.cssRules.length;
   } catch (_e) {
     const node = sheet.ownerNode;
-    if (
-      sheet.href &&
-      node instanceof HTMLLinkElement &&
-      !isStylesheetForPrint(node)
-    ) {
+    if (sheet.href && node instanceof HTMLLinkElement) {
+      if (isStylesheetForPrint(node)) return true;
+
       const styleNode = await downloadStylesheet(node.href, options);
       if (styleNode) node.replaceWith(styleNode);
     }
@@ -88,6 +86,8 @@ function isStylesheetForPrint(sheet: CSSStyleSheet | HTMLLinkElement) {
 export function addStylesToHead(head: HTMLHeadElement, options?: FetchOptions) {
   for (const sheet of document.styleSheets) {
     if (isStylesheetForPrint(sheet)) continue;
+    if (sheet.href && sheet.ownerNode instanceof HTMLLinkElement) continue;
+
     const styleNode = rulesToStyleNode(sheet.cssRules);
     head.appendChild(styleNode);
   }

packages/clipper/src/types.ts

@@ -48,7 +48,6 @@ export type Options = {
   scale?: number;
   fetchOptions?: FetchOptions;
   inlineOptions?: InlineOptions;
-  styles?: boolean;
 };
 
 export type Config = {