@glimt/record 0.0.58 → 0.0.60

package/dist/record.umd.cjs

@@ -1034,6 +1034,223 @@ const _AsyncStylesheetManager$1 = class _AsyncStylesheetManager {
 __publicField$1(_AsyncStylesheetManager$1, "instance");
 let AsyncStylesheetManager$1 = _AsyncStylesheetManager$1;
 const asyncStylesheetManager$1 = new AsyncStylesheetManager$1();
+const serializeLinkInline = ({
+  attributes,
+  doc,
+  n: n2
+}) => {
+  const styleSheets2 = Array.from(doc.styleSheets);
+  let stylesheet = null;
+  for (let i2 = 0; i2 < styleSheets2.length; i2++) {
+    if (styleSheets2[i2].href === n2.href) {
+      stylesheet = styleSheets2[i2];
+      break;
+    }
+  }
+  let cssText = null;
+  if (stylesheet) {
+    cssText = stringifyStylesheet$1(stylesheet);
+  }
+  if (!cssText) {
+    cssText = asyncStylesheetManager$1.getClonedCssTextIfAvailable(
+      n2.href
+    );
+  }
+  if (cssText) {
+    delete attributes.rel;
+    delete attributes.href;
+    attributes._cssText = cssText;
+  } else {
+    const requestCssId = `css-request-${Math.random().toString(36).slice(2)}`;
+    asyncStylesheetManager$1.requestClone({
+      forElement: n2,
+      requestCssId
+    });
+    attributes._requestCssId = requestCssId;
+  }
+  return attributes;
+};
+const serializeStyleInline = ({
+  attributes,
+  n: n2
+}) => {
+  let cssText = stringifyStylesheet$1(
+    n2.sheet
+  );
+  if (cssText) {
+    if (n2.childNodes.length > 1) {
+      cssText = markCssSplits(cssText, n2);
+    }
+    attributes._cssText = cssText;
+  }
+  return attributes;
+};
+const serializeUserFields = ({
+  attributes,
+  n: n2,
+  tagName,
+  maskInputOptions,
+  maskInputFn
+}) => {
+  const value = n2.value;
+  const checked = n2.checked;
+  if (attributes.type !== "radio" && attributes.type !== "checkbox" && attributes.type !== "submit" && attributes.type !== "button" && value) {
+    attributes.value = maskInputValue({
+      element: n2,
+      type: getInputType(n2),
+      tagName,
+      value,
+      maskInputOptions,
+      maskInputFn
+    });
+  } else if (checked) {
+    attributes.checked = checked;
+  }
+  return attributes;
+};
+const serializeOption = ({
+  attributes,
+  n: n2,
+  maskInputOptions
+}) => {
+  if (n2.selected && !maskInputOptions["select"]) {
+    attributes.selected = true;
+  } else {
+    delete attributes.selected;
+  }
+  return attributes;
+};
+const runIdleCallback = (cb) => {
+  if ("requestIdleCallback" in window) {
+    window.requestIdleCallback(cb);
+  } else {
+    setTimeout(cb, 100);
+  }
+};
+const serializeCanvas = ({
+  attributes,
+  n: n2,
+  dataURLOptions,
+  doc
+}) => {
+  let context = "getContext" in n2 ? n2.getContext("2d") : null;
+  if (context != null) {
+    if (!is2DCanvasBlank(n2, context)) {
+      attributes.rr_dataURL = n2.toDataURL(
+        dataURLOptions.type,
+        dataURLOptions.quality
+      );
+    }
+  } else if (n2.width !== 0 && n2.height !== 0) {
+    const canvasDataURL = n2.toDataURL(
+      dataURLOptions.type,
+      dataURLOptions.quality
+    );
+    attributes.rr_dataURL = canvasDataURL;
+    runIdleCallback(() => {
+      try {
+        const blankCanvas = doc.createElement("canvas");
+        blankCanvas.width = n2.width;
+        blankCanvas.height = n2.height;
+        const blankCanvasDataURL = blankCanvas.toDataURL(
+          dataURLOptions.type,
+          dataURLOptions.quality
+        );
+        if (canvasDataURL === blankCanvasDataURL) {
+          delete attributes.rr_dataURL;
+        }
+      } catch (e2) {
+      }
+    });
+  }
+  return attributes;
+};
+const serializeImageInline = ({
+  attributes,
+  n: n2,
+  canvasService: canvasService2,
+  canvasCtx: canvasCtx2,
+  dataURLOptions,
+  doc
+}) => {
+  if (!canvasService2) {
+    canvasService2 = doc.createElement("canvas");
+    canvasCtx2 = canvasService2.getContext("2d");
+  }
+  const image = n2;
+  let overrideImage = null;
+  let calls = 0;
+  const imageSrc = (image.currentSrc || image.getAttribute("src") || "<unknown-src>") + "";
+  const imageHeight = image.naturalHeight;
+  const imageWidth = image.naturalWidth;
+  const inlineImageCleanup = () => {
+    overrideImage = null;
+  };
+  const recordInlineImage = () => {
+    calls++;
+    if (calls > 3) return;
+    (overrideImage != null ? overrideImage : image).removeEventListener("error", onImageLoadError);
+    try {
+      canvasService2.width = imageWidth;
+      canvasService2.height = imageHeight;
+      canvasCtx2.drawImage(image, 0, 0);
+      attributes.rr_dataURL = canvasService2.toDataURL(
+        dataURLOptions.type,
+        dataURLOptions.quality
+      );
+    } catch (err) {
+      if (image.crossOrigin !== "anonymous") {
+        if (shouldTryAnonymousFetchingOnCorsError$1()) {
+          overrideImage = new Image();
+          overrideImage.src = imageSrc;
+          overrideImage.crossOrigin = "anonymous";
+          overrideImage.height = imageHeight;
+          overrideImage.width = imageWidth;
+          if (overrideImage.complete && overrideImage.naturalWidth !== 0) {
+            recordInlineImage();
+          } else {
+            overrideImage.addEventListener("load", recordInlineImage, {
+              once: true
+            });
+            overrideImage.addEventListener("error", onImageLoadError, {
+              once: true
+            });
+          }
+          return;
+        }
+      } else {
+        if (isDebug$1())
+          console.warn(
+            `Cannot inline img src=${imageSrc}! Error: ${err}`
+          );
+      }
+    }
+    inlineImageCleanup();
+  };
+  const onImageLoadError = () => {
+    (overrideImage != null ? overrideImage : image).removeEventListener("load", recordInlineImage);
+    inlineImageCleanup();
+  };
+  if (image.complete && image.naturalWidth !== 0) recordInlineImage();
+  else {
+    image.addEventListener("load", recordInlineImage, { once: true });
+    image.addEventListener("error", onImageLoadError, { once: true });
+  }
+  return attributes;
+};
+const serializeMediaElements = ({
+  attributes,
+  n: n2
+}) => {
+  const mediaAttributes = attributes;
+  mediaAttributes.rr_mediaState = n2.paused ? "paused" : "played";
+  mediaAttributes.rr_mediaCurrentTime = n2.currentTime;
+  mediaAttributes.rr_mediaPlaybackRate = n2.playbackRate;
+  mediaAttributes.rr_mediaMuted = n2.muted;
+  mediaAttributes.rr_mediaLoop = n2.loop;
+  mediaAttributes.rr_mediaVolume = n2.volume;
+  return attributes;
+};
 let _id = 1;
 const tagNameRegex = new RegExp("[^a-z0-9-_:]");
 const IGNORED_NODE = -2;
@@ -1050,8 +1267,8 @@ function getValidTagName$1(element) {
   }
   return processedTagName;
 }
-let canvasService;
-let canvasCtx;
+let canvasService = null;
+let canvasCtx = null;
 const SRCSET_NOT_SPACES = /^[^ \t\n\r\u000c]+/;
 const SRCSET_COMMAS_OR_SPACES = /^[, \t\n\r\u000c]+/;
 function getAbsoluteSrcsetString(doc, attributeValue) {
@@ -1363,13 +1580,6 @@ function getRootId(doc, mirror2) {
   const docId = mirror2.getId(doc);
   return docId === 1 ? void 0 : docId;
 }
-const runIdleCallback = (cb) => {
-  if ("requestIdleCallback" in window) {
-    window.requestIdleCallback(cb);
-  } else {
-    setTimeout(cb, 100);
-  }
-};
 function serializeTextNode(n2, options) {
   const { needsMask, maskTextFn, rootId, cssCaptured } = options;
   const parent = index.parentNode(n2);
@@ -1424,179 +1634,77 @@ function serializeElementNode(n2, options) {
       );
     }
   }
-  if (tagName === "link" && inlineStylesheet) {
-    const styleSheets2 = Array.from(doc.styleSheets);
-    let stylesheet = null;
-    for (let i2 = 0; i2 < styleSheets2.length; i2++) {
-      if (styleSheets2[i2].href === n2.href) {
-        stylesheet = styleSheets2[i2];
-        break;
+  switch (tagName) {
+    case "link":
+      if (inlineStylesheet) {
+        attributes = serializeLinkInline({
+          doc,
+          attributes,
+          n: n2
+        });
       }
-    }
-    let cssText = null;
-    if (stylesheet) {
-      cssText = stringifyStylesheet$1(stylesheet);
-    }
-    if (!cssText) {
-      cssText = asyncStylesheetManager$1.getClonedCssTextIfAvailable(
-        n2.href
-      );
-    }
-    if (cssText) {
-      delete attributes.rel;
-      delete attributes.href;
-      attributes._cssText = cssText;
-    } else {
-      const requestCssId = `css-request-${Math.random().toString(36).slice(2)}`;
-      asyncStylesheetManager$1.requestClone({
-        forElement: n2,
-        requestCssId
-      });
-      attributes._requestCssId = requestCssId;
-    }
-  }
-  if (tagName === "style" && n2.sheet) {
-    let cssText = stringifyStylesheet$1(
-      n2.sheet
-    );
-    if (cssText) {
-      if (n2.childNodes.length > 1) {
-        cssText = markCssSplits(cssText, n2);
+      break;
+    case "style":
+      if (n2.sheet) {
+        attributes = serializeStyleInline({
+          attributes,
+          n: n2
+        });
       }
-      attributes._cssText = cssText;
-    }
-  }
-  if (tagName === "input" || tagName === "textarea" || tagName === "select") {
-    const value = n2.value;
-    const checked = n2.checked;
-    if (attributes.type !== "radio" && attributes.type !== "checkbox" && attributes.type !== "submit" && attributes.type !== "button" && value) {
-      attributes.value = maskInputValue({
-        element: n2,
-        type: getInputType(n2),
+      break;
+    case "input":
+    case "textarea":
+    case "select":
+      attributes = serializeUserFields({
+        attributes,
+        n: n2,
         tagName,
-        value,
         maskInputOptions,
         maskInputFn
       });
-    } else if (checked) {
-      attributes.checked = checked;
-    }
-  }
-  if (tagName === "option") {
-    if (n2.selected && !maskInputOptions["select"]) {
-      attributes.selected = true;
-    } else {
-      delete attributes.selected;
-    }
-  }
-  if (tagName === "dialog" && n2.open) {
-    attributes.rr_open_mode = n2.matches("dialog:modal") ? "modal" : "non-modal";
-  }
-  if (tagName === "canvas" && recordCanvas) {
-    let context = "getContext" in n2 ? n2.getContext("2d") : null;
-    if (context != null) {
-      if (!is2DCanvasBlank(n2, context)) {
-        attributes.rr_dataURL = n2.toDataURL(
-          dataURLOptions.type,
-          dataURLOptions.quality
-        );
-      }
-    } else if (n2.width !== 0 && n2.height !== 0) {
-      const canvasDataURL = n2.toDataURL(
-        dataURLOptions.type,
-        dataURLOptions.quality
-      );
-      attributes.rr_dataURL = canvasDataURL;
-      runIdleCallback(() => {
-        try {
-          const blankCanvas = doc.createElement("canvas");
-          blankCanvas.width = n2.width;
-          blankCanvas.height = n2.height;
-          const blankCanvasDataURL = blankCanvas.toDataURL(
-            dataURLOptions.type,
-            dataURLOptions.quality
-          );
-          if (canvasDataURL === blankCanvasDataURL) {
-            delete attributes.rr_dataURL;
-          }
-        } catch (e2) {
-        }
+      break;
+    case "option":
+      attributes = serializeOption({
+        attributes,
+        n: n2,
+        maskInputOptions
       });
-    }
-  }
-  if (tagName === "img" && inlineImages) {
-    if (!canvasService) {
-      canvasService = doc.createElement("canvas");
-      canvasCtx = canvasService.getContext("2d");
-    }
-    const image = n2;
-    let overrideImage = null;
-    let calls = 0;
-    const imageSrc = (image.currentSrc || image.getAttribute("src") || "<unknown-src>") + "";
-    const imageHeight = image.naturalHeight;
-    const imageWidth = image.naturalWidth;
-    const inlineImageCleanup = () => {
-      overrideImage = null;
-    };
-    const recordInlineImage = () => {
-      calls++;
-      if (calls > 3) return;
-      (overrideImage != null ? overrideImage : image).removeEventListener("error", onImageLoadError);
-      try {
-        canvasService.width = imageWidth;
-        canvasService.height = imageHeight;
-        canvasCtx.drawImage(image, 0, 0);
-        attributes.rr_dataURL = canvasService.toDataURL(
-          dataURLOptions.type,
-          dataURLOptions.quality
-        );
-      } catch (err) {
-        if (image.crossOrigin !== "anonymous") {
-          if (shouldTryAnonymousFetchingOnCorsError$1()) {
-            overrideImage = new Image();
-            overrideImage.src = imageSrc;
-            overrideImage.crossOrigin = "anonymous";
-            overrideImage.height = imageHeight;
-            overrideImage.width = imageWidth;
-            if (overrideImage.complete && overrideImage.naturalWidth !== 0) {
-              recordInlineImage();
-            } else {
-              overrideImage.addEventListener("load", recordInlineImage, {
-                once: true
-              });
-              overrideImage.addEventListener("error", onImageLoadError, {
-                once: true
-              });
-            }
-            return;
-          }
-        } else {
-          if (isDebug$1())
-            console.warn(
-              `Cannot inline img src=${imageSrc}! Error: ${err}`
-            );
-        }
+      break;
+    case "dialog":
+      if (n2.open) {
+        attributes.rr_open_mode = n2.matches(
+          "dialog:modal"
+        ) ? "modal" : "non-modal";
       }
-      inlineImageCleanup();
-    };
-    const onImageLoadError = () => {
-      (overrideImage != null ? overrideImage : image).removeEventListener("load", recordInlineImage);
-      inlineImageCleanup();
-    };
-    if (image.complete && image.naturalWidth !== 0) recordInlineImage();
-    else {
-      image.addEventListener("load", recordInlineImage, { once: true });
-      image.addEventListener("error", onImageLoadError, { once: true });
-    }
-  }
-  if (tagName === "audio" || tagName === "video") {
-    const mediaAttributes = attributes;
-    mediaAttributes.rr_mediaState = n2.paused ? "paused" : "played";
-    mediaAttributes.rr_mediaCurrentTime = n2.currentTime;
-    mediaAttributes.rr_mediaPlaybackRate = n2.playbackRate;
-    mediaAttributes.rr_mediaMuted = n2.muted;
-    mediaAttributes.rr_mediaLoop = n2.loop;
-    mediaAttributes.rr_mediaVolume = n2.volume;
+      break;
+    case "canvas":
+      if (recordCanvas) {
+        attributes = serializeCanvas({
+          attributes,
+          n: n2,
+          dataURLOptions,
+          doc
+        });
+      }
+    case "img":
+      if (inlineImages) {
+        attributes = serializeImageInline({
+          attributes,
+          n: n2,
+          canvasService,
+          canvasCtx,
+          dataURLOptions,
+          doc
+        });
+      }
+      break;
+    case "audio":
+    case "video":
+      attributes = serializeMediaElements({
+        attributes,
+        n: n2
+      });
+      break;
   }
   if (!newlyAddedElement) {
     if (n2.scrollLeft) {
@@ -1675,7 +1783,12 @@ function slimDOMExcluded(sn, slimDOMOptions) {
   }
   return false;
 }
+const debugging = {
+  index: 0,
+  store: {}
+};
 function serializeNodeWithId(n2, options) {
+  const start = Date.now();
   const {
     doc,
     mirror: mirror2,
@@ -1905,6 +2018,23 @@ function serializeNodeWithId(n2, options) {
       stylesheetLoadTimeout
     );
   }
+  debugging.index++;
+  const took = Date.now() - start;
+  if (!(n2.nodeName in debugging.store)) {
+    debugging.store[n2.nodeName] = [];
+  }
+  debugging.store[n2.nodeName].push(took);
+  if (debugging.index % 1e3 === 0) {
+    debugging.index = 0;
+    const avgs = Object.entries(debugging.store).map(([key, values]) => {
+      return {
+        key,
+        avg: values.reduce((a2, b) => a2 + b, 0) / values.length
+      };
+    });
+    console.log("last 1000 avgs", JSON.parse(JSON.stringify(avgs)));
+    debugging.store = {};
+  }
   return serializedNode;
 }
 function snapshot(n2, options) {