@highlight-run/rrweb 2.0.20 → 2.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/plugins/console-record.js +8 -8
- package/dist/plugins/console-record.min.js +8 -8
- package/dist/plugins/console-record.min.js.map +1 -1
- package/dist/plugins/console-replay.min.js.map +1 -1
- package/dist/record/rrweb-record-pack.min.js.map +1 -1
- package/dist/record/rrweb-record.js +3 -3
- package/dist/record/rrweb-record.min.js +3 -3
- package/dist/record/rrweb-record.min.js.map +1 -1
- package/dist/replay/rrweb-replay-unpack.js +4 -4
- package/dist/replay/rrweb-replay-unpack.min.js +4 -4
- package/dist/replay/rrweb-replay-unpack.min.js.map +1 -1
- package/dist/replay/rrweb-replay.js +4 -4
- package/dist/replay/rrweb-replay.min.js +4 -4
- package/dist/replay/rrweb-replay.min.js.map +1 -1
- package/dist/rrweb-all.js +12 -12
- package/dist/rrweb-all.min.js +12 -12
- package/dist/rrweb-all.min.js.map +1 -1
- package/dist/rrweb.js +5 -5
- package/dist/rrweb.min.js +5 -5
- package/dist/rrweb.min.js.map +1 -1
- package/es/rrweb/ext/mitt/dist/mitt.mjs.js +3 -0
- package/es/rrweb/packages/rrdom/es/rrdom.js +66 -10
- package/es/rrweb/packages/rrweb/src/plugins/console/record/error-stack-parser.js +3 -11
- package/es/rrweb/packages/rrweb/src/plugins/console/record/index.js +10 -7
- package/es/rrweb/packages/rrweb/src/plugins/console/record/stringify.js +9 -6
- package/es/rrweb/packages/rrweb/src/record/mutation.js +5 -3
- package/es/rrweb/packages/rrweb/src/record/observer.js +22 -14
- package/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas-manager.js +1 -1
- package/es/rrweb/packages/rrweb/src/record/shadow-dom-manager.js +7 -4
- package/es/rrweb/packages/rrweb/src/replay/canvas/2d.js +3 -2
- package/es/rrweb/packages/rrweb/src/replay/canvas/webgl.js +1 -2
- package/es/rrweb/packages/rrweb/src/replay/index.js +151 -180
- package/es/rrweb/packages/rrweb/src/replay/timer.js +6 -7
- package/es/rrweb/packages/rrweb/src/utils.js +8 -6
- package/es/rrweb/packages/rrweb-snapshot/es/rrweb-snapshot.js +60 -10
- package/lib/plugins/console-record.js +26 -26
- package/lib/record/rrweb-record.js +91 -31
- package/lib/replay/rrweb-replay-unpack.js +236 -265
- package/lib/replay/rrweb-replay.js +236 -265
- package/lib/rrweb-all.js +346 -318
- package/lib/rrweb.js +324 -294
- package/package.json +9 -8
- package/typings/plugins/console/record/index.d.ts +1 -1
- package/typings/plugins/console/record/stringify.d.ts +1 -1
- package/typings/record/observers/canvas/serialize-args.d.ts +5 -5
- package/typings/record/shadow-dom-manager.d.ts +1 -1
- package/typings/replay/index.d.ts +0 -2
- package/typings/types.d.ts +5 -6
- package/typings/utils.d.ts +2 -2
- package/es/rrweb/ext/mitt/dist/mitt.es.js +0 -63
- package/typings/record/observers/canvas/webgl2.d.ts +0 -2
package/lib/rrweb-all.js
CHANGED
|
@@ -19,6 +19,9 @@ function isShadowRoot(n) {
|
|
|
19
19
|
var host = n === null || n === void 0 ? void 0 : n.host;
|
|
20
20
|
return Boolean((host === null || host === void 0 ? void 0 : host.shadowRoot) === n);
|
|
21
21
|
}
|
|
22
|
+
function isNativeShadowDom(shadowRoot) {
|
|
23
|
+
return Object.prototype.toString.call(shadowRoot) === '[object ShadowRoot]';
|
|
24
|
+
}
|
|
22
25
|
var Mirror$2 = (function () {
|
|
23
26
|
function Mirror() {
|
|
24
27
|
this.idNodeMap = new Map();
|
|
@@ -286,7 +289,8 @@ function getHref() {
|
|
|
286
289
|
return a.href;
|
|
287
290
|
}
|
|
288
291
|
function transformAttribute(doc, tagName, name, value) {
|
|
289
|
-
if (name === 'src' ||
|
|
292
|
+
if (name === 'src' ||
|
|
293
|
+
(name === 'href' && value && !(tagName === 'use' && value[0] === '#'))) {
|
|
290
294
|
return absoluteToDoc(doc, value);
|
|
291
295
|
}
|
|
292
296
|
else if (name === 'xlink:href' && value && value[0] !== '#') {
|
|
@@ -845,7 +849,8 @@ function serializeNodeWithId(n, options) {
|
|
|
845
849
|
mirror.add(clone, serializedNode);
|
|
846
850
|
}
|
|
847
851
|
delete serializedNode.needBlock;
|
|
848
|
-
|
|
852
|
+
var shadowRoot = n.shadowRoot;
|
|
853
|
+
if (shadowRoot && isNativeShadowDom(shadowRoot))
|
|
849
854
|
serializedNode.isShadowHost = true;
|
|
850
855
|
}
|
|
851
856
|
if ((serializedNode.type === NodeType$2.Document ||
|
|
@@ -893,13 +898,16 @@ function serializeNodeWithId(n, options) {
|
|
|
893
898
|
var childN = _p[_o];
|
|
894
899
|
var serializedChildNode = serializeNodeWithId(childN, bypassOptions);
|
|
895
900
|
if (serializedChildNode) {
|
|
896
|
-
|
|
901
|
+
isNativeShadowDom(n.shadowRoot) &&
|
|
902
|
+
(serializedChildNode.isShadow = true);
|
|
897
903
|
serializedNode.childNodes.push(serializedChildNode);
|
|
898
904
|
}
|
|
899
905
|
}
|
|
900
906
|
}
|
|
901
907
|
}
|
|
902
|
-
if (n.parentNode &&
|
|
908
|
+
if (n.parentNode &&
|
|
909
|
+
isShadowRoot(n.parentNode) &&
|
|
910
|
+
isNativeShadowDom(n.parentNode)) {
|
|
903
911
|
serializedNode.isShadow = true;
|
|
904
912
|
}
|
|
905
913
|
if (serializedNode.type === NodeType$2.Element &&
|
|
@@ -976,6 +984,44 @@ function serializeNodeWithId(n, options) {
|
|
|
976
984
|
if (isStylesheetLoaded(n) === false)
|
|
977
985
|
return null;
|
|
978
986
|
}
|
|
987
|
+
if (serializedNode.type === NodeType$2.Element &&
|
|
988
|
+
serializedNode.tagName === 'link' &&
|
|
989
|
+
serializedNode.attributes.rel === 'stylesheet') {
|
|
990
|
+
onceStylesheetLoaded(n, function () {
|
|
991
|
+
if (onStylesheetLoad) {
|
|
992
|
+
var serializedLinkNode = serializeNodeWithId(n, {
|
|
993
|
+
doc: doc,
|
|
994
|
+
mirror: mirror,
|
|
995
|
+
blockClass: blockClass,
|
|
996
|
+
blockSelector: blockSelector,
|
|
997
|
+
maskTextClass: maskTextClass,
|
|
998
|
+
maskTextSelector: maskTextSelector,
|
|
999
|
+
skipChild: false,
|
|
1000
|
+
inlineStylesheet: inlineStylesheet,
|
|
1001
|
+
maskInputOptions: maskInputOptions,
|
|
1002
|
+
maskTextFn: maskTextFn,
|
|
1003
|
+
maskInputFn: maskInputFn,
|
|
1004
|
+
slimDOMOptions: slimDOMOptions,
|
|
1005
|
+
dataURLOptions: dataURLOptions,
|
|
1006
|
+
inlineImages: inlineImages,
|
|
1007
|
+
recordCanvas: recordCanvas,
|
|
1008
|
+
preserveWhiteSpace: preserveWhiteSpace,
|
|
1009
|
+
onSerialize: onSerialize,
|
|
1010
|
+
onIframeLoad: onIframeLoad,
|
|
1011
|
+
iframeLoadTimeout: iframeLoadTimeout,
|
|
1012
|
+
enableStrictPrivacy: enableStrictPrivacy,
|
|
1013
|
+
onStylesheetLoad: onStylesheetLoad,
|
|
1014
|
+
stylesheetLoadTimeout: stylesheetLoadTimeout,
|
|
1015
|
+
keepIframeSrcFn: keepIframeSrcFn
|
|
1016
|
+
});
|
|
1017
|
+
if (serializedLinkNode) {
|
|
1018
|
+
onStylesheetLoad(n, serializedLinkNode);
|
|
1019
|
+
}
|
|
1020
|
+
}
|
|
1021
|
+
}, stylesheetLoadTimeout);
|
|
1022
|
+
if (isStylesheetLoaded(n) === false)
|
|
1023
|
+
return null;
|
|
1024
|
+
}
|
|
979
1025
|
return serializedNode;
|
|
980
1026
|
}
|
|
981
1027
|
function snapshot(n, options) {
|
|
@@ -1081,7 +1127,7 @@ function parse(css, options) {
|
|
|
1081
1127
|
Position.prototype.content = css;
|
|
1082
1128
|
var errorsList = [];
|
|
1083
1129
|
function error(msg) {
|
|
1084
|
-
var err = new Error(options.source
|
|
1130
|
+
var err = new Error("".concat(options.source || '', ":").concat(lineno, ":").concat(column, ": ").concat(msg));
|
|
1085
1131
|
err.reason = msg;
|
|
1086
1132
|
err.filename = options.source;
|
|
1087
1133
|
err.line = lineno;
|
|
@@ -1594,7 +1640,7 @@ function buildNode(n, options) {
|
|
|
1594
1640
|
return doc.implementation.createDocument(null, '', null);
|
|
1595
1641
|
case NodeType$2.DocumentType:
|
|
1596
1642
|
return doc.implementation.createDocumentType(n.name || 'html', n.publicId, n.systemId);
|
|
1597
|
-
case NodeType$2.Element:
|
|
1643
|
+
case NodeType$2.Element: {
|
|
1598
1644
|
var tagName = getTagName(n);
|
|
1599
1645
|
var node_1;
|
|
1600
1646
|
if (n.isSVG) {
|
|
@@ -1604,7 +1650,7 @@ function buildNode(n, options) {
|
|
|
1604
1650
|
node_1 = doc.createElement(tagName);
|
|
1605
1651
|
}
|
|
1606
1652
|
var _loop_1 = function (name_1) {
|
|
1607
|
-
if (!
|
|
1653
|
+
if (!Object.prototype.hasOwnProperty.call(n.attributes, name_1)) {
|
|
1608
1654
|
return "continue";
|
|
1609
1655
|
}
|
|
1610
1656
|
var value = n.attributes[name_1];
|
|
@@ -1692,13 +1738,15 @@ function buildNode(n, options) {
|
|
|
1692
1738
|
else {
|
|
1693
1739
|
if (tagName === 'canvas' && name_1 === 'rr_dataURL') {
|
|
1694
1740
|
var image_1 = document.createElement('img');
|
|
1695
|
-
image_1.src = value;
|
|
1696
1741
|
image_1.onload = function () {
|
|
1697
1742
|
var ctx = node_1.getContext('2d');
|
|
1698
1743
|
if (ctx) {
|
|
1699
1744
|
ctx.drawImage(image_1, 0, 0, image_1.width, image_1.height);
|
|
1700
1745
|
}
|
|
1701
1746
|
};
|
|
1747
|
+
image_1.src = value;
|
|
1748
|
+
if (node_1.RRNodeType)
|
|
1749
|
+
node_1.rr_dataURL = value;
|
|
1702
1750
|
}
|
|
1703
1751
|
else if (tagName === 'img' && name_1 === 'rr_dataURL') {
|
|
1704
1752
|
var image = node_1;
|
|
@@ -1754,6 +1802,7 @@ function buildNode(n, options) {
|
|
|
1754
1802
|
}
|
|
1755
1803
|
}
|
|
1756
1804
|
return node_1;
|
|
1805
|
+
}
|
|
1757
1806
|
case NodeType$2.Text:
|
|
1758
1807
|
return doc.createTextNode(n.isStyle && hackCss
|
|
1759
1808
|
? addHoverClass(n.textContent, cache)
|
|
@@ -1840,7 +1889,8 @@ function handleScroll(node, mirror) {
|
|
|
1840
1889
|
}
|
|
1841
1890
|
var el = node;
|
|
1842
1891
|
for (var name_2 in n.attributes) {
|
|
1843
|
-
if (!(
|
|
1892
|
+
if (!(Object.prototype.hasOwnProperty.call(n.attributes, name_2) &&
|
|
1893
|
+
name_2.startsWith('rr_'))) {
|
|
1844
1894
|
continue;
|
|
1845
1895
|
}
|
|
1846
1896
|
var value = n.attributes[name_2];
|
|
@@ -1915,14 +1965,13 @@ if (typeof window !== 'undefined' && window.Proxy && window.Reflect) {
|
|
|
1915
1965
|
function throttle(func, wait, options = {}) {
|
|
1916
1966
|
let timeout = null;
|
|
1917
1967
|
let previous = 0;
|
|
1918
|
-
return function (
|
|
1968
|
+
return function (...args) {
|
|
1919
1969
|
const now = Date.now();
|
|
1920
1970
|
if (!previous && options.leading === false) {
|
|
1921
1971
|
previous = now;
|
|
1922
1972
|
}
|
|
1923
1973
|
const remaining = wait - (now - previous);
|
|
1924
1974
|
const context = this;
|
|
1925
|
-
const args = arguments;
|
|
1926
1975
|
if (remaining <= 0 || remaining > wait) {
|
|
1927
1976
|
if (timeout) {
|
|
1928
1977
|
clearTimeout(timeout);
|
|
@@ -1959,7 +2008,8 @@ function hookSetter(target, key, d, isRevoked, win = window) {
|
|
|
1959
2008
|
function patch(source, name, replacement) {
|
|
1960
2009
|
try {
|
|
1961
2010
|
if (!(name in source)) {
|
|
1962
|
-
return () => {
|
|
2011
|
+
return () => {
|
|
2012
|
+
};
|
|
1963
2013
|
}
|
|
1964
2014
|
const original = source[name];
|
|
1965
2015
|
const wrapped = replacement(original);
|
|
@@ -1978,7 +2028,8 @@ function patch(source, name, replacement) {
|
|
|
1978
2028
|
};
|
|
1979
2029
|
}
|
|
1980
2030
|
catch (_a) {
|
|
1981
|
-
return () => {
|
|
2031
|
+
return () => {
|
|
2032
|
+
};
|
|
1982
2033
|
}
|
|
1983
2034
|
}
|
|
1984
2035
|
function getWindowHeight() {
|
|
@@ -2059,8 +2110,9 @@ function polyfill$1(win = window) {
|
|
|
2059
2110
|
.forEach;
|
|
2060
2111
|
}
|
|
2061
2112
|
if (!Node.prototype.contains) {
|
|
2062
|
-
Node.prototype.contains =
|
|
2063
|
-
|
|
2113
|
+
Node.prototype.contains = (...args) => {
|
|
2114
|
+
let node = args[0];
|
|
2115
|
+
if (!(0 in args)) {
|
|
2064
2116
|
throw new TypeError('1 argument is required');
|
|
2065
2117
|
}
|
|
2066
2118
|
do {
|
|
@@ -2416,6 +2468,7 @@ class MutationBuffer {
|
|
|
2416
2468
|
maskTextClass: this.maskTextClass,
|
|
2417
2469
|
maskTextSelector: this.maskTextSelector,
|
|
2418
2470
|
skipChild: true,
|
|
2471
|
+
newlyAddedElement: true,
|
|
2419
2472
|
inlineStylesheet: this.inlineStylesheet,
|
|
2420
2473
|
maskInputOptions: this.maskInputOptions,
|
|
2421
2474
|
maskTextFn: this.maskTextFn,
|
|
@@ -2442,7 +2495,6 @@ class MutationBuffer {
|
|
|
2442
2495
|
onStylesheetLoad: (link, childSn) => {
|
|
2443
2496
|
this.stylesheetManager.attachStylesheet(link, childSn, this.mirror);
|
|
2444
2497
|
},
|
|
2445
|
-
newlyAddedElement: true,
|
|
2446
2498
|
});
|
|
2447
2499
|
if (sn) {
|
|
2448
2500
|
adds.push({
|
|
@@ -2668,7 +2720,9 @@ class MutationBuffer {
|
|
|
2668
2720
|
this.removes.push({
|
|
2669
2721
|
parentId,
|
|
2670
2722
|
id: nodeId,
|
|
2671
|
-
isShadow: isShadowRoot(m.target)
|
|
2723
|
+
isShadow: isShadowRoot(m.target) && isNativeShadowDom(m.target)
|
|
2724
|
+
? true
|
|
2725
|
+
: undefined,
|
|
2672
2726
|
});
|
|
2673
2727
|
}
|
|
2674
2728
|
this.mapRemoves.push(n);
|
|
@@ -2834,7 +2888,8 @@ function initMutationObserver(options, rootEl) {
|
|
|
2834
2888
|
}
|
|
2835
2889
|
function initMoveObserver({ mousemoveCb, sampling, doc, mirror, }) {
|
|
2836
2890
|
if (sampling.mousemove === false) {
|
|
2837
|
-
return () => {
|
|
2891
|
+
return () => {
|
|
2892
|
+
};
|
|
2838
2893
|
}
|
|
2839
2894
|
const threshold = typeof sampling.mousemove === 'number' ? sampling.mousemove : 50;
|
|
2840
2895
|
const callbackThreshold = typeof sampling.mousemoveCallback === 'number'
|
|
@@ -2884,7 +2939,8 @@ function initMoveObserver({ mousemoveCb, sampling, doc, mirror, }) {
|
|
|
2884
2939
|
}
|
|
2885
2940
|
function initMouseInteractionObserver({ mouseInteractionCb, doc, mirror, blockClass, sampling, }) {
|
|
2886
2941
|
if (sampling.mouseInteraction === false) {
|
|
2887
|
-
return () => {
|
|
2942
|
+
return () => {
|
|
2943
|
+
};
|
|
2888
2944
|
}
|
|
2889
2945
|
const disableMap = sampling.mouseInteraction === true ||
|
|
2890
2946
|
sampling.mouseInteraction === undefined
|
|
@@ -3088,7 +3144,7 @@ function initStyleSheetObserver({ styleSheetRuleCb, mirror }, { win }) {
|
|
|
3088
3144
|
adds: [{ rule, index }],
|
|
3089
3145
|
});
|
|
3090
3146
|
}
|
|
3091
|
-
return insertRule.apply(this,
|
|
3147
|
+
return insertRule.apply(this, [rule, index]);
|
|
3092
3148
|
};
|
|
3093
3149
|
const deleteRule = win.CSSStyleSheet.prototype.deleteRule;
|
|
3094
3150
|
win.CSSStyleSheet.prototype.deleteRule = function (index) {
|
|
@@ -3099,7 +3155,7 @@ function initStyleSheetObserver({ styleSheetRuleCb, mirror }, { win }) {
|
|
|
3099
3155
|
removes: [{ index }],
|
|
3100
3156
|
});
|
|
3101
3157
|
}
|
|
3102
|
-
return deleteRule.apply(this,
|
|
3158
|
+
return deleteRule.apply(this, [index]);
|
|
3103
3159
|
};
|
|
3104
3160
|
const supportedNestedCSSRuleTypes = {};
|
|
3105
3161
|
if (isCSSGroupingRuleSupported) {
|
|
@@ -3138,17 +3194,19 @@ function initStyleSheetObserver({ styleSheetRuleCb, mirror }, { win }) {
|
|
|
3138
3194
|
],
|
|
3139
3195
|
});
|
|
3140
3196
|
}
|
|
3141
|
-
return unmodifiedFunctions[typeKey].insertRule.apply(this,
|
|
3197
|
+
return unmodifiedFunctions[typeKey].insertRule.apply(this, [rule, index]);
|
|
3142
3198
|
};
|
|
3143
3199
|
type.prototype.deleteRule = function (index) {
|
|
3144
3200
|
const id = mirror.getId(this.parentStyleSheet.ownerNode);
|
|
3145
3201
|
if (id !== -1) {
|
|
3146
3202
|
styleSheetRuleCb({
|
|
3147
3203
|
id,
|
|
3148
|
-
removes: [
|
|
3204
|
+
removes: [
|
|
3205
|
+
{ index: [...getNestedCSSRulePositions(this), index] },
|
|
3206
|
+
],
|
|
3149
3207
|
});
|
|
3150
3208
|
}
|
|
3151
|
-
return unmodifiedFunctions[typeKey].deleteRule.apply(this,
|
|
3209
|
+
return unmodifiedFunctions[typeKey].deleteRule.apply(this, [index]);
|
|
3152
3210
|
};
|
|
3153
3211
|
});
|
|
3154
3212
|
return () => {
|
|
@@ -3176,7 +3234,7 @@ function initStyleDeclarationObserver({ styleDeclarationCb, mirror }, { win }) {
|
|
|
3176
3234
|
index: getNestedCSSRulePositions(this.parentRule),
|
|
3177
3235
|
});
|
|
3178
3236
|
}
|
|
3179
|
-
return setProperty.apply(this,
|
|
3237
|
+
return setProperty.apply(this, [property, value, priority]);
|
|
3180
3238
|
};
|
|
3181
3239
|
const removeProperty = win.CSSStyleDeclaration.prototype.removeProperty;
|
|
3182
3240
|
win.CSSStyleDeclaration.prototype.removeProperty = function (property) {
|
|
@@ -3191,7 +3249,7 @@ function initStyleDeclarationObserver({ styleDeclarationCb, mirror }, { win }) {
|
|
|
3191
3249
|
index: getNestedCSSRulePositions(this.parentRule),
|
|
3192
3250
|
});
|
|
3193
3251
|
}
|
|
3194
|
-
return removeProperty.apply(this,
|
|
3252
|
+
return removeProperty.apply(this, [property]);
|
|
3195
3253
|
};
|
|
3196
3254
|
return () => {
|
|
3197
3255
|
win.CSSStyleDeclaration.prototype.setProperty = setProperty;
|
|
@@ -3226,7 +3284,8 @@ function initMediaInteractionObserver({ mediaInteractionCb, blockClass, mirror,
|
|
|
3226
3284
|
function initFontObserver({ fontCb, doc }) {
|
|
3227
3285
|
const win = doc.defaultView;
|
|
3228
3286
|
if (!win) {
|
|
3229
|
-
return () => {
|
|
3287
|
+
return () => {
|
|
3288
|
+
};
|
|
3230
3289
|
}
|
|
3231
3290
|
const handlers = [];
|
|
3232
3291
|
const fontMap = new WeakMap();
|
|
@@ -3239,8 +3298,7 @@ function initFontObserver({ fontCb, doc }) {
|
|
|
3239
3298
|
descriptors,
|
|
3240
3299
|
fontSource: typeof source === 'string'
|
|
3241
3300
|
? source
|
|
3242
|
-
:
|
|
3243
|
-
JSON.stringify(Array.from(new Uint8Array(source))),
|
|
3301
|
+
: JSON.stringify(Array.from(new Uint8Array(source))),
|
|
3244
3302
|
});
|
|
3245
3303
|
return fontFace;
|
|
3246
3304
|
};
|
|
@@ -3336,7 +3394,8 @@ function mergeHooks(o, hooks) {
|
|
|
3336
3394
|
function initObservers(o, hooks = {}) {
|
|
3337
3395
|
const currentWindow = o.doc.defaultView;
|
|
3338
3396
|
if (!currentWindow) {
|
|
3339
|
-
return () => {
|
|
3397
|
+
return () => {
|
|
3398
|
+
};
|
|
3340
3399
|
}
|
|
3341
3400
|
mergeHooks(o, hooks);
|
|
3342
3401
|
const mutationObserver = initMutationObserver(o, o.doc);
|
|
@@ -3350,7 +3409,10 @@ function initObservers(o, hooks = {}) {
|
|
|
3350
3409
|
const styleDeclarationObserver = initStyleDeclarationObserver(o, {
|
|
3351
3410
|
win: currentWindow,
|
|
3352
3411
|
});
|
|
3353
|
-
const fontObserver = o.collectFonts
|
|
3412
|
+
const fontObserver = o.collectFonts
|
|
3413
|
+
? initFontObserver(o)
|
|
3414
|
+
: () => {
|
|
3415
|
+
};
|
|
3354
3416
|
const pluginHandlers = [];
|
|
3355
3417
|
for (const plugin of o.plugins) {
|
|
3356
3418
|
pluginHandlers.push(plugin.observer(plugin.callback, currentWindow, plugin.options));
|
|
@@ -3410,8 +3472,8 @@ class ShadowDomManager {
|
|
|
3410
3472
|
this.mirror = options.mirror;
|
|
3411
3473
|
const manager = this;
|
|
3412
3474
|
this.restorePatches.push(patch(HTMLElement.prototype, 'attachShadow', function (original) {
|
|
3413
|
-
return function () {
|
|
3414
|
-
const shadowRoot = original.
|
|
3475
|
+
return function (option) {
|
|
3476
|
+
const shadowRoot = original.call(this, option);
|
|
3415
3477
|
if (this.shadowRoot)
|
|
3416
3478
|
manager.addShadowRoot(this.shadowRoot, this.ownerDocument);
|
|
3417
3479
|
return shadowRoot;
|
|
@@ -3419,6 +3481,8 @@ class ShadowDomManager {
|
|
|
3419
3481
|
}));
|
|
3420
3482
|
}
|
|
3421
3483
|
addShadowRoot(shadowRoot, doc) {
|
|
3484
|
+
if (!isNativeShadowDom(shadowRoot))
|
|
3485
|
+
return;
|
|
3422
3486
|
initMutationObserver(Object.assign(Object.assign({}, this.bypassOptions), { doc, mutationCb: this.mutationCb, mirror: this.mirror, shadowDomManager: this }), shadowRoot);
|
|
3423
3487
|
initScrollObserver(Object.assign(Object.assign({}, this.bypassOptions), { scrollCb: this.scrollCb, doc: shadowRoot, mirror: this.mirror }));
|
|
3424
3488
|
}
|
|
@@ -3426,8 +3490,8 @@ class ShadowDomManager {
|
|
|
3426
3490
|
if (iframeElement.contentWindow) {
|
|
3427
3491
|
const manager = this;
|
|
3428
3492
|
this.restorePatches.push(patch(iframeElement.contentWindow.HTMLElement.prototype, 'attachShadow', function (original) {
|
|
3429
|
-
return function () {
|
|
3430
|
-
const shadowRoot = original.
|
|
3493
|
+
return function (option) {
|
|
3494
|
+
const shadowRoot = original.call(this, option);
|
|
3431
3495
|
if (this.shadowRoot)
|
|
3432
3496
|
manager.addShadowRoot(this.shadowRoot, iframeElement.contentDocument);
|
|
3433
3497
|
return shadowRoot;
|
|
@@ -3841,7 +3905,7 @@ class CanvasManager {
|
|
|
3841
3905
|
this.rafStamps = { latestId: 0, invokeId: null };
|
|
3842
3906
|
this.frozen = false;
|
|
3843
3907
|
this.locked = false;
|
|
3844
|
-
this.processMutation =
|
|
3908
|
+
this.processMutation = (target, mutation) => {
|
|
3845
3909
|
const newFrame = this.rafStamps.invokeId &&
|
|
3846
3910
|
this.rafStamps.latestId !== this.rafStamps.invokeId;
|
|
3847
3911
|
if (newFrame || !this.rafStamps.invokeId)
|
|
@@ -4487,7 +4551,7 @@ const hyphenate = (str) => {
|
|
|
4487
4551
|
};
|
|
4488
4552
|
|
|
4489
4553
|
class BaseRRNode {
|
|
4490
|
-
constructor(...
|
|
4554
|
+
constructor(..._args) {
|
|
4491
4555
|
this.childNodes = [];
|
|
4492
4556
|
this.parentElement = null;
|
|
4493
4557
|
this.parentNode = null;
|
|
@@ -4523,7 +4587,7 @@ class BaseRRNode {
|
|
|
4523
4587
|
insertBefore(_newChild, _refChild) {
|
|
4524
4588
|
throw new Error(`RRDomException: Failed to execute 'insertBefore' on 'RRNode': This RRNode type does not support this method.`);
|
|
4525
4589
|
}
|
|
4526
|
-
removeChild(
|
|
4590
|
+
removeChild(_node) {
|
|
4527
4591
|
throw new Error(`RRDomException: Failed to execute 'removeChild' on 'RRNode': This RRNode type does not support this method.`);
|
|
4528
4592
|
}
|
|
4529
4593
|
toString() {
|
|
@@ -4902,6 +4966,44 @@ const NAMESPACES = {
|
|
|
4902
4966
|
'xlink:href': 'http://www.w3.org/1999/xlink',
|
|
4903
4967
|
xmlns: 'http://www.w3.org/2000/xmlns/',
|
|
4904
4968
|
};
|
|
4969
|
+
const SVGTagMap = {
|
|
4970
|
+
altglyph: 'altGlyph',
|
|
4971
|
+
altglyphdef: 'altGlyphDef',
|
|
4972
|
+
altglyphitem: 'altGlyphItem',
|
|
4973
|
+
animatecolor: 'animateColor',
|
|
4974
|
+
animatemotion: 'animateMotion',
|
|
4975
|
+
animatetransform: 'animateTransform',
|
|
4976
|
+
clippath: 'clipPath',
|
|
4977
|
+
feblend: 'feBlend',
|
|
4978
|
+
fecolormatrix: 'feColorMatrix',
|
|
4979
|
+
fecomponenttransfer: 'feComponentTransfer',
|
|
4980
|
+
fecomposite: 'feComposite',
|
|
4981
|
+
feconvolvematrix: 'feConvolveMatrix',
|
|
4982
|
+
fediffuselighting: 'feDiffuseLighting',
|
|
4983
|
+
fedisplacementmap: 'feDisplacementMap',
|
|
4984
|
+
fedistantlight: 'feDistantLight',
|
|
4985
|
+
fedropshadow: 'feDropShadow',
|
|
4986
|
+
feflood: 'feFlood',
|
|
4987
|
+
fefunca: 'feFuncA',
|
|
4988
|
+
fefuncb: 'feFuncB',
|
|
4989
|
+
fefuncg: 'feFuncG',
|
|
4990
|
+
fefuncr: 'feFuncR',
|
|
4991
|
+
fegaussianblur: 'feGaussianBlur',
|
|
4992
|
+
feimage: 'feImage',
|
|
4993
|
+
femerge: 'feMerge',
|
|
4994
|
+
femergenode: 'feMergeNode',
|
|
4995
|
+
femorphology: 'feMorphology',
|
|
4996
|
+
feoffset: 'feOffset',
|
|
4997
|
+
fepointlight: 'fePointLight',
|
|
4998
|
+
fespecularlighting: 'feSpecularLighting',
|
|
4999
|
+
fespotlight: 'feSpotLight',
|
|
5000
|
+
fetile: 'feTile',
|
|
5001
|
+
feturbulence: 'feTurbulence',
|
|
5002
|
+
foreignobject: 'foreignObject',
|
|
5003
|
+
glyphref: 'glyphRef',
|
|
5004
|
+
lineargradient: 'linearGradient',
|
|
5005
|
+
radialgradient: 'radialGradient',
|
|
5006
|
+
};
|
|
4905
5007
|
function diff(oldTree, newTree, replayer, rrnodeMirror) {
|
|
4906
5008
|
const oldChildren = oldTree.childNodes;
|
|
4907
5009
|
const newChildren = newTree.childNodes;
|
|
@@ -4932,8 +5034,8 @@ function diff(oldTree, newTree, replayer, rrnodeMirror) {
|
|
|
4932
5034
|
const newMediaRRElement = newRRElement;
|
|
4933
5035
|
if (newMediaRRElement.paused !== undefined)
|
|
4934
5036
|
newMediaRRElement.paused
|
|
4935
|
-
? oldMediaElement.pause()
|
|
4936
|
-
: oldMediaElement.play();
|
|
5037
|
+
? void oldMediaElement.pause()
|
|
5038
|
+
: void oldMediaElement.play();
|
|
4937
5039
|
if (newMediaRRElement.muted !== undefined)
|
|
4938
5040
|
oldMediaElement.muted = newMediaRRElement.muted;
|
|
4939
5041
|
if (newMediaRRElement.volume !== undefined)
|
|
@@ -4943,7 +5045,20 @@ function diff(oldTree, newTree, replayer, rrnodeMirror) {
|
|
|
4943
5045
|
break;
|
|
4944
5046
|
}
|
|
4945
5047
|
case 'CANVAS':
|
|
4946
|
-
|
|
5048
|
+
{
|
|
5049
|
+
const rrCanvasElement = newTree;
|
|
5050
|
+
if (rrCanvasElement.rr_dataURL !== null) {
|
|
5051
|
+
const image = document.createElement('img');
|
|
5052
|
+
image.onload = () => {
|
|
5053
|
+
const ctx = oldElement.getContext('2d');
|
|
5054
|
+
if (ctx) {
|
|
5055
|
+
ctx.drawImage(image, 0, 0, image.width, image.height);
|
|
5056
|
+
}
|
|
5057
|
+
};
|
|
5058
|
+
image.src = rrCanvasElement.rr_dataURL;
|
|
5059
|
+
}
|
|
5060
|
+
rrCanvasElement.canvasMutations.forEach((canvasMutation) => replayer.applyCanvas(canvasMutation.event, canvasMutation.mutation, oldTree));
|
|
5061
|
+
}
|
|
4947
5062
|
break;
|
|
4948
5063
|
case 'STYLE':
|
|
4949
5064
|
applyVirtualStyleRulesToNode(oldElement, newTree.rules);
|
|
@@ -5121,9 +5236,10 @@ function createOrGetNode(rrNode, domMirror, rrnodeMirror) {
|
|
|
5121
5236
|
node = document.implementation.createDocumentType(rrNode.name, rrNode.publicId, rrNode.systemId);
|
|
5122
5237
|
break;
|
|
5123
5238
|
case NodeType$1.Element: {
|
|
5124
|
-
rrNode.tagName.toLowerCase();
|
|
5239
|
+
let tagName = rrNode.tagName.toLowerCase();
|
|
5240
|
+
tagName = SVGTagMap[tagName] || tagName;
|
|
5125
5241
|
if (sn && 'isSVG' in sn && (sn === null || sn === void 0 ? void 0 : sn.isSVG)) {
|
|
5126
|
-
node = document.createElementNS(NAMESPACES['svg'],
|
|
5242
|
+
node = document.createElementNS(NAMESPACES['svg'], tagName);
|
|
5127
5243
|
}
|
|
5128
5244
|
else
|
|
5129
5245
|
node = document.createElement(rrNode.tagName);
|
|
@@ -5289,6 +5405,7 @@ class RRMediaElement extends BaseRRMediaElementImpl(RRElement) {
|
|
|
5289
5405
|
class RRCanvasElement extends RRElement {
|
|
5290
5406
|
constructor() {
|
|
5291
5407
|
super(...arguments);
|
|
5408
|
+
this.rr_dataURL = null;
|
|
5292
5409
|
this.canvasMutations = [];
|
|
5293
5410
|
}
|
|
5294
5411
|
getContext() {
|
|
@@ -5328,11 +5445,12 @@ function buildFromNode(node, rrdom, domMirror, parentRRNode) {
|
|
|
5328
5445
|
rrNode.compatMode = node.compatMode;
|
|
5329
5446
|
}
|
|
5330
5447
|
break;
|
|
5331
|
-
case NodeType.DOCUMENT_TYPE_NODE:
|
|
5448
|
+
case NodeType.DOCUMENT_TYPE_NODE: {
|
|
5332
5449
|
const documentType = node;
|
|
5333
5450
|
rrNode = rrdom.createDocumentType(documentType.name, documentType.publicId, documentType.systemId);
|
|
5334
5451
|
break;
|
|
5335
|
-
|
|
5452
|
+
}
|
|
5453
|
+
case NodeType.ELEMENT_NODE: {
|
|
5336
5454
|
const elementNode = node;
|
|
5337
5455
|
const tagName = getValidTagName(elementNode);
|
|
5338
5456
|
rrNode = rrdom.createElement(tagName);
|
|
@@ -5343,6 +5461,7 @@ function buildFromNode(node, rrdom, domMirror, parentRRNode) {
|
|
|
5343
5461
|
elementNode.scrollLeft && (rrElement.scrollLeft = elementNode.scrollLeft);
|
|
5344
5462
|
elementNode.scrollTop && (rrElement.scrollTop = elementNode.scrollTop);
|
|
5345
5463
|
break;
|
|
5464
|
+
}
|
|
5346
5465
|
case NodeType.TEXT_NODE:
|
|
5347
5466
|
rrNode = rrdom.createTextNode(node.textContent || '');
|
|
5348
5467
|
break;
|
|
@@ -5452,7 +5571,7 @@ function getDefaultSN(node, id) {
|
|
|
5452
5571
|
type: node.RRNodeType,
|
|
5453
5572
|
childNodes: [],
|
|
5454
5573
|
};
|
|
5455
|
-
case NodeType$1.DocumentType:
|
|
5574
|
+
case NodeType$1.DocumentType: {
|
|
5456
5575
|
const doctype = node;
|
|
5457
5576
|
return {
|
|
5458
5577
|
id,
|
|
@@ -5461,6 +5580,7 @@ function getDefaultSN(node, id) {
|
|
|
5461
5580
|
publicId: doctype.publicId,
|
|
5462
5581
|
systemId: doctype.systemId,
|
|
5463
5582
|
};
|
|
5583
|
+
}
|
|
5464
5584
|
case NodeType$1.Element:
|
|
5465
5585
|
return {
|
|
5466
5586
|
id,
|
|
@@ -5490,67 +5610,7 @@ function getDefaultSN(node, id) {
|
|
|
5490
5610
|
}
|
|
5491
5611
|
}
|
|
5492
5612
|
|
|
5493
|
-
|
|
5494
|
-
// An event handler can take an optional event argument
|
|
5495
|
-
// and should not return a value
|
|
5496
|
-
|
|
5497
|
-
|
|
5498
|
-
|
|
5499
|
-
// An array of all currently registered event handlers for a type
|
|
5500
|
-
|
|
5501
|
-
|
|
5502
|
-
// A map of event types and their corresponding event handlers.
|
|
5503
|
-
|
|
5504
|
-
|
|
5505
|
-
|
|
5506
|
-
|
|
5507
|
-
|
|
5508
|
-
/** Mitt: Tiny (~200b) functional event emitter / pubsub.
|
|
5509
|
-
* @name mitt
|
|
5510
|
-
* @returns {Mitt}
|
|
5511
|
-
*/
|
|
5512
|
-
function mitt$1(all ) {
|
|
5513
|
-
all = all || Object.create(null);
|
|
5514
|
-
|
|
5515
|
-
return {
|
|
5516
|
-
/**
|
|
5517
|
-
* Register an event handler for the given type.
|
|
5518
|
-
*
|
|
5519
|
-
* @param {String} type Type of event to listen for, or `"*"` for all events
|
|
5520
|
-
* @param {Function} handler Function to call in response to given event
|
|
5521
|
-
* @memberOf mitt
|
|
5522
|
-
*/
|
|
5523
|
-
on: function on(type , handler ) {
|
|
5524
|
-
(all[type] || (all[type] = [])).push(handler);
|
|
5525
|
-
},
|
|
5526
|
-
|
|
5527
|
-
/**
|
|
5528
|
-
* Remove an event handler for the given type.
|
|
5529
|
-
*
|
|
5530
|
-
* @param {String} type Type of event to unregister `handler` from, or `"*"`
|
|
5531
|
-
* @param {Function} handler Handler function to remove
|
|
5532
|
-
* @memberOf mitt
|
|
5533
|
-
*/
|
|
5534
|
-
off: function off(type , handler ) {
|
|
5535
|
-
if (all[type]) {
|
|
5536
|
-
all[type].splice(all[type].indexOf(handler) >>> 0, 1);
|
|
5537
|
-
}
|
|
5538
|
-
},
|
|
5539
|
-
|
|
5540
|
-
/**
|
|
5541
|
-
* Invoke all handlers for the given type.
|
|
5542
|
-
* If present, `"*"` handlers are invoked after type-matched handlers.
|
|
5543
|
-
*
|
|
5544
|
-
* @param {String} type The event type to invoke
|
|
5545
|
-
* @param {Any} [evt] Any value (object is recommended and powerful), passed to each handler
|
|
5546
|
-
* @memberOf mitt
|
|
5547
|
-
*/
|
|
5548
|
-
emit: function emit(type , evt ) {
|
|
5549
|
-
(all[type] || []).slice().map(function (handler) { handler(evt); });
|
|
5550
|
-
(all['*'] || []).slice().map(function (handler) { handler(type, evt); });
|
|
5551
|
-
}
|
|
5552
|
-
};
|
|
5553
|
-
}
|
|
5613
|
+
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);});}}}
|
|
5554
5614
|
|
|
5555
5615
|
var mittProxy = /*#__PURE__*/Object.freeze({
|
|
5556
5616
|
__proto__: null,
|
|
@@ -5797,14 +5857,13 @@ class Timer {
|
|
|
5797
5857
|
this.timeOffset = 0;
|
|
5798
5858
|
let lastTimestamp = performance.now();
|
|
5799
5859
|
const { actions } = this;
|
|
5800
|
-
const
|
|
5801
|
-
function check() {
|
|
5860
|
+
const check = () => {
|
|
5802
5861
|
const time = performance.now();
|
|
5803
|
-
|
|
5862
|
+
this.timeOffset += (time - lastTimestamp) * this.speed;
|
|
5804
5863
|
lastTimestamp = time;
|
|
5805
5864
|
while (actions.length) {
|
|
5806
5865
|
const action = actions[0];
|
|
5807
|
-
if (
|
|
5866
|
+
if (this.timeOffset >= action.delay) {
|
|
5808
5867
|
actions.shift();
|
|
5809
5868
|
action.doAction();
|
|
5810
5869
|
}
|
|
@@ -5812,10 +5871,10 @@ class Timer {
|
|
|
5812
5871
|
break;
|
|
5813
5872
|
}
|
|
5814
5873
|
}
|
|
5815
|
-
if (actions.length > 0 ||
|
|
5816
|
-
|
|
5874
|
+
if (actions.length > 0 || this.liveMode) {
|
|
5875
|
+
this.raf = requestAnimationFrame(check);
|
|
5817
5876
|
}
|
|
5818
|
-
}
|
|
5877
|
+
};
|
|
5819
5878
|
this.raf = requestAnimationFrame(check);
|
|
5820
5879
|
}
|
|
5821
5880
|
clear() {
|
|
@@ -6228,8 +6287,7 @@ function deserializeArg(imageMap, ctx, preload) {
|
|
|
6228
6287
|
function getContext(target, type) {
|
|
6229
6288
|
try {
|
|
6230
6289
|
if (type === CanvasContext.WebGL) {
|
|
6231
|
-
return (target.getContext('webgl') ||
|
|
6232
|
-
target.getContext('experimental-webgl'));
|
|
6290
|
+
return (target.getContext('webgl') || target.getContext('experimental-webgl'));
|
|
6233
6291
|
}
|
|
6234
6292
|
return target.getContext('webgl2');
|
|
6235
6293
|
}
|
|
@@ -6287,13 +6345,14 @@ function canvasMutation$1({ event, mutation, target, imageMap, errorHandler, })
|
|
|
6287
6345
|
try {
|
|
6288
6346
|
const ctx = target.getContext('2d');
|
|
6289
6347
|
if (mutation.setter) {
|
|
6290
|
-
ctx[mutation.property] =
|
|
6348
|
+
ctx[mutation.property] =
|
|
6349
|
+
mutation.args[0];
|
|
6291
6350
|
return;
|
|
6292
6351
|
}
|
|
6293
6352
|
const original = ctx[mutation.property];
|
|
6294
6353
|
if (mutation.property === 'drawImage' &&
|
|
6295
6354
|
typeof mutation.args[0] === 'string') {
|
|
6296
|
-
|
|
6355
|
+
imageMap.get(event);
|
|
6297
6356
|
original.apply(ctx, mutation.args);
|
|
6298
6357
|
}
|
|
6299
6358
|
else {
|
|
@@ -6379,6 +6438,142 @@ class Replayer {
|
|
|
6379
6438
|
this.newDocumentQueue = [];
|
|
6380
6439
|
this.mousePos = null;
|
|
6381
6440
|
this.touchActive = null;
|
|
6441
|
+
this.handleResize = (dimension) => {
|
|
6442
|
+
this.iframe.style.display = 'inherit';
|
|
6443
|
+
for (const el of [this.mouseTail, this.iframe]) {
|
|
6444
|
+
if (!el) {
|
|
6445
|
+
continue;
|
|
6446
|
+
}
|
|
6447
|
+
el.setAttribute('width', String(dimension.width));
|
|
6448
|
+
el.setAttribute('height', String(dimension.height));
|
|
6449
|
+
}
|
|
6450
|
+
};
|
|
6451
|
+
this.applyEventsSynchronously = (events) => {
|
|
6452
|
+
for (const event of events) {
|
|
6453
|
+
switch (event.type) {
|
|
6454
|
+
case exports.EventType.DomContentLoaded:
|
|
6455
|
+
case exports.EventType.Load:
|
|
6456
|
+
case exports.EventType.Custom:
|
|
6457
|
+
continue;
|
|
6458
|
+
case exports.EventType.FullSnapshot:
|
|
6459
|
+
case exports.EventType.Meta:
|
|
6460
|
+
case exports.EventType.Plugin:
|
|
6461
|
+
case exports.EventType.IncrementalSnapshot:
|
|
6462
|
+
break;
|
|
6463
|
+
}
|
|
6464
|
+
const castFn = this.getCastFn(event, true);
|
|
6465
|
+
castFn();
|
|
6466
|
+
}
|
|
6467
|
+
if (this.touchActive === true) {
|
|
6468
|
+
this.mouse.classList.add('touch-active');
|
|
6469
|
+
}
|
|
6470
|
+
else if (this.touchActive === false) {
|
|
6471
|
+
this.mouse.classList.remove('touch-active');
|
|
6472
|
+
}
|
|
6473
|
+
this.touchActive = null;
|
|
6474
|
+
};
|
|
6475
|
+
this.getCastFn = (event, isSync = false) => {
|
|
6476
|
+
let castFn;
|
|
6477
|
+
switch (event.type) {
|
|
6478
|
+
case exports.EventType.DomContentLoaded:
|
|
6479
|
+
case exports.EventType.Load:
|
|
6480
|
+
break;
|
|
6481
|
+
case exports.EventType.Custom:
|
|
6482
|
+
castFn = () => {
|
|
6483
|
+
this.emitter.emit(exports.ReplayerEvents.CustomEvent, event);
|
|
6484
|
+
};
|
|
6485
|
+
break;
|
|
6486
|
+
case exports.EventType.Meta:
|
|
6487
|
+
castFn = () => this.emitter.emit(exports.ReplayerEvents.Resize, {
|
|
6488
|
+
width: event.data.width,
|
|
6489
|
+
height: event.data.height,
|
|
6490
|
+
});
|
|
6491
|
+
break;
|
|
6492
|
+
case exports.EventType.FullSnapshot:
|
|
6493
|
+
castFn = () => {
|
|
6494
|
+
if (this.firstFullSnapshot) {
|
|
6495
|
+
if (this.firstFullSnapshot === event) {
|
|
6496
|
+
this.firstFullSnapshot = true;
|
|
6497
|
+
return;
|
|
6498
|
+
}
|
|
6499
|
+
}
|
|
6500
|
+
else {
|
|
6501
|
+
this.firstFullSnapshot = true;
|
|
6502
|
+
}
|
|
6503
|
+
this.rebuildFullSnapshot(event, isSync);
|
|
6504
|
+
this.iframe.contentWindow.scrollTo(event.data.initialOffset);
|
|
6505
|
+
};
|
|
6506
|
+
break;
|
|
6507
|
+
case exports.EventType.IncrementalSnapshot:
|
|
6508
|
+
castFn = () => {
|
|
6509
|
+
this.applyIncremental(event, isSync);
|
|
6510
|
+
if (isSync) {
|
|
6511
|
+
return;
|
|
6512
|
+
}
|
|
6513
|
+
this.handleInactivity(event.timestamp);
|
|
6514
|
+
if (event === this.nextUserInteractionEvent) {
|
|
6515
|
+
this.nextUserInteractionEvent = null;
|
|
6516
|
+
this.backToNormal();
|
|
6517
|
+
}
|
|
6518
|
+
if (this.config.skipInactive && !this.nextUserInteractionEvent) {
|
|
6519
|
+
for (const _event of this.service.state.context.events) {
|
|
6520
|
+
if (_event.timestamp <= event.timestamp) {
|
|
6521
|
+
continue;
|
|
6522
|
+
}
|
|
6523
|
+
if (this.isUserInteraction(_event)) {
|
|
6524
|
+
if (_event.delay - event.delay >
|
|
6525
|
+
SKIP_TIME_THRESHOLD *
|
|
6526
|
+
this.speedService.state.context.timer.speed) {
|
|
6527
|
+
this.nextUserInteractionEvent = _event;
|
|
6528
|
+
}
|
|
6529
|
+
break;
|
|
6530
|
+
}
|
|
6531
|
+
}
|
|
6532
|
+
if (this.nextUserInteractionEvent) {
|
|
6533
|
+
const skipTime = this.nextUserInteractionEvent.delay - event.delay;
|
|
6534
|
+
const payload = {
|
|
6535
|
+
speed: Math.min(Math.round(skipTime / SKIP_TIME_INTERVAL), this.config.maxSpeed),
|
|
6536
|
+
};
|
|
6537
|
+
this.speedService.send({ type: 'FAST_FORWARD', payload });
|
|
6538
|
+
this.emitter.emit(exports.ReplayerEvents.SkipStart, payload);
|
|
6539
|
+
}
|
|
6540
|
+
}
|
|
6541
|
+
};
|
|
6542
|
+
break;
|
|
6543
|
+
}
|
|
6544
|
+
const wrappedCastFn = () => {
|
|
6545
|
+
if (castFn) {
|
|
6546
|
+
castFn();
|
|
6547
|
+
}
|
|
6548
|
+
for (const plugin of this.config.plugins || []) {
|
|
6549
|
+
plugin.handler(event, isSync, { replayer: this });
|
|
6550
|
+
}
|
|
6551
|
+
this.service.send({ type: 'CAST_EVENT', payload: { event } });
|
|
6552
|
+
const last_index = this.service.state.context.events.length - 1;
|
|
6553
|
+
if (event === this.service.state.context.events[last_index]) {
|
|
6554
|
+
const finish = () => {
|
|
6555
|
+
if (last_index < this.service.state.context.events.length - 1) {
|
|
6556
|
+
return;
|
|
6557
|
+
}
|
|
6558
|
+
this.backToNormal();
|
|
6559
|
+
this.service.send('END');
|
|
6560
|
+
this.emitter.emit(exports.ReplayerEvents.Finish);
|
|
6561
|
+
};
|
|
6562
|
+
if (event.type === exports.EventType.IncrementalSnapshot &&
|
|
6563
|
+
event.data.source === exports.IncrementalSource.MouseMove &&
|
|
6564
|
+
event.data.positions.length) {
|
|
6565
|
+
setTimeout(() => {
|
|
6566
|
+
finish();
|
|
6567
|
+
}, Math.max(0, -event.data.positions[0].timeOffset + 50));
|
|
6568
|
+
}
|
|
6569
|
+
else {
|
|
6570
|
+
finish();
|
|
6571
|
+
}
|
|
6572
|
+
}
|
|
6573
|
+
this.emitter.emit(exports.ReplayerEvents.EventCast, event);
|
|
6574
|
+
};
|
|
6575
|
+
return wrappedCastFn;
|
|
6576
|
+
};
|
|
6382
6577
|
if (!(config === null || config === void 0 ? void 0 : config.liveMode) && events.length < 2) {
|
|
6383
6578
|
throw new Error('Replayer need at least 2 events.');
|
|
6384
6579
|
}
|
|
@@ -6412,7 +6607,7 @@ class Replayer {
|
|
|
6412
6607
|
const replayerHandler = {
|
|
6413
6608
|
mirror: this.mirror,
|
|
6414
6609
|
applyCanvas: (canvasEvent, canvasMutationData, target) => {
|
|
6415
|
-
canvasMutation({
|
|
6610
|
+
void canvasMutation({
|
|
6416
6611
|
event: canvasEvent,
|
|
6417
6612
|
mutation: canvasMutationData,
|
|
6418
6613
|
target,
|
|
@@ -6525,6 +6720,7 @@ class Replayer {
|
|
|
6525
6720
|
}
|
|
6526
6721
|
setConfig(config) {
|
|
6527
6722
|
Object.keys(config).forEach((key) => {
|
|
6723
|
+
config[key];
|
|
6528
6724
|
this.config[key] = config[key];
|
|
6529
6725
|
});
|
|
6530
6726
|
if (!this.config.skipInactive) {
|
|
@@ -6696,7 +6892,7 @@ class Replayer {
|
|
|
6696
6892
|
if (indicatesTouchDevice(event)) {
|
|
6697
6893
|
this.mouse.classList.add('touch-device');
|
|
6698
6894
|
}
|
|
6699
|
-
Promise.resolve().then(() => this.service.send({ type: 'ADD_EVENT', payload: { event } }));
|
|
6895
|
+
void Promise.resolve().then(() => this.service.send({ type: 'ADD_EVENT', payload: { event } }));
|
|
6700
6896
|
}
|
|
6701
6897
|
replaceEvents(events) {
|
|
6702
6898
|
for (const event of events) {
|
|
@@ -6745,142 +6941,6 @@ class Replayer {
|
|
|
6745
6941
|
polyfill$1(this.iframe.contentWindow);
|
|
6746
6942
|
}
|
|
6747
6943
|
}
|
|
6748
|
-
handleResize(dimension) {
|
|
6749
|
-
this.iframe.style.display = 'inherit';
|
|
6750
|
-
for (const el of [this.mouseTail, this.iframe]) {
|
|
6751
|
-
if (!el) {
|
|
6752
|
-
continue;
|
|
6753
|
-
}
|
|
6754
|
-
el.setAttribute('width', String(dimension.width));
|
|
6755
|
-
el.setAttribute('height', String(dimension.height));
|
|
6756
|
-
}
|
|
6757
|
-
}
|
|
6758
|
-
applyEventsSynchronously(events) {
|
|
6759
|
-
for (const event of events) {
|
|
6760
|
-
switch (event.type) {
|
|
6761
|
-
case exports.EventType.DomContentLoaded:
|
|
6762
|
-
case exports.EventType.Load:
|
|
6763
|
-
case exports.EventType.Custom:
|
|
6764
|
-
continue;
|
|
6765
|
-
case exports.EventType.FullSnapshot:
|
|
6766
|
-
case exports.EventType.Meta:
|
|
6767
|
-
case exports.EventType.Plugin:
|
|
6768
|
-
case exports.EventType.IncrementalSnapshot:
|
|
6769
|
-
break;
|
|
6770
|
-
}
|
|
6771
|
-
const castFn = this.getCastFn(event, true);
|
|
6772
|
-
castFn();
|
|
6773
|
-
}
|
|
6774
|
-
if (this.touchActive === true) {
|
|
6775
|
-
this.mouse.classList.add('touch-active');
|
|
6776
|
-
}
|
|
6777
|
-
else if (this.touchActive === false) {
|
|
6778
|
-
this.mouse.classList.remove('touch-active');
|
|
6779
|
-
}
|
|
6780
|
-
this.touchActive = null;
|
|
6781
|
-
}
|
|
6782
|
-
getCastFn(event, isSync = false) {
|
|
6783
|
-
let castFn;
|
|
6784
|
-
switch (event.type) {
|
|
6785
|
-
case exports.EventType.DomContentLoaded:
|
|
6786
|
-
case exports.EventType.Load:
|
|
6787
|
-
break;
|
|
6788
|
-
case exports.EventType.Custom:
|
|
6789
|
-
castFn = () => {
|
|
6790
|
-
this.emitter.emit(exports.ReplayerEvents.CustomEvent, event);
|
|
6791
|
-
};
|
|
6792
|
-
break;
|
|
6793
|
-
case exports.EventType.Meta:
|
|
6794
|
-
castFn = () => this.emitter.emit(exports.ReplayerEvents.Resize, {
|
|
6795
|
-
width: event.data.width,
|
|
6796
|
-
height: event.data.height,
|
|
6797
|
-
});
|
|
6798
|
-
break;
|
|
6799
|
-
case exports.EventType.FullSnapshot:
|
|
6800
|
-
castFn = () => {
|
|
6801
|
-
if (this.firstFullSnapshot) {
|
|
6802
|
-
if (this.firstFullSnapshot === event) {
|
|
6803
|
-
this.firstFullSnapshot = true;
|
|
6804
|
-
return;
|
|
6805
|
-
}
|
|
6806
|
-
}
|
|
6807
|
-
else {
|
|
6808
|
-
this.firstFullSnapshot = true;
|
|
6809
|
-
}
|
|
6810
|
-
this.rebuildFullSnapshot(event, isSync);
|
|
6811
|
-
this.iframe.contentWindow.scrollTo(event.data.initialOffset);
|
|
6812
|
-
};
|
|
6813
|
-
break;
|
|
6814
|
-
case exports.EventType.IncrementalSnapshot:
|
|
6815
|
-
castFn = () => {
|
|
6816
|
-
this.applyIncremental(event, isSync);
|
|
6817
|
-
if (isSync) {
|
|
6818
|
-
return;
|
|
6819
|
-
}
|
|
6820
|
-
this.handleInactivity(event.timestamp);
|
|
6821
|
-
if (event === this.nextUserInteractionEvent) {
|
|
6822
|
-
this.nextUserInteractionEvent = null;
|
|
6823
|
-
this.backToNormal();
|
|
6824
|
-
}
|
|
6825
|
-
if (this.config.skipInactive && !this.nextUserInteractionEvent) {
|
|
6826
|
-
for (const _event of this.service.state.context.events) {
|
|
6827
|
-
if (_event.timestamp <= event.timestamp) {
|
|
6828
|
-
continue;
|
|
6829
|
-
}
|
|
6830
|
-
if (this.isUserInteraction(_event)) {
|
|
6831
|
-
if (_event.delay - event.delay >
|
|
6832
|
-
SKIP_TIME_THRESHOLD *
|
|
6833
|
-
this.speedService.state.context.timer.speed) {
|
|
6834
|
-
this.nextUserInteractionEvent = _event;
|
|
6835
|
-
}
|
|
6836
|
-
break;
|
|
6837
|
-
}
|
|
6838
|
-
}
|
|
6839
|
-
if (this.nextUserInteractionEvent) {
|
|
6840
|
-
const skipTime = this.nextUserInteractionEvent.delay - event.delay;
|
|
6841
|
-
const payload = {
|
|
6842
|
-
speed: Math.min(Math.round(skipTime / SKIP_TIME_INTERVAL), this.config.maxSpeed),
|
|
6843
|
-
};
|
|
6844
|
-
this.speedService.send({ type: 'FAST_FORWARD', payload });
|
|
6845
|
-
this.emitter.emit(exports.ReplayerEvents.SkipStart, payload);
|
|
6846
|
-
}
|
|
6847
|
-
}
|
|
6848
|
-
};
|
|
6849
|
-
break;
|
|
6850
|
-
}
|
|
6851
|
-
const wrappedCastFn = () => {
|
|
6852
|
-
if (castFn) {
|
|
6853
|
-
castFn();
|
|
6854
|
-
}
|
|
6855
|
-
for (const plugin of this.config.plugins || []) {
|
|
6856
|
-
plugin.handler(event, isSync, { replayer: this });
|
|
6857
|
-
}
|
|
6858
|
-
this.service.send({ type: 'CAST_EVENT', payload: { event } });
|
|
6859
|
-
const last_index = this.service.state.context.events.length - 1;
|
|
6860
|
-
if (event === this.service.state.context.events[last_index]) {
|
|
6861
|
-
const finish = () => {
|
|
6862
|
-
if (last_index < this.service.state.context.events.length - 1) {
|
|
6863
|
-
return;
|
|
6864
|
-
}
|
|
6865
|
-
this.backToNormal();
|
|
6866
|
-
this.service.send('END');
|
|
6867
|
-
this.emitter.emit(exports.ReplayerEvents.Finish);
|
|
6868
|
-
};
|
|
6869
|
-
if (event.type === exports.EventType.IncrementalSnapshot &&
|
|
6870
|
-
event.data.source === exports.IncrementalSource.MouseMove &&
|
|
6871
|
-
event.data.positions.length) {
|
|
6872
|
-
setTimeout(() => {
|
|
6873
|
-
finish();
|
|
6874
|
-
}, Math.max(0, -event.data.positions[0].timeOffset + 50));
|
|
6875
|
-
}
|
|
6876
|
-
else {
|
|
6877
|
-
finish();
|
|
6878
|
-
}
|
|
6879
|
-
}
|
|
6880
|
-
this.emitter.emit(exports.ReplayerEvents.EventCast, event);
|
|
6881
|
-
};
|
|
6882
|
-
return wrappedCastFn;
|
|
6883
|
-
}
|
|
6884
6944
|
handleInactivity(timestamp, resetNext) {
|
|
6885
6945
|
if (timestamp === this.inactiveEndTimestamp || resetNext) {
|
|
6886
6946
|
this.inactiveEndTimestamp = null;
|
|
@@ -6942,7 +7002,7 @@ class Replayer {
|
|
|
6942
7002
|
this.waitForStylesheetLoad();
|
|
6943
7003
|
}
|
|
6944
7004
|
if (this.config.UNSAFE_replayCanvas) {
|
|
6945
|
-
this.preloadAllImages();
|
|
7005
|
+
void this.preloadAllImages();
|
|
6946
7006
|
}
|
|
6947
7007
|
}
|
|
6948
7008
|
insertStyleRules(documentElement, head) {
|
|
@@ -7056,39 +7116,6 @@ class Replayer {
|
|
|
7056
7116
|
}
|
|
7057
7117
|
}
|
|
7058
7118
|
}
|
|
7059
|
-
hasImageArg(args) {
|
|
7060
|
-
for (const arg of args) {
|
|
7061
|
-
if (!arg || typeof arg !== 'object') ;
|
|
7062
|
-
else if ('rr_type' in arg && 'args' in arg) {
|
|
7063
|
-
if (this.hasImageArg(arg.args))
|
|
7064
|
-
return true;
|
|
7065
|
-
}
|
|
7066
|
-
else if ('rr_type' in arg && arg.rr_type === 'HTMLImageElement') {
|
|
7067
|
-
return true;
|
|
7068
|
-
}
|
|
7069
|
-
else if (arg instanceof Array) {
|
|
7070
|
-
if (this.hasImageArg(arg))
|
|
7071
|
-
return true;
|
|
7072
|
-
}
|
|
7073
|
-
}
|
|
7074
|
-
return false;
|
|
7075
|
-
}
|
|
7076
|
-
getImageArgs(args) {
|
|
7077
|
-
const images = [];
|
|
7078
|
-
for (const arg of args) {
|
|
7079
|
-
if (!arg || typeof arg !== 'object') ;
|
|
7080
|
-
else if ('rr_type' in arg && 'args' in arg) {
|
|
7081
|
-
images.push(...this.getImageArgs(arg.args));
|
|
7082
|
-
}
|
|
7083
|
-
else if ('rr_type' in arg && arg.rr_type === 'HTMLImageElement') {
|
|
7084
|
-
images.push(arg.src);
|
|
7085
|
-
}
|
|
7086
|
-
else if (arg instanceof Array) {
|
|
7087
|
-
images.push(...this.getImageArgs(arg));
|
|
7088
|
-
}
|
|
7089
|
-
}
|
|
7090
|
-
return images;
|
|
7091
|
-
}
|
|
7092
7119
|
preloadAllImages() {
|
|
7093
7120
|
return __awaiter(this, void 0, void 0, function* () {
|
|
7094
7121
|
this.service.state;
|
|
@@ -7183,7 +7210,8 @@ class Replayer {
|
|
|
7183
7210
|
this.timer.addAction(action);
|
|
7184
7211
|
});
|
|
7185
7212
|
this.timer.addAction({
|
|
7186
|
-
doAction() {
|
|
7213
|
+
doAction() {
|
|
7214
|
+
},
|
|
7187
7215
|
delay: e.delay - ((_a = d.positions[0]) === null || _a === void 0 ? void 0 : _a.timeOffset),
|
|
7188
7216
|
});
|
|
7189
7217
|
}
|
|
@@ -7322,7 +7350,7 @@ class Replayer {
|
|
|
7322
7350
|
mediaEl.pause();
|
|
7323
7351
|
}
|
|
7324
7352
|
if (d.type === 0) {
|
|
7325
|
-
mediaEl.play();
|
|
7353
|
+
void mediaEl.play();
|
|
7326
7354
|
}
|
|
7327
7355
|
}
|
|
7328
7356
|
catch (error) {
|
|
@@ -7434,7 +7462,7 @@ class Replayer {
|
|
|
7434
7462
|
if (!target) {
|
|
7435
7463
|
return this.debugNodeNotFound(d, d.id);
|
|
7436
7464
|
}
|
|
7437
|
-
canvasMutation({
|
|
7465
|
+
void canvasMutation({
|
|
7438
7466
|
event: e,
|
|
7439
7467
|
mutation: d,
|
|
7440
7468
|
target: target,
|
|
@@ -7447,7 +7475,9 @@ class Replayer {
|
|
|
7447
7475
|
}
|
|
7448
7476
|
case exports.IncrementalSource.Font: {
|
|
7449
7477
|
try {
|
|
7450
|
-
const fontFace = new FontFace(d.family, d.buffer
|
|
7478
|
+
const fontFace = new FontFace(d.family, d.buffer
|
|
7479
|
+
? new Uint8Array(JSON.parse(d.fontSource))
|
|
7480
|
+
: d.fontSource, d.descriptors);
|
|
7451
7481
|
(_f = this.iframe.contentDocument) === null || _f === void 0 ? void 0 : _f.fonts.add(fontFace);
|
|
7452
7482
|
}
|
|
7453
7483
|
catch (error) {
|
|
@@ -8705,17 +8735,9 @@ class StackFrame {
|
|
|
8705
8735
|
toString() {
|
|
8706
8736
|
const lineNumber = this.lineNumber || '';
|
|
8707
8737
|
const columnNumber = this.columnNumber || '';
|
|
8708
|
-
if (this.functionName)
|
|
8709
|
-
return
|
|
8710
|
-
|
|
8711
|
-
this.fileName +
|
|
8712
|
-
':' +
|
|
8713
|
-
lineNumber +
|
|
8714
|
-
':' +
|
|
8715
|
-
columnNumber +
|
|
8716
|
-
')');
|
|
8717
|
-
}
|
|
8718
|
-
return this.fileName + ':' + lineNumber + ':' + columnNumber;
|
|
8738
|
+
if (this.functionName)
|
|
8739
|
+
return `${this.functionName} (${this.fileName}:${lineNumber}:${columnNumber})`;
|
|
8740
|
+
return `${this.fileName}:${lineNumber}:${columnNumber}`;
|
|
8719
8741
|
}
|
|
8720
8742
|
}
|
|
8721
8743
|
const FIREFOX_SAFARI_STACK_REGEXP = /(^|@)\S+:\d+/;
|
|
@@ -8896,7 +8918,7 @@ function pathToSelector(node) {
|
|
|
8896
8918
|
}
|
|
8897
8919
|
}
|
|
8898
8920
|
if (domSiblings.length > 1) {
|
|
8899
|
-
name +=
|
|
8921
|
+
name += `:eq(${domSiblings.indexOf(node)})`;
|
|
8900
8922
|
}
|
|
8901
8923
|
path = name + (path ? '>' + path : '');
|
|
8902
8924
|
node = parent;
|
|
@@ -8912,7 +8934,8 @@ function isObjTooDeep(obj, limit) {
|
|
|
8912
8934
|
}
|
|
8913
8935
|
const keys = Object.keys(obj);
|
|
8914
8936
|
for (const key of keys) {
|
|
8915
|
-
if (isObject(obj[key]) &&
|
|
8937
|
+
if (isObject(obj[key]) &&
|
|
8938
|
+
isObjTooDeep(obj[key], limit - 1)) {
|
|
8916
8939
|
return true;
|
|
8917
8940
|
}
|
|
8918
8941
|
}
|
|
@@ -8946,9 +8969,10 @@ function stringify(obj, stringifyOptions) {
|
|
|
8946
8969
|
else {
|
|
8947
8970
|
stack.push(value);
|
|
8948
8971
|
}
|
|
8949
|
-
if (value === null
|
|
8972
|
+
if (value === null)
|
|
8950
8973
|
return value;
|
|
8951
|
-
|
|
8974
|
+
if (value === undefined)
|
|
8975
|
+
return 'undefined';
|
|
8952
8976
|
if (shouldIgnore(value)) {
|
|
8953
8977
|
return toString(value);
|
|
8954
8978
|
}
|
|
@@ -8957,7 +8981,7 @@ function stringify(obj, stringifyOptions) {
|
|
|
8957
8981
|
for (const eventKey in value) {
|
|
8958
8982
|
const eventValue = value[eventKey];
|
|
8959
8983
|
if (Array.isArray(eventValue)) {
|
|
8960
|
-
eventResult[eventKey] = pathToSelector(eventValue.length ? eventValue[0] : null);
|
|
8984
|
+
eventResult[eventKey] = pathToSelector((eventValue.length ? eventValue[0] : null));
|
|
8961
8985
|
}
|
|
8962
8986
|
else {
|
|
8963
8987
|
eventResult[eventKey] = eventValue;
|
|
@@ -8985,7 +9009,8 @@ function stringify(obj, stringifyOptions) {
|
|
|
8985
9009
|
if (typeof _obj === 'function') {
|
|
8986
9010
|
return true;
|
|
8987
9011
|
}
|
|
8988
|
-
if (isObject(_obj) &&
|
|
9012
|
+
if (isObject(_obj) &&
|
|
9013
|
+
isObjTooDeep(_obj, options.depthOfLimit)) {
|
|
8989
9014
|
return true;
|
|
8990
9015
|
}
|
|
8991
9016
|
return false;
|
|
@@ -9024,10 +9049,14 @@ const defaultLogOptions = {
|
|
|
9024
9049
|
lengthThreshold: 1000,
|
|
9025
9050
|
logger: 'console',
|
|
9026
9051
|
};
|
|
9027
|
-
function initLogObserver(cb, win,
|
|
9052
|
+
function initLogObserver(cb, win, options) {
|
|
9053
|
+
const logOptions = (options
|
|
9054
|
+
? Object.assign({}, defaultLogOptions, options)
|
|
9055
|
+
: defaultLogOptions);
|
|
9028
9056
|
const loggerType = logOptions.logger;
|
|
9029
9057
|
if (!loggerType) {
|
|
9030
|
-
return () => {
|
|
9058
|
+
return () => {
|
|
9059
|
+
};
|
|
9031
9060
|
}
|
|
9032
9061
|
let logger;
|
|
9033
9062
|
if (typeof loggerType === 'string') {
|
|
@@ -9041,7 +9070,7 @@ function initLogObserver(cb, win, logOptions) {
|
|
|
9041
9070
|
if (logOptions.level.includes('error')) {
|
|
9042
9071
|
if (window) {
|
|
9043
9072
|
const errorHandler = (event) => {
|
|
9044
|
-
const
|
|
9073
|
+
const message = event.message, error = event.error;
|
|
9045
9074
|
const trace = ErrorStackParser.parse(error).map((stackFrame) => stackFrame.toString());
|
|
9046
9075
|
const payload = [stringify(message, logOptions.stringifyOptions)];
|
|
9047
9076
|
cb({
|
|
@@ -9065,7 +9094,8 @@ function initLogObserver(cb, win, logOptions) {
|
|
|
9065
9094
|
};
|
|
9066
9095
|
function replace(_logger, level) {
|
|
9067
9096
|
if (!_logger[level]) {
|
|
9068
|
-
return () => {
|
|
9097
|
+
return () => {
|
|
9098
|
+
};
|
|
9069
9099
|
}
|
|
9070
9100
|
return patch(_logger, level, (original) => {
|
|
9071
9101
|
return (...args) => {
|
|
@@ -9104,9 +9134,7 @@ const PLUGIN_NAME$1 = 'rrweb/console@1';
|
|
|
9104
9134
|
const getRecordConsolePlugin = (options) => ({
|
|
9105
9135
|
name: PLUGIN_NAME$1,
|
|
9106
9136
|
observer: initLogObserver,
|
|
9107
|
-
options: options
|
|
9108
|
-
? Object.assign({}, defaultLogOptions, options)
|
|
9109
|
-
: defaultLogOptions,
|
|
9137
|
+
options: options,
|
|
9110
9138
|
});
|
|
9111
9139
|
|
|
9112
9140
|
const ORIGINAL_ATTRIBUTE_NAME = '__rrweb_original__';
|