@highlight-run/rrweb 2.0.1 → 2.0.4

package/es/rrweb/packages/rrweb-snapshot/es/rrweb-snapshot.js

@@ -16,6 +16,60 @@ function isShadowRoot(n) {
     var host = (_a = n) === null || _a === void 0 ? void 0 : _a.host;
     return Boolean(host && host.shadowRoot && host.shadowRoot === n);
 }
+var Mirror = (function () {
+    function Mirror() {
+        this.idNodeMap = new Map();
+        this.nodeMetaMap = new WeakMap();
+    }
+    Mirror.prototype.getId = function (n) {
+        var _a;
+        if (!n)
+            return -1;
+        var id = (_a = this.getMeta(n)) === null || _a === void 0 ? void 0 : _a.id;
+        return id !== null && id !== void 0 ? id : -1;
+    };
+    Mirror.prototype.getNode = function (id) {
+        return this.idNodeMap.get(id) || null;
+    };
+    Mirror.prototype.getIds = function () {
+        return Array.from(this.idNodeMap.keys());
+    };
+    Mirror.prototype.getMeta = function (n) {
+        return this.nodeMetaMap.get(n) || null;
+    };
+    Mirror.prototype.removeNodeFromMap = function (n) {
+        var _this = this;
+        var id = this.getId(n);
+        this.idNodeMap["delete"](id);
+        if (n.childNodes) {
+            n.childNodes.forEach(function (childNode) {
+                return _this.removeNodeFromMap(childNode);
+            });
+        }
+    };
+    Mirror.prototype.has = function (id) {
+        return this.idNodeMap.has(id);
+    };
+    Mirror.prototype.hasNode = function (node) {
+        return this.nodeMetaMap.has(node);
+    };
+    Mirror.prototype.add = function (n, meta) {
+        var id = meta.id;
+        this.idNodeMap.set(id, n);
+        this.nodeMetaMap.set(n, meta);
+    };
+    Mirror.prototype.replace = function (id, n) {
+        this.idNodeMap.set(id, n);
+    };
+    Mirror.prototype.reset = function () {
+        this.idNodeMap = new Map();
+        this.nodeMetaMap = new WeakMap();
+    };
+    return Mirror;
+}());
+function createMirror() {
+    return new Mirror();
+}
 function maskInputValue(_a) {
     var maskInputOptions = _a.maskInputOptions, tagName = _a.tagName, type = _a.type, value = _a.value, maskInputFn = _a.maskInputFn;
     var text = value || '';
@@ -338,12 +392,40 @@ function onceIframeLoaded(iframeEl, listener, iframeLoadTimeout) {
     }
     iframeEl.addEventListener('load', listener);
 }
+function isStylesheetLoaded(link) {
+    if (!link.getAttribute('href'))
+        return true;
+    return link.sheet !== null;
+}
+function onceStylesheetLoaded(link, listener, iframeLoadTimeout) {
+    var fired = false;
+    var styleSheetLoaded;
+    try {
+        styleSheetLoaded = link.sheet;
+    }
+    catch (error) {
+        return;
+    }
+    if (styleSheetLoaded)
+        return;
+    var timer = setTimeout(function () {
+        if (!fired) {
+            listener();
+            fired = true;
+        }
+    }, iframeLoadTimeout);
+    link.addEventListener('load', function () {
+        clearTimeout(timer);
+        fired = true;
+        listener();
+    });
+}
 function serializeNode(n, options) {
     var _a;
-    var doc = options.doc, blockClass = options.blockClass, blockSelector = options.blockSelector, maskTextClass = options.maskTextClass, maskTextSelector = options.maskTextSelector, inlineStylesheet = options.inlineStylesheet, _b = options.maskInputOptions, maskInputOptions = _b === void 0 ? {} : _b, maskTextFn = options.maskTextFn, maskInputFn = options.maskInputFn, _c = options.dataURLOptions, dataURLOptions = _c === void 0 ? {} : _c, inlineImages = options.inlineImages, recordCanvas = options.recordCanvas, keepIframeSrcFn = options.keepIframeSrcFn, enableStrictPrivacy = options.enableStrictPrivacy;
+    var doc = options.doc, mirror = options.mirror, blockClass = options.blockClass, blockSelector = options.blockSelector, maskTextClass = options.maskTextClass, maskTextSelector = options.maskTextSelector, inlineStylesheet = options.inlineStylesheet, _b = options.maskInputOptions, maskInputOptions = _b === void 0 ? {} : _b, maskTextFn = options.maskTextFn, maskInputFn = options.maskInputFn, _c = options.dataURLOptions, dataURLOptions = _c === void 0 ? {} : _c, inlineImages = options.inlineImages, recordCanvas = options.recordCanvas, keepIframeSrcFn = options.keepIframeSrcFn, enableStrictPrivacy = options.enableStrictPrivacy;
     var rootId;
-    if (doc.__sn) {
-        var docId = doc.__sn.id;
+    if (mirror.getMeta(doc)) {
+        var docId = mirror.getId(doc);
         rootId = docId === 1 ? undefined : docId;
     }
     switch (n.nodeType) {
@@ -375,9 +457,10 @@ function serializeNode(n, options) {
             var needBlock = _isBlockedElement(n, blockClass, blockSelector);
             var tagName = getValidTagName(n);
             var attributes_1 = {};
-            for (var _i = 0, _d = Array.from(n.attributes); _i < _d.length; _i++) {
-                var _e = _d[_i], name_1 = _e.name, value = _e.value;
-                attributes_1[name_1] = transformAttribute(doc, tagName, name_1, value);
+            var len = n.attributes.length;
+            for (var i = 0; i < len; i++) {
+                var attr = n.attributes[i];
+                attributes_1[attr.name] = transformAttribute(doc, tagName, attr.name, attr.value);
             }
             if (tagName === 'link' && inlineStylesheet) {
                 var stylesheet = Array.from(doc.styleSheets).find(function (s) {
@@ -469,7 +552,7 @@ function serializeNode(n, options) {
                     }
                     oldValue_1
                         ? (attributes_1.crossOrigin = oldValue_1)
-                        : delete attributes_1.crossOrigin;
+                        : image_1.removeAttribute('crossorigin');
                 };
                 if (image_1.complete && image_1.naturalWidth !== 0)
                     recordInlineImage();
@@ -489,7 +572,7 @@ function serializeNode(n, options) {
                 attributes_1.rr_scrollTop = n.scrollTop;
             }
             if (needBlock || (tagName === 'img' && enableStrictPrivacy)) {
-                var _f = n.getBoundingClientRect(), width = _f.width, height = _f.height;
+                var _d = n.getBoundingClientRect(), width = _d.width, height = _d.height;
                 attributes_1 = {
                     "class": attributes_1["class"],
                     rr_width: width + "px",
@@ -664,10 +747,11 @@ function slimDOMExcluded(sn, slimDOMOptions) {
     return false;
 }
 function serializeNodeWithId(n, options) {
-    var doc = options.doc, map = options.map, blockClass = options.blockClass, blockSelector = options.blockSelector, maskTextClass = options.maskTextClass, maskTextSelector = options.maskTextSelector, _a = options.skipChild, skipChild = _a === void 0 ? false : _a, _b = options.inlineStylesheet, inlineStylesheet = _b === void 0 ? true : _b, _c = options.maskInputOptions, maskInputOptions = _c === void 0 ? {} : _c, maskTextFn = options.maskTextFn, maskInputFn = options.maskInputFn, slimDOMOptions = options.slimDOMOptions, _d = options.dataURLOptions, dataURLOptions = _d === void 0 ? {} : _d, _e = options.inlineImages, inlineImages = _e === void 0 ? false : _e, _f = options.recordCanvas, recordCanvas = _f === void 0 ? false : _f, onSerialize = options.onSerialize, onIframeLoad = options.onIframeLoad, _g = options.iframeLoadTimeout, iframeLoadTimeout = _g === void 0 ? 5000 : _g, _h = options.keepIframeSrcFn, keepIframeSrcFn = _h === void 0 ? function () { return false; } : _h, enableStrictPrivacy = options.enableStrictPrivacy;
-    var _j = options.preserveWhiteSpace, preserveWhiteSpace = _j === void 0 ? true : _j;
+    var doc = options.doc, mirror = options.mirror, blockClass = options.blockClass, blockSelector = options.blockSelector, maskTextClass = options.maskTextClass, maskTextSelector = options.maskTextSelector, _a = options.skipChild, skipChild = _a === void 0 ? false : _a, _b = options.inlineStylesheet, inlineStylesheet = _b === void 0 ? true : _b, _c = options.maskInputOptions, maskInputOptions = _c === void 0 ? {} : _c, maskTextFn = options.maskTextFn, maskInputFn = options.maskInputFn, slimDOMOptions = options.slimDOMOptions, _d = options.dataURLOptions, dataURLOptions = _d === void 0 ? {} : _d, _e = options.inlineImages, inlineImages = _e === void 0 ? false : _e, _f = options.recordCanvas, recordCanvas = _f === void 0 ? false : _f, onSerialize = options.onSerialize, onIframeLoad = options.onIframeLoad, _g = options.iframeLoadTimeout, iframeLoadTimeout = _g === void 0 ? 5000 : _g, onStylesheetLoad = options.onStylesheetLoad, _h = options.stylesheetLoadTimeout, stylesheetLoadTimeout = _h === void 0 ? 5000 : _h, _j = options.keepIframeSrcFn, keepIframeSrcFn = _j === void 0 ? function () { return false; } : _j, enableStrictPrivacy = options.enableStrictPrivacy;
+    var _k = options.preserveWhiteSpace, preserveWhiteSpace = _k === void 0 ? true : _k;
     var _serializedNode = serializeNode(n, {
         doc: doc,
+        mirror: mirror,
         blockClass: blockClass,
         blockSelector: blockSelector,
         maskTextClass: maskTextClass,
@@ -687,8 +771,8 @@ function serializeNodeWithId(n, options) {
         return null;
     }
     var id;
-    if ('__sn' in n) {
-        id = n.__sn.id;
+    if (mirror.hasNode(n)) {
+        id = mirror.getId(n);
     }
     else if (slimDOMExcluded(_serializedNode, slimDOMOptions) ||
         (!preserveWhiteSpace &&
@@ -700,12 +784,11 @@ function serializeNodeWithId(n, options) {
     else {
         id = genId();
     }
-    var serializedNode = Object.assign(_serializedNode, { id: id });
-    n.__sn = serializedNode;
     if (id === IGNORED_NODE) {
         return null;
     }
-    map[id] = n;
+    var serializedNode = Object.assign(_serializedNode, { id: id });
+    mirror.add(n, serializedNode);
     if (onSerialize) {
         onSerialize(n);
     }
@@ -715,7 +798,13 @@ function serializeNodeWithId(n, options) {
         if (serializedNode.needBlock && serializedNode.tagName === 'img') {
             var clone = n.cloneNode();
             clone.src = '';
-            map[id] = clone;
+            mirror.add(clone, serializedNode);
+        }
+        if (serializedNode.tagName === 'link') {
+            var clone = n.cloneNode();
+            clone.href = '';
+            clone.innerText = serializedNode.attributes._cssText;
+            mirror.add(clone, serializedNode);
         }
         delete serializedNode.needBlock;
         if (n.shadowRoot)
@@ -725,13 +814,13 @@ function serializeNodeWithId(n, options) {
         serializedNode.type === NodeType.Element) &&
         recordChild) {
         if (slimDOMOptions.headWhitespace &&
-            _serializedNode.type === NodeType.Element &&
-            _serializedNode.tagName === 'head') {
+            serializedNode.type === NodeType.Element &&
+            serializedNode.tagName === 'head') {
             preserveWhiteSpace = false;
         }
         var bypassOptions = {
             doc: doc,
-            map: map,
+            mirror: mirror,
             blockClass: blockClass,
             blockSelector: blockSelector,
             maskTextClass: maskTextClass,
@@ -749,19 +838,21 @@ function serializeNodeWithId(n, options) {
             onSerialize: onSerialize,
             onIframeLoad: onIframeLoad,
             iframeLoadTimeout: iframeLoadTimeout,
+            onStylesheetLoad: onStylesheetLoad,
+            stylesheetLoadTimeout: stylesheetLoadTimeout,
             keepIframeSrcFn: keepIframeSrcFn,
             enableStrictPrivacy: enableStrictPrivacy
         };
-        for (var _i = 0, _k = Array.from(n.childNodes); _i < _k.length; _i++) {
-            var childN = _k[_i];
+        for (var _i = 0, _l = Array.from(n.childNodes); _i < _l.length; _i++) {
+            var childN = _l[_i];
             var serializedChildNode = serializeNodeWithId(childN, bypassOptions);
             if (serializedChildNode) {
                 serializedNode.childNodes.push(serializedChildNode);
             }
         }
         if (isElement(n) && n.shadowRoot) {
-            for (var _l = 0, _m = Array.from(n.shadowRoot.childNodes); _l < _m.length; _l++) {
-                var childN = _m[_l];
+            for (var _m = 0, _o = Array.from(n.shadowRoot.childNodes); _m < _o.length; _m++) {
+                var childN = _o[_m];
                 var serializedChildNode = serializeNodeWithId(childN, bypassOptions);
                 if (serializedChildNode) {
                     serializedChildNode.isShadow = true;
@@ -780,7 +871,7 @@ function serializeNodeWithId(n, options) {
             if (iframeDoc && onIframeLoad) {
                 var serializedIframeNode = serializeNodeWithId(iframeDoc, {
                     doc: iframeDoc,
-                    map: map,
+                    mirror: mirror,
                     blockClass: blockClass,
                     blockSelector: blockSelector,
                     maskTextClass: maskTextClass,
@@ -807,11 +898,47 @@ function serializeNodeWithId(n, options) {
             }
         }, iframeLoadTimeout);
     }
+    if (serializedNode.type === NodeType.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,
+                    onStylesheetLoad: onStylesheetLoad,
+                    iframeLoadTimeout: iframeLoadTimeout,
+                    keepIframeSrcFn: keepIframeSrcFn,
+                    enableStrictPrivacy: enableStrictPrivacy
+                });
+                if (serializedLinkNode) {
+                    onStylesheetLoad(n, serializedLinkNode);
+                }
+            }
+        }, stylesheetLoadTimeout);
+        if (isStylesheetLoaded(n) === false)
+            return null;
+    }
     return serializedNode;
 }
 function snapshot(n, options) {
-    var _a = options || {}, _b = _a.blockClass, blockClass = _b === void 0 ? 'highlight-block' : _b, _c = _a.blockSelector, blockSelector = _c === void 0 ? null : _c, _d = _a.maskTextClass, maskTextClass = _d === void 0 ? 'highlight-mask' : _d, _e = _a.maskTextSelector, maskTextSelector = _e === void 0 ? null : _e, _f = _a.inlineStylesheet, inlineStylesheet = _f === void 0 ? true : _f, _g = _a.inlineImages, inlineImages = _g === void 0 ? false : _g, _h = _a.recordCanvas, recordCanvas = _h === void 0 ? false : _h, _j = _a.maskAllInputs, maskAllInputs = _j === void 0 ? false : _j, maskTextFn = _a.maskTextFn, maskInputFn = _a.maskInputFn, _k = _a.slimDOM, slimDOM = _k === void 0 ? false : _k, dataURLOptions = _a.dataURLOptions, preserveWhiteSpace = _a.preserveWhiteSpace, onSerialize = _a.onSerialize, onIframeLoad = _a.onIframeLoad, iframeLoadTimeout = _a.iframeLoadTimeout, _l = _a.keepIframeSrcFn, keepIframeSrcFn = _l === void 0 ? function () { return false; } : _l, _m = _a.enableStrictPrivacy, enableStrictPrivacy = _m === void 0 ? false : _m;
-    var idNodeMap = {};
+    var _a = options || {}, _b = _a.mirror, mirror = _b === void 0 ? new Mirror() : _b, _c = _a.blockClass, blockClass = _c === void 0 ? 'highlight-block' : _c, _d = _a.blockSelector, blockSelector = _d === void 0 ? null : _d, _e = _a.maskTextClass, maskTextClass = _e === void 0 ? 'highlight-mask' : _e, _f = _a.maskTextSelector, maskTextSelector = _f === void 0 ? null : _f, _g = _a.inlineStylesheet, inlineStylesheet = _g === void 0 ? true : _g, _h = _a.inlineImages, inlineImages = _h === void 0 ? false : _h, _j = _a.recordCanvas, recordCanvas = _j === void 0 ? false : _j, _k = _a.maskAllInputs, maskAllInputs = _k === void 0 ? false : _k, maskTextFn = _a.maskTextFn, maskInputFn = _a.maskInputFn, _l = _a.slimDOM, slimDOM = _l === void 0 ? false : _l, dataURLOptions = _a.dataURLOptions, preserveWhiteSpace = _a.preserveWhiteSpace, onSerialize = _a.onSerialize, onIframeLoad = _a.onIframeLoad, iframeLoadTimeout = _a.iframeLoadTimeout, onStylesheetLoad = _a.onStylesheetLoad, stylesheetLoadTimeout = _a.stylesheetLoadTimeout, _m = _a.keepIframeSrcFn, keepIframeSrcFn = _m === void 0 ? function () { return false; } : _m, _o = _a.enableStrictPrivacy, enableStrictPrivacy = _o === void 0 ? false : _o;
     var maskInputOptions = maskAllInputs === true
         ? {
             color: true,
@@ -853,32 +980,30 @@ function snapshot(n, options) {
         : slimDOM === false
             ? {}
             : slimDOM;
-    return [
-        serializeNodeWithId(n, {
-            doc: n,
-            map: idNodeMap,
-            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,
-            keepIframeSrcFn: keepIframeSrcFn,
-            enableStrictPrivacy: enableStrictPrivacy
-        }),
-        idNodeMap,
-    ];
+    return serializeNodeWithId(n, {
+        doc: n,
+        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,
+        onStylesheetLoad: onStylesheetLoad,
+        stylesheetLoadTimeout: stylesheetLoadTimeout, keepIframeSrcFn: keepIframeSrcFn,
+        enableStrictPrivacy: enableStrictPrivacy
+    });
 }
 
 var commentre = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//g;
@@ -1589,13 +1714,13 @@ function buildNode(n, options) {
     }
 }
 function buildNodeWithSN(n, options) {
-    var doc = options.doc, map = options.map, _a = options.skipChild, skipChild = _a === void 0 ? false : _a, _b = options.hackCss, hackCss = _b === void 0 ? true : _b, afterAppend = options.afterAppend, cache = options.cache;
+    var doc = options.doc, mirror = options.mirror, _a = options.skipChild, skipChild = _a === void 0 ? false : _a, _b = options.hackCss, hackCss = _b === void 0 ? true : _b, afterAppend = options.afterAppend, cache = options.cache;
     var node = buildNode(n, { doc: doc, hackCss: hackCss, cache: cache });
     if (!node) {
         return null;
     }
     if (n.rootId) {
-        console.assert(map[n.rootId] === doc, 'Target document should has the same root id.');
+        console.assert(mirror.getNode(n.rootId) === doc, 'Target document should have the same root id.');
     }
     if (n.type === NodeType.Document) {
         doc.close();
@@ -1614,15 +1739,14 @@ function buildNodeWithSN(n, options) {
         }
         node = doc;
     }
-    node.__sn = n;
-    map[n.id] = node;
+    mirror.add(node, n);
     if ((n.type === NodeType.Document || n.type === NodeType.Element) &&
         !skipChild) {
         for (var _i = 0, _c = n.childNodes; _i < _c.length; _i++) {
             var childN = _c[_i];
             var childNode = buildNodeWithSN(childN, {
                 doc: doc,
-                map: map,
+                mirror: mirror,
                 skipChild: false,
                 hackCss: hackCss,
                 afterAppend: afterAppend,
@@ -1645,19 +1769,20 @@ function buildNodeWithSN(n, options) {
     }
     return node;
 }
-function visit(idNodeMap, onVisit) {
+function visit(mirror, onVisit) {
     function walk(node) {
         onVisit(node);
     }
-    for (var key in idNodeMap) {
-        if (idNodeMap[key]) {
-            walk(idNodeMap[key]);
+    for (var _i = 0, _a = mirror.getIds(); _i < _a.length; _i++) {
+        var id = _a[_i];
+        if (mirror.has(id)) {
+            walk(mirror.getNode(id));
         }
     }
 }
-function handleScroll(node) {
-    var n = node.__sn;
-    if (n.type !== NodeType.Element) {
+function handleScroll(node, mirror) {
+    var n = mirror.getMeta(node);
+    if ((n === null || n === void 0 ? void 0 : n.type) !== NodeType.Element) {
         return;
     }
     var el = node;
@@ -1675,23 +1800,22 @@ function handleScroll(node) {
     }
 }
 function rebuild(n, options) {
-    var doc = options.doc, onVisit = options.onVisit, _a = options.hackCss, hackCss = _a === void 0 ? true : _a, afterAppend = options.afterAppend, cache = options.cache;
-    var idNodeMap = {};
+    var doc = options.doc, onVisit = options.onVisit, _a = options.hackCss, hackCss = _a === void 0 ? true : _a, afterAppend = options.afterAppend, cache = options.cache, _b = options.mirror, mirror = _b === void 0 ? new Mirror() : _b;
     var node = buildNodeWithSN(n, {
         doc: doc,
-        map: idNodeMap,
+        mirror: mirror,
         skipChild: false,
         hackCss: hackCss,
         afterAppend: afterAppend,
         cache: cache
     });
-    visit(idNodeMap, function (visitedNode) {
+    visit(mirror, function (visitedNode) {
         if (onVisit) {
             onVisit(visitedNode);
         }
-        handleScroll(visitedNode);
+        handleScroll(visitedNode, mirror);
     });
-    return [node, idNodeMap];
+    return node;
 }
 
-export { IGNORED_NODE, NodeType, addHoverClass, buildNodeWithSN, createCache, is2DCanvasBlank, isElement, isShadowRoot, maskInputValue, needMaskingText, obfuscateText, rebuild, serializeNodeWithId, snapshot, transformAttribute };
+export { IGNORED_NODE, Mirror, NodeType, addHoverClass, buildNodeWithSN, createCache, createMirror, is2DCanvasBlank, isElement, isShadowRoot, maskInputValue, needMaskingText, obfuscateText, rebuild, serializeNodeWithId, snapshot, transformAttribute };