@highlight-run/rrweb 2.0.16 → 2.1.0

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.
Files changed (101) hide show
  1. package/dist/plugins/console-record.js +8 -8
  2. package/dist/plugins/console-record.min.js +8 -8
  3. package/dist/plugins/console-record.min.js.map +1 -1
  4. package/dist/plugins/console-replay.min.js.map +1 -1
  5. package/dist/record/rrweb-record-pack.min.js.map +1 -1
  6. package/dist/record/rrweb-record.js +3 -3
  7. package/dist/record/rrweb-record.min.js +3 -3
  8. package/dist/record/rrweb-record.min.js.map +1 -1
  9. package/dist/replay/rrweb-replay-unpack.css +1 -1
  10. package/dist/replay/rrweb-replay-unpack.js +4 -4
  11. package/dist/replay/rrweb-replay-unpack.min.css +1 -1
  12. package/dist/replay/rrweb-replay-unpack.min.css.map +1 -1
  13. package/dist/replay/rrweb-replay-unpack.min.js +4 -4
  14. package/dist/replay/rrweb-replay-unpack.min.js.map +1 -1
  15. package/dist/replay/rrweb-replay.css +1 -1
  16. package/dist/replay/rrweb-replay.js +4 -4
  17. package/dist/replay/rrweb-replay.min.css +1 -1
  18. package/dist/replay/rrweb-replay.min.css.map +1 -1
  19. package/dist/replay/rrweb-replay.min.js +4 -4
  20. package/dist/replay/rrweb-replay.min.js.map +1 -1
  21. package/dist/rrweb-all.css +1 -1
  22. package/dist/rrweb-all.js +12 -12
  23. package/dist/rrweb-all.min.css +1 -1
  24. package/dist/rrweb-all.min.css.map +1 -1
  25. package/dist/rrweb-all.min.js +12 -12
  26. package/dist/rrweb-all.min.js.map +1 -1
  27. package/dist/rrweb.css +1 -1
  28. package/dist/rrweb.js +5 -5
  29. package/dist/rrweb.min.css +1 -1
  30. package/dist/rrweb.min.css.map +1 -1
  31. package/dist/rrweb.min.js +5 -5
  32. package/dist/rrweb.min.js.map +1 -1
  33. package/es/rrweb/all.css +1 -1
  34. package/es/rrweb/ext/mitt/dist/mitt.mjs.js +3 -0
  35. package/es/rrweb/packages/rrdom/es/rrdom.js +66 -14
  36. package/es/rrweb/packages/rrweb/src/plugins/console/record/error-stack-parser.js +3 -11
  37. package/es/rrweb/packages/rrweb/src/plugins/console/record/index.js +10 -7
  38. package/es/rrweb/packages/rrweb/src/plugins/console/record/stringify.js +9 -6
  39. package/es/rrweb/packages/rrweb/src/record/mutation.js +5 -3
  40. package/es/rrweb/packages/rrweb/src/record/observer.js +22 -14
  41. package/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas-manager.js +4 -1
  42. package/es/rrweb/packages/rrweb/src/record/shadow-dom-manager.js +7 -4
  43. package/es/rrweb/packages/rrweb/src/replay/canvas/2d.js +3 -2
  44. package/es/rrweb/packages/rrweb/src/replay/canvas/webgl.js +1 -2
  45. package/es/rrweb/packages/rrweb/src/replay/index.js +151 -180
  46. package/es/rrweb/packages/rrweb/src/replay/styles/inject-style.js +0 -1
  47. package/es/rrweb/packages/rrweb/src/replay/timer.js +6 -7
  48. package/es/rrweb/packages/rrweb/src/utils.js +8 -6
  49. package/es/rrweb/packages/rrweb-snapshot/es/rrweb-snapshot.js +60 -10
  50. package/lib/plugins/console-record.js +26 -26
  51. package/lib/record/rrweb-record.js +94 -31
  52. package/lib/replay/rrweb-replay-unpack.css +1 -1
  53. package/lib/replay/rrweb-replay-unpack.js +236 -270
  54. package/lib/replay/rrweb-replay.css +1 -1
  55. package/lib/replay/rrweb-replay.js +236 -270
  56. package/lib/rrweb-all.css +1 -1
  57. package/lib/rrweb-all.js +349 -323
  58. package/lib/rrweb.css +1 -1
  59. package/lib/rrweb.js +327 -299
  60. package/package.json +8 -7
  61. package/typings/entries/all.d.ts +0 -0
  62. package/typings/entries/record-pack.d.ts +0 -0
  63. package/typings/entries/replay-unpack.d.ts +0 -0
  64. package/typings/index.d.ts +0 -0
  65. package/typings/packer/base.d.ts +0 -0
  66. package/typings/packer/index.d.ts +0 -0
  67. package/typings/packer/pack.d.ts +0 -0
  68. package/typings/packer/unpack.d.ts +0 -0
  69. package/typings/plugins/console/record/error-stack-parser.d.ts +0 -0
  70. package/typings/plugins/console/record/index.d.ts +1 -1
  71. package/typings/plugins/console/record/stringify.d.ts +1 -1
  72. package/typings/plugins/console/replay/index.d.ts +0 -0
  73. package/typings/plugins/sequential-id/record/index.d.ts +0 -0
  74. package/typings/plugins/sequential-id/replay/index.d.ts +0 -0
  75. package/typings/record/iframe-manager.d.ts +0 -0
  76. package/typings/record/index.d.ts +0 -0
  77. package/typings/record/mutation.d.ts +0 -0
  78. package/typings/record/observer.d.ts +0 -0
  79. package/typings/record/observers/canvas/2d.d.ts +0 -0
  80. package/typings/record/observers/canvas/canvas-manager.d.ts +0 -0
  81. package/typings/record/observers/canvas/canvas.d.ts +0 -0
  82. package/typings/record/observers/canvas/serialize-args.d.ts +5 -5
  83. package/typings/record/observers/canvas/webgl.d.ts +0 -0
  84. package/typings/record/shadow-dom-manager.d.ts +1 -1
  85. package/typings/record/stylesheet-manager.d.ts +0 -0
  86. package/typings/record/workers/image-bitmap-data-url-worker.d.ts +0 -0
  87. package/typings/replay/canvas/2d.d.ts +0 -0
  88. package/typings/replay/canvas/deserialize-args.d.ts +0 -0
  89. package/typings/replay/canvas/index.d.ts +0 -0
  90. package/typings/replay/canvas/webgl.d.ts +0 -0
  91. package/typings/replay/index.d.ts +0 -2
  92. package/typings/replay/machine.d.ts +0 -0
  93. package/typings/replay/smoothscroll.d.ts +0 -0
  94. package/typings/replay/styles/inject-style.d.ts +0 -0
  95. package/typings/replay/timer.d.ts +0 -0
  96. package/typings/rrdom/index.d.ts +0 -0
  97. package/typings/rrdom/tree-node.d.ts +0 -0
  98. package/typings/types.d.ts +5 -6
  99. package/typings/utils.d.ts +2 -2
  100. package/es/rrweb/ext/mitt/dist/mitt.es.js +0 -63
  101. package/typings/record/observers/canvas/webgl2.d.ts +0 -2
@@ -127,7 +127,7 @@ function parse(css, options) {
127
127
  Position.prototype.content = css;
128
128
  var errorsList = [];
129
129
  function error(msg) {
130
- var err = new Error(options.source + ':' + lineno + ':' + column + ': ' + msg);
130
+ var err = new Error("".concat(options.source || '', ":").concat(lineno, ":").concat(column, ": ").concat(msg));
131
131
  err.reason = msg;
132
132
  err.filename = options.source;
133
133
  err.line = lineno;
@@ -640,7 +640,7 @@ function buildNode(n, options) {
640
640
  return doc.implementation.createDocument(null, '', null);
641
641
  case NodeType$2.DocumentType:
642
642
  return doc.implementation.createDocumentType(n.name || 'html', n.publicId, n.systemId);
643
- case NodeType$2.Element:
643
+ case NodeType$2.Element: {
644
644
  var tagName = getTagName(n);
645
645
  var node_1;
646
646
  if (n.isSVG) {
@@ -650,7 +650,7 @@ function buildNode(n, options) {
650
650
  node_1 = doc.createElement(tagName);
651
651
  }
652
652
  var _loop_1 = function (name_1) {
653
- if (!n.attributes.hasOwnProperty(name_1)) {
653
+ if (!Object.prototype.hasOwnProperty.call(n.attributes, name_1)) {
654
654
  return "continue";
655
655
  }
656
656
  var value = n.attributes[name_1];
@@ -738,13 +738,15 @@ function buildNode(n, options) {
738
738
  else {
739
739
  if (tagName === 'canvas' && name_1 === 'rr_dataURL') {
740
740
  var image_1 = document.createElement('img');
741
- image_1.src = value;
742
741
  image_1.onload = function () {
743
742
  var ctx = node_1.getContext('2d');
744
743
  if (ctx) {
745
744
  ctx.drawImage(image_1, 0, 0, image_1.width, image_1.height);
746
745
  }
747
746
  };
747
+ image_1.src = value;
748
+ if (node_1.RRNodeType)
749
+ node_1.rr_dataURL = value;
748
750
  }
749
751
  else if (tagName === 'img' && name_1 === 'rr_dataURL') {
750
752
  var image = node_1;
@@ -800,6 +802,7 @@ function buildNode(n, options) {
800
802
  }
801
803
  }
802
804
  return node_1;
805
+ }
803
806
  case NodeType$2.Text:
804
807
  return doc.createTextNode(n.isStyle && hackCss
805
808
  ? addHoverClass(n.textContent, cache)
@@ -886,7 +889,8 @@ function handleScroll(node, mirror) {
886
889
  }
887
890
  var el = node;
888
891
  for (var name_2 in n.attributes) {
889
- if (!(n.attributes.hasOwnProperty(name_2) && name_2.startsWith('rr_'))) {
892
+ if (!(Object.prototype.hasOwnProperty.call(n.attributes, name_2) &&
893
+ name_2.startsWith('rr_'))) {
890
894
  continue;
891
895
  }
892
896
  var value = n.attributes[name_2];
@@ -1021,7 +1025,7 @@ const hyphenate = (str) => {
1021
1025
  };
1022
1026
 
1023
1027
  class BaseRRNode {
1024
- constructor(...args) {
1028
+ constructor(..._args) {
1025
1029
  this.childNodes = [];
1026
1030
  this.parentElement = null;
1027
1031
  this.parentNode = null;
@@ -1057,7 +1061,7 @@ class BaseRRNode {
1057
1061
  insertBefore(_newChild, _refChild) {
1058
1062
  throw new Error(`RRDomException: Failed to execute 'insertBefore' on 'RRNode': This RRNode type does not support this method.`);
1059
1063
  }
1060
- removeChild(node) {
1064
+ removeChild(_node) {
1061
1065
  throw new Error(`RRDomException: Failed to execute 'removeChild' on 'RRNode': This RRNode type does not support this method.`);
1062
1066
  }
1063
1067
  toString() {
@@ -1436,6 +1440,44 @@ const NAMESPACES = {
1436
1440
  'xlink:href': 'http://www.w3.org/1999/xlink',
1437
1441
  xmlns: 'http://www.w3.org/2000/xmlns/',
1438
1442
  };
1443
+ const SVGTagMap = {
1444
+ altglyph: 'altGlyph',
1445
+ altglyphdef: 'altGlyphDef',
1446
+ altglyphitem: 'altGlyphItem',
1447
+ animatecolor: 'animateColor',
1448
+ animatemotion: 'animateMotion',
1449
+ animatetransform: 'animateTransform',
1450
+ clippath: 'clipPath',
1451
+ feblend: 'feBlend',
1452
+ fecolormatrix: 'feColorMatrix',
1453
+ fecomponenttransfer: 'feComponentTransfer',
1454
+ fecomposite: 'feComposite',
1455
+ feconvolvematrix: 'feConvolveMatrix',
1456
+ fediffuselighting: 'feDiffuseLighting',
1457
+ fedisplacementmap: 'feDisplacementMap',
1458
+ fedistantlight: 'feDistantLight',
1459
+ fedropshadow: 'feDropShadow',
1460
+ feflood: 'feFlood',
1461
+ fefunca: 'feFuncA',
1462
+ fefuncb: 'feFuncB',
1463
+ fefuncg: 'feFuncG',
1464
+ fefuncr: 'feFuncR',
1465
+ fegaussianblur: 'feGaussianBlur',
1466
+ feimage: 'feImage',
1467
+ femerge: 'feMerge',
1468
+ femergenode: 'feMergeNode',
1469
+ femorphology: 'feMorphology',
1470
+ feoffset: 'feOffset',
1471
+ fepointlight: 'fePointLight',
1472
+ fespecularlighting: 'feSpecularLighting',
1473
+ fespotlight: 'feSpotLight',
1474
+ fetile: 'feTile',
1475
+ feturbulence: 'feTurbulence',
1476
+ foreignobject: 'foreignObject',
1477
+ glyphref: 'glyphRef',
1478
+ lineargradient: 'linearGradient',
1479
+ radialgradient: 'radialGradient',
1480
+ };
1439
1481
  function diff(oldTree, newTree, replayer, rrnodeMirror) {
1440
1482
  const oldChildren = oldTree.childNodes;
1441
1483
  const newChildren = newTree.childNodes;
@@ -1466,8 +1508,8 @@ function diff(oldTree, newTree, replayer, rrnodeMirror) {
1466
1508
  const newMediaRRElement = newRRElement;
1467
1509
  if (newMediaRRElement.paused !== undefined)
1468
1510
  newMediaRRElement.paused
1469
- ? oldMediaElement.pause()
1470
- : oldMediaElement.play();
1511
+ ? void oldMediaElement.pause()
1512
+ : void oldMediaElement.play();
1471
1513
  if (newMediaRRElement.muted !== undefined)
1472
1514
  oldMediaElement.muted = newMediaRRElement.muted;
1473
1515
  if (newMediaRRElement.volume !== undefined)
@@ -1477,7 +1519,20 @@ function diff(oldTree, newTree, replayer, rrnodeMirror) {
1477
1519
  break;
1478
1520
  }
1479
1521
  case 'CANVAS':
1480
- newTree.canvasMutations.forEach((canvasMutation) => replayer.applyCanvas(canvasMutation.event, canvasMutation.mutation, oldTree));
1522
+ {
1523
+ const rrCanvasElement = newTree;
1524
+ if (rrCanvasElement.rr_dataURL !== null) {
1525
+ const image = document.createElement('img');
1526
+ image.onload = () => {
1527
+ const ctx = oldElement.getContext('2d');
1528
+ if (ctx) {
1529
+ ctx.drawImage(image, 0, 0, image.width, image.height);
1530
+ }
1531
+ };
1532
+ image.src = rrCanvasElement.rr_dataURL;
1533
+ }
1534
+ rrCanvasElement.canvasMutations.forEach((canvasMutation) => replayer.applyCanvas(canvasMutation.event, canvasMutation.mutation, oldTree));
1535
+ }
1481
1536
  break;
1482
1537
  case 'STYLE':
1483
1538
  applyVirtualStyleRulesToNode(oldElement, newTree.rules);
@@ -1552,10 +1607,6 @@ function diffChildren(oldChildren, newChildren, parentNode, replayer, rrnodeMirr
1552
1607
  const oldEndId = replayer.mirror.getId(oldEndNode);
1553
1608
  const newStartId = rrnodeMirror.getId(newStartNode);
1554
1609
  const newEndId = rrnodeMirror.getId(newEndNode);
1555
- console.log('oldStartId', oldStartId);
1556
- console.log('oldEndId', oldEndId);
1557
- console.log('newStartId', newStartId);
1558
- console.log('newEndId', newEndId);
1559
1610
  if (oldStartNode === undefined) {
1560
1611
  oldStartNode = oldChildren[++oldStartIndex];
1561
1612
  }
@@ -1659,9 +1710,10 @@ function createOrGetNode(rrNode, domMirror, rrnodeMirror) {
1659
1710
  node = document.implementation.createDocumentType(rrNode.name, rrNode.publicId, rrNode.systemId);
1660
1711
  break;
1661
1712
  case NodeType$1.Element: {
1662
- rrNode.tagName.toLowerCase();
1713
+ let tagName = rrNode.tagName.toLowerCase();
1714
+ tagName = SVGTagMap[tagName] || tagName;
1663
1715
  if (sn && 'isSVG' in sn && (sn === null || sn === void 0 ? void 0 : sn.isSVG)) {
1664
- node = document.createElementNS(NAMESPACES['svg'], rrNode.tagName.toLowerCase());
1716
+ node = document.createElementNS(NAMESPACES['svg'], tagName);
1665
1717
  }
1666
1718
  else
1667
1719
  node = document.createElement(rrNode.tagName);
@@ -1827,6 +1879,7 @@ class RRMediaElement extends BaseRRMediaElementImpl(RRElement) {
1827
1879
  class RRCanvasElement extends RRElement {
1828
1880
  constructor() {
1829
1881
  super(...arguments);
1882
+ this.rr_dataURL = null;
1830
1883
  this.canvasMutations = [];
1831
1884
  }
1832
1885
  getContext() {
@@ -1866,11 +1919,12 @@ function buildFromNode(node, rrdom, domMirror, parentRRNode) {
1866
1919
  rrNode.compatMode = node.compatMode;
1867
1920
  }
1868
1921
  break;
1869
- case NodeType.DOCUMENT_TYPE_NODE:
1922
+ case NodeType.DOCUMENT_TYPE_NODE: {
1870
1923
  const documentType = node;
1871
1924
  rrNode = rrdom.createDocumentType(documentType.name, documentType.publicId, documentType.systemId);
1872
1925
  break;
1873
- case NodeType.ELEMENT_NODE:
1926
+ }
1927
+ case NodeType.ELEMENT_NODE: {
1874
1928
  const elementNode = node;
1875
1929
  const tagName = getValidTagName(elementNode);
1876
1930
  rrNode = rrdom.createElement(tagName);
@@ -1881,6 +1935,7 @@ function buildFromNode(node, rrdom, domMirror, parentRRNode) {
1881
1935
  elementNode.scrollLeft && (rrElement.scrollLeft = elementNode.scrollLeft);
1882
1936
  elementNode.scrollTop && (rrElement.scrollTop = elementNode.scrollTop);
1883
1937
  break;
1938
+ }
1884
1939
  case NodeType.TEXT_NODE:
1885
1940
  rrNode = rrdom.createTextNode(node.textContent || '');
1886
1941
  break;
@@ -1990,7 +2045,7 @@ function getDefaultSN(node, id) {
1990
2045
  type: node.RRNodeType,
1991
2046
  childNodes: [],
1992
2047
  };
1993
- case NodeType$1.DocumentType:
2048
+ case NodeType$1.DocumentType: {
1994
2049
  const doctype = node;
1995
2050
  return {
1996
2051
  id,
@@ -1999,6 +2054,7 @@ function getDefaultSN(node, id) {
1999
2054
  publicId: doctype.publicId,
2000
2055
  systemId: doctype.systemId,
2001
2056
  };
2057
+ }
2002
2058
  case NodeType$1.Element:
2003
2059
  return {
2004
2060
  id,
@@ -2028,67 +2084,7 @@ function getDefaultSN(node, id) {
2028
2084
  }
2029
2085
  }
2030
2086
 
2031
- //
2032
- // An event handler can take an optional event argument
2033
- // and should not return a value
2034
-
2035
-
2036
-
2037
- // An array of all currently registered event handlers for a type
2038
-
2039
-
2040
- // A map of event types and their corresponding event handlers.
2041
-
2042
-
2043
-
2044
-
2045
-
2046
- /** Mitt: Tiny (~200b) functional event emitter / pubsub.
2047
- * @name mitt
2048
- * @returns {Mitt}
2049
- */
2050
- function mitt$1(all ) {
2051
- all = all || Object.create(null);
2052
-
2053
- return {
2054
- /**
2055
- * Register an event handler for the given type.
2056
- *
2057
- * @param {String} type Type of event to listen for, or `"*"` for all events
2058
- * @param {Function} handler Function to call in response to given event
2059
- * @memberOf mitt
2060
- */
2061
- on: function on(type , handler ) {
2062
- (all[type] || (all[type] = [])).push(handler);
2063
- },
2064
-
2065
- /**
2066
- * Remove an event handler for the given type.
2067
- *
2068
- * @param {String} type Type of event to unregister `handler` from, or `"*"`
2069
- * @param {Function} handler Handler function to remove
2070
- * @memberOf mitt
2071
- */
2072
- off: function off(type , handler ) {
2073
- if (all[type]) {
2074
- all[type].splice(all[type].indexOf(handler) >>> 0, 1);
2075
- }
2076
- },
2077
-
2078
- /**
2079
- * Invoke all handlers for the given type.
2080
- * If present, `"*"` handlers are invoked after type-matched handlers.
2081
- *
2082
- * @param {String} type The event type to invoke
2083
- * @param {Any} [evt] Any value (object is recommended and powerful), passed to each handler
2084
- * @memberOf mitt
2085
- */
2086
- emit: function emit(type , evt ) {
2087
- (all[type] || []).slice().map(function (handler) { handler(evt); });
2088
- (all['*'] || []).slice().map(function (handler) { handler(type, evt); });
2089
- }
2090
- };
2091
- }
2087
+ 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);});}}}
2092
2088
 
2093
2089
  var mittProxy = /*#__PURE__*/Object.freeze({
2094
2090
  __proto__: null,
@@ -2409,14 +2405,13 @@ class Timer {
2409
2405
  this.timeOffset = 0;
2410
2406
  let lastTimestamp = performance.now();
2411
2407
  const { actions } = this;
2412
- const self = this;
2413
- function check() {
2408
+ const check = () => {
2414
2409
  const time = performance.now();
2415
- self.timeOffset += (time - lastTimestamp) * self.speed;
2410
+ this.timeOffset += (time - lastTimestamp) * this.speed;
2416
2411
  lastTimestamp = time;
2417
2412
  while (actions.length) {
2418
2413
  const action = actions[0];
2419
- if (self.timeOffset >= action.delay) {
2414
+ if (this.timeOffset >= action.delay) {
2420
2415
  actions.shift();
2421
2416
  action.doAction();
2422
2417
  }
@@ -2424,10 +2419,10 @@ class Timer {
2424
2419
  break;
2425
2420
  }
2426
2421
  }
2427
- if (actions.length > 0 || self.liveMode) {
2428
- self.raf = requestAnimationFrame(check);
2422
+ if (actions.length > 0 || this.liveMode) {
2423
+ this.raf = requestAnimationFrame(check);
2429
2424
  }
2430
- }
2425
+ };
2431
2426
  this.raf = requestAnimationFrame(check);
2432
2427
  }
2433
2428
  clear() {
@@ -2814,8 +2809,9 @@ function polyfill(win = window) {
2814
2809
  .forEach;
2815
2810
  }
2816
2811
  if (!Node.prototype.contains) {
2817
- Node.prototype.contains = function contains(node) {
2818
- if (!(0 in arguments)) {
2812
+ Node.prototype.contains = (...args) => {
2813
+ let node = args[0];
2814
+ if (!(0 in args)) {
2819
2815
  throw new TypeError('1 argument is required');
2820
2816
  }
2821
2817
  do {
@@ -2925,7 +2921,6 @@ function uniqueTextMutations(mutations) {
2925
2921
  }
2926
2922
 
2927
2923
  const rules = (blockClass) => [
2928
- `.${blockClass} { background: currentColor }`,
2929
2924
  'noscript { display: none !important; }',
2930
2925
  `.${blockClass} { background: currentColor; border-radius: 5px; }`,
2931
2926
  `.${blockClass}:hover::after {content: 'Redacted'; color: white; background: black; text-align: center; width: 100%; display: block;}`,
@@ -3029,8 +3024,7 @@ function deserializeArg(imageMap, ctx, preload) {
3029
3024
  function getContext(target, type) {
3030
3025
  try {
3031
3026
  if (type === CanvasContext.WebGL) {
3032
- return (target.getContext('webgl') ||
3033
- target.getContext('experimental-webgl'));
3027
+ return (target.getContext('webgl') || target.getContext('experimental-webgl'));
3034
3028
  }
3035
3029
  return target.getContext('webgl2');
3036
3030
  }
@@ -3088,13 +3082,14 @@ function canvasMutation$1({ event, mutation, target, imageMap, errorHandler, })
3088
3082
  try {
3089
3083
  const ctx = target.getContext('2d');
3090
3084
  if (mutation.setter) {
3091
- ctx[mutation.property] = mutation.args[0];
3085
+ ctx[mutation.property] =
3086
+ mutation.args[0];
3092
3087
  return;
3093
3088
  }
3094
3089
  const original = ctx[mutation.property];
3095
3090
  if (mutation.property === 'drawImage' &&
3096
3091
  typeof mutation.args[0] === 'string') {
3097
- const image = imageMap.get(event);
3092
+ imageMap.get(event);
3098
3093
  original.apply(ctx, mutation.args);
3099
3094
  }
3100
3095
  else {
@@ -3180,6 +3175,142 @@ class Replayer {
3180
3175
  this.newDocumentQueue = [];
3181
3176
  this.mousePos = null;
3182
3177
  this.touchActive = null;
3178
+ this.handleResize = (dimension) => {
3179
+ this.iframe.style.display = 'inherit';
3180
+ for (const el of [this.mouseTail, this.iframe]) {
3181
+ if (!el) {
3182
+ continue;
3183
+ }
3184
+ el.setAttribute('width', String(dimension.width));
3185
+ el.setAttribute('height', String(dimension.height));
3186
+ }
3187
+ };
3188
+ this.applyEventsSynchronously = (events) => {
3189
+ for (const event of events) {
3190
+ switch (event.type) {
3191
+ case EventType.DomContentLoaded:
3192
+ case EventType.Load:
3193
+ case EventType.Custom:
3194
+ continue;
3195
+ case EventType.FullSnapshot:
3196
+ case EventType.Meta:
3197
+ case EventType.Plugin:
3198
+ case EventType.IncrementalSnapshot:
3199
+ break;
3200
+ }
3201
+ const castFn = this.getCastFn(event, true);
3202
+ castFn();
3203
+ }
3204
+ if (this.touchActive === true) {
3205
+ this.mouse.classList.add('touch-active');
3206
+ }
3207
+ else if (this.touchActive === false) {
3208
+ this.mouse.classList.remove('touch-active');
3209
+ }
3210
+ this.touchActive = null;
3211
+ };
3212
+ this.getCastFn = (event, isSync = false) => {
3213
+ let castFn;
3214
+ switch (event.type) {
3215
+ case EventType.DomContentLoaded:
3216
+ case EventType.Load:
3217
+ break;
3218
+ case EventType.Custom:
3219
+ castFn = () => {
3220
+ this.emitter.emit(ReplayerEvents.CustomEvent, event);
3221
+ };
3222
+ break;
3223
+ case EventType.Meta:
3224
+ castFn = () => this.emitter.emit(ReplayerEvents.Resize, {
3225
+ width: event.data.width,
3226
+ height: event.data.height,
3227
+ });
3228
+ break;
3229
+ case EventType.FullSnapshot:
3230
+ castFn = () => {
3231
+ if (this.firstFullSnapshot) {
3232
+ if (this.firstFullSnapshot === event) {
3233
+ this.firstFullSnapshot = true;
3234
+ return;
3235
+ }
3236
+ }
3237
+ else {
3238
+ this.firstFullSnapshot = true;
3239
+ }
3240
+ this.rebuildFullSnapshot(event, isSync);
3241
+ this.iframe.contentWindow.scrollTo(event.data.initialOffset);
3242
+ };
3243
+ break;
3244
+ case EventType.IncrementalSnapshot:
3245
+ castFn = () => {
3246
+ this.applyIncremental(event, isSync);
3247
+ if (isSync) {
3248
+ return;
3249
+ }
3250
+ this.handleInactivity(event.timestamp);
3251
+ if (event === this.nextUserInteractionEvent) {
3252
+ this.nextUserInteractionEvent = null;
3253
+ this.backToNormal();
3254
+ }
3255
+ if (this.config.skipInactive && !this.nextUserInteractionEvent) {
3256
+ for (const _event of this.service.state.context.events) {
3257
+ if (_event.timestamp <= event.timestamp) {
3258
+ continue;
3259
+ }
3260
+ if (this.isUserInteraction(_event)) {
3261
+ if (_event.delay - event.delay >
3262
+ SKIP_TIME_THRESHOLD *
3263
+ this.speedService.state.context.timer.speed) {
3264
+ this.nextUserInteractionEvent = _event;
3265
+ }
3266
+ break;
3267
+ }
3268
+ }
3269
+ if (this.nextUserInteractionEvent) {
3270
+ const skipTime = this.nextUserInteractionEvent.delay - event.delay;
3271
+ const payload = {
3272
+ speed: Math.min(Math.round(skipTime / SKIP_TIME_INTERVAL), this.config.maxSpeed),
3273
+ };
3274
+ this.speedService.send({ type: 'FAST_FORWARD', payload });
3275
+ this.emitter.emit(ReplayerEvents.SkipStart, payload);
3276
+ }
3277
+ }
3278
+ };
3279
+ break;
3280
+ }
3281
+ const wrappedCastFn = () => {
3282
+ if (castFn) {
3283
+ castFn();
3284
+ }
3285
+ for (const plugin of this.config.plugins || []) {
3286
+ plugin.handler(event, isSync, { replayer: this });
3287
+ }
3288
+ this.service.send({ type: 'CAST_EVENT', payload: { event } });
3289
+ const last_index = this.service.state.context.events.length - 1;
3290
+ if (event === this.service.state.context.events[last_index]) {
3291
+ const finish = () => {
3292
+ if (last_index < this.service.state.context.events.length - 1) {
3293
+ return;
3294
+ }
3295
+ this.backToNormal();
3296
+ this.service.send('END');
3297
+ this.emitter.emit(ReplayerEvents.Finish);
3298
+ };
3299
+ if (event.type === EventType.IncrementalSnapshot &&
3300
+ event.data.source === IncrementalSource.MouseMove &&
3301
+ event.data.positions.length) {
3302
+ setTimeout(() => {
3303
+ finish();
3304
+ }, Math.max(0, -event.data.positions[0].timeOffset + 50));
3305
+ }
3306
+ else {
3307
+ finish();
3308
+ }
3309
+ }
3310
+ this.emitter.emit(ReplayerEvents.EventCast, event);
3311
+ };
3312
+ return wrappedCastFn;
3313
+ };
3183
3314
  if (!(config === null || config === void 0 ? void 0 : config.liveMode) && events.length < 2) {
3184
3315
  throw new Error('Replayer need at least 2 events.');
3185
3316
  }
@@ -3213,7 +3344,7 @@ class Replayer {
3213
3344
  const replayerHandler = {
3214
3345
  mirror: this.mirror,
3215
3346
  applyCanvas: (canvasEvent, canvasMutationData, target) => {
3216
- canvasMutation({
3347
+ void canvasMutation({
3217
3348
  event: canvasEvent,
3218
3349
  mutation: canvasMutationData,
3219
3350
  target,
@@ -3326,6 +3457,7 @@ class Replayer {
3326
3457
  }
3327
3458
  setConfig(config) {
3328
3459
  Object.keys(config).forEach((key) => {
3460
+ config[key];
3329
3461
  this.config[key] = config[key];
3330
3462
  });
3331
3463
  if (!this.config.skipInactive) {
@@ -3497,7 +3629,7 @@ class Replayer {
3497
3629
  if (indicatesTouchDevice(event)) {
3498
3630
  this.mouse.classList.add('touch-device');
3499
3631
  }
3500
- Promise.resolve().then(() => this.service.send({ type: 'ADD_EVENT', payload: { event } }));
3632
+ void Promise.resolve().then(() => this.service.send({ type: 'ADD_EVENT', payload: { event } }));
3501
3633
  }
3502
3634
  replaceEvents(events) {
3503
3635
  for (const event of events) {
@@ -3546,142 +3678,6 @@ class Replayer {
3546
3678
  polyfill(this.iframe.contentWindow);
3547
3679
  }
3548
3680
  }
3549
- handleResize(dimension) {
3550
- this.iframe.style.display = 'inherit';
3551
- for (const el of [this.mouseTail, this.iframe]) {
3552
- if (!el) {
3553
- continue;
3554
- }
3555
- el.setAttribute('width', String(dimension.width));
3556
- el.setAttribute('height', String(dimension.height));
3557
- }
3558
- }
3559
- applyEventsSynchronously(events) {
3560
- for (const event of events) {
3561
- switch (event.type) {
3562
- case EventType.DomContentLoaded:
3563
- case EventType.Load:
3564
- case EventType.Custom:
3565
- continue;
3566
- case EventType.FullSnapshot:
3567
- case EventType.Meta:
3568
- case EventType.Plugin:
3569
- case EventType.IncrementalSnapshot:
3570
- break;
3571
- }
3572
- const castFn = this.getCastFn(event, true);
3573
- castFn();
3574
- }
3575
- if (this.touchActive === true) {
3576
- this.mouse.classList.add('touch-active');
3577
- }
3578
- else if (this.touchActive === false) {
3579
- this.mouse.classList.remove('touch-active');
3580
- }
3581
- this.touchActive = null;
3582
- }
3583
- getCastFn(event, isSync = false) {
3584
- let castFn;
3585
- switch (event.type) {
3586
- case EventType.DomContentLoaded:
3587
- case EventType.Load:
3588
- break;
3589
- case EventType.Custom:
3590
- castFn = () => {
3591
- this.emitter.emit(ReplayerEvents.CustomEvent, event);
3592
- };
3593
- break;
3594
- case EventType.Meta:
3595
- castFn = () => this.emitter.emit(ReplayerEvents.Resize, {
3596
- width: event.data.width,
3597
- height: event.data.height,
3598
- });
3599
- break;
3600
- case EventType.FullSnapshot:
3601
- castFn = () => {
3602
- if (this.firstFullSnapshot) {
3603
- if (this.firstFullSnapshot === event) {
3604
- this.firstFullSnapshot = true;
3605
- return;
3606
- }
3607
- }
3608
- else {
3609
- this.firstFullSnapshot = true;
3610
- }
3611
- this.rebuildFullSnapshot(event, isSync);
3612
- this.iframe.contentWindow.scrollTo(event.data.initialOffset);
3613
- };
3614
- break;
3615
- case EventType.IncrementalSnapshot:
3616
- castFn = () => {
3617
- this.applyIncremental(event, isSync);
3618
- if (isSync) {
3619
- return;
3620
- }
3621
- this.handleInactivity(event.timestamp);
3622
- if (event === this.nextUserInteractionEvent) {
3623
- this.nextUserInteractionEvent = null;
3624
- this.backToNormal();
3625
- }
3626
- if (this.config.skipInactive && !this.nextUserInteractionEvent) {
3627
- for (const _event of this.service.state.context.events) {
3628
- if (_event.timestamp <= event.timestamp) {
3629
- continue;
3630
- }
3631
- if (this.isUserInteraction(_event)) {
3632
- if (_event.delay - event.delay >
3633
- SKIP_TIME_THRESHOLD *
3634
- this.speedService.state.context.timer.speed) {
3635
- this.nextUserInteractionEvent = _event;
3636
- }
3637
- break;
3638
- }
3639
- }
3640
- if (this.nextUserInteractionEvent) {
3641
- const skipTime = this.nextUserInteractionEvent.delay - event.delay;
3642
- const payload = {
3643
- speed: Math.min(Math.round(skipTime / SKIP_TIME_INTERVAL), this.config.maxSpeed),
3644
- };
3645
- this.speedService.send({ type: 'FAST_FORWARD', payload });
3646
- this.emitter.emit(ReplayerEvents.SkipStart, payload);
3647
- }
3648
- }
3649
- };
3650
- break;
3651
- }
3652
- const wrappedCastFn = () => {
3653
- if (castFn) {
3654
- castFn();
3655
- }
3656
- for (const plugin of this.config.plugins || []) {
3657
- plugin.handler(event, isSync, { replayer: this });
3658
- }
3659
- this.service.send({ type: 'CAST_EVENT', payload: { event } });
3660
- const last_index = this.service.state.context.events.length - 1;
3661
- if (event === this.service.state.context.events[last_index]) {
3662
- const finish = () => {
3663
- if (last_index < this.service.state.context.events.length - 1) {
3664
- return;
3665
- }
3666
- this.backToNormal();
3667
- this.service.send('END');
3668
- this.emitter.emit(ReplayerEvents.Finish);
3669
- };
3670
- if (event.type === EventType.IncrementalSnapshot &&
3671
- event.data.source === IncrementalSource.MouseMove &&
3672
- event.data.positions.length) {
3673
- setTimeout(() => {
3674
- finish();
3675
- }, Math.max(0, -event.data.positions[0].timeOffset + 50));
3676
- }
3677
- else {
3678
- finish();
3679
- }
3680
- }
3681
- this.emitter.emit(ReplayerEvents.EventCast, event);
3682
- };
3683
- return wrappedCastFn;
3684
- }
3685
3681
  handleInactivity(timestamp, resetNext) {
3686
3682
  if (timestamp === this.inactiveEndTimestamp || resetNext) {
3687
3683
  this.inactiveEndTimestamp = null;
@@ -3743,7 +3739,7 @@ class Replayer {
3743
3739
  this.waitForStylesheetLoad();
3744
3740
  }
3745
3741
  if (this.config.UNSAFE_replayCanvas) {
3746
- this.preloadAllImages();
3742
+ void this.preloadAllImages();
3747
3743
  }
3748
3744
  }
3749
3745
  insertStyleRules(documentElement, head) {
@@ -3857,39 +3853,6 @@ class Replayer {
3857
3853
  }
3858
3854
  }
3859
3855
  }
3860
- hasImageArg(args) {
3861
- for (const arg of args) {
3862
- if (!arg || typeof arg !== 'object') ;
3863
- else if ('rr_type' in arg && 'args' in arg) {
3864
- if (this.hasImageArg(arg.args))
3865
- return true;
3866
- }
3867
- else if ('rr_type' in arg && arg.rr_type === 'HTMLImageElement') {
3868
- return true;
3869
- }
3870
- else if (arg instanceof Array) {
3871
- if (this.hasImageArg(arg))
3872
- return true;
3873
- }
3874
- }
3875
- return false;
3876
- }
3877
- getImageArgs(args) {
3878
- const images = [];
3879
- for (const arg of args) {
3880
- if (!arg || typeof arg !== 'object') ;
3881
- else if ('rr_type' in arg && 'args' in arg) {
3882
- images.push(...this.getImageArgs(arg.args));
3883
- }
3884
- else if ('rr_type' in arg && arg.rr_type === 'HTMLImageElement') {
3885
- images.push(arg.src);
3886
- }
3887
- else if (arg instanceof Array) {
3888
- images.push(...this.getImageArgs(arg));
3889
- }
3890
- }
3891
- return images;
3892
- }
3893
3856
  preloadAllImages() {
3894
3857
  return __awaiter(this, void 0, void 0, function* () {
3895
3858
  this.service.state;
@@ -3984,7 +3947,8 @@ class Replayer {
3984
3947
  this.timer.addAction(action);
3985
3948
  });
3986
3949
  this.timer.addAction({
3987
- doAction() { },
3950
+ doAction() {
3951
+ },
3988
3952
  delay: e.delay - ((_a = d.positions[0]) === null || _a === void 0 ? void 0 : _a.timeOffset),
3989
3953
  });
3990
3954
  }
@@ -4123,7 +4087,7 @@ class Replayer {
4123
4087
  mediaEl.pause();
4124
4088
  }
4125
4089
  if (d.type === 0) {
4126
- mediaEl.play();
4090
+ void mediaEl.play();
4127
4091
  }
4128
4092
  }
4129
4093
  catch (error) {
@@ -4235,7 +4199,7 @@ class Replayer {
4235
4199
  if (!target) {
4236
4200
  return this.debugNodeNotFound(d, d.id);
4237
4201
  }
4238
- canvasMutation({
4202
+ void canvasMutation({
4239
4203
  event: e,
4240
4204
  mutation: d,
4241
4205
  target: target,
@@ -4248,7 +4212,9 @@ class Replayer {
4248
4212
  }
4249
4213
  case IncrementalSource.Font: {
4250
4214
  try {
4251
- const fontFace = new FontFace(d.family, d.buffer ? new Uint8Array(JSON.parse(d.fontSource)) : d.fontSource, d.descriptors);
4215
+ const fontFace = new FontFace(d.family, d.buffer
4216
+ ? new Uint8Array(JSON.parse(d.fontSource))
4217
+ : d.fontSource, d.descriptors);
4252
4218
  (_f = this.iframe.contentDocument) === null || _f === void 0 ? void 0 : _f.fonts.add(fontFace);
4253
4219
  }
4254
4220
  catch (error) {