@glimt/record 0.0.41 → 0.0.43

package/dist/record.cjs

@@ -812,7 +812,7 @@ 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 CLEANUP_DEBOUNCE_TIME$1 = 1e3 * 60 * 2;
 const _AsyncStylesheetManager$1 = class _AsyncStylesheetManager {
   constructor() {
     __publicField$1(this, "currentHref", null);
@@ -821,23 +821,44 @@ const _AsyncStylesheetManager$1 = class _AsyncStylesheetManager {
     if (_AsyncStylesheetManager.instance) return _AsyncStylesheetManager.instance;
     _AsyncStylesheetManager.instance = this;
   }
+  removeCloneNode(href) {
+    if (!(href in this.clones) || this.clones[href] === void 0) return;
+    const clone = document.querySelector(
+      `link[data-rrweb-link-cloned="${this.clones[href].cloneNodeAttrId}"]`
+    );
+    if (!clone) return;
+    document.head.removeChild(clone);
+  }
   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;
+    if (!clonedStyleSheet) {
+      console.log(
+        "AsyncStylesheetManager, onLoad: couldn't find stylesheet for href:",
+        href
+      );
+      return this.removeCloneNode(href);
+    }
     const newCssText = stringifyStylesheet$1(clonedStyleSheet);
-    if (!newCssText) return;
+    this.removeCloneNode(href);
+    if (!newCssText) {
+      console.log(
+        "AsyncStylesheetManager, onLoad: couldn't stringify stylesheet for href:",
+        href
+      );
+      return;
+    }
     console.log(
-      "AsyncStylesheetManager, onLoad: success! did get new css text! forcing mutation..."
+      "AsyncStylesheetManager, onLoad: success! did get new css text! forcing mutation... for href:",
+      href
     );
     this.clones[href].cssText = newCssText;
     this.clones[href].loaded = true;
@@ -848,12 +869,11 @@ const _AsyncStylesheetManager$1 = class _AsyncStylesheetManager {
   }
   onLoadError(href) {
     if (!(href in this.clones) || this.clones[href] === void 0) return;
-    document.head.removeChild(this.clones[href].clone);
+    this.removeCloneNode(href);
   }
   removeAllCloneElements() {
-    for (const clone of Object.values(this.clones)) {
-      if (!clone) continue;
-      document.head.removeChild(clone.clone);
+    for (const href of Object.keys(this.clones)) {
+      this.removeCloneNode(href);
     }
   }
   onCleanTimeout() {
@@ -871,10 +891,6 @@ const _AsyncStylesheetManager$1 = class _AsyncStylesheetManager {
       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;
@@ -883,14 +899,16 @@ const _AsyncStylesheetManager$1 = class _AsyncStylesheetManager {
       href
     );
     const clone = forElement.cloneNode();
+    const cloneNodeAttrId = Math.random().toString(36).slice(2);
     clone.setAttribute("crossorigin", "anonymous");
-    clone.setAttribute("data-rrweb-link-cloned", "true");
+    clone.setAttribute("data-rrweb-link-cloned", cloneNodeAttrId);
     document.head.appendChild(clone);
     this.clones[href] = {
       original: forElement,
       clone,
       loaded: false,
-      cssText: null
+      cssText: null,
+      cloneNodeAttrId
     };
     clone.onload = () => {
       this.onLoad(href);
@@ -904,7 +922,8 @@ const _AsyncStylesheetManager$1 = class _AsyncStylesheetManager {
   getClonedCssTextIfAvailable(href) {
     if (href in this.clones && this.clones[href] !== void 0 && this.clones[href].loaded === true) {
       console.log(
-        "AsyncStylesheetManager, getClonedCssTextIfAvailable: returning cloned cssText!"
+        "AsyncStylesheetManager, getClonedCssTextIfAvailable: returning cloned cssText, for href:",
+        href
       );
       return this.clones[href].cssText;
     }
@@ -1306,10 +1325,13 @@ function serializeElementNode(n2, options) {
   }
   if (tagName === "link" && inlineStylesheet) {
     const styleSheets2 = Array.from(doc.styleSheets);
-    const styleSheetIndex = styleSheets2.findIndex((s2) => {
-      return s2.href === n2.href;
-    });
-    const stylesheet = styleSheets2[styleSheetIndex];
+    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);
@@ -1324,10 +1346,6 @@ function serializeElementNode(n2, options) {
       delete attributes.href;
       attributes._cssText = cssText;
     } else {
-      console.log(
-        "missing cssText on first passthrough for href:",
-        n2.href
-      );
       asyncStylesheetManager.registerClone({
         forElement: n2
       });
@@ -5617,7 +5635,7 @@ function absolutifyURLs(cssText, href) {
     }
   );
 }
-const CLEANUP_DEBOUNCE_TIME = 1e3 * 60 * 5;
+const CLEANUP_DEBOUNCE_TIME = 1e3 * 60 * 2;
 const _AsyncStylesheetManager2 = class _AsyncStylesheetManager22 {
   constructor() {
     __publicField22(this, "currentHref", null);
@@ -5626,23 +5644,44 @@ const _AsyncStylesheetManager2 = class _AsyncStylesheetManager22 {
     if (_AsyncStylesheetManager22.instance) return _AsyncStylesheetManager22.instance;
     _AsyncStylesheetManager22.instance = this;
   }
+  removeCloneNode(href) {
+    if (!(href in this.clones) || this.clones[href] === void 0) return;
+    const clone = document.querySelector(
+      `link[data-rrweb-link-cloned="${this.clones[href].cloneNodeAttrId}"]`
+    );
+    if (!clone) return;
+    document.head.removeChild(clone);
+  }
   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;
+    if (!clonedStyleSheet) {
+      console.log(
+        "AsyncStylesheetManager, onLoad: couldn't find stylesheet for href:",
+        href
+      );
+      return this.removeCloneNode(href);
+    }
     const newCssText = stringifyStylesheet(clonedStyleSheet);
-    if (!newCssText) return;
+    this.removeCloneNode(href);
+    if (!newCssText) {
+      console.log(
+        "AsyncStylesheetManager, onLoad: couldn't stringify stylesheet for href:",
+        href
+      );
+      return;
+    }
     console.log(
-      "AsyncStylesheetManager, onLoad: success! did get new css text! forcing mutation..."
+      "AsyncStylesheetManager, onLoad: success! did get new css text! forcing mutation... for href:",
+      href
     );
     this.clones[href].cssText = newCssText;
     this.clones[href].loaded = true;
@@ -5653,12 +5692,11 @@ const _AsyncStylesheetManager2 = class _AsyncStylesheetManager22 {
   }
   onLoadError(href) {
     if (!(href in this.clones) || this.clones[href] === void 0) return;
-    document.head.removeChild(this.clones[href].clone);
+    this.removeCloneNode(href);
   }
   removeAllCloneElements() {
-    for (const clone of Object.values(this.clones)) {
-      if (!clone) continue;
-      document.head.removeChild(clone.clone);
+    for (const href of Object.keys(this.clones)) {
+      this.removeCloneNode(href);
     }
   }
   onCleanTimeout() {
@@ -5676,10 +5714,6 @@ const _AsyncStylesheetManager2 = class _AsyncStylesheetManager22 {
       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;
@@ -5688,14 +5722,16 @@ const _AsyncStylesheetManager2 = class _AsyncStylesheetManager22 {
       href
     );
     const clone = forElement.cloneNode();
+    const cloneNodeAttrId = Math.random().toString(36).slice(2);
     clone.setAttribute("crossorigin", "anonymous");
-    clone.setAttribute("data-rrweb-link-cloned", "true");
+    clone.setAttribute("data-rrweb-link-cloned", cloneNodeAttrId);
     document.head.appendChild(clone);
     this.clones[href] = {
       original: forElement,
       clone,
       loaded: false,
-      cssText: null
+      cssText: null,
+      cloneNodeAttrId
     };
     clone.onload = () => {
       this.onLoad(href);
@@ -5709,7 +5745,8 @@ const _AsyncStylesheetManager2 = class _AsyncStylesheetManager22 {
   getClonedCssTextIfAvailable(href) {
     if (href in this.clones && this.clones[href] !== void 0 && this.clones[href].loaded === true) {
       console.log(
-        "AsyncStylesheetManager, getClonedCssTextIfAvailable: returning cloned cssText!"
+        "AsyncStylesheetManager, getClonedCssTextIfAvailable: returning cloned cssText, for href:",
+        href
       );
       return this.clones[href].cssText;
     }