@glimt/record 0.0.38 → 0.0.40

package/dist/record.cjs

@@ -443,7 +443,7 @@ function isShadowRoot(n2) {
 function isNativeShadowDom(shadowRoot2) {
   return Object.prototype.toString.call(shadowRoot2) === "[object ShadowRoot]";
 }
-function fixBrowserCompatibilityIssuesInCSS(cssText) {
+function fixBrowserCompatibilityIssuesInCSS$1(cssText) {
   if (cssText.includes(" background-clip: text;") && !cssText.includes(" -webkit-background-clip: text;")) {
     cssText = cssText.replace(
       /\sbackground-clip:\s*text;/g,
@@ -452,7 +452,7 @@ function fixBrowserCompatibilityIssuesInCSS(cssText) {
   }
   return cssText;
 }
-function escapeImportStatement(rule2) {
+function escapeImportStatement$1(rule2) {
   const { cssText } = rule2;
   if (cssText.split('"').length < 3) return cssText;
   const statement = ["@import", `url(${JSON.stringify(rule2.href)})`];
@@ -469,7 +469,7 @@ function escapeImportStatement(rule2) {
   }
   return statement.join(" ") + ";";
 }
-function stringifyStylesheet(s2) {
+function stringifyStylesheet$1(s2) {
   try {
     const rules2 = s2.rules || s2.cssRules;
     if (!rules2) {
@@ -481,47 +481,47 @@ function stringifyStylesheet(s2) {
     }
     const stringifiedRules = Array.from(
       rules2,
-      (rule2) => stringifyRule(rule2, sheetHref)
+      (rule2) => stringifyRule$1(rule2, sheetHref)
     ).join("");
-    return fixBrowserCompatibilityIssuesInCSS(stringifiedRules);
+    return fixBrowserCompatibilityIssuesInCSS$1(stringifiedRules);
   } catch (error) {
     return null;
   }
 }
-function stringifyRule(rule2, sheetHref) {
-  if (isCSSImportRule(rule2)) {
+function stringifyRule$1(rule2, sheetHref) {
+  if (isCSSImportRule$1(rule2)) {
     let importStringified;
     try {
       importStringified = // for same-origin stylesheets,
       // we can access the imported stylesheet rules directly
-      stringifyStylesheet(rule2.styleSheet) || // work around browser issues with the raw string `@import url(...)` statement
-      escapeImportStatement(rule2);
+      stringifyStylesheet$1(rule2.styleSheet) || // work around browser issues with the raw string `@import url(...)` statement
+      escapeImportStatement$1(rule2);
     } catch (error) {
       importStringified = rule2.cssText;
     }
     if (rule2.styleSheet.href) {
-      return absolutifyURLs(importStringified, rule2.styleSheet.href);
+      return absolutifyURLs$1(importStringified, rule2.styleSheet.href);
     }
     return importStringified;
   } else {
     let ruleStringified = rule2.cssText;
-    if (isCSSStyleRule(rule2) && rule2.selectorText.includes(":")) {
-      ruleStringified = fixSafariColons(ruleStringified);
+    if (isCSSStyleRule$1(rule2) && rule2.selectorText.includes(":")) {
+      ruleStringified = fixSafariColons$1(ruleStringified);
     }
     if (sheetHref) {
-      return absolutifyURLs(ruleStringified, sheetHref);
+      return absolutifyURLs$1(ruleStringified, sheetHref);
     }
     return ruleStringified;
   }
 }
-function fixSafariColons(cssStringified) {
+function fixSafariColons$1(cssStringified) {
   const regex = /(\[(?:[\w-]+)[^\\])(:(?:[\w-]+)\])/gm;
   return cssStringified.replace(regex, "$1\\$2");
 }
-function isCSSImportRule(rule2) {
+function isCSSImportRule$1(rule2) {
   return "styleSheet" in rule2;
 }
-function isCSSStyleRule(rule2) {
+function isCSSStyleRule$1(rule2) {
   return "selectorText" in rule2;
 }
 class Mirror {
@@ -658,7 +658,7 @@ function extractFileExtension(path, baseURL) {
   const match = url.pathname.match(regex);
   return (match == null ? void 0 : match[1]) ?? null;
 }
-function extractOrigin(url) {
+function extractOrigin$1(url) {
   let origin = "";
   if (url.indexOf("//") > -1) {
     origin = url.split("/").slice(0, 3).join("/");
@@ -668,27 +668,27 @@ function extractOrigin(url) {
   origin = origin.split("?")[0];
   return origin;
 }
-const URL_IN_CSS_REF = /url\((?:(')([^']*)'|(")(.*?)"|([^)]*))\)/gm;
-const URL_PROTOCOL_MATCH = /^(?:[a-z+]+:)?\/\//i;
-const URL_WWW_MATCH = /^www\..*/i;
-const DATA_URI = /^(data:)([^,]*),(.*)/i;
-function absolutifyURLs(cssText, href) {
+const URL_IN_CSS_REF$1 = /url\((?:(')([^']*)'|(")(.*?)"|([^)]*))\)/gm;
+const URL_PROTOCOL_MATCH$1 = /^(?:[a-z+]+:)?\/\//i;
+const URL_WWW_MATCH$1 = /^www\..*/i;
+const DATA_URI$1 = /^(data:)([^,]*),(.*)/i;
+function absolutifyURLs$1(cssText, href) {
   return (cssText || "").replace(
-    URL_IN_CSS_REF,
+    URL_IN_CSS_REF$1,
     (origin, quote1, path1, quote2, path2, path3) => {
       const filePath = path1 || path2 || path3;
       const maybeQuote = quote1 || quote2 || "";
       if (!filePath) {
         return origin;
       }
-      if (URL_PROTOCOL_MATCH.test(filePath) || URL_WWW_MATCH.test(filePath)) {
+      if (URL_PROTOCOL_MATCH$1.test(filePath) || URL_WWW_MATCH$1.test(filePath)) {
         return `url(${maybeQuote}${filePath}${maybeQuote})`;
       }
-      if (DATA_URI.test(filePath)) {
+      if (DATA_URI$1.test(filePath)) {
         return `url(${maybeQuote}${filePath}${maybeQuote})`;
       }
       if (filePath[0] === "/") {
-        return `url(${maybeQuote}${extractOrigin(href) + filePath}${maybeQuote})`;
+        return `url(${maybeQuote}${extractOrigin$1(href) + filePath}${maybeQuote})`;
       }
       const stack = href.split("/");
       const parts = filePath.split("/");
@@ -811,6 +811,108 @@ function splitCssText(cssText, style, _testNoPxNorm = false) {
 function markCssSplits(cssText, style) {
   return splitCssText(cssText, style).join("/* rr_split */");
 }
+const CLEANUP_DEBOUNCE_TIME$1 = 1e3 * 60 * 5;
+const _AsyncStylesheetManager$1 = class _AsyncStylesheetManager {
+  constructor() {
+    __publicField$1(this, "currentHref", null);
+    __publicField$1(this, "clones", {});
+    __publicField$1(this, "cleanTimeout", null);
+    if (_AsyncStylesheetManager.instance) return _AsyncStylesheetManager.instance;
+    _AsyncStylesheetManager.instance = this;
+  }
+  onLoad(href) {
+    if (!(href in this.clones) || this.clones[href] === void 0) return;
+    console.log("AsyncStylesheetManager, onLoad: href:", href);
+    const styleSheets2 = Array.from(document.styleSheets);
+    let clonedStyleSheet = null;
+    document.head.removeChild(this.clones[href].clone);
+    for (let i2 = styleSheets2.length - 1; i2 >= 0; i2--) {
+      if (styleSheets2[i2].href === href) {
+        clonedStyleSheet = styleSheets2[i2];
+        break;
+      }
+    }
+    if (!clonedStyleSheet) return;
+    const newCssText = stringifyStylesheet$1(clonedStyleSheet);
+    if (!newCssText) return;
+    console.log(
+      "AsyncStylesheetManager, onLoad: success! did get new css text! forcing mutation..."
+    );
+    this.clones[href].cssText = newCssText;
+    this.clones[href].loaded = true;
+    this.clones[href].original.setAttribute(
+      "data-rrweb-mutation",
+      Date.now().toString()
+    );
+  }
+  onLoadError(href) {
+    if (!(href in this.clones) || this.clones[href] === void 0) return;
+    document.head.removeChild(this.clones[href].clone);
+  }
+  removeAllCloneElements() {
+    for (const clone of Object.values(this.clones)) {
+      if (!clone) continue;
+      document.head.removeChild(clone.clone);
+    }
+  }
+  onCleanTimeout() {
+    console.log("AsyncStylesheetManager, onCleanTimeout: cleaning up");
+    this.cleanTimeout = null;
+    this.removeAllCloneElements();
+  }
+  blowCache() {
+    console.log("AsyncStylesheetManager, blowCache: blowing cache");
+    this.clones = {};
+    this.removeAllCloneElements();
+  }
+  registerClone({ forElement }) {
+    if (this.currentHref != null && document.location.href !== this.currentHref)
+      this.blowCache();
+    this.currentHref = document.location.href;
+    const href = forElement.href;
+    console.log(
+      "AsyncStylesheetManager, registerClone: wants a clone for href:",
+      href
+    );
+    if (!href) return;
+    if (href in this.clones && this.clones[href] !== void 0) return;
+    if (forElement.getAttribute("crossorigin") === "anonymous") return;
+    console.log(
+      "AsyncStylesheetManager, registerClone: registering clone for href:",
+      href
+    );
+    const clone = forElement.cloneNode();
+    clone.setAttribute("crossorigin", "anonymous");
+    clone.setAttribute("data-rrweb-link-cloned", "true");
+    document.head.appendChild(clone);
+    this.clones[href] = {
+      original: forElement,
+      clone,
+      loaded: false,
+      cssText: null
+    };
+    clone.onload = () => {
+      this.onLoad(href);
+    };
+    clone.onerror = () => {
+      this.onLoadError(href);
+    };
+    if (this.cleanTimeout) clearTimeout(this.cleanTimeout);
+    this.cleanTimeout = setTimeout(this.onCleanTimeout, CLEANUP_DEBOUNCE_TIME$1);
+  }
+  getClonedCssTextIfAvailable(href) {
+    if (href in this.clones && this.clones[href] !== void 0 && this.clones[href].loaded === true) {
+      console.log(
+        "AsyncStylesheetManager, getClonedCssTextIfAvailable: returning cloned cssText!"
+      );
+      return this.clones[href].cssText;
+    }
+    return null;
+  }
+};
+__publicField$1(_AsyncStylesheetManager$1, "instance");
+let AsyncStylesheetManager$1 = _AsyncStylesheetManager$1;
+const asyncStylesheetManager = new AsyncStylesheetManager$1();
 let _id = 1;
 const tagNameRegex = new RegExp("[^a-z0-9-_:]");
 const IGNORED_NODE = -2;
@@ -922,7 +1024,7 @@ function transformAttribute(doc, tagName, name, value) {
   } else if (name === "srcset") {
     return getAbsoluteSrcsetString(doc, value);
   } else if (name === "style") {
-    return absolutifyURLs(value, getHref(doc));
+    return absolutifyURLs$1(value, getHref(doc));
   } else if (tagName === "object" && name === "data") {
     return absoluteToDoc(doc, value);
   }
@@ -1159,7 +1261,7 @@ function serializeTextNode(n2, options) {
   } else if (!cssCaptured) {
     textContent2 = index.textContent(n2);
     if (isStyle && textContent2) {
-      textContent2 = absolutifyURLs(textContent2, getHref(options.doc));
+      textContent2 = absolutifyURLs$1(textContent2, getHref(options.doc));
     }
   }
   if (!isStyle && !isScript && textContent2 && needsMask) {
@@ -1202,23 +1304,32 @@ function serializeElementNode(n2, options) {
     }
   }
   if (tagName === "link" && inlineStylesheet) {
-    const stylesheet = Array.from(doc.styleSheets).find((s2) => {
+    const styleSheets2 = Array.from(doc.styleSheets);
+    const styleSheetIndex = styleSheets2.findIndex((s2) => {
       return s2.href === n2.href;
     });
+    const stylesheet = styleSheets2[styleSheetIndex];
     let cssText = null;
     if (stylesheet) {
-      cssText = stringifyStylesheet(stylesheet);
+      cssText = stringifyStylesheet$1(stylesheet);
+    }
+    if (!cssText) {
+      cssText = asyncStylesheetManager.getClonedCssTextIfAvailable(
+        n2.href
+      );
     }
     if (cssText) {
       delete attributes.rel;
       delete attributes.href;
       attributes._cssText = cssText;
     } else {
-      console.log("failed to extract stylesheets from link element", n2);
+      asyncStylesheetManager.registerClone({
+        forElement: n2
+      });
     }
   }
   if (tagName === "style" && n2.sheet) {
-    let cssText = stringifyStylesheet(
+    let cssText = stringifyStylesheet$1(
       n2.sheet
     );
     if (cssText) {
@@ -5368,6 +5479,240 @@ postcss$1$1.Node;
 var __defProp2 = Object.defineProperty;
 var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField2 = (obj, key, value) => __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp22 = Object.defineProperty;
+var __defNormalProp22 = (obj, key, value) => key in obj ? __defProp22(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField22 = (obj, key, value) => __defNormalProp22(obj, typeof key !== "symbol" ? key + "" : key, value);
+function fixBrowserCompatibilityIssuesInCSS(cssText) {
+  if (cssText.includes(" background-clip: text;") && !cssText.includes(" -webkit-background-clip: text;")) {
+    cssText = cssText.replace(
+      /\sbackground-clip:\s*text;/g,
+      " -webkit-background-clip: text; background-clip: text;"
+    );
+  }
+  return cssText;
+}
+function escapeImportStatement(rule2) {
+  const { cssText } = rule2;
+  if (cssText.split('"').length < 3) return cssText;
+  const statement = ["@import", `url(${JSON.stringify(rule2.href)})`];
+  if (rule2.layerName === "") {
+    statement.push(`layer`);
+  } else if (rule2.layerName) {
+    statement.push(`layer(${rule2.layerName})`);
+  }
+  if (rule2.supportsText) {
+    statement.push(`supports(${rule2.supportsText})`);
+  }
+  if (rule2.media.length) {
+    statement.push(rule2.media.mediaText);
+  }
+  return statement.join(" ") + ";";
+}
+function stringifyStylesheet(s2) {
+  try {
+    const rules2 = s2.rules || s2.cssRules;
+    if (!rules2) {
+      return null;
+    }
+    let sheetHref = s2.href;
+    if (!sheetHref && s2.ownerNode && s2.ownerNode.ownerDocument) {
+      sheetHref = s2.ownerNode.ownerDocument.location.href;
+    }
+    const stringifiedRules = Array.from(
+      rules2,
+      (rule2) => stringifyRule(rule2, sheetHref)
+    ).join("");
+    return fixBrowserCompatibilityIssuesInCSS(stringifiedRules);
+  } catch (error) {
+    return null;
+  }
+}
+function stringifyRule(rule2, sheetHref) {
+  if (isCSSImportRule(rule2)) {
+    let importStringified;
+    try {
+      importStringified = // for same-origin stylesheets,
+      // we can access the imported stylesheet rules directly
+      stringifyStylesheet(rule2.styleSheet) || // work around browser issues with the raw string `@import url(...)` statement
+      escapeImportStatement(rule2);
+    } catch (error) {
+      importStringified = rule2.cssText;
+    }
+    if (rule2.styleSheet.href) {
+      return absolutifyURLs(importStringified, rule2.styleSheet.href);
+    }
+    return importStringified;
+  } else {
+    let ruleStringified = rule2.cssText;
+    if (isCSSStyleRule(rule2) && rule2.selectorText.includes(":")) {
+      ruleStringified = fixSafariColons(ruleStringified);
+    }
+    if (sheetHref) {
+      return absolutifyURLs(ruleStringified, sheetHref);
+    }
+    return ruleStringified;
+  }
+}
+function fixSafariColons(cssStringified) {
+  const regex = /(\[(?:[\w-]+)[^\\])(:(?:[\w-]+)\])/gm;
+  return cssStringified.replace(regex, "$1\\$2");
+}
+function isCSSImportRule(rule2) {
+  return "styleSheet" in rule2;
+}
+function isCSSStyleRule(rule2) {
+  return "selectorText" in rule2;
+}
+function extractOrigin(url) {
+  let origin = "";
+  if (url.indexOf("//") > -1) {
+    origin = url.split("/").slice(0, 3).join("/");
+  } else {
+    origin = url.split("/")[0];
+  }
+  origin = origin.split("?")[0];
+  return origin;
+}
+const URL_IN_CSS_REF = /url\((?:(')([^']*)'|(")(.*?)"|([^)]*))\)/gm;
+const URL_PROTOCOL_MATCH = /^(?:[a-z+]+:)?\/\//i;
+const URL_WWW_MATCH = /^www\..*/i;
+const DATA_URI = /^(data:)([^,]*),(.*)/i;
+function absolutifyURLs(cssText, href) {
+  return (cssText || "").replace(
+    URL_IN_CSS_REF,
+    (origin, quote1, path1, quote2, path2, path3) => {
+      const filePath = path1 || path2 || path3;
+      const maybeQuote = quote1 || quote2 || "";
+      if (!filePath) {
+        return origin;
+      }
+      if (URL_PROTOCOL_MATCH.test(filePath) || URL_WWW_MATCH.test(filePath)) {
+        return `url(${maybeQuote}${filePath}${maybeQuote})`;
+      }
+      if (DATA_URI.test(filePath)) {
+        return `url(${maybeQuote}${filePath}${maybeQuote})`;
+      }
+      if (filePath[0] === "/") {
+        return `url(${maybeQuote}${extractOrigin(href) + filePath}${maybeQuote})`;
+      }
+      const stack = href.split("/");
+      const parts = filePath.split("/");
+      stack.pop();
+      for (const part of parts) {
+        if (part === ".") {
+          continue;
+        } else if (part === "..") {
+          stack.pop();
+        } else {
+          stack.push(part);
+        }
+      }
+      return `url(${maybeQuote}${stack.join("/")}${maybeQuote})`;
+    }
+  );
+}
+const CLEANUP_DEBOUNCE_TIME = 1e3 * 60 * 5;
+const _AsyncStylesheetManager2 = class _AsyncStylesheetManager22 {
+  constructor() {
+    __publicField22(this, "currentHref", null);
+    __publicField22(this, "clones", {});
+    __publicField22(this, "cleanTimeout", null);
+    if (_AsyncStylesheetManager22.instance) return _AsyncStylesheetManager22.instance;
+    _AsyncStylesheetManager22.instance = this;
+  }
+  onLoad(href) {
+    if (!(href in this.clones) || this.clones[href] === void 0) return;
+    console.log("AsyncStylesheetManager, onLoad: href:", href);
+    const styleSheets2 = Array.from(document.styleSheets);
+    let clonedStyleSheet = null;
+    document.head.removeChild(this.clones[href].clone);
+    for (let i2 = styleSheets2.length - 1; i2 >= 0; i2--) {
+      if (styleSheets2[i2].href === href) {
+        clonedStyleSheet = styleSheets2[i2];
+        break;
+      }
+    }
+    if (!clonedStyleSheet) return;
+    const newCssText = stringifyStylesheet(clonedStyleSheet);
+    if (!newCssText) return;
+    console.log(
+      "AsyncStylesheetManager, onLoad: success! did get new css text! forcing mutation..."
+    );
+    this.clones[href].cssText = newCssText;
+    this.clones[href].loaded = true;
+    this.clones[href].original.setAttribute(
+      "data-rrweb-mutation",
+      Date.now().toString()
+    );
+  }
+  onLoadError(href) {
+    if (!(href in this.clones) || this.clones[href] === void 0) return;
+    document.head.removeChild(this.clones[href].clone);
+  }
+  removeAllCloneElements() {
+    for (const clone of Object.values(this.clones)) {
+      if (!clone) continue;
+      document.head.removeChild(clone.clone);
+    }
+  }
+  onCleanTimeout() {
+    console.log("AsyncStylesheetManager, onCleanTimeout: cleaning up");
+    this.cleanTimeout = null;
+    this.removeAllCloneElements();
+  }
+  blowCache() {
+    console.log("AsyncStylesheetManager, blowCache: blowing cache");
+    this.clones = {};
+    this.removeAllCloneElements();
+  }
+  registerClone({ forElement }) {
+    if (this.currentHref != null && document.location.href !== this.currentHref)
+      this.blowCache();
+    this.currentHref = document.location.href;
+    const href = forElement.href;
+    console.log(
+      "AsyncStylesheetManager, registerClone: wants a clone for href:",
+      href
+    );
+    if (!href) return;
+    if (href in this.clones && this.clones[href] !== void 0) return;
+    if (forElement.getAttribute("crossorigin") === "anonymous") return;
+    console.log(
+      "AsyncStylesheetManager, registerClone: registering clone for href:",
+      href
+    );
+    const clone = forElement.cloneNode();
+    clone.setAttribute("crossorigin", "anonymous");
+    clone.setAttribute("data-rrweb-link-cloned", "true");
+    document.head.appendChild(clone);
+    this.clones[href] = {
+      original: forElement,
+      clone,
+      loaded: false,
+      cssText: null
+    };
+    clone.onload = () => {
+      this.onLoad(href);
+    };
+    clone.onerror = () => {
+      this.onLoadError(href);
+    };
+    if (this.cleanTimeout) clearTimeout(this.cleanTimeout);
+    this.cleanTimeout = setTimeout(this.onCleanTimeout, CLEANUP_DEBOUNCE_TIME);
+  }
+  getClonedCssTextIfAvailable(href) {
+    if (href in this.clones && this.clones[href] !== void 0 && this.clones[href].loaded === true) {
+      console.log(
+        "AsyncStylesheetManager, getClonedCssTextIfAvailable: returning cloned cssText!"
+      );
+      return this.clones[href].cssText;
+    }
+    return null;
+  }
+};
+__publicField22(_AsyncStylesheetManager2, "instance");
+let AsyncStylesheetManager = _AsyncStylesheetManager2;
+new AsyncStylesheetManager();
 function getDefaultExportFromCjs(x2) {
   return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
 }
@@ -12122,7 +12467,7 @@ class StylesheetManager {
         styles.push({
           styleId,
           rules: Array.from(sheet.rules || CSSRule, (r2, index2) => ({
-            rule: stringifyRule(r2, sheet.href),
+            rule: stringifyRule$1(r2, sheet.href),
             index: index2
           }))
         });
@@ -12591,22 +12936,17 @@ function record(options = {}) {
     };
     const customOnLoad = () => {
       window.removeEventListener("load", customOnLoad);
-      console.log("customOnLoad fired", recording, initedAt);
       if (!recording || initedAt == null) return;
-      console.log("customOnLoad wants to take a full snapshot");
       if (Date.now() - initedAt <= 10) {
-        console.log("customOnLoad skipping full snapshot bc it was too soon");
         return;
       }
-      console.log("customOnLoad taking full snapshot bc race condition");
       takeFullSnapshot$1();
     };
     window.addEventListener("load", customOnLoad);
     if (document.readyState === "interactive" || document.readyState === "complete") {
-      console.log(
-        "fired init() bc readyState === 'interactive' || 'complete'",
-        document.readyState
-      );
+      if (document.readyState === "complete") {
+        window.removeEventListener("load", customOnLoad);
+      }
       init();
     } else {
       handlers.push(
@@ -12616,7 +12956,6 @@ function record(options = {}) {
             data: {}
           });
           if (recordAfter === "DOMContentLoaded") {
-            console.log("fired init() bc listener 'DOMContentLoaded'");
             init();
           }
         })
@@ -12630,7 +12969,6 @@ function record(options = {}) {
               data: {}
             });
             if (recordAfter === "load") {
-              console.log("fired init() bc listener 'load'");
               init();
             }
           },