@glimt/record 0.0.44 → 0.0.46

package/dist/record.js

@@ -810,7 +810,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",
@@ -867,14 +868,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--) {
@@ -883,39 +883,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;
@@ -927,16 +926,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;
@@ -950,20 +950,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);
@@ -972,7 +968,8 @@ const _AsyncStylesheetManager$1 = class _AsyncStylesheetManager {
       clone,
       loaded: false,
       cssText: null,
-      cloneNodeAttrId
+      cloneNodeAttrId,
+      requestCssId
     };
     clone.onload = () => {
       this.onLoad(href);
@@ -988,10 +985,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;
@@ -1413,9 +1406,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) {
@@ -5702,7 +5698,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",
@@ -5759,14 +5756,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--) {
@@ -5775,39 +5771,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;
@@ -5819,16 +5814,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;
@@ -5842,20 +5838,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);
@@ -5864,7 +5856,8 @@ const _AsyncStylesheetManager2 = class _AsyncStylesheetManager22 {
       clone,
       loaded: false,
       cssText: null,
-      cloneNodeAttrId
+      cloneNodeAttrId,
+      requestCssId
     };
     clone.onload = () => {
       this.onLoad(href);
@@ -5880,10 +5873,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;