@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.cjs
CHANGED
|
@@ -207,91 +207,6 @@ function isShadowRoot(n2) {
|
|
|
207
207
|
function isNativeShadowDom(shadowRoot2) {
|
|
208
208
|
return Object.prototype.toString.call(shadowRoot2) === "[object ShadowRoot]";
|
|
209
209
|
}
|
|
210
|
-
function fixBrowserCompatibilityIssuesInCSS(cssText) {
|
|
211
|
-
if (cssText.includes(" background-clip: text;") && !cssText.includes(" -webkit-background-clip: text;")) {
|
|
212
|
-
cssText = cssText.replace(
|
|
213
|
-
/\sbackground-clip:\s*text;/g,
|
|
214
|
-
" -webkit-background-clip: text; background-clip: text;"
|
|
215
|
-
);
|
|
216
|
-
}
|
|
217
|
-
return cssText;
|
|
218
|
-
}
|
|
219
|
-
function escapeImportStatement(rule2) {
|
|
220
|
-
const { cssText } = rule2;
|
|
221
|
-
if (cssText.split('"').length < 3) return cssText;
|
|
222
|
-
const statement = ["@import", `url(${JSON.stringify(rule2.href)})`];
|
|
223
|
-
if (rule2.layerName === "") {
|
|
224
|
-
statement.push(`layer`);
|
|
225
|
-
} else if (rule2.layerName) {
|
|
226
|
-
statement.push(`layer(${rule2.layerName})`);
|
|
227
|
-
}
|
|
228
|
-
if (rule2.supportsText) {
|
|
229
|
-
statement.push(`supports(${rule2.supportsText})`);
|
|
230
|
-
}
|
|
231
|
-
if (rule2.media.length) {
|
|
232
|
-
statement.push(rule2.media.mediaText);
|
|
233
|
-
}
|
|
234
|
-
return statement.join(" ") + ";";
|
|
235
|
-
}
|
|
236
|
-
function stringifyStylesheet(s2) {
|
|
237
|
-
try {
|
|
238
|
-
const rules2 = s2.rules || s2.cssRules;
|
|
239
|
-
if (!rules2) {
|
|
240
|
-
return null;
|
|
241
|
-
}
|
|
242
|
-
let sheetHref = s2.href;
|
|
243
|
-
if (!sheetHref && s2.ownerNode) {
|
|
244
|
-
sheetHref = s2.ownerNode.baseURI;
|
|
245
|
-
}
|
|
246
|
-
const stringifiedRules = Array.from(
|
|
247
|
-
rules2,
|
|
248
|
-
(rule2) => stringifyRule(rule2, sheetHref)
|
|
249
|
-
).join("");
|
|
250
|
-
return fixBrowserCompatibilityIssuesInCSS(stringifiedRules);
|
|
251
|
-
} catch (error) {
|
|
252
|
-
return null;
|
|
253
|
-
}
|
|
254
|
-
}
|
|
255
|
-
function stringifyRule(rule2, sheetHref) {
|
|
256
|
-
var _a2;
|
|
257
|
-
if (isCSSImportRule(rule2)) {
|
|
258
|
-
let importStringified;
|
|
259
|
-
try {
|
|
260
|
-
importStringified = // for same-origin stylesheets,
|
|
261
|
-
// we can access the imported stylesheet rules directly
|
|
262
|
-
stringifyStylesheet(rule2.styleSheet) || // work around browser issues with the raw string `@import url(...)` statement
|
|
263
|
-
escapeImportStatement(rule2);
|
|
264
|
-
} catch (error) {
|
|
265
|
-
importStringified = rule2.cssText;
|
|
266
|
-
}
|
|
267
|
-
try {
|
|
268
|
-
if (importStringified && ((_a2 = rule2.styleSheet) == null ? void 0 : _a2.href)) {
|
|
269
|
-
return absolutifyURLs(importStringified, rule2.styleSheet.href);
|
|
270
|
-
}
|
|
271
|
-
} catch {
|
|
272
|
-
}
|
|
273
|
-
return importStringified;
|
|
274
|
-
} else {
|
|
275
|
-
let ruleStringified = rule2.cssText;
|
|
276
|
-
if (isCSSStyleRule(rule2) && rule2.selectorText.includes(":")) {
|
|
277
|
-
ruleStringified = fixSafariColons(ruleStringified);
|
|
278
|
-
}
|
|
279
|
-
if (sheetHref) {
|
|
280
|
-
return absolutifyURLs(ruleStringified, sheetHref);
|
|
281
|
-
}
|
|
282
|
-
return ruleStringified;
|
|
283
|
-
}
|
|
284
|
-
}
|
|
285
|
-
function fixSafariColons(cssStringified) {
|
|
286
|
-
const regex = /(\[(?:[\w-]+)[^\\])(:(?:[\w-]+)\])/gm;
|
|
287
|
-
return cssStringified.replace(regex, "$1\\$2");
|
|
288
|
-
}
|
|
289
|
-
function isCSSImportRule(rule2) {
|
|
290
|
-
return "styleSheet" in rule2;
|
|
291
|
-
}
|
|
292
|
-
function isCSSStyleRule(rule2) {
|
|
293
|
-
return "selectorText" in rule2;
|
|
294
|
-
}
|
|
295
210
|
class Mirror {
|
|
296
211
|
constructor() {
|
|
297
212
|
__publicField$1(this, "idNodeMap", /* @__PURE__ */ new Map());
|
|
@@ -426,6 +341,91 @@ function extractFileExtension(path, baseURL) {
|
|
|
426
341
|
const match = url.pathname.match(regex);
|
|
427
342
|
return (match == null ? void 0 : match[1]) ?? null;
|
|
428
343
|
}
|
|
344
|
+
function fixBrowserCompatibilityIssuesInCSS(cssText) {
|
|
345
|
+
if (cssText.includes(" background-clip: text;") && !cssText.includes(" -webkit-background-clip: text;")) {
|
|
346
|
+
cssText = cssText.replace(
|
|
347
|
+
/\sbackground-clip:\s*text;/g,
|
|
348
|
+
" -webkit-background-clip: text; background-clip: text;"
|
|
349
|
+
);
|
|
350
|
+
}
|
|
351
|
+
return cssText;
|
|
352
|
+
}
|
|
353
|
+
function escapeImportStatement(rule2) {
|
|
354
|
+
const { cssText } = rule2;
|
|
355
|
+
if (cssText.split('"').length < 3) return cssText;
|
|
356
|
+
const statement = ["@import", `url(${JSON.stringify(rule2.href)})`];
|
|
357
|
+
if (rule2.layerName === "") {
|
|
358
|
+
statement.push(`layer`);
|
|
359
|
+
} else if (rule2.layerName) {
|
|
360
|
+
statement.push(`layer(${rule2.layerName})`);
|
|
361
|
+
}
|
|
362
|
+
if (rule2.supportsText) {
|
|
363
|
+
statement.push(`supports(${rule2.supportsText})`);
|
|
364
|
+
}
|
|
365
|
+
if (rule2.media.length) {
|
|
366
|
+
statement.push(rule2.media.mediaText);
|
|
367
|
+
}
|
|
368
|
+
return statement.join(" ") + ";";
|
|
369
|
+
}
|
|
370
|
+
function stringifyStylesheet(s2) {
|
|
371
|
+
try {
|
|
372
|
+
const rules2 = s2.rules || s2.cssRules;
|
|
373
|
+
if (!rules2) {
|
|
374
|
+
return null;
|
|
375
|
+
}
|
|
376
|
+
let sheetHref = s2.href;
|
|
377
|
+
if (!sheetHref && s2.ownerNode) {
|
|
378
|
+
sheetHref = s2.ownerNode.baseURI;
|
|
379
|
+
}
|
|
380
|
+
const stringifiedRules = Array.from(
|
|
381
|
+
rules2,
|
|
382
|
+
(rule2) => stringifyRule(rule2, sheetHref)
|
|
383
|
+
).join("");
|
|
384
|
+
return fixBrowserCompatibilityIssuesInCSS(stringifiedRules);
|
|
385
|
+
} catch (error) {
|
|
386
|
+
return null;
|
|
387
|
+
}
|
|
388
|
+
}
|
|
389
|
+
function stringifyRule(rule2, sheetHref) {
|
|
390
|
+
var _a2;
|
|
391
|
+
if (isCSSImportRule(rule2)) {
|
|
392
|
+
let importStringified;
|
|
393
|
+
try {
|
|
394
|
+
importStringified = // for same-origin stylesheets,
|
|
395
|
+
// we can access the imported stylesheet rules directly
|
|
396
|
+
stringifyStylesheet(rule2.styleSheet) || // work around browser issues with the raw string `@import url(...)` statement
|
|
397
|
+
escapeImportStatement(rule2);
|
|
398
|
+
} catch (error) {
|
|
399
|
+
importStringified = rule2.cssText;
|
|
400
|
+
}
|
|
401
|
+
try {
|
|
402
|
+
if (importStringified && ((_a2 = rule2.styleSheet) == null ? void 0 : _a2.href)) {
|
|
403
|
+
return absolutifyURLs(importStringified, rule2.styleSheet.href);
|
|
404
|
+
}
|
|
405
|
+
} catch {
|
|
406
|
+
}
|
|
407
|
+
return importStringified;
|
|
408
|
+
} else {
|
|
409
|
+
let ruleStringified = rule2.cssText;
|
|
410
|
+
if (isCSSStyleRule(rule2) && rule2.selectorText.includes(":")) {
|
|
411
|
+
ruleStringified = fixSafariColons(ruleStringified);
|
|
412
|
+
}
|
|
413
|
+
if (sheetHref) {
|
|
414
|
+
return absolutifyURLs(ruleStringified, sheetHref);
|
|
415
|
+
}
|
|
416
|
+
return ruleStringified;
|
|
417
|
+
}
|
|
418
|
+
}
|
|
419
|
+
function fixSafariColons(cssStringified) {
|
|
420
|
+
const regex = /(\[(?:[\w-]+)[^\\])(:(?:[\w-]+)\])/gm;
|
|
421
|
+
return cssStringified.replace(regex, "$1\\$2");
|
|
422
|
+
}
|
|
423
|
+
function isCSSImportRule(rule2) {
|
|
424
|
+
return "styleSheet" in rule2;
|
|
425
|
+
}
|
|
426
|
+
function isCSSStyleRule(rule2) {
|
|
427
|
+
return "selectorText" in rule2;
|
|
428
|
+
}
|
|
429
429
|
function extractOrigin(url) {
|
|
430
430
|
let origin = "";
|
|
431
431
|
if (url.indexOf("//") > -1) {
|
|
@@ -5332,6 +5332,22 @@ postcss$1.Input;
|
|
|
5332
5332
|
postcss$1.Rule;
|
|
5333
5333
|
postcss$1.Root;
|
|
5334
5334
|
postcss$1.Node;
|
|
5335
|
+
function adaptCssForReplay(cssText, cache) {
|
|
5336
|
+
const cachedStyle = cache == null ? void 0 : cache.stylesWithHoverClass.get(cssText);
|
|
5337
|
+
if (cachedStyle) return cachedStyle;
|
|
5338
|
+
let result2 = cssText;
|
|
5339
|
+
try {
|
|
5340
|
+
const ast = postcss$1([
|
|
5341
|
+
mediaSelectorPlugin,
|
|
5342
|
+
pseudoClassPlugin
|
|
5343
|
+
]).process(cssText, { parser: safeParser });
|
|
5344
|
+
result2 = ast.css;
|
|
5345
|
+
} catch (error) {
|
|
5346
|
+
console.warn("Failed to adapt css for replay", error);
|
|
5347
|
+
}
|
|
5348
|
+
cache == null ? void 0 : cache.stylesWithHoverClass.set(cssText, result2);
|
|
5349
|
+
return result2;
|
|
5350
|
+
}
|
|
5335
5351
|
const tagMap = {
|
|
5336
5352
|
script: "noscript",
|
|
5337
5353
|
// camel case svg element tag names
|
|
@@ -5379,22 +5395,6 @@ function getTagName(n2) {
|
|
|
5379
5395
|
}
|
|
5380
5396
|
return tagName;
|
|
5381
5397
|
}
|
|
5382
|
-
function adaptCssForReplay(cssText, cache) {
|
|
5383
|
-
const cachedStyle = cache == null ? void 0 : cache.stylesWithHoverClass.get(cssText);
|
|
5384
|
-
if (cachedStyle) return cachedStyle;
|
|
5385
|
-
let result2 = cssText;
|
|
5386
|
-
try {
|
|
5387
|
-
const ast = postcss$1([
|
|
5388
|
-
mediaSelectorPlugin,
|
|
5389
|
-
pseudoClassPlugin
|
|
5390
|
-
]).process(cssText, { parser: safeParser });
|
|
5391
|
-
result2 = ast.css;
|
|
5392
|
-
} catch (error) {
|
|
5393
|
-
console.warn("Failed to adapt css for replay", error);
|
|
5394
|
-
}
|
|
5395
|
-
cache == null ? void 0 : cache.stylesWithHoverClass.set(cssText, result2);
|
|
5396
|
-
return result2;
|
|
5397
|
-
}
|
|
5398
5398
|
function createCache() {
|
|
5399
5399
|
const stylesWithHoverClass = /* @__PURE__ */ new Map();
|
|
5400
5400
|
return {
|
|
@@ -13720,9 +13720,9 @@ const saveWebGLVar = (value, win, ctx) => {
|
|
|
13720
13720
|
}
|
|
13721
13721
|
return index2;
|
|
13722
13722
|
};
|
|
13723
|
-
function serializeArg(value, win, ctx) {
|
|
13723
|
+
function serializeArg(value, win, ctx, dataURLOptions) {
|
|
13724
13724
|
if (value instanceof Array) {
|
|
13725
|
-
return value.map((arg) => serializeArg(arg, win, ctx));
|
|
13725
|
+
return value.map((arg) => serializeArg(arg, win, ctx, dataURLOptions));
|
|
13726
13726
|
} else if (value === null) {
|
|
13727
13727
|
return value;
|
|
13728
13728
|
} 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) {
|
|
@@ -13748,7 +13748,7 @@ function serializeArg(value, win, ctx) {
|
|
|
13748
13748
|
return {
|
|
13749
13749
|
rr_type: name,
|
|
13750
13750
|
args: [
|
|
13751
|
-
serializeArg(value.buffer, win, ctx),
|
|
13751
|
+
serializeArg(value.buffer, win, ctx, dataURLOptions),
|
|
13752
13752
|
value.byteOffset,
|
|
13753
13753
|
value.byteLength
|
|
13754
13754
|
]
|
|
@@ -13762,7 +13762,7 @@ function serializeArg(value, win, ctx) {
|
|
|
13762
13762
|
};
|
|
13763
13763
|
} else if (value instanceof HTMLCanvasElement) {
|
|
13764
13764
|
const name = "HTMLImageElement";
|
|
13765
|
-
const src = value.toDataURL();
|
|
13765
|
+
const src = value.toDataURL(dataURLOptions.type, dataURLOptions.quality);
|
|
13766
13766
|
return {
|
|
13767
13767
|
rr_type: name,
|
|
13768
13768
|
src
|
|
@@ -13771,7 +13771,11 @@ function serializeArg(value, win, ctx) {
|
|
|
13771
13771
|
const name = value.constructor.name;
|
|
13772
13772
|
return {
|
|
13773
13773
|
rr_type: name,
|
|
13774
|
-
args: [
|
|
13774
|
+
args: [
|
|
13775
|
+
serializeArg(value.data, win, ctx, dataURLOptions),
|
|
13776
|
+
value.width,
|
|
13777
|
+
value.height
|
|
13778
|
+
]
|
|
13775
13779
|
};
|
|
13776
13780
|
} else if (isInstanceOfWebGLObject(value, win) || typeof value === "object") {
|
|
13777
13781
|
const name = value.constructor.name;
|
|
@@ -13783,8 +13787,8 @@ function serializeArg(value, win, ctx) {
|
|
|
13783
13787
|
}
|
|
13784
13788
|
return value;
|
|
13785
13789
|
}
|
|
13786
|
-
const serializeArgs = (args, win, ctx) => {
|
|
13787
|
-
return args.map((arg) => serializeArg(arg, win, ctx));
|
|
13790
|
+
const serializeArgs = (args, win, ctx, dataURLOptions) => {
|
|
13791
|
+
return args.map((arg) => serializeArg(arg, win, ctx, dataURLOptions));
|
|
13788
13792
|
};
|
|
13789
13793
|
const isInstanceOfWebGLObject = (value, win) => {
|
|
13790
13794
|
const webGLConstructorNames = [
|
|
@@ -13810,7 +13814,7 @@ const isInstanceOfWebGLObject = (value, win) => {
|
|
|
13810
13814
|
)
|
|
13811
13815
|
);
|
|
13812
13816
|
};
|
|
13813
|
-
function initCanvas2DMutationObserver(cb, win, blockClass, blockSelector) {
|
|
13817
|
+
function initCanvas2DMutationObserver(cb, win, blockClass, blockSelector, dataURLOptions) {
|
|
13814
13818
|
const handlers = [];
|
|
13815
13819
|
const props2D = Object.getOwnPropertyNames(
|
|
13816
13820
|
win.CanvasRenderingContext2D.prototype
|
|
@@ -13827,7 +13831,12 @@ function initCanvas2DMutationObserver(cb, win, blockClass, blockSelector) {
|
|
|
13827
13831
|
return function(...args) {
|
|
13828
13832
|
if (!isBlocked(this.canvas, blockClass, blockSelector, true)) {
|
|
13829
13833
|
setTimeout(() => {
|
|
13830
|
-
const recordArgs = serializeArgs(
|
|
13834
|
+
const recordArgs = serializeArgs(
|
|
13835
|
+
args,
|
|
13836
|
+
win,
|
|
13837
|
+
this,
|
|
13838
|
+
dataURLOptions
|
|
13839
|
+
);
|
|
13831
13840
|
cb(this.canvas, {
|
|
13832
13841
|
type: CanvasContext["2D"],
|
|
13833
13842
|
property: prop,
|
|
@@ -13901,7 +13910,7 @@ function initCanvasContextObserver(win, blockClass, blockSelector, setPreserveDr
|
|
|
13901
13910
|
handlers.forEach((h) => h());
|
|
13902
13911
|
};
|
|
13903
13912
|
}
|
|
13904
|
-
function patchGLPrototype(prototype, type, cb, blockClass, blockSelector, win) {
|
|
13913
|
+
function patchGLPrototype(prototype, type, cb, blockClass, blockSelector, win, dataURLOptions) {
|
|
13905
13914
|
const handlers = [];
|
|
13906
13915
|
const props = Object.getOwnPropertyNames(prototype);
|
|
13907
13916
|
for (const prop of props) {
|
|
@@ -13928,7 +13937,7 @@ function patchGLPrototype(prototype, type, cb, blockClass, blockSelector, win) {
|
|
|
13928
13937
|
const result2 = original.apply(this, args);
|
|
13929
13938
|
saveWebGLVar(result2, win, this);
|
|
13930
13939
|
if ("tagName" in this.canvas && !isBlocked(this.canvas, blockClass, blockSelector, true)) {
|
|
13931
|
-
const recordArgs = serializeArgs(args, win, this);
|
|
13940
|
+
const recordArgs = serializeArgs(args, win, this, dataURLOptions);
|
|
13932
13941
|
const mutation = {
|
|
13933
13942
|
type,
|
|
13934
13943
|
property: prop,
|
|
@@ -13957,7 +13966,7 @@ function patchGLPrototype(prototype, type, cb, blockClass, blockSelector, win) {
|
|
|
13957
13966
|
}
|
|
13958
13967
|
return handlers;
|
|
13959
13968
|
}
|
|
13960
|
-
function initCanvasWebGLMutationObserver(cb, win, blockClass, blockSelector) {
|
|
13969
|
+
function initCanvasWebGLMutationObserver(cb, win, blockClass, blockSelector, dataURLOptions) {
|
|
13961
13970
|
const handlers = [];
|
|
13962
13971
|
handlers.push(
|
|
13963
13972
|
...patchGLPrototype(
|
|
@@ -13966,7 +13975,8 @@ function initCanvasWebGLMutationObserver(cb, win, blockClass, blockSelector) {
|
|
|
13966
13975
|
cb,
|
|
13967
13976
|
blockClass,
|
|
13968
13977
|
blockSelector,
|
|
13969
|
-
win
|
|
13978
|
+
win,
|
|
13979
|
+
dataURLOptions
|
|
13970
13980
|
)
|
|
13971
13981
|
);
|
|
13972
13982
|
if (typeof win.WebGL2RenderingContext !== "undefined") {
|
|
@@ -13977,7 +13987,8 @@ function initCanvasWebGLMutationObserver(cb, win, blockClass, blockSelector) {
|
|
|
13977
13987
|
cb,
|
|
13978
13988
|
blockClass,
|
|
13979
13989
|
blockSelector,
|
|
13980
|
-
win
|
|
13990
|
+
win,
|
|
13991
|
+
dataURLOptions
|
|
13981
13992
|
)
|
|
13982
13993
|
);
|
|
13983
13994
|
}
|
|
@@ -14039,7 +14050,12 @@ class CanvasManager {
|
|
|
14039
14050
|
this.mutationCb = options.mutationCb;
|
|
14040
14051
|
this.mirror = options.mirror;
|
|
14041
14052
|
if (recordCanvas && sampling === "all")
|
|
14042
|
-
this.initCanvasMutationObserver(
|
|
14053
|
+
this.initCanvasMutationObserver(
|
|
14054
|
+
win,
|
|
14055
|
+
blockClass,
|
|
14056
|
+
blockSelector,
|
|
14057
|
+
dataURLOptions
|
|
14058
|
+
);
|
|
14043
14059
|
if (recordCanvas && typeof sampling === "number")
|
|
14044
14060
|
this.initCanvasFPSObserver(sampling, win, blockClass, blockSelector, {
|
|
14045
14061
|
dataURLOptions
|
|
@@ -14168,7 +14184,7 @@ class CanvasManager {
|
|
|
14168
14184
|
cancelAnimationFrame(rafId);
|
|
14169
14185
|
};
|
|
14170
14186
|
}
|
|
14171
|
-
initCanvasMutationObserver(win, blockClass, blockSelector) {
|
|
14187
|
+
initCanvasMutationObserver(win, blockClass, blockSelector, dataURLOptions) {
|
|
14172
14188
|
this.startRAFTimestamping();
|
|
14173
14189
|
this.startPendingCanvasMutationFlusher();
|
|
14174
14190
|
const canvasContextReset = initCanvasContextObserver(
|
|
@@ -14181,13 +14197,15 @@ class CanvasManager {
|
|
|
14181
14197
|
this.processMutation.bind(this),
|
|
14182
14198
|
win,
|
|
14183
14199
|
blockClass,
|
|
14184
|
-
blockSelector
|
|
14200
|
+
blockSelector,
|
|
14201
|
+
dataURLOptions
|
|
14185
14202
|
);
|
|
14186
14203
|
const canvasWebGL1and2Reset = initCanvasWebGLMutationObserver(
|
|
14187
14204
|
this.processMutation.bind(this),
|
|
14188
14205
|
win,
|
|
14189
14206
|
blockClass,
|
|
14190
|
-
blockSelector
|
|
14207
|
+
blockSelector,
|
|
14208
|
+
dataURLOptions
|
|
14191
14209
|
);
|
|
14192
14210
|
this.resetObservers = () => {
|
|
14193
14211
|
canvasContextReset();
|