@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.
Files changed (51) 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.js +4 -4
  10. package/dist/replay/rrweb-replay-unpack.min.js +4 -4
  11. package/dist/replay/rrweb-replay-unpack.min.js.map +1 -1
  12. package/dist/replay/rrweb-replay.js +4 -4
  13. package/dist/replay/rrweb-replay.min.js +4 -4
  14. package/dist/replay/rrweb-replay.min.js.map +1 -1
  15. package/dist/rrweb-all.js +12 -12
  16. package/dist/rrweb-all.min.js +12 -12
  17. package/dist/rrweb-all.min.js.map +1 -1
  18. package/dist/rrweb.js +5 -5
  19. package/dist/rrweb.min.js +5 -5
  20. package/dist/rrweb.min.js.map +1 -1
  21. package/es/rrweb/ext/mitt/dist/mitt.mjs.js +3 -0
  22. package/es/rrweb/packages/rrdom/es/rrdom.js +66 -10
  23. package/es/rrweb/packages/rrweb/src/plugins/console/record/error-stack-parser.js +3 -11
  24. package/es/rrweb/packages/rrweb/src/plugins/console/record/index.js +10 -7
  25. package/es/rrweb/packages/rrweb/src/plugins/console/record/stringify.js +9 -6
  26. package/es/rrweb/packages/rrweb/src/record/mutation.js +5 -3
  27. package/es/rrweb/packages/rrweb/src/record/observer.js +22 -14
  28. package/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas-manager.js +1 -1
  29. package/es/rrweb/packages/rrweb/src/record/shadow-dom-manager.js +7 -4
  30. package/es/rrweb/packages/rrweb/src/replay/canvas/2d.js +3 -2
  31. package/es/rrweb/packages/rrweb/src/replay/canvas/webgl.js +1 -2
  32. package/es/rrweb/packages/rrweb/src/replay/index.js +151 -180
  33. package/es/rrweb/packages/rrweb/src/replay/timer.js +6 -7
  34. package/es/rrweb/packages/rrweb/src/utils.js +8 -6
  35. package/es/rrweb/packages/rrweb-snapshot/es/rrweb-snapshot.js +60 -10
  36. package/lib/plugins/console-record.js +26 -26
  37. package/lib/record/rrweb-record.js +91 -31
  38. package/lib/replay/rrweb-replay-unpack.js +236 -265
  39. package/lib/replay/rrweb-replay.js +236 -265
  40. package/lib/rrweb-all.js +346 -318
  41. package/lib/rrweb.js +324 -294
  42. package/package.json +9 -8
  43. package/typings/plugins/console/record/index.d.ts +1 -1
  44. package/typings/plugins/console/record/stringify.d.ts +1 -1
  45. package/typings/record/observers/canvas/serialize-args.d.ts +5 -5
  46. package/typings/record/shadow-dom-manager.d.ts +1 -1
  47. package/typings/replay/index.d.ts +0 -2
  48. package/typings/types.d.ts +5 -6
  49. package/typings/utils.d.ts +2 -2
  50. package/es/rrweb/ext/mitt/dist/mitt.es.js +0 -63
  51. package/typings/record/observers/canvas/webgl2.d.ts +0 -2
@@ -1,12 +1,12 @@
1
1
  import { __awaiter } from './../../../../ext/tslib/tslib.es6.js';
2
2
  import { createCache, createMirror, rebuild, buildNodeWithSN, NodeType } from '../../../rrweb-snapshot/es/rrweb-snapshot.js';
3
3
  import { RRDocument, diff, createOrGetNode, getDefaultSN, StyleRuleType, buildFromDom, buildFromNode } from '../../../rrdom/es/rrdom.js';
4
- import * as mitt_es from './../../../../ext/mitt/dist/mitt.es.js';
5
- import mitt$1 from './../../../../ext/mitt/dist/mitt.es.js';
4
+ import * as mitt$1 from './../../../../ext/mitt/dist/mitt.mjs.js';
5
+ import mitt$2 from './../../../../ext/mitt/dist/mitt.mjs.js';
6
6
  import { polyfill } from './smoothscroll.js';
7
7
  import { Timer } from './timer.js';
8
8
  import { createPlayerService, createSpeedService } from './machine.js';
9
- import { ReplayerEvents, EventType, IncrementalSource, MouseInteractions } from '../types.js';
9
+ import { EventType, ReplayerEvents, IncrementalSource, MouseInteractions } from '../types.js';
10
10
  import { polyfill as polyfill$1, isSerializedIframe, getNestedRule, getPositionsAndIndex, hasShadowRoot, queueToResolveTrees, iterateResolveTree, uniqueTextMutations, getBaseDimension } from '../utils.js';
11
11
  import rules from './styles/inject-style.js';
12
12
  import canvasMutation from './canvas/index.js';
@@ -16,7 +16,7 @@ const SKIP_TIME_THRESHOLD = 10 * 1000;
16
16
  const SKIP_TIME_INTERVAL = 2 * 1000;
17
17
  const SKIP_TIME_MIN = 1 * 1000;
18
18
  const SKIP_DURATION_LIMIT = 60 * 60 * 1000;
19
- const mitt = mitt$1 || mitt_es;
19
+ const mitt = mitt$2 || mitt$1;
20
20
  const REPLAY_CONSOLE_PREFIX = '[replayer]';
21
21
  const defaultMouseTailConfig = {
22
22
  duration: 500,
@@ -47,6 +47,142 @@ class Replayer {
47
47
  this.newDocumentQueue = [];
48
48
  this.mousePos = null;
49
49
  this.touchActive = null;
50
+ this.handleResize = (dimension) => {
51
+ this.iframe.style.display = 'inherit';
52
+ for (const el of [this.mouseTail, this.iframe]) {
53
+ if (!el) {
54
+ continue;
55
+ }
56
+ el.setAttribute('width', String(dimension.width));
57
+ el.setAttribute('height', String(dimension.height));
58
+ }
59
+ };
60
+ this.applyEventsSynchronously = (events) => {
61
+ for (const event of events) {
62
+ switch (event.type) {
63
+ case EventType.DomContentLoaded:
64
+ case EventType.Load:
65
+ case EventType.Custom:
66
+ continue;
67
+ case EventType.FullSnapshot:
68
+ case EventType.Meta:
69
+ case EventType.Plugin:
70
+ case EventType.IncrementalSnapshot:
71
+ break;
72
+ }
73
+ const castFn = this.getCastFn(event, true);
74
+ castFn();
75
+ }
76
+ if (this.touchActive === true) {
77
+ this.mouse.classList.add('touch-active');
78
+ }
79
+ else if (this.touchActive === false) {
80
+ this.mouse.classList.remove('touch-active');
81
+ }
82
+ this.touchActive = null;
83
+ };
84
+ this.getCastFn = (event, isSync = false) => {
85
+ let castFn;
86
+ switch (event.type) {
87
+ case EventType.DomContentLoaded:
88
+ case EventType.Load:
89
+ break;
90
+ case EventType.Custom:
91
+ castFn = () => {
92
+ this.emitter.emit(ReplayerEvents.CustomEvent, event);
93
+ };
94
+ break;
95
+ case EventType.Meta:
96
+ castFn = () => this.emitter.emit(ReplayerEvents.Resize, {
97
+ width: event.data.width,
98
+ height: event.data.height,
99
+ });
100
+ break;
101
+ case EventType.FullSnapshot:
102
+ castFn = () => {
103
+ if (this.firstFullSnapshot) {
104
+ if (this.firstFullSnapshot === event) {
105
+ this.firstFullSnapshot = true;
106
+ return;
107
+ }
108
+ }
109
+ else {
110
+ this.firstFullSnapshot = true;
111
+ }
112
+ this.rebuildFullSnapshot(event, isSync);
113
+ this.iframe.contentWindow.scrollTo(event.data.initialOffset);
114
+ };
115
+ break;
116
+ case EventType.IncrementalSnapshot:
117
+ castFn = () => {
118
+ this.applyIncremental(event, isSync);
119
+ if (isSync) {
120
+ return;
121
+ }
122
+ this.handleInactivity(event.timestamp);
123
+ if (event === this.nextUserInteractionEvent) {
124
+ this.nextUserInteractionEvent = null;
125
+ this.backToNormal();
126
+ }
127
+ if (this.config.skipInactive && !this.nextUserInteractionEvent) {
128
+ for (const _event of this.service.state.context.events) {
129
+ if (_event.timestamp <= event.timestamp) {
130
+ continue;
131
+ }
132
+ if (this.isUserInteraction(_event)) {
133
+ if (_event.delay - event.delay >
134
+ SKIP_TIME_THRESHOLD *
135
+ this.speedService.state.context.timer.speed) {
136
+ this.nextUserInteractionEvent = _event;
137
+ }
138
+ break;
139
+ }
140
+ }
141
+ if (this.nextUserInteractionEvent) {
142
+ const skipTime = this.nextUserInteractionEvent.delay - event.delay;
143
+ const payload = {
144
+ speed: Math.min(Math.round(skipTime / SKIP_TIME_INTERVAL), this.config.maxSpeed),
145
+ };
146
+ this.speedService.send({ type: 'FAST_FORWARD', payload });
147
+ this.emitter.emit(ReplayerEvents.SkipStart, payload);
148
+ }
149
+ }
150
+ };
151
+ break;
152
+ }
153
+ const wrappedCastFn = () => {
154
+ if (castFn) {
155
+ castFn();
156
+ }
157
+ for (const plugin of this.config.plugins || []) {
158
+ plugin.handler(event, isSync, { replayer: this });
159
+ }
160
+ this.service.send({ type: 'CAST_EVENT', payload: { event } });
161
+ const last_index = this.service.state.context.events.length - 1;
162
+ if (event === this.service.state.context.events[last_index]) {
163
+ const finish = () => {
164
+ if (last_index < this.service.state.context.events.length - 1) {
165
+ return;
166
+ }
167
+ this.backToNormal();
168
+ this.service.send('END');
169
+ this.emitter.emit(ReplayerEvents.Finish);
170
+ };
171
+ if (event.type === EventType.IncrementalSnapshot &&
172
+ event.data.source === IncrementalSource.MouseMove &&
173
+ event.data.positions.length) {
174
+ setTimeout(() => {
175
+ finish();
176
+ }, Math.max(0, -event.data.positions[0].timeOffset + 50));
177
+ }
178
+ else {
179
+ finish();
180
+ }
181
+ }
182
+ this.emitter.emit(ReplayerEvents.EventCast, event);
183
+ };
184
+ return wrappedCastFn;
185
+ };
50
186
  if (!(config === null || config === void 0 ? void 0 : config.liveMode) && events.length < 2) {
51
187
  throw new Error('Replayer need at least 2 events.');
52
188
  }
@@ -80,7 +216,7 @@ class Replayer {
80
216
  const replayerHandler = {
81
217
  mirror: this.mirror,
82
218
  applyCanvas: (canvasEvent, canvasMutationData, target) => {
83
- canvasMutation({
219
+ void canvasMutation({
84
220
  event: canvasEvent,
85
221
  mutation: canvasMutationData,
86
222
  target,
@@ -193,6 +329,7 @@ class Replayer {
193
329
  }
194
330
  setConfig(config) {
195
331
  Object.keys(config).forEach((key) => {
332
+ config[key];
196
333
  this.config[key] = config[key];
197
334
  });
198
335
  if (!this.config.skipInactive) {
@@ -364,7 +501,7 @@ class Replayer {
364
501
  if (indicatesTouchDevice(event)) {
365
502
  this.mouse.classList.add('touch-device');
366
503
  }
367
- Promise.resolve().then(() => this.service.send({ type: 'ADD_EVENT', payload: { event } }));
504
+ void Promise.resolve().then(() => this.service.send({ type: 'ADD_EVENT', payload: { event } }));
368
505
  }
369
506
  replaceEvents(events) {
370
507
  for (const event of events) {
@@ -413,142 +550,6 @@ class Replayer {
413
550
  polyfill$1(this.iframe.contentWindow);
414
551
  }
415
552
  }
416
- handleResize(dimension) {
417
- this.iframe.style.display = 'inherit';
418
- for (const el of [this.mouseTail, this.iframe]) {
419
- if (!el) {
420
- continue;
421
- }
422
- el.setAttribute('width', String(dimension.width));
423
- el.setAttribute('height', String(dimension.height));
424
- }
425
- }
426
- applyEventsSynchronously(events) {
427
- for (const event of events) {
428
- switch (event.type) {
429
- case EventType.DomContentLoaded:
430
- case EventType.Load:
431
- case EventType.Custom:
432
- continue;
433
- case EventType.FullSnapshot:
434
- case EventType.Meta:
435
- case EventType.Plugin:
436
- case EventType.IncrementalSnapshot:
437
- break;
438
- }
439
- const castFn = this.getCastFn(event, true);
440
- castFn();
441
- }
442
- if (this.touchActive === true) {
443
- this.mouse.classList.add('touch-active');
444
- }
445
- else if (this.touchActive === false) {
446
- this.mouse.classList.remove('touch-active');
447
- }
448
- this.touchActive = null;
449
- }
450
- getCastFn(event, isSync = false) {
451
- let castFn;
452
- switch (event.type) {
453
- case EventType.DomContentLoaded:
454
- case EventType.Load:
455
- break;
456
- case EventType.Custom:
457
- castFn = () => {
458
- this.emitter.emit(ReplayerEvents.CustomEvent, event);
459
- };
460
- break;
461
- case EventType.Meta:
462
- castFn = () => this.emitter.emit(ReplayerEvents.Resize, {
463
- width: event.data.width,
464
- height: event.data.height,
465
- });
466
- break;
467
- case EventType.FullSnapshot:
468
- castFn = () => {
469
- if (this.firstFullSnapshot) {
470
- if (this.firstFullSnapshot === event) {
471
- this.firstFullSnapshot = true;
472
- return;
473
- }
474
- }
475
- else {
476
- this.firstFullSnapshot = true;
477
- }
478
- this.rebuildFullSnapshot(event, isSync);
479
- this.iframe.contentWindow.scrollTo(event.data.initialOffset);
480
- };
481
- break;
482
- case EventType.IncrementalSnapshot:
483
- castFn = () => {
484
- this.applyIncremental(event, isSync);
485
- if (isSync) {
486
- return;
487
- }
488
- this.handleInactivity(event.timestamp);
489
- if (event === this.nextUserInteractionEvent) {
490
- this.nextUserInteractionEvent = null;
491
- this.backToNormal();
492
- }
493
- if (this.config.skipInactive && !this.nextUserInteractionEvent) {
494
- for (const _event of this.service.state.context.events) {
495
- if (_event.timestamp <= event.timestamp) {
496
- continue;
497
- }
498
- if (this.isUserInteraction(_event)) {
499
- if (_event.delay - event.delay >
500
- SKIP_TIME_THRESHOLD *
501
- this.speedService.state.context.timer.speed) {
502
- this.nextUserInteractionEvent = _event;
503
- }
504
- break;
505
- }
506
- }
507
- if (this.nextUserInteractionEvent) {
508
- const skipTime = this.nextUserInteractionEvent.delay - event.delay;
509
- const payload = {
510
- speed: Math.min(Math.round(skipTime / SKIP_TIME_INTERVAL), this.config.maxSpeed),
511
- };
512
- this.speedService.send({ type: 'FAST_FORWARD', payload });
513
- this.emitter.emit(ReplayerEvents.SkipStart, payload);
514
- }
515
- }
516
- };
517
- break;
518
- }
519
- const wrappedCastFn = () => {
520
- if (castFn) {
521
- castFn();
522
- }
523
- for (const plugin of this.config.plugins || []) {
524
- plugin.handler(event, isSync, { replayer: this });
525
- }
526
- this.service.send({ type: 'CAST_EVENT', payload: { event } });
527
- const last_index = this.service.state.context.events.length - 1;
528
- if (event === this.service.state.context.events[last_index]) {
529
- const finish = () => {
530
- if (last_index < this.service.state.context.events.length - 1) {
531
- return;
532
- }
533
- this.backToNormal();
534
- this.service.send('END');
535
- this.emitter.emit(ReplayerEvents.Finish);
536
- };
537
- if (event.type === EventType.IncrementalSnapshot &&
538
- event.data.source === IncrementalSource.MouseMove &&
539
- event.data.positions.length) {
540
- setTimeout(() => {
541
- finish();
542
- }, Math.max(0, -event.data.positions[0].timeOffset + 50));
543
- }
544
- else {
545
- finish();
546
- }
547
- }
548
- this.emitter.emit(ReplayerEvents.EventCast, event);
549
- };
550
- return wrappedCastFn;
551
- }
552
553
  handleInactivity(timestamp, resetNext) {
553
554
  if (timestamp === this.inactiveEndTimestamp || resetNext) {
554
555
  this.inactiveEndTimestamp = null;
@@ -610,7 +611,7 @@ class Replayer {
610
611
  this.waitForStylesheetLoad();
611
612
  }
612
613
  if (this.config.UNSAFE_replayCanvas) {
613
- this.preloadAllImages();
614
+ void this.preloadAllImages();
614
615
  }
615
616
  }
616
617
  insertStyleRules(documentElement, head) {
@@ -724,39 +725,6 @@ class Replayer {
724
725
  }
725
726
  }
726
727
  }
727
- hasImageArg(args) {
728
- for (const arg of args) {
729
- if (!arg || typeof arg !== 'object') ;
730
- else if ('rr_type' in arg && 'args' in arg) {
731
- if (this.hasImageArg(arg.args))
732
- return true;
733
- }
734
- else if ('rr_type' in arg && arg.rr_type === 'HTMLImageElement') {
735
- return true;
736
- }
737
- else if (arg instanceof Array) {
738
- if (this.hasImageArg(arg))
739
- return true;
740
- }
741
- }
742
- return false;
743
- }
744
- getImageArgs(args) {
745
- const images = [];
746
- for (const arg of args) {
747
- if (!arg || typeof arg !== 'object') ;
748
- else if ('rr_type' in arg && 'args' in arg) {
749
- images.push(...this.getImageArgs(arg.args));
750
- }
751
- else if ('rr_type' in arg && arg.rr_type === 'HTMLImageElement') {
752
- images.push(arg.src);
753
- }
754
- else if (arg instanceof Array) {
755
- images.push(...this.getImageArgs(arg));
756
- }
757
- }
758
- return images;
759
- }
760
728
  preloadAllImages() {
761
729
  return __awaiter(this, void 0, void 0, function* () {
762
730
  this.service.state;
@@ -851,7 +819,8 @@ class Replayer {
851
819
  this.timer.addAction(action);
852
820
  });
853
821
  this.timer.addAction({
854
- doAction() { },
822
+ doAction() {
823
+ },
855
824
  delay: e.delay - ((_a = d.positions[0]) === null || _a === void 0 ? void 0 : _a.timeOffset),
856
825
  });
857
826
  }
@@ -990,7 +959,7 @@ class Replayer {
990
959
  mediaEl.pause();
991
960
  }
992
961
  if (d.type === 0) {
993
- mediaEl.play();
962
+ void mediaEl.play();
994
963
  }
995
964
  }
996
965
  catch (error) {
@@ -1102,7 +1071,7 @@ class Replayer {
1102
1071
  if (!target) {
1103
1072
  return this.debugNodeNotFound(d, d.id);
1104
1073
  }
1105
- canvasMutation({
1074
+ void canvasMutation({
1106
1075
  event: e,
1107
1076
  mutation: d,
1108
1077
  target: target,
@@ -1115,7 +1084,9 @@ class Replayer {
1115
1084
  }
1116
1085
  case IncrementalSource.Font: {
1117
1086
  try {
1118
- const fontFace = new FontFace(d.family, d.buffer ? new Uint8Array(JSON.parse(d.fontSource)) : d.fontSource, d.descriptors);
1087
+ const fontFace = new FontFace(d.family, d.buffer
1088
+ ? new Uint8Array(JSON.parse(d.fontSource))
1089
+ : d.fontSource, d.descriptors);
1119
1090
  (_f = this.iframe.contentDocument) === null || _f === void 0 ? void 0 : _f.fonts.add(fontFace);
1120
1091
  }
1121
1092
  catch (error) {
@@ -22,14 +22,13 @@ class Timer {
22
22
  this.timeOffset = 0;
23
23
  let lastTimestamp = performance.now();
24
24
  const { actions } = this;
25
- const self = this;
26
- function check() {
25
+ const check = () => {
27
26
  const time = performance.now();
28
- self.timeOffset += (time - lastTimestamp) * self.speed;
27
+ this.timeOffset += (time - lastTimestamp) * this.speed;
29
28
  lastTimestamp = time;
30
29
  while (actions.length) {
31
30
  const action = actions[0];
32
- if (self.timeOffset >= action.delay) {
31
+ if (this.timeOffset >= action.delay) {
33
32
  actions.shift();
34
33
  action.doAction();
35
34
  }
@@ -37,10 +36,10 @@ class Timer {
37
36
  break;
38
37
  }
39
38
  }
40
- if (actions.length > 0 || self.liveMode) {
41
- self.raf = requestAnimationFrame(check);
39
+ if (actions.length > 0 || this.liveMode) {
40
+ this.raf = requestAnimationFrame(check);
42
41
  }
43
- }
42
+ };
44
43
  this.raf = requestAnimationFrame(check);
45
44
  }
46
45
  clear() {
@@ -44,14 +44,13 @@ if (typeof window !== 'undefined' && window.Proxy && window.Reflect) {
44
44
  function throttle(func, wait, options = {}) {
45
45
  let timeout = null;
46
46
  let previous = 0;
47
- return function (arg) {
47
+ return function (...args) {
48
48
  const now = Date.now();
49
49
  if (!previous && options.leading === false) {
50
50
  previous = now;
51
51
  }
52
52
  const remaining = wait - (now - previous);
53
53
  const context = this;
54
- const args = arguments;
55
54
  if (remaining <= 0 || remaining > wait) {
56
55
  if (timeout) {
57
56
  clearTimeout(timeout);
@@ -88,7 +87,8 @@ function hookSetter(target, key, d, isRevoked, win = window) {
88
87
  function patch(source, name, replacement) {
89
88
  try {
90
89
  if (!(name in source)) {
91
- return () => { };
90
+ return () => {
91
+ };
92
92
  }
93
93
  const original = source[name];
94
94
  const wrapped = replacement(original);
@@ -107,7 +107,8 @@ function patch(source, name, replacement) {
107
107
  };
108
108
  }
109
109
  catch (_a) {
110
- return () => { };
110
+ return () => {
111
+ };
111
112
  }
112
113
  }
113
114
  function getWindowHeight() {
@@ -188,8 +189,9 @@ function polyfill(win = window) {
188
189
  .forEach;
189
190
  }
190
191
  if (!Node.prototype.contains) {
191
- Node.prototype.contains = function contains(node) {
192
- if (!(0 in arguments)) {
192
+ Node.prototype.contains = (...args) => {
193
+ let node = args[0];
194
+ if (!(0 in args)) {
193
195
  throw new TypeError('1 argument is required');
194
196
  }
195
197
  do {
@@ -15,6 +15,9 @@ function isShadowRoot(n) {
15
15
  var host = n === null || n === void 0 ? void 0 : n.host;
16
16
  return Boolean((host === null || host === void 0 ? void 0 : host.shadowRoot) === n);
17
17
  }
18
+ function isNativeShadowDom(shadowRoot) {
19
+ return Object.prototype.toString.call(shadowRoot) === '[object ShadowRoot]';
20
+ }
18
21
  var Mirror = (function () {
19
22
  function Mirror() {
20
23
  this.idNodeMap = new Map();
@@ -282,7 +285,8 @@ function getHref() {
282
285
  return a.href;
283
286
  }
284
287
  function transformAttribute(doc, tagName, name, value) {
285
- if (name === 'src' || (name === 'href' && value)) {
288
+ if (name === 'src' ||
289
+ (name === 'href' && value && !(tagName === 'use' && value[0] === '#'))) {
286
290
  return absoluteToDoc(doc, value);
287
291
  }
288
292
  else if (name === 'xlink:href' && value && value[0] !== '#') {
@@ -841,7 +845,8 @@ function serializeNodeWithId(n, options) {
841
845
  mirror.add(clone, serializedNode);
842
846
  }
843
847
  delete serializedNode.needBlock;
844
- if (n.shadowRoot)
848
+ var shadowRoot = n.shadowRoot;
849
+ if (shadowRoot && isNativeShadowDom(shadowRoot))
845
850
  serializedNode.isShadowHost = true;
846
851
  }
847
852
  if ((serializedNode.type === NodeType.Document ||
@@ -889,13 +894,16 @@ function serializeNodeWithId(n, options) {
889
894
  var childN = _p[_o];
890
895
  var serializedChildNode = serializeNodeWithId(childN, bypassOptions);
891
896
  if (serializedChildNode) {
892
- serializedChildNode.isShadow = true;
897
+ isNativeShadowDom(n.shadowRoot) &&
898
+ (serializedChildNode.isShadow = true);
893
899
  serializedNode.childNodes.push(serializedChildNode);
894
900
  }
895
901
  }
896
902
  }
897
903
  }
898
- if (n.parentNode && isShadowRoot(n.parentNode)) {
904
+ if (n.parentNode &&
905
+ isShadowRoot(n.parentNode) &&
906
+ isNativeShadowDom(n.parentNode)) {
899
907
  serializedNode.isShadow = true;
900
908
  }
901
909
  if (serializedNode.type === NodeType.Element &&
@@ -972,6 +980,44 @@ function serializeNodeWithId(n, options) {
972
980
  if (isStylesheetLoaded(n) === false)
973
981
  return null;
974
982
  }
983
+ if (serializedNode.type === NodeType.Element &&
984
+ serializedNode.tagName === 'link' &&
985
+ serializedNode.attributes.rel === 'stylesheet') {
986
+ onceStylesheetLoaded(n, function () {
987
+ if (onStylesheetLoad) {
988
+ var serializedLinkNode = serializeNodeWithId(n, {
989
+ doc: doc,
990
+ mirror: mirror,
991
+ blockClass: blockClass,
992
+ blockSelector: blockSelector,
993
+ maskTextClass: maskTextClass,
994
+ maskTextSelector: maskTextSelector,
995
+ skipChild: false,
996
+ inlineStylesheet: inlineStylesheet,
997
+ maskInputOptions: maskInputOptions,
998
+ maskTextFn: maskTextFn,
999
+ maskInputFn: maskInputFn,
1000
+ slimDOMOptions: slimDOMOptions,
1001
+ dataURLOptions: dataURLOptions,
1002
+ inlineImages: inlineImages,
1003
+ recordCanvas: recordCanvas,
1004
+ preserveWhiteSpace: preserveWhiteSpace,
1005
+ onSerialize: onSerialize,
1006
+ onIframeLoad: onIframeLoad,
1007
+ iframeLoadTimeout: iframeLoadTimeout,
1008
+ enableStrictPrivacy: enableStrictPrivacy,
1009
+ onStylesheetLoad: onStylesheetLoad,
1010
+ stylesheetLoadTimeout: stylesheetLoadTimeout,
1011
+ keepIframeSrcFn: keepIframeSrcFn
1012
+ });
1013
+ if (serializedLinkNode) {
1014
+ onStylesheetLoad(n, serializedLinkNode);
1015
+ }
1016
+ }
1017
+ }, stylesheetLoadTimeout);
1018
+ if (isStylesheetLoaded(n) === false)
1019
+ return null;
1020
+ }
975
1021
  return serializedNode;
976
1022
  }
977
1023
  function snapshot(n, options) {
@@ -1077,7 +1123,7 @@ function parse(css, options) {
1077
1123
  Position.prototype.content = css;
1078
1124
  var errorsList = [];
1079
1125
  function error(msg) {
1080
- var err = new Error(options.source + ':' + lineno + ':' + column + ': ' + msg);
1126
+ var err = new Error("".concat(options.source || '', ":").concat(lineno, ":").concat(column, ": ").concat(msg));
1081
1127
  err.reason = msg;
1082
1128
  err.filename = options.source;
1083
1129
  err.line = lineno;
@@ -1590,7 +1636,7 @@ function buildNode(n, options) {
1590
1636
  return doc.implementation.createDocument(null, '', null);
1591
1637
  case NodeType.DocumentType:
1592
1638
  return doc.implementation.createDocumentType(n.name || 'html', n.publicId, n.systemId);
1593
- case NodeType.Element:
1639
+ case NodeType.Element: {
1594
1640
  var tagName = getTagName(n);
1595
1641
  var node_1;
1596
1642
  if (n.isSVG) {
@@ -1600,7 +1646,7 @@ function buildNode(n, options) {
1600
1646
  node_1 = doc.createElement(tagName);
1601
1647
  }
1602
1648
  var _loop_1 = function (name_1) {
1603
- if (!n.attributes.hasOwnProperty(name_1)) {
1649
+ if (!Object.prototype.hasOwnProperty.call(n.attributes, name_1)) {
1604
1650
  return "continue";
1605
1651
  }
1606
1652
  var value = n.attributes[name_1];
@@ -1688,13 +1734,15 @@ function buildNode(n, options) {
1688
1734
  else {
1689
1735
  if (tagName === 'canvas' && name_1 === 'rr_dataURL') {
1690
1736
  var image_1 = document.createElement('img');
1691
- image_1.src = value;
1692
1737
  image_1.onload = function () {
1693
1738
  var ctx = node_1.getContext('2d');
1694
1739
  if (ctx) {
1695
1740
  ctx.drawImage(image_1, 0, 0, image_1.width, image_1.height);
1696
1741
  }
1697
1742
  };
1743
+ image_1.src = value;
1744
+ if (node_1.RRNodeType)
1745
+ node_1.rr_dataURL = value;
1698
1746
  }
1699
1747
  else if (tagName === 'img' && name_1 === 'rr_dataURL') {
1700
1748
  var image = node_1;
@@ -1750,6 +1798,7 @@ function buildNode(n, options) {
1750
1798
  }
1751
1799
  }
1752
1800
  return node_1;
1801
+ }
1753
1802
  case NodeType.Text:
1754
1803
  return doc.createTextNode(n.isStyle && hackCss
1755
1804
  ? addHoverClass(n.textContent, cache)
@@ -1836,7 +1885,8 @@ function handleScroll(node, mirror) {
1836
1885
  }
1837
1886
  var el = node;
1838
1887
  for (var name_2 in n.attributes) {
1839
- if (!(n.attributes.hasOwnProperty(name_2) && name_2.startsWith('rr_'))) {
1888
+ if (!(Object.prototype.hasOwnProperty.call(n.attributes, name_2) &&
1889
+ name_2.startsWith('rr_'))) {
1840
1890
  continue;
1841
1891
  }
1842
1892
  var value = n.attributes[name_2];
@@ -1867,4 +1917,4 @@ function rebuild(n, options) {
1867
1917
  return node;
1868
1918
  }
1869
1919
 
1870
- export { IGNORED_NODE, Mirror, NodeType, addHoverClass, buildNodeWithSN, classMatchesRegex, createCache, createMirror, is2DCanvasBlank, isElement, isShadowRoot, maskInputValue, needMaskingText, obfuscateText, rebuild, serializeNodeWithId, snapshot, transformAttribute };
1920
+ export { IGNORED_NODE, Mirror, NodeType, addHoverClass, buildNodeWithSN, classMatchesRegex, createCache, createMirror, is2DCanvasBlank, isElement, isNativeShadowDom, isShadowRoot, maskInputValue, needMaskingText, obfuscateText, rebuild, serializeNodeWithId, snapshot, transformAttribute };