use prettier instead of node-libtidy (#638)
This commit is contained in:
yz-yu
@@ -3,31 +3,37 @@
|
||||
exports[`style-sheet-remove-events-play-at-2500 1`] = `
|
||||
"file-frame-1
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<div class=\\"replayer-wrapper\\">
|
||||
<div class=\\"replayer-mouse\\"></div>
|
||||
<canvas class=\\"replayer-mouse-tail\\" width=\\"1000\\" height=\\"800\\" style=
|
||||
\\"display: inherit;\\"></canvas><iframe sandbox=\\"allow-same-origin\\" scrolling=
|
||||
\\"no\\" width=\\"1000\\" height=\\"800\\" style=
|
||||
\\"display: inherit; pointer-events: none;\\"></iframe>
|
||||
</div>
|
||||
</body>
|
||||
<head>
|
||||
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
|
||||
</head>
|
||||
<body>
|
||||
<div class=\\"replayer-wrapper\\">
|
||||
<div class=\\"replayer-mouse\\"></div>
|
||||
<canvas
|
||||
class=\\"replayer-mouse-tail\\"
|
||||
width=\\"1000\\"
|
||||
height=\\"800\\"
|
||||
style=\\"display: inherit\\"
|
||||
></canvas
|
||||
><iframe
|
||||
sandbox=\\"allow-same-origin\\"
|
||||
scrolling=\\"no\\"
|
||||
width=\\"1000\\"
|
||||
height=\\"800\\"
|
||||
style=\\"display: inherit; pointer-events: none\\"
|
||||
></iframe>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
file-frame-2
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\">
|
||||
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-0\\">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
<head>
|
||||
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
|
||||
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-0\\" />
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
|
||||
|
||||
@@ -116,36 +122,43 @@ file-cid-3
|
||||
exports[`style-sheet-rule-events-play-at-1500 1`] = `
|
||||
"file-frame-4
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<div class=\\"replayer-wrapper\\">
|
||||
<div class=\\"replayer-mouse\\"></div>
|
||||
<canvas class=\\"replayer-mouse-tail\\" width=\\"1000\\" height=\\"800\\" style=
|
||||
\\"display: inherit;\\"></canvas><iframe sandbox=\\"allow-same-origin\\" scrolling=
|
||||
\\"no\\" width=\\"1000\\" height=\\"800\\" style=
|
||||
\\"display: inherit; pointer-events: none;\\"></iframe>
|
||||
</div>
|
||||
</body>
|
||||
<head>
|
||||
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
|
||||
</head>
|
||||
<body>
|
||||
<div class=\\"replayer-wrapper\\">
|
||||
<div class=\\"replayer-mouse\\"></div>
|
||||
<canvas
|
||||
class=\\"replayer-mouse-tail\\"
|
||||
width=\\"1000\\"
|
||||
height=\\"800\\"
|
||||
style=\\"display: inherit\\"
|
||||
></canvas
|
||||
><iframe
|
||||
sandbox=\\"allow-same-origin\\"
|
||||
scrolling=\\"no\\"
|
||||
width=\\"1000\\"
|
||||
height=\\"800\\"
|
||||
style=\\"display: inherit; pointer-events: none\\"
|
||||
></iframe>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
file-frame-5
|
||||
<!DOCTYPE html>
|
||||
<html lang=\\"en\\">
|
||||
<head>
|
||||
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\">
|
||||
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-0\\">
|
||||
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-1\\">
|
||||
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-2\\">
|
||||
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-3\\">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<a class=\\"css-added-at-1000-deleted-at-2500\\">string</a>
|
||||
</body>
|
||||
<head>
|
||||
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
|
||||
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-0\\" />
|
||||
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-1\\" />
|
||||
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-2\\" />
|
||||
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-3\\" />
|
||||
</head>
|
||||
<body>
|
||||
<a class=\\"css-added-at-1000-deleted-at-2500\\">string</a>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@@ -185,3 +198,81 @@ file-cid-3
|
||||
.css-lsxxx { padding-left: 4rem; }
|
||||
"
|
||||
`;
|
||||
|
||||
exports[`style-sheet-rule-events-play-at-2500 1`] = `
|
||||
"file-frame-4
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
|
||||
</head>
|
||||
<body>
|
||||
<div class=\\"replayer-wrapper\\">
|
||||
<div class=\\"replayer-mouse\\"></div>
|
||||
<canvas
|
||||
class=\\"replayer-mouse-tail\\"
|
||||
width=\\"1000\\"
|
||||
height=\\"800\\"
|
||||
style=\\"display: inherit\\"
|
||||
></canvas
|
||||
><iframe
|
||||
sandbox=\\"allow-same-origin\\"
|
||||
scrolling=\\"no\\"
|
||||
width=\\"1000\\"
|
||||
height=\\"800\\"
|
||||
style=\\"display: inherit; pointer-events: none\\"
|
||||
></iframe>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
file-frame-5
|
||||
<!DOCTYPE html>
|
||||
<html lang=\\"en\\">
|
||||
<head>
|
||||
<meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\" />
|
||||
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-0\\" />
|
||||
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-1\\" />
|
||||
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-2\\" />
|
||||
<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"file-cid-3\\" />
|
||||
</head>
|
||||
<body>
|
||||
<a class=\\"css-added-at-1000-deleted-at-2500\\">string</a>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
file-cid-0
|
||||
@charset \\"utf-8\\";
|
||||
|
||||
.rr-block { background: rgb(204, 204, 204); }
|
||||
|
||||
noscript { display: none !important; }
|
||||
|
||||
html.rrweb-paused * { animation-play-state: paused !important; }
|
||||
|
||||
|
||||
file-cid-1
|
||||
@charset \\"utf-8\\";
|
||||
|
||||
.c011xx { padding: 1.3125rem; flex: 0 0 auto; width: 100%; }
|
||||
|
||||
|
||||
file-cid-2
|
||||
@charset \\"utf-8\\";
|
||||
|
||||
.c01x { opacity: 1; transform: translateX(0px); }
|
||||
|
||||
.css-added-at-400 { border: 1px solid blue; }
|
||||
|
||||
|
||||
file-cid-3
|
||||
@charset \\"utf-8\\";
|
||||
|
||||
.css-1uxxxx3 { position: fixed; top: 0px; right: 0px; left: 4rem; z-index: 15; flex-shrink: 0; height: 0.25rem; overflow: hidden; background-color: rgb(17, 171, 209); }
|
||||
|
||||
.css-1c9xxxx { height: 0.25rem; background-color: rgb(190, 232, 242); opacity: 0; transition: opacity 0.5s ease 0s; }
|
||||
|
||||
.css-lsxxx { padding-left: 4rem; }
|
||||
"
|
||||
`;
|
||||
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
MouseInteractions,
|
||||
} from '../src/types';
|
||||
import * as puppeteer from 'puppeteer';
|
||||
import { TidyDoc } from 'node-libtidy';
|
||||
import { format } from 'prettier';
|
||||
|
||||
export async function launchPuppeteer() {
|
||||
return await puppeteer.launch({
|
||||
@@ -75,20 +75,24 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
|
||||
s.data.source === IncrementalSource.Mutation
|
||||
) {
|
||||
s.data.attributes.forEach((a) => {
|
||||
if ('style' in a.attributes && a.attributes.style && typeof a.attributes.style === 'object') {
|
||||
for (const [k, v] of Object.entries(a.attributes.style)) {
|
||||
if (Array.isArray(v)) {
|
||||
if (coordinatesReg.test(k + ': ' + v[0])) {
|
||||
// TODO: could round the number here instead depending on what's coming out of various test envs
|
||||
a.attributes.style[k] = ['Npx', v[1]];
|
||||
}
|
||||
} else if (typeof v === 'string') {
|
||||
if (coordinatesReg.test(k + ': ' + v)) {
|
||||
a.attributes.style[k] = 'Npx';
|
||||
}
|
||||
}
|
||||
coordinatesReg.lastIndex = 0; // wow, a real wart in ECMAScript
|
||||
}
|
||||
if (
|
||||
'style' in a.attributes &&
|
||||
a.attributes.style &&
|
||||
typeof a.attributes.style === 'object'
|
||||
) {
|
||||
for (const [k, v] of Object.entries(a.attributes.style)) {
|
||||
if (Array.isArray(v)) {
|
||||
if (coordinatesReg.test(k + ': ' + v[0])) {
|
||||
// TODO: could round the number here instead depending on what's coming out of various test envs
|
||||
a.attributes.style[k] = ['Npx', v[1]];
|
||||
}
|
||||
} else if (typeof v === 'string') {
|
||||
if (coordinatesReg.test(k + ': ' + v)) {
|
||||
a.attributes.style[k] = 'Npx';
|
||||
}
|
||||
}
|
||||
coordinatesReg.lastIndex = 0; // wow, a real wart in ECMAScript
|
||||
}
|
||||
}
|
||||
});
|
||||
s.data.adds.forEach((add) => {
|
||||
@@ -138,18 +142,9 @@ function stringifyDomSnapshot(mhtml: string): string {
|
||||
let { filename, content } = asset;
|
||||
let res: string | undefined;
|
||||
if (filename.includes('frame')) {
|
||||
const doc = TidyDoc();
|
||||
doc.options = {
|
||||
indent: 'auto',
|
||||
indent_spaces: 2,
|
||||
wrap: 80,
|
||||
markup: true,
|
||||
quote_marks: true,
|
||||
break_before_br: true,
|
||||
tidy_mark: false,
|
||||
};
|
||||
doc.parseBufferSync(Buffer.from(content));
|
||||
res = doc.saveBufferSync().toString();
|
||||
res = format(content, {
|
||||
parser: 'html',
|
||||
});
|
||||
}
|
||||
return { filename, content: res || content };
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user