@posthog/rrweb-snapshot 0.0.29 → 0.0.30

package/dist/index.d.cts

@@ -30,6 +30,8 @@ export declare type cdataNode = {
     textContent: '';
 };
 
+export declare function checkDataURLSize(dataURL: string, maxLength: number | undefined): string;
+
 export declare function classMatchesRegex(node: Node | null, regex: RegExp, checkAncestors: boolean): boolean;
 
 export declare function cleanupSnapshot(): void;
@@ -188,6 +190,8 @@ export declare function rebuild(n: serializedNodeWithId, options: {
     mirror: Mirror;
 }): Node | null;
 
+export declare function recompressBase64Image(img: HTMLImageElement, dataURL: string, type?: string, quality?: number): string;
+
 export declare type serializedElementNodeWithId = Extract<serializedNodeWithId, Record<'type', NodeType.Element>>;
 
 export declare type serializedNode = (documentNode | documentTypeNode | elementNode | textNode | cdataNode | commentNode) & {
@@ -276,7 +280,7 @@ export declare type textNode = {
 
 export declare function toLowerCase<T extends string>(str: T): Lowercase<T>;
 
-export declare function transformAttribute(doc: Document, tagName: Lowercase<string>, name: Lowercase<string>, value: string | null): string | null;
+export declare function transformAttribute(doc: Document, tagName: Lowercase<string>, name: Lowercase<string>, value: string | null, element?: HTMLElement, dataURLOptions?: DataURLOptions): string | null;
 
 export declare function visitSnapshot(node: serializedNodeWithId, onVisit: (node: serializedNodeWithId) => unknown): void;
 

package/dist/index.d.ts

@@ -30,6 +30,8 @@ export declare type cdataNode = {
     textContent: '';
 };
 
+export declare function checkDataURLSize(dataURL: string, maxLength: number | undefined): string;
+
 export declare function classMatchesRegex(node: Node | null, regex: RegExp, checkAncestors: boolean): boolean;
 
 export declare function cleanupSnapshot(): void;
@@ -188,6 +190,8 @@ export declare function rebuild(n: serializedNodeWithId, options: {
     mirror: Mirror;
 }): Node | null;
 
+export declare function recompressBase64Image(img: HTMLImageElement, dataURL: string, type?: string, quality?: number): string;
+
 export declare type serializedElementNodeWithId = Extract<serializedNodeWithId, Record<'type', NodeType.Element>>;
 
 export declare type serializedNode = (documentNode | documentTypeNode | elementNode | textNode | cdataNode | commentNode) & {
@@ -276,7 +280,7 @@ export declare type textNode = {
 
 export declare function toLowerCase<T extends string>(str: T): Lowercase<T>;
 
-export declare function transformAttribute(doc: Document, tagName: Lowercase<string>, name: Lowercase<string>, value: string | null): string | null;
+export declare function transformAttribute(doc: Document, tagName: Lowercase<string>, name: Lowercase<string>, value: string | null, element?: HTMLElement, dataURLOptions?: DataURLOptions): string | null;
 
 export declare function visitSnapshot(node: serializedNodeWithId, onVisit: (node: serializedNodeWithId) => unknown): void;
 

package/dist/rrweb-snapshot.cjs

@@ -470,6 +470,36 @@ function absolutifyURLs(cssText, href) {
     }
   );
 }
+const STRIPED_PLACEHOLDER_SVG = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPHBhdHRlcm4gaWQ9InN0cmlwZXMiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+CiAgICAgIDxyZWN0IHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iYmxhY2siLz4KICAgICAgPHBhdGggZD0iTTggMEgxNkwwIDE2VjhMOCAwWiIgZmlsbD0iIzJEMkQyRCIvPgogICAgICA8cGF0aCBkPSJNMTYgOFYxNkg4TDE2IDhaIiBmaWxsPSIjMkQyRDJEIi8+CiAgICA8L3BhdHRlcm4+CiAgPC9kZWZzPgogIDxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjc3RyaXBlcykiLz4KPC9zdmc+Cg==";
+const MAX_IMAGE_DIMENSION_FOR_RECOMPRESSION = 4096;
+function recompressBase64Image(img, dataURL, type, quality) {
+  if (!img.complete || img.naturalWidth === 0) {
+    return dataURL;
+  }
+  if (img.naturalWidth > MAX_IMAGE_DIMENSION_FOR_RECOMPRESSION || img.naturalHeight > MAX_IMAGE_DIMENSION_FOR_RECOMPRESSION) {
+    return dataURL;
+  }
+  try {
+    const canvas = document.createElement("canvas");
+    canvas.width = img.naturalWidth;
+    canvas.height = img.naturalHeight;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return dataURL;
+    }
+    ctx.drawImage(img, 0, 0);
+    const recompressed = canvas.toDataURL(type || "image/webp", quality ?? 0.4);
+    return recompressed;
+  } catch (err) {
+    return dataURL;
+  }
+}
+function checkDataURLSize(dataURL, maxLength) {
+  if (!maxLength || dataURL.length <= maxLength) {
+    return dataURL;
+  }
+  return STRIPED_PLACEHOLDER_SVG;
+}
 let _id = 1;
 const tagNameRegex = new RegExp("[^a-z0-9-_:]");
 const IGNORED_NODE = -2;
@@ -568,12 +598,32 @@ function getHref(doc, customHref) {
   a.setAttribute("href", customHref);
   return a.href;
 }
-function transformAttribute(doc, tagName, name, value) {
+function transformAttribute(doc, tagName, name, value, element, dataURLOptions) {
   if (!value) {
     return value;
   }
   if (name === "src" || name === "href" && !(tagName === "use" && value[0] === "#")) {
-    return absoluteToDoc(doc, value);
+    const transformedValue = absoluteToDoc(doc, value);
+    if (tagName === "img" && transformedValue.startsWith("data:") && element) {
+      const img = element;
+      let processedDataURL = transformedValue;
+      if ((dataURLOptions == null ? void 0 : dataURLOptions.type) || (dataURLOptions == null ? void 0 : dataURLOptions.quality) !== void 0) {
+        processedDataURL = recompressBase64Image(
+          img,
+          transformedValue,
+          dataURLOptions.type,
+          dataURLOptions.quality
+        );
+      }
+      if (dataURLOptions == null ? void 0 : dataURLOptions.maxBase64ImageLength) {
+        processedDataURL = checkDataURLSize(
+          processedDataURL,
+          dataURLOptions.maxBase64ImageLength
+        );
+      }
+      return processedDataURL;
+    }
+    return transformedValue;
   } else if (name === "xlink:href" && value[0] !== "#") {
     return absoluteToDoc(doc, value);
   } else if (name === "background" && (tagName === "table" || tagName === "td" || tagName === "th")) {
@@ -864,7 +914,9 @@ function serializeElementNode(n, options) {
         doc,
         tagName,
         toLowerCase(attr.name),
-        attr.value
+        attr.value,
+        n,
+        dataURLOptions
       );
     }
   }
@@ -5735,6 +5787,7 @@ exports.NodeType = NodeType;
 exports.absolutifyURLs = absolutifyURLs;
 exports.adaptCssForReplay = adaptCssForReplay;
 exports.buildNodeWithSN = buildNodeWithSN;
+exports.checkDataURLSize = checkDataURLSize;
 exports.classMatchesRegex = classMatchesRegex;
 exports.cleanupSnapshot = cleanupSnapshot;
 exports.createCache = createCache;
@@ -5755,6 +5808,7 @@ exports.isShadowRoot = isShadowRoot;
 exports.maskInputValue = maskInputValue;
 exports.needMaskingText = needMaskingText;
 exports.rebuild = rebuild;
+exports.recompressBase64Image = recompressBase64Image;
 exports.serializeNodeWithId = serializeNodeWithId;
 exports.snapshot = snapshot;
 exports.stringifyRule = stringifyRule;