@glimt/record 0.0.44 → 0.0.46

package/dist/record.cjs

@@ -812,7 +812,8 @@ function splitCssText(cssText, style, _testNoPxNorm = false) {
 function markCssSplits(cssText, style) {
   return splitCssText(cssText, style).join("/* rr_split */");
 }
-const CLEANUP_DEBOUNCE_TIME$1 = 1e3 * 60 * 2;
+const CLEANUP_DEBOUNCE_TIME$1 = 1e3 * 30;
+const DATA_ATTRIBUTE_CLONED_NAME$1 = "data-rrweb-link-cloned";
 const DISALLOWED_EXTENSIONS$1 = [
   // Fonts
   "woff",
@@ -869,14 +870,13 @@ const _AsyncStylesheetManager$1 = class _AsyncStylesheetManager {
     var _a2;
     if (!(href in this.clones) || this.clones[href] === void 0) return;
     const clone = document.querySelector(
-      `link[data-rrweb-link-cloned="${this.clones[href].cloneNodeAttrId}"]`
+      `link[${DATA_ATTRIBUTE_CLONED_NAME$1}="${this.clones[href].cloneNodeAttrId}"]`
     );
     if (!clone) return;
     (_a2 = clone.parentNode) == null ? void 0 : _a2.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;
     for (let i2 = styleSheets2.length - 1; i2 >= 0; i2--) {
@@ -885,39 +885,38 @@ const _AsyncStylesheetManager$1 = class _AsyncStylesheetManager {
         break;
       }
     }
-    if (!clonedStyleSheet) {
-      console.log(
-        "AsyncStylesheetManager, onLoad: couldn't find stylesheet for href:",
-        href
-      );
-      return this.removeCloneNode(href);
-    }
+    if (!clonedStyleSheet) return this.removeCloneNode(href);
     const newCssText = stringifyStylesheet$1(clonedStyleSheet);
     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... for href:",
-      href
-    );
+    if (!newCssText) return;
     this.clones[href].cssText = newCssText;
     this.clones[href].loaded = true;
     const original = document.querySelector(
-      `link[data-rrweb-link-cloned="source-${this.clones[href].cloneNodeAttrId}"]`
+      `link[${DATA_ATTRIBUTE_CLONED_NAME$1}="source-${this.clones[href].cloneNodeAttrId}"]`
     );
-    if (!original) {
+    if (original) {
+      original.setAttribute("data-rrweb-mutation", Date.now().toString());
+      original.removeAttribute(DATA_ATTRIBUTE_CLONED_NAME$1);
+    } else {
       this.clones[href].original.setAttribute(
         "data-rrweb-mutation",
         Date.now().toString()
       );
-    } else {
-      original.setAttribute("data-rrweb-mutation", Date.now().toString());
+      this.clones[href].original.removeAttribute(DATA_ATTRIBUTE_CLONED_NAME$1);
     }
+    window.dispatchEvent(
+      new CustomEvent("__rrweb_custom_event__", {
+        detail: {
+          type: 5,
+          timestamp: Date.now(),
+          data: {
+            tag: "async-css-resolution",
+            requestCssId: this.clones[href].requestCssId,
+            cssText: this.clones[href].cssText
+          }
+        }
+      })
+    );
   }
   onLoadError(href) {
     if (!(href in this.clones) || this.clones[href] === void 0) return;
@@ -929,16 +928,17 @@ const _AsyncStylesheetManager$1 = class _AsyncStylesheetManager {
     }
   }
   onCleanTimeout() {
-    console.log("AsyncStylesheetManager, onCleanTimeout: cleaning up");
-    this.cleanTimeout = null;
-    this.removeAllCloneElements();
+    asyncStylesheetManager$1.cleanTimeout = null;
+    asyncStylesheetManager$1.removeAllCloneElements();
   }
   blowCache() {
-    console.log("AsyncStylesheetManager, blowCache: blowing cache");
-    this.clones = {};
     this.removeAllCloneElements();
+    this.clones = {};
   }
-  registerClone({ forElement }) {
+  requestClone({
+    forElement,
+    requestCssId
+  }) {
     if (this.currentHref != null && document.location.href !== this.currentHref)
       this.blowCache();
     this.currentHref = document.location.href;
@@ -952,20 +952,16 @@ const _AsyncStylesheetManager$1 = class _AsyncStylesheetManager {
         const [filename] = last.split("?");
         const ext = filename.split(".").pop();
         if (ext) {
-          if (DISALLOWED_EXTENSIONS$1.includes(ext.toLowerCase())) return;
+          if (DISALLOWED_EXTENSIONS$1.includes(ext.trim().toLowerCase())) return;
         }
       }
     }
-    console.log(
-      "AsyncStylesheetManager, registerClone: registering clone for href:",
-      href
-    );
     const clone = forElement.cloneNode();
     const cloneNodeAttrId = Math.random().toString(36).slice(2);
     clone.setAttribute("crossorigin", "anonymous");
-    clone.setAttribute("data-rrweb-link-cloned", cloneNodeAttrId);
+    clone.setAttribute(DATA_ATTRIBUTE_CLONED_NAME$1, cloneNodeAttrId);
     forElement.setAttribute(
-      "data-rrweb-link-cloned",
+      DATA_ATTRIBUTE_CLONED_NAME$1,
       `source-${cloneNodeAttrId}`
     );
     document.head.appendChild(clone);
@@ -974,7 +970,8 @@ const _AsyncStylesheetManager$1 = class _AsyncStylesheetManager {
       clone,
       loaded: false,
       cssText: null,
-      cloneNodeAttrId
+      cloneNodeAttrId,
+      requestCssId
     };
     clone.onload = () => {
       this.onLoad(href);
@@ -990,10 +987,6 @@ 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, for href:",
-        href
-      );
       return this.clones[href].cssText;
     }
     return null;
@@ -1415,9 +1408,12 @@ function serializeElementNode(n2, options) {
       delete attributes.href;
       attributes._cssText = cssText;
     } else {
-      asyncStylesheetManager$1.registerClone({
-        forElement: n2
+      const requestCssId = `css-request-${Math.random().toString(36).slice(2)}`;
+      asyncStylesheetManager$1.requestClone({
+        forElement: n2,
+        requestCssId
       });
+      attributes._requestCssId = requestCssId;
     }
   }
   if (tagName === "style" && n2.sheet) {
@@ -5704,7 +5700,8 @@ function absolutifyURLs(cssText, href) {
     }
   );
 }
-const CLEANUP_DEBOUNCE_TIME = 1e3 * 60 * 2;
+const CLEANUP_DEBOUNCE_TIME = 1e3 * 30;
+const DATA_ATTRIBUTE_CLONED_NAME = "data-rrweb-link-cloned";
 const DISALLOWED_EXTENSIONS = [
   // Fonts
   "woff",
@@ -5761,14 +5758,13 @@ const _AsyncStylesheetManager2 = class _AsyncStylesheetManager22 {
     var _a2;
     if (!(href in this.clones) || this.clones[href] === void 0) return;
     const clone = document.querySelector(
-      `link[data-rrweb-link-cloned="${this.clones[href].cloneNodeAttrId}"]`
+      `link[${DATA_ATTRIBUTE_CLONED_NAME}="${this.clones[href].cloneNodeAttrId}"]`
     );
     if (!clone) return;
     (_a2 = clone.parentNode) == null ? void 0 : _a2.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;
     for (let i2 = styleSheets2.length - 1; i2 >= 0; i2--) {
@@ -5777,39 +5773,38 @@ const _AsyncStylesheetManager2 = class _AsyncStylesheetManager22 {
         break;
       }
     }
-    if (!clonedStyleSheet) {
-      console.log(
-        "AsyncStylesheetManager, onLoad: couldn't find stylesheet for href:",
-        href
-      );
-      return this.removeCloneNode(href);
-    }
+    if (!clonedStyleSheet) return this.removeCloneNode(href);
     const newCssText = stringifyStylesheet(clonedStyleSheet);
     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... for href:",
-      href
-    );
+    if (!newCssText) return;
     this.clones[href].cssText = newCssText;
     this.clones[href].loaded = true;
     const original = document.querySelector(
-      `link[data-rrweb-link-cloned="source-${this.clones[href].cloneNodeAttrId}"]`
+      `link[${DATA_ATTRIBUTE_CLONED_NAME}="source-${this.clones[href].cloneNodeAttrId}"]`
     );
-    if (!original) {
+    if (original) {
+      original.setAttribute("data-rrweb-mutation", Date.now().toString());
+      original.removeAttribute(DATA_ATTRIBUTE_CLONED_NAME);
+    } else {
       this.clones[href].original.setAttribute(
         "data-rrweb-mutation",
         Date.now().toString()
       );
-    } else {
-      original.setAttribute("data-rrweb-mutation", Date.now().toString());
+      this.clones[href].original.removeAttribute(DATA_ATTRIBUTE_CLONED_NAME);
     }
+    window.dispatchEvent(
+      new CustomEvent("__rrweb_custom_event__", {
+        detail: {
+          type: 5,
+          timestamp: Date.now(),
+          data: {
+            tag: "async-css-resolution",
+            requestCssId: this.clones[href].requestCssId,
+            cssText: this.clones[href].cssText
+          }
+        }
+      })
+    );
   }
   onLoadError(href) {
     if (!(href in this.clones) || this.clones[href] === void 0) return;
@@ -5821,16 +5816,17 @@ const _AsyncStylesheetManager2 = class _AsyncStylesheetManager22 {
     }
   }
   onCleanTimeout() {
-    console.log("AsyncStylesheetManager, onCleanTimeout: cleaning up");
-    this.cleanTimeout = null;
-    this.removeAllCloneElements();
+    asyncStylesheetManager.cleanTimeout = null;
+    asyncStylesheetManager.removeAllCloneElements();
   }
   blowCache() {
-    console.log("AsyncStylesheetManager, blowCache: blowing cache");
-    this.clones = {};
     this.removeAllCloneElements();
+    this.clones = {};
   }
-  registerClone({ forElement }) {
+  requestClone({
+    forElement,
+    requestCssId
+  }) {
     if (this.currentHref != null && document.location.href !== this.currentHref)
       this.blowCache();
     this.currentHref = document.location.href;
@@ -5844,20 +5840,16 @@ const _AsyncStylesheetManager2 = class _AsyncStylesheetManager22 {
         const [filename] = last.split("?");
         const ext = filename.split(".").pop();
         if (ext) {
-          if (DISALLOWED_EXTENSIONS.includes(ext.toLowerCase())) return;
+          if (DISALLOWED_EXTENSIONS.includes(ext.trim().toLowerCase())) return;
         }
       }
     }
-    console.log(
-      "AsyncStylesheetManager, registerClone: registering clone for href:",
-      href
-    );
     const clone = forElement.cloneNode();
     const cloneNodeAttrId = Math.random().toString(36).slice(2);
     clone.setAttribute("crossorigin", "anonymous");
-    clone.setAttribute("data-rrweb-link-cloned", cloneNodeAttrId);
+    clone.setAttribute(DATA_ATTRIBUTE_CLONED_NAME, cloneNodeAttrId);
     forElement.setAttribute(
-      "data-rrweb-link-cloned",
+      DATA_ATTRIBUTE_CLONED_NAME,
       `source-${cloneNodeAttrId}`
     );
     document.head.appendChild(clone);
@@ -5866,7 +5858,8 @@ const _AsyncStylesheetManager2 = class _AsyncStylesheetManager22 {
       clone,
       loaded: false,
       cssText: null,
-      cloneNodeAttrId
+      cloneNodeAttrId,
+      requestCssId
     };
     clone.onload = () => {
       this.onLoad(href);
@@ -5882,10 +5875,6 @@ 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, for href:",
-        href
-      );
       return this.clones[href].cssText;
     }
     return null;