@screeb/rrweb 1.0.8 → 1.0.11

package/dist/rrweb.cjs

@@ -144,6 +144,32 @@ function querySelectorAll$1(n2, selectors) {
 function mutationObserverCtor$1() {
   return getUntaintedPrototype$1("MutationObserver").constructor;
 }
+function patch$1(source, name, replacement) {
+  try {
+    if (!(name in source)) {
+      return () => {
+      };
+    }
+    const original = source[name];
+    const wrapped = replacement(original);
+    if (typeof wrapped === "function") {
+      wrapped.prototype = wrapped.prototype || {};
+      Object.defineProperties(wrapped, {
+        __rrweb_original__: {
+          enumerable: false,
+          value: original
+        }
+      });
+    }
+    source[name] = wrapped;
+    return () => {
+      source[name] = original;
+    };
+  } catch {
+    return () => {
+    };
+  }
+}
 const index$1 = {
   childNodes: childNodes$1,
   parentNode: parentNode$1,
@@ -156,7 +182,8 @@ const index$1 = {
   shadowRoot: shadowRoot$1,
   querySelector: querySelector$1,
   querySelectorAll: querySelectorAll$1,
-  mutationObserver: mutationObserverCtor$1
+  mutationObserver: mutationObserverCtor$1,
+  patch: patch$1
 };
 function isElement(n2) {
   return n2.nodeType === n2.ELEMENT_NODE;
@@ -437,19 +464,27 @@ function absolutifyURLs(cssText, href) {
     }
   );
 }
-function normalizeCssString(cssText) {
-  return cssText.replace(/(\/\*[^*]*\*\/)|[\s;]/g, "");
+function normalizeCssString(cssText, _testNoPxNorm = false) {
+  if (_testNoPxNorm) {
+    return cssText.replace(/(\/\*[^*]*\*\/)|[\s;]/g, "");
+  } else {
+    return cssText.replace(/(\/\*[^*]*\*\/)|[\s;]/g, "").replace(/0px/g, "0");
+  }
 }
-function splitCssText(cssText, style) {
+function splitCssText(cssText, style, _testNoPxNorm = false) {
   const childNodes2 = Array.from(style.childNodes);
   const splits = [];
-  let iterLimit = 0;
+  let iterCount = 0;
   if (childNodes2.length > 1 && cssText && typeof cssText === "string") {
-    let cssTextNorm = normalizeCssString(cssText);
+    let cssTextNorm = normalizeCssString(cssText, _testNoPxNorm);
     const normFactor = cssTextNorm.length / cssText.length;
     for (let i2 = 1; i2 < childNodes2.length; i2++) {
       if (childNodes2[i2].textContent && typeof childNodes2[i2].textContent === "string") {
-        const textContentNorm = normalizeCssString(childNodes2[i2].textContent);
+        const textContentNorm = normalizeCssString(
+          childNodes2[i2].textContent,
+          _testNoPxNorm
+        );
+        const jLimit = 100;
         let j = 3;
         for (; j < textContentNorm.length; j++) {
           if (
@@ -462,23 +497,49 @@ function splitCssText(cssText, style) {
           break;
         }
         for (; j < textContentNorm.length; j++) {
-          const bit = textContentNorm.substring(0, j);
-          const bits = cssTextNorm.split(bit);
+          let startSubstring = textContentNorm.substring(0, j);
+          let cssNormSplits = cssTextNorm.split(startSubstring);
           let splitNorm = -1;
-          if (bits.length === 2) {
-            splitNorm = cssTextNorm.indexOf(bit);
-          } else if (bits.length > 2 && bits[0] === "" && childNodes2[i2 - 1].textContent !== "") {
-            splitNorm = cssTextNorm.indexOf(bit, 1);
+          if (cssNormSplits.length === 2) {
+            splitNorm = cssNormSplits[0].length;
+          } else if (cssNormSplits.length > 2 && cssNormSplits[0] === "" && childNodes2[i2 - 1].textContent !== "") {
+            splitNorm = cssTextNorm.indexOf(startSubstring, 1);
+          } else if (cssNormSplits.length === 1) {
+            startSubstring = startSubstring.substring(
+              0,
+              startSubstring.length - 1
+            );
+            cssNormSplits = cssTextNorm.split(startSubstring);
+            if (cssNormSplits.length <= 1) {
+              splits.push(cssText);
+              return splits;
+            }
+            j = jLimit + 1;
+          } else if (j === textContentNorm.length - 1) {
+            splitNorm = cssTextNorm.indexOf(startSubstring);
+          }
+          if (cssNormSplits.length >= 2 && j > jLimit) {
+            const prevTextContent = childNodes2[i2 - 1].textContent;
+            if (prevTextContent && typeof prevTextContent === "string") {
+              const prevMinLength = normalizeCssString(prevTextContent).length;
+              splitNorm = cssTextNorm.indexOf(startSubstring, prevMinLength);
+            }
+            if (splitNorm === -1) {
+              splitNorm = cssNormSplits[0].length;
+            }
           }
           if (splitNorm !== -1) {
             let k = Math.floor(splitNorm / normFactor);
             for (; k > 0 && k < cssText.length; ) {
-              iterLimit += 1;
-              if (iterLimit > 50 * childNodes2.length) {
+              iterCount += 1;
+              if (iterCount > 50 * childNodes2.length) {
                 splits.push(cssText);
                 return splits;
               }
-              const normPart = normalizeCssString(cssText.substring(0, k));
+              const normPart = normalizeCssString(
+                cssText.substring(0, k),
+                _testNoPxNorm
+              );
               if (normPart.length === splitNorm) {
                 splits.push(cssText.substring(0, k));
                 cssText = cssText.substring(k);
@@ -5048,11 +5109,16 @@ function getTagName(n2) {
 function adaptCssForReplay(cssText, cache) {
   const cachedStyle = cache == null ? void 0 : cache.stylesWithHoverClass.get(cssText);
   if (cachedStyle) return cachedStyle;
-  const ast = postcss$1$1([
-    mediaSelectorPlugin,
-    pseudoClassPlugin
-  ]).process(cssText);
-  const result2 = ast.css;
+  let result2 = cssText;
+  try {
+    const ast = postcss$1$1([
+      mediaSelectorPlugin,
+      pseudoClassPlugin
+    ]).process(cssText);
+    result2 = ast.css;
+  } catch (error) {
+    console.warn("Failed to adapt css for replay", error);
+  }
   cache == null ? void 0 : cache.stylesWithHoverClass.set(cssText, result2);
   return result2;
 }
@@ -5073,11 +5139,39 @@ function applyCssSplits(n2, cssText, hackCss, cache) {
   while (cssTextSplits.length > 1 && cssTextSplits.length > childTextNodes.length) {
     cssTextSplits.splice(-2, 2, cssTextSplits.slice(-2).join(""));
   }
+  let adaptedCss = "";
+  if (hackCss) {
+    adaptedCss = adaptCssForReplay(cssTextSplits.join(""), cache);
+  }
+  let startIndex = 0;
   for (let i2 = 0; i2 < childTextNodes.length; i2++) {
+    if (i2 === cssTextSplits.length) {
+      break;
+    }
     const childTextNode = childTextNodes[i2];
-    const cssTextSection = cssTextSplits[i2];
-    if (childTextNode && cssTextSection) {
-      childTextNode.textContent = hackCss ? adaptCssForReplay(cssTextSection, cache) : cssTextSection;
+    if (!hackCss) {
+      childTextNode.textContent = cssTextSplits[i2];
+    } else if (i2 < cssTextSplits.length - 1) {
+      let endIndex = startIndex;
+      let endSearch = cssTextSplits[i2 + 1].length;
+      endSearch = Math.min(endSearch, 30);
+      let found = false;
+      for (; endSearch > 2; endSearch--) {
+        const searchBit = cssTextSplits[i2 + 1].substring(0, endSearch);
+        const searchIndex = adaptedCss.substring(startIndex).indexOf(searchBit);
+        found = searchIndex !== -1;
+        if (found) {
+          endIndex += searchIndex;
+          break;
+        }
+      }
+      if (!found) {
+        endIndex += cssTextSplits[i2].length;
+      }
+      childTextNode.textContent = adaptedCss.substring(startIndex, endIndex);
+      startIndex = endIndex;
+    } else {
+      childTextNode.textContent = adaptedCss.substring(startIndex);
     }
   }
 }
@@ -10396,6 +10490,32 @@ function querySelectorAll(n2, selectors) {
 function mutationObserverCtor() {
   return getUntaintedPrototype("MutationObserver").constructor;
 }
+function patch(source, name, replacement) {
+  try {
+    if (!(name in source)) {
+      return () => {
+      };
+    }
+    const original = source[name];
+    const wrapped = replacement(original);
+    if (typeof wrapped === "function") {
+      wrapped.prototype = wrapped.prototype || {};
+      Object.defineProperties(wrapped, {
+        __rrweb_original__: {
+          enumerable: false,
+          value: original
+        }
+      });
+    }
+    source[name] = wrapped;
+    return () => {
+      source[name] = original;
+    };
+  } catch {
+    return () => {
+    };
+  }
+}
 const index = {
   childNodes,
   parentNode,
@@ -10408,7 +10528,8 @@ const index = {
   shadowRoot,
   querySelector,
   querySelectorAll,
-  mutationObserver: mutationObserverCtor
+  mutationObserver: mutationObserverCtor,
+  patch
 };
 function on(type, fn, target = document) {
   const options = { capture: true, passive: true };
@@ -10491,32 +10612,6 @@ function hookSetter(target, key, d, isRevoked, win = window) {
   );
   return () => hookSetter(target, key, original || {}, true);
 }
-function patch(source, name, replacement) {
-  try {
-    if (!(name in source)) {
-      return () => {
-      };
-    }
-    const original = source[name];
-    const wrapped = replacement(original);
-    if (typeof wrapped === "function") {
-      wrapped.prototype = wrapped.prototype || {};
-      Object.defineProperties(wrapped, {
-        __rrweb_original__: {
-          enumerable: false,
-          value: original
-        }
-      });
-    }
-    source[name] = wrapped;
-    return () => {
-      source[name] = original;
-    };
-  } catch {
-    return () => {
-    };
-  }
-}
 let nowTimestamp = Date.now;
 if (!/* @__PURE__ */ /[1-9][0-9]{12}/.test(Date.now().toString())) {
   nowTimestamp = () => (/* @__PURE__ */ new Date()).getTime();
@@ -10530,10 +10625,12 @@ function getWindowScroll(win) {
   };
 }
 function getWindowHeight(win) {
-  return win.innerHeight || win.document.documentElement && win.document.documentElement.clientHeight || win.document.body && win.document.body.clientHeight;
+  var _a2, _b;
+  return win.innerHeight || ((_a2 = win.document.documentElement) == null ? void 0 : _a2.clientHeight) || ((_b = win.document.body) == null ? void 0 : _b.clientHeight);
 }
 function getWindowWidth(win) {
-  return win.innerWidth || win.document.documentElement && win.document.documentElement.clientWidth || win.document.body && win.document.body.clientWidth;
+  var _a2, _b;
+  return win.innerWidth || ((_a2 = win.document.documentElement) == null ? void 0 : _a2.clientWidth) || ((_b = win.document.body) == null ? void 0 : _b.clientWidth);
 }
 function closestElementOfNode(node2) {
   if (!node2) {
@@ -10802,7 +10899,6 @@ const utils = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
     return nowTimestamp;
   },
   on,
-  patch,
   polyfill: polyfill$1,
   queueToResolveTrees,
   shadowHostInDom,
@@ -11245,10 +11341,18 @@ class MutationBuffer {
         this.attributes.push(item);
         this.attributeMap.set(textarea, item);
       }
-      item.attributes.value = Array.from(
+      const value = Array.from(
         index.childNodes(textarea),
         (cn) => index.textContent(cn) || ""
       ).join("");
+      item.attributes.value = maskInputValue({
+        element: textarea,
+        maskInputOptions: this.maskInputOptions,
+        tagName: textarea.tagName,
+        type: getInputType(textarea),
+        value,
+        maskInputFn: this.maskInputFn
+      });
     });
     __publicField(this, "processMutation", (m) => {
       if (isIgnored(m.target, this.mirror, this.slimDOMOptions)) {
@@ -12862,7 +12966,7 @@ class ShadowDomManager {
   }
   init() {
     this.reset();
-    this.patchAttachShadow(Element, document);
+    this.patchAttachShadow(Element, this.bypassOptions.win.document);
   }
   addShadowRoot(shadowRoot2, doc) {
     if (!isNativeShadowDom(shadowRoot2)) return;
@@ -14053,7 +14157,7 @@ function record(options = {}) {
             data: {}
           });
           if (recordAfter === "DOMContentLoaded") init();
-        })
+        }, win.document)
       );
       handlers.push(
         on(
@@ -14682,11 +14786,19 @@ function createPlayerService(context, { getCastFn, applyEventsSynchronously, emi
             emitter.emit(ReplayerEvents.PlayBack);
           }
           const syncEvents = new Array();
+          let renderedFullSnapshot = false;
           for (const event of neededEvents) {
+            const isFullSnapshot = event.type === EventType.FullSnapshot;
             if (lastPlayedTimestamp && lastPlayedTimestamp < baselineTime && (event.timestamp <= lastPlayedTimestamp || event === lastPlayedEvent)) {
+              if (isFullSnapshot) {
+                renderedFullSnapshot = true;
+              }
               continue;
             }
-            if (event.timestamp < baselineTime) {
+            if (event.timestamp <= baselineTime || isFullSnapshot && !renderedFullSnapshot) {
+              if (isFullSnapshot) {
+                renderedFullSnapshot = true;
+              }
               syncEvents.push(event);
             } else {
               const castFn = getCastFn(event, false);
@@ -15402,21 +15514,21 @@ class Replayer {
           if (plugin3.handler) plugin3.handler(event, isSync, { replayer: this });
         }
         this.service.send({ type: "CAST_EVENT", payload: { event } });
-        const last_index = this.service.state.context.events.length - 1;
-        if (!this.config.liveMode && event === this.service.state.context.events[last_index]) {
+        const lastIndex = this.service.state.context.events.length - 1;
+        if (!this.config.liveMode && event === this.service.state.context.events[lastIndex]) {
           const finish = () => {
-            if (last_index < this.service.state.context.events.length - 1) {
+            if (lastIndex < this.service.state.context.events.length - 1) {
               return;
             }
             this.backToNormal();
             this.service.send("END");
             this.emitter.emit(ReplayerEvents.Finish);
           };
-          let finish_buffer = 50;
+          let finishBuffer = 50;
           if (event.type === EventType.IncrementalSnapshot && event.data.source === IncrementalSource.MouseMove && event.data.positions.length) {
-            finish_buffer += Math.max(0, -event.data.positions[0].timeOffset);
+            finishBuffer += Math.max(0, -event.data.positions[0].timeOffset);
           }
-          setTimeout(finish, finish_buffer);
+          setTimeout(finish, finishBuffer);
         }
         this.emitter.emit(ReplayerEvents.EventCast, event);
       };
@@ -16393,7 +16505,7 @@ class Replayer {
       return false;
     };
     const appendNode = (mutation) => {
-      var _a2, _b;
+      var _a2, _b, _c;
       if (!this.iframe.contentDocument) {
         return this.warn("Looks like your replayer has been destroyed.");
       }
@@ -16406,6 +16518,14 @@ class Replayer {
         }
         return queue.push(mutation);
       }
+      if (mutation.node.type === NodeType.Document && ((_a2 = parent == null ? void 0 : parent.nodeName) == null ? void 0 : _a2.toLowerCase()) !== "iframe") {
+        console.warn(
+          "[Replayer] Skipping invalid document append to a non-iframe parent.",
+          mutation,
+          parent
+        );
+        return;
+      }
       if (mutation.node.isShadow) {
         if (!hasShadowRoot(parent)) {
           parent.attachShadow({ mode: "open" });
@@ -16481,7 +16601,7 @@ class Replayer {
         }
       } else if ((parentSn == null ? void 0 : parentSn.type) === NodeType.Document) {
         const parentDoc = parent;
-        if (mutation.node.type === NodeType.DocumentType && ((_a2 = parentDoc.childNodes[0]) == null ? void 0 : _a2.nodeType) === Node.DOCUMENT_TYPE_NODE)
+        if (mutation.node.type === NodeType.DocumentType && ((_b = parentDoc.childNodes[0]) == null ? void 0 : _b.nodeType) === Node.DOCUMENT_TYPE_NODE)
           parentDoc.removeChild(parentDoc.childNodes[0]);
         if (target.nodeName === "HTML" && parentDoc.documentElement)
           parentDoc.removeChild(
@@ -16499,7 +16619,7 @@ class Replayer {
         parent.appendChild(target);
       }
       afterAppend(target, mutation.node.id);
-      if (this.usingVirtualDom && target.nodeName === "#text" && parent.nodeName === "STYLE" && ((_b = parent.rules) == null ? void 0 : _b.length) > 0)
+      if (this.usingVirtualDom && target.nodeName === "#text" && parent.nodeName === "STYLE" && ((_c = parent.rules) == null ? void 0 : _c.length) > 0)
         parent.rules = [];
       if (isSerializedIframe(target, this.mirror)) {
         const targetId = this.mirror.getId(target);
@@ -16599,18 +16719,27 @@ class Replayer {
                   const newSn = mirror2.getMeta(
                     target
                   );
+                  const newNode = buildNodeWithSN(
+                    {
+                      ...newSn,
+                      attributes: {
+                        ...newSn.attributes,
+                        ...mutation.attributes
+                      }
+                    },
+                    {
+                      doc: target.ownerDocument,
+                      // can be Document or RRDocument
+                      mirror: mirror2,
+                      skipChild: true,
+                      hackCss: true,
+                      cache: this.cache
+                    }
+                  );
                   Object.assign(
                     newSn.attributes,
                     mutation.attributes
                   );
-                  const newNode = buildNodeWithSN(newSn, {
-                    doc: target.ownerDocument,
-                    // can be Document or RRDocument
-                    mirror: mirror2,
-                    skipChild: true,
-                    hackCss: true,
-                    cache: this.cache
-                  });
                   const siblingNode = target.nextSibling;
                   const parentNode2 = target.parentNode;
                   if (newNode && parentNode2) {