@posthog/rrweb 0.0.27 → 0.0.28
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/rrweb.cjs +137 -119
- package/dist/rrweb.cjs.map +1 -1
- package/dist/rrweb.js +137 -119
- package/dist/rrweb.js.map +1 -1
- package/dist/rrweb.umd.cjs +137 -119
- package/dist/rrweb.umd.cjs.map +3 -3
- package/dist/rrweb.umd.min.cjs +37 -37
- package/dist/rrweb.umd.min.cjs.map +3 -3
- package/package.json +1 -1
package/dist/rrweb.umd.cjs
CHANGED
|
@@ -251,91 +251,6 @@ function isShadowRoot(n2) {
|
|
|
251
251
|
function isNativeShadowDom(shadowRoot2) {
|
|
252
252
|
return Object.prototype.toString.call(shadowRoot2) === "[object ShadowRoot]";
|
|
253
253
|
}
|
|
254
|
-
function fixBrowserCompatibilityIssuesInCSS(cssText) {
|
|
255
|
-
if (cssText.includes(" background-clip: text;") && !cssText.includes(" -webkit-background-clip: text;")) {
|
|
256
|
-
cssText = cssText.replace(
|
|
257
|
-
/\sbackground-clip:\s*text;/g,
|
|
258
|
-
" -webkit-background-clip: text; background-clip: text;"
|
|
259
|
-
);
|
|
260
|
-
}
|
|
261
|
-
return cssText;
|
|
262
|
-
}
|
|
263
|
-
function escapeImportStatement(rule2) {
|
|
264
|
-
const { cssText } = rule2;
|
|
265
|
-
if (cssText.split('"').length < 3) return cssText;
|
|
266
|
-
const statement = ["@import", `url(${JSON.stringify(rule2.href)})`];
|
|
267
|
-
if (rule2.layerName === "") {
|
|
268
|
-
statement.push(`layer`);
|
|
269
|
-
} else if (rule2.layerName) {
|
|
270
|
-
statement.push(`layer(${rule2.layerName})`);
|
|
271
|
-
}
|
|
272
|
-
if (rule2.supportsText) {
|
|
273
|
-
statement.push(`supports(${rule2.supportsText})`);
|
|
274
|
-
}
|
|
275
|
-
if (rule2.media.length) {
|
|
276
|
-
statement.push(rule2.media.mediaText);
|
|
277
|
-
}
|
|
278
|
-
return statement.join(" ") + ";";
|
|
279
|
-
}
|
|
280
|
-
function stringifyStylesheet(s2) {
|
|
281
|
-
try {
|
|
282
|
-
const rules2 = s2.rules || s2.cssRules;
|
|
283
|
-
if (!rules2) {
|
|
284
|
-
return null;
|
|
285
|
-
}
|
|
286
|
-
let sheetHref = s2.href;
|
|
287
|
-
if (!sheetHref && s2.ownerNode) {
|
|
288
|
-
sheetHref = s2.ownerNode.baseURI;
|
|
289
|
-
}
|
|
290
|
-
const stringifiedRules = Array.from(
|
|
291
|
-
rules2,
|
|
292
|
-
(rule2) => stringifyRule(rule2, sheetHref)
|
|
293
|
-
).join("");
|
|
294
|
-
return fixBrowserCompatibilityIssuesInCSS(stringifiedRules);
|
|
295
|
-
} catch (error) {
|
|
296
|
-
return null;
|
|
297
|
-
}
|
|
298
|
-
}
|
|
299
|
-
function stringifyRule(rule2, sheetHref) {
|
|
300
|
-
var _a2;
|
|
301
|
-
if (isCSSImportRule(rule2)) {
|
|
302
|
-
let importStringified;
|
|
303
|
-
try {
|
|
304
|
-
importStringified = // for same-origin stylesheets,
|
|
305
|
-
// we can access the imported stylesheet rules directly
|
|
306
|
-
stringifyStylesheet(rule2.styleSheet) || // work around browser issues with the raw string `@import url(...)` statement
|
|
307
|
-
escapeImportStatement(rule2);
|
|
308
|
-
} catch (error) {
|
|
309
|
-
importStringified = rule2.cssText;
|
|
310
|
-
}
|
|
311
|
-
try {
|
|
312
|
-
if (importStringified && ((_a2 = rule2.styleSheet) == null ? void 0 : _a2.href)) {
|
|
313
|
-
return absolutifyURLs(importStringified, rule2.styleSheet.href);
|
|
314
|
-
}
|
|
315
|
-
} catch (e2) {
|
|
316
|
-
}
|
|
317
|
-
return importStringified;
|
|
318
|
-
} else {
|
|
319
|
-
let ruleStringified = rule2.cssText;
|
|
320
|
-
if (isCSSStyleRule(rule2) && rule2.selectorText.includes(":")) {
|
|
321
|
-
ruleStringified = fixSafariColons(ruleStringified);
|
|
322
|
-
}
|
|
323
|
-
if (sheetHref) {
|
|
324
|
-
return absolutifyURLs(ruleStringified, sheetHref);
|
|
325
|
-
}
|
|
326
|
-
return ruleStringified;
|
|
327
|
-
}
|
|
328
|
-
}
|
|
329
|
-
function fixSafariColons(cssStringified) {
|
|
330
|
-
const regex = /(\[(?:[\w-]+)[^\\])(:(?:[\w-]+)\])/gm;
|
|
331
|
-
return cssStringified.replace(regex, "$1\\$2");
|
|
332
|
-
}
|
|
333
|
-
function isCSSImportRule(rule2) {
|
|
334
|
-
return "styleSheet" in rule2;
|
|
335
|
-
}
|
|
336
|
-
function isCSSStyleRule(rule2) {
|
|
337
|
-
return "selectorText" in rule2;
|
|
338
|
-
}
|
|
339
254
|
class Mirror {
|
|
340
255
|
constructor() {
|
|
341
256
|
__publicField$1(this, "idNodeMap", /* @__PURE__ */ new Map());
|
|
@@ -471,6 +386,91 @@ function extractFileExtension(path, baseURL) {
|
|
|
471
386
|
const match = url.pathname.match(regex);
|
|
472
387
|
return (_a2 = match == null ? void 0 : match[1]) != null ? _a2 : null;
|
|
473
388
|
}
|
|
389
|
+
function fixBrowserCompatibilityIssuesInCSS(cssText) {
|
|
390
|
+
if (cssText.includes(" background-clip: text;") && !cssText.includes(" -webkit-background-clip: text;")) {
|
|
391
|
+
cssText = cssText.replace(
|
|
392
|
+
/\sbackground-clip:\s*text;/g,
|
|
393
|
+
" -webkit-background-clip: text; background-clip: text;"
|
|
394
|
+
);
|
|
395
|
+
}
|
|
396
|
+
return cssText;
|
|
397
|
+
}
|
|
398
|
+
function escapeImportStatement(rule2) {
|
|
399
|
+
const { cssText } = rule2;
|
|
400
|
+
if (cssText.split('"').length < 3) return cssText;
|
|
401
|
+
const statement = ["@import", `url(${JSON.stringify(rule2.href)})`];
|
|
402
|
+
if (rule2.layerName === "") {
|
|
403
|
+
statement.push(`layer`);
|
|
404
|
+
} else if (rule2.layerName) {
|
|
405
|
+
statement.push(`layer(${rule2.layerName})`);
|
|
406
|
+
}
|
|
407
|
+
if (rule2.supportsText) {
|
|
408
|
+
statement.push(`supports(${rule2.supportsText})`);
|
|
409
|
+
}
|
|
410
|
+
if (rule2.media.length) {
|
|
411
|
+
statement.push(rule2.media.mediaText);
|
|
412
|
+
}
|
|
413
|
+
return statement.join(" ") + ";";
|
|
414
|
+
}
|
|
415
|
+
function stringifyStylesheet(s2) {
|
|
416
|
+
try {
|
|
417
|
+
const rules2 = s2.rules || s2.cssRules;
|
|
418
|
+
if (!rules2) {
|
|
419
|
+
return null;
|
|
420
|
+
}
|
|
421
|
+
let sheetHref = s2.href;
|
|
422
|
+
if (!sheetHref && s2.ownerNode) {
|
|
423
|
+
sheetHref = s2.ownerNode.baseURI;
|
|
424
|
+
}
|
|
425
|
+
const stringifiedRules = Array.from(
|
|
426
|
+
rules2,
|
|
427
|
+
(rule2) => stringifyRule(rule2, sheetHref)
|
|
428
|
+
).join("");
|
|
429
|
+
return fixBrowserCompatibilityIssuesInCSS(stringifiedRules);
|
|
430
|
+
} catch (error) {
|
|
431
|
+
return null;
|
|
432
|
+
}
|
|
433
|
+
}
|
|
434
|
+
function stringifyRule(rule2, sheetHref) {
|
|
435
|
+
var _a2;
|
|
436
|
+
if (isCSSImportRule(rule2)) {
|
|
437
|
+
let importStringified;
|
|
438
|
+
try {
|
|
439
|
+
importStringified = // for same-origin stylesheets,
|
|
440
|
+
// we can access the imported stylesheet rules directly
|
|
441
|
+
stringifyStylesheet(rule2.styleSheet) || // work around browser issues with the raw string `@import url(...)` statement
|
|
442
|
+
escapeImportStatement(rule2);
|
|
443
|
+
} catch (error) {
|
|
444
|
+
importStringified = rule2.cssText;
|
|
445
|
+
}
|
|
446
|
+
try {
|
|
447
|
+
if (importStringified && ((_a2 = rule2.styleSheet) == null ? void 0 : _a2.href)) {
|
|
448
|
+
return absolutifyURLs(importStringified, rule2.styleSheet.href);
|
|
449
|
+
}
|
|
450
|
+
} catch (e2) {
|
|
451
|
+
}
|
|
452
|
+
return importStringified;
|
|
453
|
+
} else {
|
|
454
|
+
let ruleStringified = rule2.cssText;
|
|
455
|
+
if (isCSSStyleRule(rule2) && rule2.selectorText.includes(":")) {
|
|
456
|
+
ruleStringified = fixSafariColons(ruleStringified);
|
|
457
|
+
}
|
|
458
|
+
if (sheetHref) {
|
|
459
|
+
return absolutifyURLs(ruleStringified, sheetHref);
|
|
460
|
+
}
|
|
461
|
+
return ruleStringified;
|
|
462
|
+
}
|
|
463
|
+
}
|
|
464
|
+
function fixSafariColons(cssStringified) {
|
|
465
|
+
const regex = /(\[(?:[\w-]+)[^\\])(:(?:[\w-]+)\])/gm;
|
|
466
|
+
return cssStringified.replace(regex, "$1\\$2");
|
|
467
|
+
}
|
|
468
|
+
function isCSSImportRule(rule2) {
|
|
469
|
+
return "styleSheet" in rule2;
|
|
470
|
+
}
|
|
471
|
+
function isCSSStyleRule(rule2) {
|
|
472
|
+
return "selectorText" in rule2;
|
|
473
|
+
}
|
|
474
474
|
function extractOrigin(url) {
|
|
475
475
|
let origin = "";
|
|
476
476
|
if (url.indexOf("//") > -1) {
|
|
@@ -5376,6 +5376,22 @@ postcss$1.Input;
|
|
|
5376
5376
|
postcss$1.Rule;
|
|
5377
5377
|
postcss$1.Root;
|
|
5378
5378
|
postcss$1.Node;
|
|
5379
|
+
function adaptCssForReplay(cssText, cache) {
|
|
5380
|
+
const cachedStyle = cache == null ? void 0 : cache.stylesWithHoverClass.get(cssText);
|
|
5381
|
+
if (cachedStyle) return cachedStyle;
|
|
5382
|
+
let result2 = cssText;
|
|
5383
|
+
try {
|
|
5384
|
+
const ast = postcss$1([
|
|
5385
|
+
mediaSelectorPlugin,
|
|
5386
|
+
pseudoClassPlugin
|
|
5387
|
+
]).process(cssText, { parser: safeParser });
|
|
5388
|
+
result2 = ast.css;
|
|
5389
|
+
} catch (error) {
|
|
5390
|
+
console.warn("Failed to adapt css for replay", error);
|
|
5391
|
+
}
|
|
5392
|
+
cache == null ? void 0 : cache.stylesWithHoverClass.set(cssText, result2);
|
|
5393
|
+
return result2;
|
|
5394
|
+
}
|
|
5379
5395
|
const tagMap = {
|
|
5380
5396
|
script: "noscript",
|
|
5381
5397
|
// camel case svg element tag names
|
|
@@ -5423,22 +5439,6 @@ function getTagName(n2) {
|
|
|
5423
5439
|
}
|
|
5424
5440
|
return tagName;
|
|
5425
5441
|
}
|
|
5426
|
-
function adaptCssForReplay(cssText, cache) {
|
|
5427
|
-
const cachedStyle = cache == null ? void 0 : cache.stylesWithHoverClass.get(cssText);
|
|
5428
|
-
if (cachedStyle) return cachedStyle;
|
|
5429
|
-
let result2 = cssText;
|
|
5430
|
-
try {
|
|
5431
|
-
const ast = postcss$1([
|
|
5432
|
-
mediaSelectorPlugin,
|
|
5433
|
-
pseudoClassPlugin
|
|
5434
|
-
]).process(cssText, { parser: safeParser });
|
|
5435
|
-
result2 = ast.css;
|
|
5436
|
-
} catch (error) {
|
|
5437
|
-
console.warn("Failed to adapt css for replay", error);
|
|
5438
|
-
}
|
|
5439
|
-
cache == null ? void 0 : cache.stylesWithHoverClass.set(cssText, result2);
|
|
5440
|
-
return result2;
|
|
5441
|
-
}
|
|
5442
5442
|
function createCache() {
|
|
5443
5443
|
const stylesWithHoverClass = /* @__PURE__ */ new Map();
|
|
5444
5444
|
return {
|
|
@@ -13739,9 +13739,9 @@ const saveWebGLVar = (value, win, ctx) => {
|
|
|
13739
13739
|
}
|
|
13740
13740
|
return index2;
|
|
13741
13741
|
};
|
|
13742
|
-
function serializeArg(value, win, ctx) {
|
|
13742
|
+
function serializeArg(value, win, ctx, dataURLOptions) {
|
|
13743
13743
|
if (value instanceof Array) {
|
|
13744
|
-
return value.map((arg) => serializeArg(arg, win, ctx));
|
|
13744
|
+
return value.map((arg) => serializeArg(arg, win, ctx, dataURLOptions));
|
|
13745
13745
|
} else if (value === null) {
|
|
13746
13746
|
return value;
|
|
13747
13747
|
} else if (value instanceof Float32Array || value instanceof Float64Array || value instanceof Int32Array || value instanceof Uint32Array || value instanceof Uint8Array || value instanceof Uint16Array || value instanceof Int16Array || value instanceof Int8Array || value instanceof Uint8ClampedArray) {
|
|
@@ -13767,7 +13767,7 @@ function serializeArg(value, win, ctx) {
|
|
|
13767
13767
|
return {
|
|
13768
13768
|
rr_type: name,
|
|
13769
13769
|
args: [
|
|
13770
|
-
serializeArg(value.buffer, win, ctx),
|
|
13770
|
+
serializeArg(value.buffer, win, ctx, dataURLOptions),
|
|
13771
13771
|
value.byteOffset,
|
|
13772
13772
|
value.byteLength
|
|
13773
13773
|
]
|
|
@@ -13781,7 +13781,7 @@ function serializeArg(value, win, ctx) {
|
|
|
13781
13781
|
};
|
|
13782
13782
|
} else if (value instanceof HTMLCanvasElement) {
|
|
13783
13783
|
const name = "HTMLImageElement";
|
|
13784
|
-
const src = value.toDataURL();
|
|
13784
|
+
const src = value.toDataURL(dataURLOptions.type, dataURLOptions.quality);
|
|
13785
13785
|
return {
|
|
13786
13786
|
rr_type: name,
|
|
13787
13787
|
src
|
|
@@ -13790,7 +13790,11 @@ function serializeArg(value, win, ctx) {
|
|
|
13790
13790
|
const name = value.constructor.name;
|
|
13791
13791
|
return {
|
|
13792
13792
|
rr_type: name,
|
|
13793
|
-
args: [
|
|
13793
|
+
args: [
|
|
13794
|
+
serializeArg(value.data, win, ctx, dataURLOptions),
|
|
13795
|
+
value.width,
|
|
13796
|
+
value.height
|
|
13797
|
+
]
|
|
13794
13798
|
};
|
|
13795
13799
|
} else if (isInstanceOfWebGLObject(value, win) || typeof value === "object") {
|
|
13796
13800
|
const name = value.constructor.name;
|
|
@@ -13802,8 +13806,8 @@ function serializeArg(value, win, ctx) {
|
|
|
13802
13806
|
}
|
|
13803
13807
|
return value;
|
|
13804
13808
|
}
|
|
13805
|
-
const serializeArgs = (args, win, ctx) => {
|
|
13806
|
-
return args.map((arg) => serializeArg(arg, win, ctx));
|
|
13809
|
+
const serializeArgs = (args, win, ctx, dataURLOptions) => {
|
|
13810
|
+
return args.map((arg) => serializeArg(arg, win, ctx, dataURLOptions));
|
|
13807
13811
|
};
|
|
13808
13812
|
const isInstanceOfWebGLObject = (value, win) => {
|
|
13809
13813
|
const webGLConstructorNames = [
|
|
@@ -13829,7 +13833,7 @@ const isInstanceOfWebGLObject = (value, win) => {
|
|
|
13829
13833
|
)
|
|
13830
13834
|
);
|
|
13831
13835
|
};
|
|
13832
|
-
function initCanvas2DMutationObserver(cb, win, blockClass, blockSelector) {
|
|
13836
|
+
function initCanvas2DMutationObserver(cb, win, blockClass, blockSelector, dataURLOptions) {
|
|
13833
13837
|
const handlers = [];
|
|
13834
13838
|
const props2D = Object.getOwnPropertyNames(
|
|
13835
13839
|
win.CanvasRenderingContext2D.prototype
|
|
@@ -13846,7 +13850,12 @@ function initCanvas2DMutationObserver(cb, win, blockClass, blockSelector) {
|
|
|
13846
13850
|
return function(...args) {
|
|
13847
13851
|
if (!isBlocked(this.canvas, blockClass, blockSelector, true)) {
|
|
13848
13852
|
setTimeout(() => {
|
|
13849
|
-
const recordArgs = serializeArgs(
|
|
13853
|
+
const recordArgs = serializeArgs(
|
|
13854
|
+
args,
|
|
13855
|
+
win,
|
|
13856
|
+
this,
|
|
13857
|
+
dataURLOptions
|
|
13858
|
+
);
|
|
13850
13859
|
cb(this.canvas, {
|
|
13851
13860
|
type: CanvasContext["2D"],
|
|
13852
13861
|
property: prop,
|
|
@@ -13920,7 +13929,7 @@ function initCanvasContextObserver(win, blockClass, blockSelector, setPreserveDr
|
|
|
13920
13929
|
handlers.forEach((h) => h());
|
|
13921
13930
|
};
|
|
13922
13931
|
}
|
|
13923
|
-
function patchGLPrototype(prototype, type, cb, blockClass, blockSelector, win) {
|
|
13932
|
+
function patchGLPrototype(prototype, type, cb, blockClass, blockSelector, win, dataURLOptions) {
|
|
13924
13933
|
const handlers = [];
|
|
13925
13934
|
const props = Object.getOwnPropertyNames(prototype);
|
|
13926
13935
|
for (const prop of props) {
|
|
@@ -13947,7 +13956,7 @@ function patchGLPrototype(prototype, type, cb, blockClass, blockSelector, win) {
|
|
|
13947
13956
|
const result2 = original.apply(this, args);
|
|
13948
13957
|
saveWebGLVar(result2, win, this);
|
|
13949
13958
|
if ("tagName" in this.canvas && !isBlocked(this.canvas, blockClass, blockSelector, true)) {
|
|
13950
|
-
const recordArgs = serializeArgs(args, win, this);
|
|
13959
|
+
const recordArgs = serializeArgs(args, win, this, dataURLOptions);
|
|
13951
13960
|
const mutation = {
|
|
13952
13961
|
type,
|
|
13953
13962
|
property: prop,
|
|
@@ -13976,7 +13985,7 @@ function patchGLPrototype(prototype, type, cb, blockClass, blockSelector, win) {
|
|
|
13976
13985
|
}
|
|
13977
13986
|
return handlers;
|
|
13978
13987
|
}
|
|
13979
|
-
function initCanvasWebGLMutationObserver(cb, win, blockClass, blockSelector) {
|
|
13988
|
+
function initCanvasWebGLMutationObserver(cb, win, blockClass, blockSelector, dataURLOptions) {
|
|
13980
13989
|
const handlers = [];
|
|
13981
13990
|
handlers.push(
|
|
13982
13991
|
...patchGLPrototype(
|
|
@@ -13985,7 +13994,8 @@ function initCanvasWebGLMutationObserver(cb, win, blockClass, blockSelector) {
|
|
|
13985
13994
|
cb,
|
|
13986
13995
|
blockClass,
|
|
13987
13996
|
blockSelector,
|
|
13988
|
-
win
|
|
13997
|
+
win,
|
|
13998
|
+
dataURLOptions
|
|
13989
13999
|
)
|
|
13990
14000
|
);
|
|
13991
14001
|
if (typeof win.WebGL2RenderingContext !== "undefined") {
|
|
@@ -13996,7 +14006,8 @@ function initCanvasWebGLMutationObserver(cb, win, blockClass, blockSelector) {
|
|
|
13996
14006
|
cb,
|
|
13997
14007
|
blockClass,
|
|
13998
14008
|
blockSelector,
|
|
13999
|
-
win
|
|
14009
|
+
win,
|
|
14010
|
+
dataURLOptions
|
|
14000
14011
|
)
|
|
14001
14012
|
);
|
|
14002
14013
|
}
|
|
@@ -14058,7 +14069,12 @@ class CanvasManager {
|
|
|
14058
14069
|
this.mutationCb = options.mutationCb;
|
|
14059
14070
|
this.mirror = options.mirror;
|
|
14060
14071
|
if (recordCanvas && sampling === "all")
|
|
14061
|
-
this.initCanvasMutationObserver(
|
|
14072
|
+
this.initCanvasMutationObserver(
|
|
14073
|
+
win,
|
|
14074
|
+
blockClass,
|
|
14075
|
+
blockSelector,
|
|
14076
|
+
dataURLOptions
|
|
14077
|
+
);
|
|
14062
14078
|
if (recordCanvas && typeof sampling === "number")
|
|
14063
14079
|
this.initCanvasFPSObserver(sampling, win, blockClass, blockSelector, {
|
|
14064
14080
|
dataURLOptions
|
|
@@ -14187,7 +14203,7 @@ class CanvasManager {
|
|
|
14187
14203
|
cancelAnimationFrame(rafId);
|
|
14188
14204
|
};
|
|
14189
14205
|
}
|
|
14190
|
-
initCanvasMutationObserver(win, blockClass, blockSelector) {
|
|
14206
|
+
initCanvasMutationObserver(win, blockClass, blockSelector, dataURLOptions) {
|
|
14191
14207
|
this.startRAFTimestamping();
|
|
14192
14208
|
this.startPendingCanvasMutationFlusher();
|
|
14193
14209
|
const canvasContextReset = initCanvasContextObserver(
|
|
@@ -14200,13 +14216,15 @@ class CanvasManager {
|
|
|
14200
14216
|
this.processMutation.bind(this),
|
|
14201
14217
|
win,
|
|
14202
14218
|
blockClass,
|
|
14203
|
-
blockSelector
|
|
14219
|
+
blockSelector,
|
|
14220
|
+
dataURLOptions
|
|
14204
14221
|
);
|
|
14205
14222
|
const canvasWebGL1and2Reset = initCanvasWebGLMutationObserver(
|
|
14206
14223
|
this.processMutation.bind(this),
|
|
14207
14224
|
win,
|
|
14208
14225
|
blockClass,
|
|
14209
|
-
blockSelector
|
|
14226
|
+
blockSelector,
|
|
14227
|
+
dataURLOptions
|
|
14210
14228
|
);
|
|
14211
14229
|
this.resetObservers = () => {
|
|
14212
14230
|
canvasContextReset();
|