@highlight-run/rrweb 2.0.17 → 2.1.1

package/lib/rrweb.js

@@ -19,6 +19,9 @@ function isShadowRoot(n) {
     var host = n === null || n === void 0 ? void 0 : n.host;
     return Boolean((host === null || host === void 0 ? void 0 : host.shadowRoot) === n);
 }
+function isNativeShadowDom(shadowRoot) {
+    return Object.prototype.toString.call(shadowRoot) === '[object ShadowRoot]';
+}
 var Mirror$2 = (function () {
     function Mirror() {
         this.idNodeMap = new Map();
@@ -286,7 +289,8 @@ function getHref() {
     return a.href;
 }
 function transformAttribute(doc, tagName, name, value) {
-    if (name === 'src' || (name === 'href' && value)) {
+    if (name === 'src' ||
+        (name === 'href' && value && !(tagName === 'use' && value[0] === '#'))) {
         return absoluteToDoc(doc, value);
     }
     else if (name === 'xlink:href' && value && value[0] !== '#') {
@@ -845,7 +849,8 @@ function serializeNodeWithId(n, options) {
             mirror.add(clone, serializedNode);
         }
         delete serializedNode.needBlock;
-        if (n.shadowRoot)
+        var shadowRoot = n.shadowRoot;
+        if (shadowRoot && isNativeShadowDom(shadowRoot))
             serializedNode.isShadowHost = true;
     }
     if ((serializedNode.type === NodeType$2.Document ||
@@ -893,13 +898,16 @@ function serializeNodeWithId(n, options) {
                 var childN = _p[_o];
                 var serializedChildNode = serializeNodeWithId(childN, bypassOptions);
                 if (serializedChildNode) {
-                    serializedChildNode.isShadow = true;
+                    isNativeShadowDom(n.shadowRoot) &&
+                        (serializedChildNode.isShadow = true);
                     serializedNode.childNodes.push(serializedChildNode);
                 }
             }
         }
     }
-    if (n.parentNode && isShadowRoot(n.parentNode)) {
+    if (n.parentNode &&
+        isShadowRoot(n.parentNode) &&
+        isNativeShadowDom(n.parentNode)) {
         serializedNode.isShadow = true;
     }
     if (serializedNode.type === NodeType$2.Element &&
@@ -976,6 +984,44 @@ function serializeNodeWithId(n, options) {
         if (isStylesheetLoaded(n) === false)
             return null;
     }
+    if (serializedNode.type === NodeType$2.Element &&
+        serializedNode.tagName === 'link' &&
+        serializedNode.attributes.rel === 'stylesheet') {
+        onceStylesheetLoaded(n, function () {
+            if (onStylesheetLoad) {
+                var serializedLinkNode = serializeNodeWithId(n, {
+                    doc: doc,
+                    mirror: mirror,
+                    blockClass: blockClass,
+                    blockSelector: blockSelector,
+                    maskTextClass: maskTextClass,
+                    maskTextSelector: maskTextSelector,
+                    skipChild: false,
+                    inlineStylesheet: inlineStylesheet,
+                    maskInputOptions: maskInputOptions,
+                    maskTextFn: maskTextFn,
+                    maskInputFn: maskInputFn,
+                    slimDOMOptions: slimDOMOptions,
+                    dataURLOptions: dataURLOptions,
+                    inlineImages: inlineImages,
+                    recordCanvas: recordCanvas,
+                    preserveWhiteSpace: preserveWhiteSpace,
+                    onSerialize: onSerialize,
+                    onIframeLoad: onIframeLoad,
+                    iframeLoadTimeout: iframeLoadTimeout,
+                    enableStrictPrivacy: enableStrictPrivacy,
+                    onStylesheetLoad: onStylesheetLoad,
+                    stylesheetLoadTimeout: stylesheetLoadTimeout,
+                    keepIframeSrcFn: keepIframeSrcFn
+                });
+                if (serializedLinkNode) {
+                    onStylesheetLoad(n, serializedLinkNode);
+                }
+            }
+        }, stylesheetLoadTimeout);
+        if (isStylesheetLoaded(n) === false)
+            return null;
+    }
     return serializedNode;
 }
 function snapshot(n, options) {
@@ -1081,7 +1127,7 @@ function parse(css, options) {
     Position.prototype.content = css;
     var errorsList = [];
     function error(msg) {
-        var err = new Error(options.source + ':' + lineno + ':' + column + ': ' + msg);
+        var err = new Error("".concat(options.source || '', ":").concat(lineno, ":").concat(column, ": ").concat(msg));
         err.reason = msg;
         err.filename = options.source;
         err.line = lineno;
@@ -1594,7 +1640,7 @@ function buildNode(n, options) {
             return doc.implementation.createDocument(null, '', null);
         case NodeType$2.DocumentType:
             return doc.implementation.createDocumentType(n.name || 'html', n.publicId, n.systemId);
-        case NodeType$2.Element:
+        case NodeType$2.Element: {
             var tagName = getTagName(n);
             var node_1;
             if (n.isSVG) {
@@ -1604,7 +1650,7 @@ function buildNode(n, options) {
                 node_1 = doc.createElement(tagName);
             }
             var _loop_1 = function (name_1) {
-                if (!n.attributes.hasOwnProperty(name_1)) {
+                if (!Object.prototype.hasOwnProperty.call(n.attributes, name_1)) {
                     return "continue";
                 }
                 var value = n.attributes[name_1];
@@ -1692,13 +1738,15 @@ function buildNode(n, options) {
                 else {
                     if (tagName === 'canvas' && name_1 === 'rr_dataURL') {
                         var image_1 = document.createElement('img');
-                        image_1.src = value;
                         image_1.onload = function () {
                             var ctx = node_1.getContext('2d');
                             if (ctx) {
                                 ctx.drawImage(image_1, 0, 0, image_1.width, image_1.height);
                             }
                         };
+                        image_1.src = value;
+                        if (node_1.RRNodeType)
+                            node_1.rr_dataURL = value;
                     }
                     else if (tagName === 'img' && name_1 === 'rr_dataURL') {
                         var image = node_1;
@@ -1754,6 +1802,7 @@ function buildNode(n, options) {
                 }
             }
             return node_1;
+        }
         case NodeType$2.Text:
             return doc.createTextNode(n.isStyle && hackCss
                 ? addHoverClass(n.textContent, cache)
@@ -1840,7 +1889,8 @@ function handleScroll(node, mirror) {
     }
     var el = node;
     for (var name_2 in n.attributes) {
-        if (!(n.attributes.hasOwnProperty(name_2) && name_2.startsWith('rr_'))) {
+        if (!(Object.prototype.hasOwnProperty.call(n.attributes, name_2) &&
+            name_2.startsWith('rr_'))) {
             continue;
         }
         var value = n.attributes[name_2];
@@ -1915,14 +1965,13 @@ if (typeof window !== 'undefined' && window.Proxy && window.Reflect) {
 function throttle(func, wait, options = {}) {
     let timeout = null;
     let previous = 0;
-    return function (arg) {
+    return function (...args) {
         const now = Date.now();
         if (!previous && options.leading === false) {
             previous = now;
         }
         const remaining = wait - (now - previous);
         const context = this;
-        const args = arguments;
         if (remaining <= 0 || remaining > wait) {
             if (timeout) {
                 clearTimeout(timeout);
@@ -1959,7 +2008,8 @@ function hookSetter(target, key, d, isRevoked, win = window) {
 function patch(source, name, replacement) {
     try {
         if (!(name in source)) {
-            return () => { };
+            return () => {
+            };
         }
         const original = source[name];
         const wrapped = replacement(original);
@@ -1978,7 +2028,8 @@ function patch(source, name, replacement) {
         };
     }
     catch (_a) {
-        return () => { };
+        return () => {
+        };
     }
 }
 function getWindowHeight() {
@@ -2059,8 +2110,9 @@ function polyfill$1(win = window) {
             .forEach;
     }
     if (!Node.prototype.contains) {
-        Node.prototype.contains = function contains(node) {
-            if (!(0 in arguments)) {
+        Node.prototype.contains = (...args) => {
+            let node = args[0];
+            if (!(0 in args)) {
                 throw new TypeError('1 argument is required');
             }
             do {
@@ -2416,6 +2468,7 @@ class MutationBuffer {
                     maskTextClass: this.maskTextClass,
                     maskTextSelector: this.maskTextSelector,
                     skipChild: true,
+                    newlyAddedElement: true,
                     inlineStylesheet: this.inlineStylesheet,
                     maskInputOptions: this.maskInputOptions,
                     maskTextFn: this.maskTextFn,
@@ -2442,7 +2495,6 @@ class MutationBuffer {
                     onStylesheetLoad: (link, childSn) => {
                         this.stylesheetManager.attachStylesheet(link, childSn, this.mirror);
                     },
-                    newlyAddedElement: true,
                 });
                 if (sn) {
                     adds.push({
@@ -2668,7 +2720,9 @@ class MutationBuffer {
                             this.removes.push({
                                 parentId,
                                 id: nodeId,
-                                isShadow: isShadowRoot(m.target) ? true : undefined,
+                                isShadow: isShadowRoot(m.target) && isNativeShadowDom(m.target)
+                                    ? true
+                                    : undefined,
                             });
                         }
                         this.mapRemoves.push(n);
@@ -2834,7 +2888,8 @@ function initMutationObserver(options, rootEl) {
 }
 function initMoveObserver({ mousemoveCb, sampling, doc, mirror, }) {
     if (sampling.mousemove === false) {
-        return () => { };
+        return () => {
+        };
     }
     const threshold = typeof sampling.mousemove === 'number' ? sampling.mousemove : 50;
     const callbackThreshold = typeof sampling.mousemoveCallback === 'number'
@@ -2884,7 +2939,8 @@ function initMoveObserver({ mousemoveCb, sampling, doc, mirror, }) {
 }
 function initMouseInteractionObserver({ mouseInteractionCb, doc, mirror, blockClass, sampling, }) {
     if (sampling.mouseInteraction === false) {
-        return () => { };
+        return () => {
+        };
     }
     const disableMap = sampling.mouseInteraction === true ||
         sampling.mouseInteraction === undefined
@@ -3088,7 +3144,7 @@ function initStyleSheetObserver({ styleSheetRuleCb, mirror }, { win }) {
                 adds: [{ rule, index }],
             });
         }
-        return insertRule.apply(this, arguments);
+        return insertRule.apply(this, [rule, index]);
     };
     const deleteRule = win.CSSStyleSheet.prototype.deleteRule;
     win.CSSStyleSheet.prototype.deleteRule = function (index) {
@@ -3099,7 +3155,7 @@ function initStyleSheetObserver({ styleSheetRuleCb, mirror }, { win }) {
                 removes: [{ index }],
             });
         }
-        return deleteRule.apply(this, arguments);
+        return deleteRule.apply(this, [index]);
     };
     const supportedNestedCSSRuleTypes = {};
     if (isCSSGroupingRuleSupported) {
@@ -3138,17 +3194,19 @@ function initStyleSheetObserver({ styleSheetRuleCb, mirror }, { win }) {
                     ],
                 });
             }
-            return unmodifiedFunctions[typeKey].insertRule.apply(this, arguments);
+            return unmodifiedFunctions[typeKey].insertRule.apply(this, [rule, index]);
         };
         type.prototype.deleteRule = function (index) {
             const id = mirror.getId(this.parentStyleSheet.ownerNode);
             if (id !== -1) {
                 styleSheetRuleCb({
                     id,
-                    removes: [{ index: [...getNestedCSSRulePositions(this), index] }],
+                    removes: [
+                        { index: [...getNestedCSSRulePositions(this), index] },
+                    ],
                 });
             }
-            return unmodifiedFunctions[typeKey].deleteRule.apply(this, arguments);
+            return unmodifiedFunctions[typeKey].deleteRule.apply(this, [index]);
         };
     });
     return () => {
@@ -3176,7 +3234,7 @@ function initStyleDeclarationObserver({ styleDeclarationCb, mirror }, { win }) {
                 index: getNestedCSSRulePositions(this.parentRule),
             });
         }
-        return setProperty.apply(this, arguments);
+        return setProperty.apply(this, [property, value, priority]);
     };
     const removeProperty = win.CSSStyleDeclaration.prototype.removeProperty;
     win.CSSStyleDeclaration.prototype.removeProperty = function (property) {
@@ -3191,7 +3249,7 @@ function initStyleDeclarationObserver({ styleDeclarationCb, mirror }, { win }) {
                 index: getNestedCSSRulePositions(this.parentRule),
             });
         }
-        return removeProperty.apply(this, arguments);
+        return removeProperty.apply(this, [property]);
     };
     return () => {
         win.CSSStyleDeclaration.prototype.setProperty = setProperty;
@@ -3226,7 +3284,8 @@ function initMediaInteractionObserver({ mediaInteractionCb, blockClass, mirror,
 function initFontObserver({ fontCb, doc }) {
     const win = doc.defaultView;
     if (!win) {
-        return () => { };
+        return () => {
+        };
     }
     const handlers = [];
     const fontMap = new WeakMap();
@@ -3239,8 +3298,7 @@ function initFontObserver({ fontCb, doc }) {
             descriptors,
             fontSource: typeof source === 'string'
                 ? source
-                :
-                    JSON.stringify(Array.from(new Uint8Array(source))),
+                : JSON.stringify(Array.from(new Uint8Array(source))),
         });
         return fontFace;
     };
@@ -3336,7 +3394,8 @@ function mergeHooks(o, hooks) {
 function initObservers(o, hooks = {}) {
     const currentWindow = o.doc.defaultView;
     if (!currentWindow) {
-        return () => { };
+        return () => {
+        };
     }
     mergeHooks(o, hooks);
     const mutationObserver = initMutationObserver(o, o.doc);
@@ -3350,7 +3409,10 @@ function initObservers(o, hooks = {}) {
     const styleDeclarationObserver = initStyleDeclarationObserver(o, {
         win: currentWindow,
     });
-    const fontObserver = o.collectFonts ? initFontObserver(o) : () => { };
+    const fontObserver = o.collectFonts
+        ? initFontObserver(o)
+        : () => {
+        };
     const pluginHandlers = [];
     for (const plugin of o.plugins) {
         pluginHandlers.push(plugin.observer(plugin.callback, currentWindow, plugin.options));
@@ -3410,8 +3472,8 @@ class ShadowDomManager {
         this.mirror = options.mirror;
         const manager = this;
         this.restorePatches.push(patch(HTMLElement.prototype, 'attachShadow', function (original) {
-            return function () {
-                const shadowRoot = original.apply(this, arguments);
+            return function (option) {
+                const shadowRoot = original.call(this, option);
                 if (this.shadowRoot)
                     manager.addShadowRoot(this.shadowRoot, this.ownerDocument);
                 return shadowRoot;
@@ -3419,6 +3481,8 @@ class ShadowDomManager {
         }));
     }
     addShadowRoot(shadowRoot, doc) {
+        if (!isNativeShadowDom(shadowRoot))
+            return;
         initMutationObserver(Object.assign(Object.assign({}, this.bypassOptions), { doc, mutationCb: this.mutationCb, mirror: this.mirror, shadowDomManager: this }), shadowRoot);
         initScrollObserver(Object.assign(Object.assign({}, this.bypassOptions), { scrollCb: this.scrollCb, doc: shadowRoot, mirror: this.mirror }));
     }
@@ -3426,8 +3490,8 @@ class ShadowDomManager {
         if (iframeElement.contentWindow) {
             const manager = this;
             this.restorePatches.push(patch(iframeElement.contentWindow.HTMLElement.prototype, 'attachShadow', function (original) {
-                return function () {
-                    const shadowRoot = original.apply(this, arguments);
+                return function (option) {
+                    const shadowRoot = original.call(this, option);
                     if (this.shadowRoot)
                         manager.addShadowRoot(this.shadowRoot, iframeElement.contentDocument);
                     return shadowRoot;
@@ -3841,7 +3905,7 @@ class CanvasManager {
         this.rafStamps = { latestId: 0, invokeId: null };
         this.frozen = false;
         this.locked = false;
-        this.processMutation = function (target, mutation) {
+        this.processMutation = (target, mutation) => {
             const newFrame = this.rafStamps.invokeId &&
                 this.rafStamps.latestId !== this.rafStamps.invokeId;
             if (newFrame || !this.rafStamps.invokeId)
@@ -3937,6 +4001,9 @@ class CanvasManager {
                         context === null || context === void 0 ? void 0 : context.clear(context.COLOR_BUFFER_BIT);
                     }
                 }
+                if (canvas.width === 0 || canvas.height === 0) {
+                    return;
+                }
                 const bitmap = yield createImageBitmap(canvas);
                 worker.postMessage({
                     id,
@@ -4036,7 +4103,7 @@ let wrappedEmit;
 let takeFullSnapshot;
 const mirror = createMirror$2();
 function record(options = {}) {
-    const { emit, checkoutEveryNms, checkoutEveryNth, blockClass = 'highlight-block', blockSelector = null, ignoreClass = 'highlight-ignore', maskTextClass = 'highlight-mask', maskTextSelector = null, inlineStylesheet = true, maskAllInputs, maskInputOptions: _maskInputOptions, slimDOMOptions: _slimDOMOptions, maskInputFn, maskTextFn, hooks, packFn, sampling = {}, mousemoveWait, recordCanvas = false, userTriggeredOnInput = false, collectFonts = false, inlineImages = false, plugins, keepIframeSrcFn = () => false, enableStrictPrivacy = false, } = options;
+    const { emit, checkoutEveryNms, checkoutEveryNth, blockClass = 'highlight-block', blockSelector = null, ignoreClass = 'highlight-ignore', maskTextClass = 'highlight-mask', maskTextSelector = null, inlineStylesheet = true, maskAllInputs, maskInputOptions: _maskInputOptions, slimDOMOptions: _slimDOMOptions, maskInputFn, maskTextFn = obfuscateText, hooks, packFn, sampling = {}, mousemoveWait, recordCanvas = false, userTriggeredOnInput = false, collectFonts = false, inlineImages = false, plugins, keepIframeSrcFn = () => false, enableStrictPrivacy = false, } = options;
     if (!emit) {
         throw new Error('emit function is required');
     }
@@ -4171,7 +4238,7 @@ function record(options = {}) {
             stylesheetManager,
             canvasManager,
             keepIframeSrcFn,
-            enableStrictPrivacy
+            enableStrictPrivacy,
         },
         mirror,
     });
@@ -4484,7 +4551,7 @@ const hyphenate = (str) => {
 };
 
 class BaseRRNode {
-    constructor(...args) {
+    constructor(..._args) {
         this.childNodes = [];
         this.parentElement = null;
         this.parentNode = null;
@@ -4520,7 +4587,7 @@ class BaseRRNode {
     insertBefore(_newChild, _refChild) {
         throw new Error(`RRDomException: Failed to execute 'insertBefore' on 'RRNode': This RRNode type does not support this method.`);
     }
-    removeChild(node) {
+    removeChild(_node) {
         throw new Error(`RRDomException: Failed to execute 'removeChild' on 'RRNode': This RRNode type does not support this method.`);
     }
     toString() {
@@ -4899,6 +4966,44 @@ const NAMESPACES = {
     'xlink:href': 'http://www.w3.org/1999/xlink',
     xmlns: 'http://www.w3.org/2000/xmlns/',
 };
+const SVGTagMap = {
+    altglyph: 'altGlyph',
+    altglyphdef: 'altGlyphDef',
+    altglyphitem: 'altGlyphItem',
+    animatecolor: 'animateColor',
+    animatemotion: 'animateMotion',
+    animatetransform: 'animateTransform',
+    clippath: 'clipPath',
+    feblend: 'feBlend',
+    fecolormatrix: 'feColorMatrix',
+    fecomponenttransfer: 'feComponentTransfer',
+    fecomposite: 'feComposite',
+    feconvolvematrix: 'feConvolveMatrix',
+    fediffuselighting: 'feDiffuseLighting',
+    fedisplacementmap: 'feDisplacementMap',
+    fedistantlight: 'feDistantLight',
+    fedropshadow: 'feDropShadow',
+    feflood: 'feFlood',
+    fefunca: 'feFuncA',
+    fefuncb: 'feFuncB',
+    fefuncg: 'feFuncG',
+    fefuncr: 'feFuncR',
+    fegaussianblur: 'feGaussianBlur',
+    feimage: 'feImage',
+    femerge: 'feMerge',
+    femergenode: 'feMergeNode',
+    femorphology: 'feMorphology',
+    feoffset: 'feOffset',
+    fepointlight: 'fePointLight',
+    fespecularlighting: 'feSpecularLighting',
+    fespotlight: 'feSpotLight',
+    fetile: 'feTile',
+    feturbulence: 'feTurbulence',
+    foreignobject: 'foreignObject',
+    glyphref: 'glyphRef',
+    lineargradient: 'linearGradient',
+    radialgradient: 'radialGradient',
+};
 function diff(oldTree, newTree, replayer, rrnodeMirror) {
     const oldChildren = oldTree.childNodes;
     const newChildren = newTree.childNodes;
@@ -4929,8 +5034,8 @@ function diff(oldTree, newTree, replayer, rrnodeMirror) {
                     const newMediaRRElement = newRRElement;
                     if (newMediaRRElement.paused !== undefined)
                         newMediaRRElement.paused
-                            ? oldMediaElement.pause()
-                            : oldMediaElement.play();
+                            ? void oldMediaElement.pause()
+                            : void oldMediaElement.play();
                     if (newMediaRRElement.muted !== undefined)
                         oldMediaElement.muted = newMediaRRElement.muted;
                     if (newMediaRRElement.volume !== undefined)
@@ -4940,7 +5045,20 @@ function diff(oldTree, newTree, replayer, rrnodeMirror) {
                     break;
                 }
                 case 'CANVAS':
-                    newTree.canvasMutations.forEach((canvasMutation) => replayer.applyCanvas(canvasMutation.event, canvasMutation.mutation, oldTree));
+                    {
+                        const rrCanvasElement = newTree;
+                        if (rrCanvasElement.rr_dataURL !== null) {
+                            const image = document.createElement('img');
+                            image.onload = () => {
+                                const ctx = oldElement.getContext('2d');
+                                if (ctx) {
+                                    ctx.drawImage(image, 0, 0, image.width, image.height);
+                                }
+                            };
+                            image.src = rrCanvasElement.rr_dataURL;
+                        }
+                        rrCanvasElement.canvasMutations.forEach((canvasMutation) => replayer.applyCanvas(canvasMutation.event, canvasMutation.mutation, oldTree));
+                    }
                     break;
                 case 'STYLE':
                     applyVirtualStyleRulesToNode(oldElement, newTree.rules);
@@ -5118,9 +5236,10 @@ function createOrGetNode(rrNode, domMirror, rrnodeMirror) {
             node = document.implementation.createDocumentType(rrNode.name, rrNode.publicId, rrNode.systemId);
             break;
         case NodeType$1.Element: {
-            rrNode.tagName.toLowerCase();
+            let tagName = rrNode.tagName.toLowerCase();
+            tagName = SVGTagMap[tagName] || tagName;
             if (sn && 'isSVG' in sn && (sn === null || sn === void 0 ? void 0 : sn.isSVG)) {
-                node = document.createElementNS(NAMESPACES['svg'], rrNode.tagName.toLowerCase());
+                node = document.createElementNS(NAMESPACES['svg'], tagName);
             }
             else
                 node = document.createElement(rrNode.tagName);
@@ -5286,6 +5405,7 @@ class RRMediaElement extends BaseRRMediaElementImpl(RRElement) {
 class RRCanvasElement extends RRElement {
     constructor() {
         super(...arguments);
+        this.rr_dataURL = null;
         this.canvasMutations = [];
     }
     getContext() {
@@ -5325,11 +5445,12 @@ function buildFromNode(node, rrdom, domMirror, parentRRNode) {
                 rrNode.compatMode = node.compatMode;
             }
             break;
-        case NodeType.DOCUMENT_TYPE_NODE:
+        case NodeType.DOCUMENT_TYPE_NODE: {
             const documentType = node;
             rrNode = rrdom.createDocumentType(documentType.name, documentType.publicId, documentType.systemId);
             break;
-        case NodeType.ELEMENT_NODE:
+        }
+        case NodeType.ELEMENT_NODE: {
             const elementNode = node;
             const tagName = getValidTagName(elementNode);
             rrNode = rrdom.createElement(tagName);
@@ -5340,6 +5461,7 @@ function buildFromNode(node, rrdom, domMirror, parentRRNode) {
             elementNode.scrollLeft && (rrElement.scrollLeft = elementNode.scrollLeft);
             elementNode.scrollTop && (rrElement.scrollTop = elementNode.scrollTop);
             break;
+        }
         case NodeType.TEXT_NODE:
             rrNode = rrdom.createTextNode(node.textContent || '');
             break;
@@ -5449,7 +5571,7 @@ function getDefaultSN(node, id) {
                 type: node.RRNodeType,
                 childNodes: [],
             };
-        case NodeType$1.DocumentType:
+        case NodeType$1.DocumentType: {
             const doctype = node;
             return {
                 id,
@@ -5458,6 +5580,7 @@ function getDefaultSN(node, id) {
                 publicId: doctype.publicId,
                 systemId: doctype.systemId,
             };
+        }
         case NodeType$1.Element:
             return {
                 id,
@@ -5487,67 +5610,7 @@ function getDefaultSN(node, id) {
     }
 }
 
-//      
-// An event handler can take an optional event argument
-// and should not return a value
-                                          
-                                                               
-
-// An array of all currently registered event handlers for a type
-                                            
-                                                            
-// A map of event types and their corresponding event handlers.
-                        
-                                 
-                                   
-  
-
-/** Mitt: Tiny (~200b) functional event emitter / pubsub.
- *  @name mitt
- *  @returns {Mitt}
- */
-function mitt$1(all                 ) {
-	all = all || Object.create(null);
-
-	return {
-		/**
-		 * Register an event handler for the given type.
-		 *
-		 * @param  {String} type	Type of event to listen for, or `"*"` for all events
-		 * @param  {Function} handler Function to call in response to given event
-		 * @memberOf mitt
-		 */
-		on: function on(type        , handler              ) {
-			(all[type] || (all[type] = [])).push(handler);
-		},
-
-		/**
-		 * Remove an event handler for the given type.
-		 *
-		 * @param  {String} type	Type of event to unregister `handler` from, or `"*"`
-		 * @param  {Function} handler Handler function to remove
-		 * @memberOf mitt
-		 */
-		off: function off(type        , handler              ) {
-			if (all[type]) {
-				all[type].splice(all[type].indexOf(handler) >>> 0, 1);
-			}
-		},
-
-		/**
-		 * Invoke all handlers for the given type.
-		 * If present, `"*"` handlers are invoked after type-matched handlers.
-		 *
-		 * @param {String} type  The event type to invoke
-		 * @param {Any} [evt]  Any value (object is recommended and powerful), passed to each handler
-		 * @memberOf mitt
-		 */
-		emit: function emit(type        , evt     ) {
-			(all[type] || []).slice().map(function (handler) { handler(evt); });
-			(all['*'] || []).slice().map(function (handler) { handler(type, evt); });
-		}
-	};
-}
+function mitt$1(n){return {all:n=n||new Map,on:function(t,e){var i=n.get(t);i?i.push(e):n.set(t,[e]);},off:function(t,e){var i=n.get(t);i&&(e?i.splice(i.indexOf(e)>>>0,1):n.set(t,[]));},emit:function(t,e){var i=n.get(t);i&&i.slice().map(function(n){n(e);}),(i=n.get("*"))&&i.slice().map(function(n){n(t,e);});}}}
 
 var mittProxy = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -5794,14 +5857,13 @@ class Timer {
         this.timeOffset = 0;
         let lastTimestamp = performance.now();
         const { actions } = this;
-        const self = this;
-        function check() {
+        const check = () => {
             const time = performance.now();
-            self.timeOffset += (time - lastTimestamp) * self.speed;
+            this.timeOffset += (time - lastTimestamp) * this.speed;
             lastTimestamp = time;
             while (actions.length) {
                 const action = actions[0];
-                if (self.timeOffset >= action.delay) {
+                if (this.timeOffset >= action.delay) {
                     actions.shift();
                     action.doAction();
                 }
@@ -5809,10 +5871,10 @@ class Timer {
                     break;
                 }
             }
-            if (actions.length > 0 || self.liveMode) {
-                self.raf = requestAnimationFrame(check);
+            if (actions.length > 0 || this.liveMode) {
+                this.raf = requestAnimationFrame(check);
             }
-        }
+        };
         this.raf = requestAnimationFrame(check);
     }
     clear() {
@@ -6154,7 +6216,6 @@ function createSpeedService(context) {
 }
 
 const rules = (blockClass) => [
-    `.${blockClass} { background: currentColor }`,
     'noscript { display: none !important; }',
     `.${blockClass} { background: currentColor; border-radius: 5px; }`,
     `.${blockClass}:hover::after {content: 'Redacted'; color: white; background: black; text-align: center; width: 100%; display: block;}`,
@@ -6226,8 +6287,7 @@ function deserializeArg(imageMap, ctx, preload) {
 function getContext(target, type) {
     try {
         if (type === CanvasContext.WebGL) {
-            return (target.getContext('webgl') ||
-                target.getContext('experimental-webgl'));
+            return (target.getContext('webgl') || target.getContext('experimental-webgl'));
         }
         return target.getContext('webgl2');
     }
@@ -6285,13 +6345,14 @@ function canvasMutation$1({ event, mutation, target, imageMap, errorHandler, })
         try {
             const ctx = target.getContext('2d');
             if (mutation.setter) {
-                ctx[mutation.property] = mutation.args[0];
+                ctx[mutation.property] =
+                    mutation.args[0];
                 return;
             }
             const original = ctx[mutation.property];
             if (mutation.property === 'drawImage' &&
                 typeof mutation.args[0] === 'string') {
-                const image = imageMap.get(event);
+                imageMap.get(event);
                 original.apply(ctx, mutation.args);
             }
             else {
@@ -6377,6 +6438,142 @@ class Replayer {
         this.newDocumentQueue = [];
         this.mousePos = null;
         this.touchActive = null;
+        this.handleResize = (dimension) => {
+            this.iframe.style.display = 'inherit';
+            for (const el of [this.mouseTail, this.iframe]) {
+                if (!el) {
+                    continue;
+                }
+                el.setAttribute('width', String(dimension.width));
+                el.setAttribute('height', String(dimension.height));
+            }
+        };
+        this.applyEventsSynchronously = (events) => {
+            for (const event of events) {
+                switch (event.type) {
+                    case exports.EventType.DomContentLoaded:
+                    case exports.EventType.Load:
+                    case exports.EventType.Custom:
+                        continue;
+                    case exports.EventType.FullSnapshot:
+                    case exports.EventType.Meta:
+                    case exports.EventType.Plugin:
+                    case exports.EventType.IncrementalSnapshot:
+                        break;
+                }
+                const castFn = this.getCastFn(event, true);
+                castFn();
+            }
+            if (this.touchActive === true) {
+                this.mouse.classList.add('touch-active');
+            }
+            else if (this.touchActive === false) {
+                this.mouse.classList.remove('touch-active');
+            }
+            this.touchActive = null;
+        };
+        this.getCastFn = (event, isSync = false) => {
+            let castFn;
+            switch (event.type) {
+                case exports.EventType.DomContentLoaded:
+                case exports.EventType.Load:
+                    break;
+                case exports.EventType.Custom:
+                    castFn = () => {
+                        this.emitter.emit(exports.ReplayerEvents.CustomEvent, event);
+                    };
+                    break;
+                case exports.EventType.Meta:
+                    castFn = () => this.emitter.emit(exports.ReplayerEvents.Resize, {
+                        width: event.data.width,
+                        height: event.data.height,
+                    });
+                    break;
+                case exports.EventType.FullSnapshot:
+                    castFn = () => {
+                        if (this.firstFullSnapshot) {
+                            if (this.firstFullSnapshot === event) {
+                                this.firstFullSnapshot = true;
+                                return;
+                            }
+                        }
+                        else {
+                            this.firstFullSnapshot = true;
+                        }
+                        this.rebuildFullSnapshot(event, isSync);
+                        this.iframe.contentWindow.scrollTo(event.data.initialOffset);
+                    };
+                    break;
+                case exports.EventType.IncrementalSnapshot:
+                    castFn = () => {
+                        this.applyIncremental(event, isSync);
+                        if (isSync) {
+                            return;
+                        }
+                        this.handleInactivity(event.timestamp);
+                        if (event === this.nextUserInteractionEvent) {
+                            this.nextUserInteractionEvent = null;
+                            this.backToNormal();
+                        }
+                        if (this.config.skipInactive && !this.nextUserInteractionEvent) {
+                            for (const _event of this.service.state.context.events) {
+                                if (_event.timestamp <= event.timestamp) {
+                                    continue;
+                                }
+                                if (this.isUserInteraction(_event)) {
+                                    if (_event.delay - event.delay >
+                                        SKIP_TIME_THRESHOLD *
+                                            this.speedService.state.context.timer.speed) {
+                                        this.nextUserInteractionEvent = _event;
+                                    }
+                                    break;
+                                }
+                            }
+                            if (this.nextUserInteractionEvent) {
+                                const skipTime = this.nextUserInteractionEvent.delay - event.delay;
+                                const payload = {
+                                    speed: Math.min(Math.round(skipTime / SKIP_TIME_INTERVAL), this.config.maxSpeed),
+                                };
+                                this.speedService.send({ type: 'FAST_FORWARD', payload });
+                                this.emitter.emit(exports.ReplayerEvents.SkipStart, payload);
+                            }
+                        }
+                    };
+                    break;
+            }
+            const wrappedCastFn = () => {
+                if (castFn) {
+                    castFn();
+                }
+                for (const plugin of this.config.plugins || []) {
+                    plugin.handler(event, isSync, { replayer: this });
+                }
+                this.service.send({ type: 'CAST_EVENT', payload: { event } });
+                const last_index = this.service.state.context.events.length - 1;
+                if (event === this.service.state.context.events[last_index]) {
+                    const finish = () => {
+                        if (last_index < this.service.state.context.events.length - 1) {
+                            return;
+                        }
+                        this.backToNormal();
+                        this.service.send('END');
+                        this.emitter.emit(exports.ReplayerEvents.Finish);
+                    };
+                    if (event.type === exports.EventType.IncrementalSnapshot &&
+                        event.data.source === exports.IncrementalSource.MouseMove &&
+                        event.data.positions.length) {
+                        setTimeout(() => {
+                            finish();
+                        }, Math.max(0, -event.data.positions[0].timeOffset + 50));
+                    }
+                    else {
+                        finish();
+                    }
+                }
+                this.emitter.emit(exports.ReplayerEvents.EventCast, event);
+            };
+            return wrappedCastFn;
+        };
         if (!(config === null || config === void 0 ? void 0 : config.liveMode) && events.length < 2) {
             throw new Error('Replayer need at least 2 events.');
         }
@@ -6410,7 +6607,7 @@ class Replayer {
                 const replayerHandler = {
                     mirror: this.mirror,
                     applyCanvas: (canvasEvent, canvasMutationData, target) => {
-                        canvasMutation({
+                        void canvasMutation({
                             event: canvasEvent,
                             mutation: canvasMutationData,
                             target,
@@ -6523,6 +6720,7 @@ class Replayer {
     }
     setConfig(config) {
         Object.keys(config).forEach((key) => {
+            config[key];
             this.config[key] = config[key];
         });
         if (!this.config.skipInactive) {
@@ -6694,7 +6892,7 @@ class Replayer {
         if (indicatesTouchDevice(event)) {
             this.mouse.classList.add('touch-device');
         }
-        Promise.resolve().then(() => this.service.send({ type: 'ADD_EVENT', payload: { event } }));
+        void Promise.resolve().then(() => this.service.send({ type: 'ADD_EVENT', payload: { event } }));
     }
     replaceEvents(events) {
         for (const event of events) {
@@ -6743,142 +6941,6 @@ class Replayer {
             polyfill$1(this.iframe.contentWindow);
         }
     }
-    handleResize(dimension) {
-        this.iframe.style.display = 'inherit';
-        for (const el of [this.mouseTail, this.iframe]) {
-            if (!el) {
-                continue;
-            }
-            el.setAttribute('width', String(dimension.width));
-            el.setAttribute('height', String(dimension.height));
-        }
-    }
-    applyEventsSynchronously(events) {
-        for (const event of events) {
-            switch (event.type) {
-                case exports.EventType.DomContentLoaded:
-                case exports.EventType.Load:
-                case exports.EventType.Custom:
-                    continue;
-                case exports.EventType.FullSnapshot:
-                case exports.EventType.Meta:
-                case exports.EventType.Plugin:
-                case exports.EventType.IncrementalSnapshot:
-                    break;
-            }
-            const castFn = this.getCastFn(event, true);
-            castFn();
-        }
-        if (this.touchActive === true) {
-            this.mouse.classList.add('touch-active');
-        }
-        else if (this.touchActive === false) {
-            this.mouse.classList.remove('touch-active');
-        }
-        this.touchActive = null;
-    }
-    getCastFn(event, isSync = false) {
-        let castFn;
-        switch (event.type) {
-            case exports.EventType.DomContentLoaded:
-            case exports.EventType.Load:
-                break;
-            case exports.EventType.Custom:
-                castFn = () => {
-                    this.emitter.emit(exports.ReplayerEvents.CustomEvent, event);
-                };
-                break;
-            case exports.EventType.Meta:
-                castFn = () => this.emitter.emit(exports.ReplayerEvents.Resize, {
-                    width: event.data.width,
-                    height: event.data.height,
-                });
-                break;
-            case exports.EventType.FullSnapshot:
-                castFn = () => {
-                    if (this.firstFullSnapshot) {
-                        if (this.firstFullSnapshot === event) {
-                            this.firstFullSnapshot = true;
-                            return;
-                        }
-                    }
-                    else {
-                        this.firstFullSnapshot = true;
-                    }
-                    this.rebuildFullSnapshot(event, isSync);
-                    this.iframe.contentWindow.scrollTo(event.data.initialOffset);
-                };
-                break;
-            case exports.EventType.IncrementalSnapshot:
-                castFn = () => {
-                    this.applyIncremental(event, isSync);
-                    if (isSync) {
-                        return;
-                    }
-                    this.handleInactivity(event.timestamp);
-                    if (event === this.nextUserInteractionEvent) {
-                        this.nextUserInteractionEvent = null;
-                        this.backToNormal();
-                    }
-                    if (this.config.skipInactive && !this.nextUserInteractionEvent) {
-                        for (const _event of this.service.state.context.events) {
-                            if (_event.timestamp <= event.timestamp) {
-                                continue;
-                            }
-                            if (this.isUserInteraction(_event)) {
-                                if (_event.delay - event.delay >
-                                    SKIP_TIME_THRESHOLD *
-                                        this.speedService.state.context.timer.speed) {
-                                    this.nextUserInteractionEvent = _event;
-                                }
-                                break;
-                            }
-                        }
-                        if (this.nextUserInteractionEvent) {
-                            const skipTime = this.nextUserInteractionEvent.delay - event.delay;
-                            const payload = {
-                                speed: Math.min(Math.round(skipTime / SKIP_TIME_INTERVAL), this.config.maxSpeed),
-                            };
-                            this.speedService.send({ type: 'FAST_FORWARD', payload });
-                            this.emitter.emit(exports.ReplayerEvents.SkipStart, payload);
-                        }
-                    }
-                };
-                break;
-        }
-        const wrappedCastFn = () => {
-            if (castFn) {
-                castFn();
-            }
-            for (const plugin of this.config.plugins || []) {
-                plugin.handler(event, isSync, { replayer: this });
-            }
-            this.service.send({ type: 'CAST_EVENT', payload: { event } });
-            const last_index = this.service.state.context.events.length - 1;
-            if (event === this.service.state.context.events[last_index]) {
-                const finish = () => {
-                    if (last_index < this.service.state.context.events.length - 1) {
-                        return;
-                    }
-                    this.backToNormal();
-                    this.service.send('END');
-                    this.emitter.emit(exports.ReplayerEvents.Finish);
-                };
-                if (event.type === exports.EventType.IncrementalSnapshot &&
-                    event.data.source === exports.IncrementalSource.MouseMove &&
-                    event.data.positions.length) {
-                    setTimeout(() => {
-                        finish();
-                    }, Math.max(0, -event.data.positions[0].timeOffset + 50));
-                }
-                else {
-                    finish();
-                }
-            }
-            this.emitter.emit(exports.ReplayerEvents.EventCast, event);
-        };
-        return wrappedCastFn;
-    }
     handleInactivity(timestamp, resetNext) {
         if (timestamp === this.inactiveEndTimestamp || resetNext) {
             this.inactiveEndTimestamp = null;
@@ -6940,7 +7002,7 @@ class Replayer {
             this.waitForStylesheetLoad();
         }
         if (this.config.UNSAFE_replayCanvas) {
-            this.preloadAllImages();
+            void this.preloadAllImages();
         }
     }
     insertStyleRules(documentElement, head) {
@@ -7054,39 +7116,6 @@ class Replayer {
             }
         }
     }
-    hasImageArg(args) {
-        for (const arg of args) {
-            if (!arg || typeof arg !== 'object') ;
-            else if ('rr_type' in arg && 'args' in arg) {
-                if (this.hasImageArg(arg.args))
-                    return true;
-            }
-            else if ('rr_type' in arg && arg.rr_type === 'HTMLImageElement') {
-                return true;
-            }
-            else if (arg instanceof Array) {
-                if (this.hasImageArg(arg))
-                    return true;
-            }
-        }
-        return false;
-    }
-    getImageArgs(args) {
-        const images = [];
-        for (const arg of args) {
-            if (!arg || typeof arg !== 'object') ;
-            else if ('rr_type' in arg && 'args' in arg) {
-                images.push(...this.getImageArgs(arg.args));
-            }
-            else if ('rr_type' in arg && arg.rr_type === 'HTMLImageElement') {
-                images.push(arg.src);
-            }
-            else if (arg instanceof Array) {
-                images.push(...this.getImageArgs(arg));
-            }
-        }
-        return images;
-    }
     preloadAllImages() {
         return __awaiter(this, void 0, void 0, function* () {
             this.service.state;
@@ -7181,7 +7210,8 @@ class Replayer {
                         this.timer.addAction(action);
                     });
                     this.timer.addAction({
-                        doAction() { },
+                        doAction() {
+                        },
                         delay: e.delay - ((_a = d.positions[0]) === null || _a === void 0 ? void 0 : _a.timeOffset),
                     });
                 }
@@ -7320,7 +7350,7 @@ class Replayer {
                         mediaEl.pause();
                     }
                     if (d.type === 0) {
-                        mediaEl.play();
+                        void mediaEl.play();
                     }
                 }
                 catch (error) {
@@ -7432,7 +7462,7 @@ class Replayer {
                     if (!target) {
                         return this.debugNodeNotFound(d, d.id);
                     }
-                    canvasMutation({
+                    void canvasMutation({
                         event: e,
                         mutation: d,
                         target: target,
@@ -7445,7 +7475,9 @@ class Replayer {
             }
             case exports.IncrementalSource.Font: {
                 try {
-                    const fontFace = new FontFace(d.family, d.buffer ? new Uint8Array(JSON.parse(d.fontSource)) : d.fontSource, d.descriptors);
+                    const fontFace = new FontFace(d.family, d.buffer
+                        ? new Uint8Array(JSON.parse(d.fontSource))
+                        : d.fontSource, d.descriptors);
                     (_f = this.iframe.contentDocument) === null || _f === void 0 ? void 0 : _f.fonts.add(fontFace);
                 }
                 catch (error) {